From 81d6ac955df0d074d8683f1bb19914b4d187aaeb Mon Sep 17 00:00:00 2001
From: Richard Lewis <richrd.lewis@gmail.com>
Date: Sun, 5 Jan 2020 19:32:17 +0000
Subject: [PATCH] Formatting palette prototype.

---
 client/components/ChatInput.vue | 83 +++++++++++++++++++++++++++++++++
 client/css/style.css            | 51 +++++++++++++++++---
 2 files changed, 128 insertions(+), 6 deletions(-)

diff --git a/client/components/ChatInput.vue b/client/components/ChatInput.vue
index 63732206..95f9af6d 100644
--- a/client/components/ChatInput.vue
+++ b/client/components/ChatInput.vue
@@ -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;
 		},
 	},
 };
diff --git a/client/css/style.css b/client/css/style.css
index 7d0e13a8..a3c5ad73 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -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;
+}