mirror of
https://github.com/thelounge/thelounge.git
synced 2024-04-26 20:07:11 +02:00
Formatting palette prototype.
This commit is contained in:
Richard Lewis
parent
0b38a88147
commit
81d6ac955d
|
|
@ -1,5 +1,45 @@
|
|||
<template>
|
||||
<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="nick">{{ network.nick }}</span>
|
||||
<textarea
|
||||
|
|
@ -13,6 +53,19 @@
|
|||
@input="setPendingMessage"
|
||||
@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
|
||||
v-if="$store.state.serverConfiguration.fileUpload"
|
||||
id="upload-tooltip"
|
||||
|
|
@ -30,6 +83,7 @@
|
|||
<button
|
||||
id="upload"
|
||||
type="button"
|
||||
class="chat-input-button"
|
||||
aria-label="Upload file"
|
||||
:disabled="!$store.state.isConnected"
|
||||
/>
|
||||
|
|
@ -42,6 +96,7 @@
|
|||
<button
|
||||
id="submit"
|
||||
type="submit"
|
||||
class="chat-input-button"
|
||||
aria-label="Send message"
|
||||
:disabled="!$store.state.isConnected"
|
||||
/>
|
||||
|
|
@ -90,11 +145,18 @@ export default {
|
|||
network: Object,
|
||||
channel: Object,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showToolbar: false,
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
"channel.id"() {
|
||||
if (autocompletionRef) {
|
||||
autocompletionRef.hide();
|
||||
}
|
||||
|
||||
this.showToolbar = false;
|
||||
},
|
||||
"channel.pendingMessage"() {
|
||||
this.setInputSize();
|
||||
|
|
@ -226,6 +288,7 @@ export default {
|
|||
this.channel.pendingMessage = "";
|
||||
this.$refs.input.value = "";
|
||||
this.setInputSize();
|
||||
this.closeToolbar();
|
||||
|
||||
// Store new message in history if last message isn't already equal
|
||||
if (this.channel.inputHistory[1] !== text) {
|
||||
|
|
@ -261,6 +324,26 @@ export default {
|
|||
},
|
||||
blurInput() {
|
||||
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 .rt::before,
|
||||
#chat button.menu::before,
|
||||
.toolbar button.format::before,
|
||||
.channel-list-item::before,
|
||||
#footer .icon,
|
||||
#chat .count::before,
|
||||
#settings .extra-help,
|
||||
#settings #play::before,
|
||||
#form #upload::before,
|
||||
#form #submit::before,
|
||||
#form .chat-input-button::before,
|
||||
#chat .msg[data-type="away"] .from::before,
|
||||
#chat .msg[data-type="back"] .from::before,
|
||||
#chat .msg[data-type="invite"] .from::before,
|
||||
|
|
@ -333,6 +333,14 @@ p {
|
|||
-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 .rt::before { content: "\f0c0"; /* https://fontawesome.com/icons/users?style=solid */ }
|
||||
#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;
|
||||
}
|
||||
|
||||
#form #upload,
|
||||
#form #submit {
|
||||
#form .chat-input-button {
|
||||
color: #607992;
|
||||
font-size: 14px;
|
||||
height: 32px;
|
||||
|
|
@ -2176,8 +2183,7 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
|
|||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
#form #upload[disabled],
|
||||
#form #submit[disabled] {
|
||||
#form .chat-input-button[disabled] {
|
||||
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 {
|
||||
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