mirror of
https://github.com/thelounge/thelounge.git
synced 2024-05-08 09:16:45 +02:00
Formatting palette prototype.
This commit is contained in:
parent
0b38a88147
commit
81d6ac955d
|
@ -1,5 +1,45 @@
|
||||||
<template>
|
<template>
|
||||||
<form id="form" method="post" action="" @submit.prevent="onSubmit">
|
<form id="form" method="post" action="" @submit.prevent="onSubmit">
|
||||||
|
<div class="toolbar-container" :class="{opened: showToolbar}">
|
||||||
|
<div class="toolbar">
|
||||||
|
<button
|
||||||
|
class="format format-b"
|
||||||
|
type="button"
|
||||||
|
aria-label="Bold"
|
||||||
|
@click="applyFormatting('mod+b')"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
class="format format-u"
|
||||||
|
type="button"
|
||||||
|
aria-label="Underline"
|
||||||
|
@click="applyFormatting('mod+u')"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
class="format format-i"
|
||||||
|
type="button"
|
||||||
|
aria-label="Italic"
|
||||||
|
@click="applyFormatting('mod+i')"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
class="format format-s"
|
||||||
|
type="button"
|
||||||
|
aria-label="Strikethrough"
|
||||||
|
@click="applyFormatting('mod+s')"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
class="format format-m"
|
||||||
|
type="button"
|
||||||
|
aria-label="Monospace"
|
||||||
|
@click="applyFormatting('mod+m')"
|
||||||
|
></button>
|
||||||
|
<button
|
||||||
|
class="format format-o"
|
||||||
|
type="button"
|
||||||
|
aria-label="Clear formatting"
|
||||||
|
@click="applyFormatting('mod+o')"
|
||||||
|
></button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<span id="upload-progressbar" />
|
<span id="upload-progressbar" />
|
||||||
<span id="nick">{{ network.nick }}</span>
|
<span id="nick">{{ network.nick }}</span>
|
||||||
<textarea
|
<textarea
|
||||||
|
@ -13,6 +53,19 @@
|
||||||
@input="setPendingMessage"
|
@input="setPendingMessage"
|
||||||
@keypress.enter.exact.prevent="onSubmit"
|
@keypress.enter.exact.prevent="onSubmit"
|
||||||
/>
|
/>
|
||||||
|
<span
|
||||||
|
id="format-tooltip"
|
||||||
|
class="tooltipped tooltipped-w tooltipped-no-touch"
|
||||||
|
aria-label="Text formatting"
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
id="format"
|
||||||
|
type="button"
|
||||||
|
class="chat-input-button"
|
||||||
|
aria-label="Text formatting"
|
||||||
|
@click="toggleToolbar"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
<span
|
<span
|
||||||
v-if="$store.state.serverConfiguration.fileUpload"
|
v-if="$store.state.serverConfiguration.fileUpload"
|
||||||
id="upload-tooltip"
|
id="upload-tooltip"
|
||||||
|
@ -30,6 +83,7 @@
|
||||||
<button
|
<button
|
||||||
id="upload"
|
id="upload"
|
||||||
type="button"
|
type="button"
|
||||||
|
class="chat-input-button"
|
||||||
aria-label="Upload file"
|
aria-label="Upload file"
|
||||||
:disabled="!$store.state.isConnected"
|
:disabled="!$store.state.isConnected"
|
||||||
/>
|
/>
|
||||||
|
@ -42,6 +96,7 @@
|
||||||
<button
|
<button
|
||||||
id="submit"
|
id="submit"
|
||||||
type="submit"
|
type="submit"
|
||||||
|
class="chat-input-button"
|
||||||
aria-label="Send message"
|
aria-label="Send message"
|
||||||
:disabled="!$store.state.isConnected"
|
:disabled="!$store.state.isConnected"
|
||||||
/>
|
/>
|
||||||
|
@ -90,11 +145,18 @@ export default {
|
||||||
network: Object,
|
network: Object,
|
||||||
channel: Object,
|
channel: Object,
|
||||||
},
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
showToolbar: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
watch: {
|
watch: {
|
||||||
"channel.id"() {
|
"channel.id"() {
|
||||||
if (autocompletionRef) {
|
if (autocompletionRef) {
|
||||||
autocompletionRef.hide();
|
autocompletionRef.hide();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
this.showToolbar = false;
|
||||||
},
|
},
|
||||||
"channel.pendingMessage"() {
|
"channel.pendingMessage"() {
|
||||||
this.setInputSize();
|
this.setInputSize();
|
||||||
|
@ -226,6 +288,7 @@ export default {
|
||||||
this.channel.pendingMessage = "";
|
this.channel.pendingMessage = "";
|
||||||
this.$refs.input.value = "";
|
this.$refs.input.value = "";
|
||||||
this.setInputSize();
|
this.setInputSize();
|
||||||
|
this.closeToolbar();
|
||||||
|
|
||||||
// Store new message in history if last message isn't already equal
|
// Store new message in history if last message isn't already equal
|
||||||
if (this.channel.inputHistory[1] !== text) {
|
if (this.channel.inputHistory[1] !== text) {
|
||||||
|
@ -261,6 +324,26 @@ export default {
|
||||||
},
|
},
|
||||||
blurInput() {
|
blurInput() {
|
||||||
this.$refs.input.blur();
|
this.$refs.input.blur();
|
||||||
|
},
|
||||||
|
closeToolbar() {
|
||||||
|
this.showToolbar = false;
|
||||||
|
},
|
||||||
|
toggleToolbar() {
|
||||||
|
this.showToolbar = !this.showToolbar;
|
||||||
|
this.$refs.input.focus();
|
||||||
|
},
|
||||||
|
applyFormatting(key) {
|
||||||
|
const modifier = formattingHotkeys[key];
|
||||||
|
|
||||||
|
wrapCursor(
|
||||||
|
this.$refs.input,
|
||||||
|
modifier,
|
||||||
|
this.$refs.input.selectionStart === this.$refs.input.selectionEnd ? "" : modifier
|
||||||
|
);
|
||||||
|
|
||||||
|
this.closeToolbar();
|
||||||
|
this.$refs.input.focus();
|
||||||
|
return false;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -284,13 +284,13 @@ p {
|
||||||
#viewport .lt::before,
|
#viewport .lt::before,
|
||||||
#viewport .rt::before,
|
#viewport .rt::before,
|
||||||
#chat button.menu::before,
|
#chat button.menu::before,
|
||||||
|
.toolbar button.format::before,
|
||||||
.channel-list-item::before,
|
.channel-list-item::before,
|
||||||
#footer .icon,
|
#footer .icon,
|
||||||
#chat .count::before,
|
#chat .count::before,
|
||||||
#settings .extra-help,
|
#settings .extra-help,
|
||||||
#settings #play::before,
|
#settings #play::before,
|
||||||
#form #upload::before,
|
#form .chat-input-button::before,
|
||||||
#form #submit::before,
|
|
||||||
#chat .msg[data-type="away"] .from::before,
|
#chat .msg[data-type="away"] .from::before,
|
||||||
#chat .msg[data-type="back"] .from::before,
|
#chat .msg[data-type="back"] .from::before,
|
||||||
#chat .msg[data-type="invite"] .from::before,
|
#chat .msg[data-type="invite"] .from::before,
|
||||||
|
@ -333,6 +333,14 @@ p {
|
||||||
-moz-osx-font-smoothing: grayscale;
|
-moz-osx-font-smoothing: grayscale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.toolbar button.format-b::before { content: "\f032"; /* http://fontawesome.io/icon/bold/ */ }
|
||||||
|
.toolbar button.format-u::before { content: "\f0cd"; /* http://fontawesome.io/icon/underline/ */ }
|
||||||
|
.toolbar button.format-i::before { content: "\f033"; /* http://fontawesome.io/icon/italic/ */ }
|
||||||
|
.toolbar button.format-s::before { content: "\f0cc"; /* http://fontawesome.io/icon/strikethrough/ */ }
|
||||||
|
.toolbar button.format-m::before { content: "\f121"; /* http://fontawesome.io/icon/code/ */ }
|
||||||
|
.toolbar button.format-o::before { content: "\f87d"; /* http://fontawesome.io/icon/remove-format/ */ }
|
||||||
|
#form #format::before { content: "\f031"; /* https://fontawesome.io/icons/font/ */ }
|
||||||
|
|
||||||
#viewport .lt::before { content: "\f0c9"; /* http://fontawesome.io/icon/bars/ */ }
|
#viewport .lt::before { content: "\f0c9"; /* http://fontawesome.io/icon/bars/ */ }
|
||||||
#viewport .rt::before { content: "\f0c0"; /* https://fontawesome.com/icons/users?style=solid */ }
|
#viewport .rt::before { content: "\f0c0"; /* https://fontawesome.com/icons/users?style=solid */ }
|
||||||
#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
|
#chat button.menu::before { content: "\f142"; /* http://fontawesome.io/icon/ellipsis-v/ */ }
|
||||||
|
@ -2167,8 +2175,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
#form #upload,
|
#form .chat-input-button {
|
||||||
#form #submit {
|
|
||||||
color: #607992;
|
color: #607992;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
@ -2176,8 +2183,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
#form #upload[disabled],
|
#form .chat-input-button[disabled] {
|
||||||
#form #submit[disabled] {
|
|
||||||
opacity: 0.5;
|
opacity: 0.5;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -2829,3 +2835,36 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
||||||
#chat table.channel-list .topic {
|
#chat table.channel-list .topic {
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#form .toolbar-container {
|
||||||
|
position: absolute;
|
||||||
|
top: -70px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
pointer-events: none;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#form .toolbar-container.opened {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
#form .toolbar-container .toolbar {
|
||||||
|
display: flex;
|
||||||
|
background: var(--body-bg-color);
|
||||||
|
color: var(--button-color);
|
||||||
|
padding: 0 6px;
|
||||||
|
border-radius: 5px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
#form .toolbar-container.opened .toolbar {
|
||||||
|
pointer-events: all;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#form .toolbar-container .toolbar button {
|
||||||
|
padding: 10px 14px;
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in a new issue