From e69e448396504171623722601d829c6cbf1b2643 Mon Sep 17 00:00:00 2001
From: ollipa <25169984+ollipa@users.noreply.github.com>
Date: Sun, 11 Aug 2019 16:59:06 +0300
Subject: [PATCH] add save button to edit topic input field

---
 client/components/Chat.vue      | 27 ++++++++++++----------
 client/css/style.css            | 41 +++++++++++++++++++++++++++++----
 client/js/contextMenuFactory.js |  2 +-
 3 files changed, 53 insertions(+), 17 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index 5d9411c8..e6d9c9d9 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -20,15 +20,18 @@
 				<div class="header">
 					<button class="lt" aria-label="Toggle channel list" />
 					<span class="title">{{ channel.name }}</span>
-					<input
-						v-if="channel.editTopic === true"
-						:value="channel.topic"
-						class="topic-edit"
-						placeholder="Set channel topic"
-						@keyup.enter="saveTopic"
-						@keyup.esc="channel.editTopic = false"
-						@blur="channel.editTopic = false"
-					/>
+					<div v-if="channel.editTopic === true" class="topic-container">
+						<input
+							:value="channel.topic"
+							class="topic-input"
+							placeholder="Set channel topic"
+							@keyup.enter="saveTopic"
+							@keyup.esc="channel.editTopic = false"
+						/>
+						<span aria-label="Save topic" class="save-topic" @click="saveTopic">
+							<span type="button" aria-label="Save topic"></span>
+						</span>
+					</div>
 					<span v-else :title="channel.topic" class="topic" @dblclick="editTopic"
 						><ParsedMessage
 							v-if="channel.topic"
@@ -133,13 +136,13 @@ export default {
 				this.channel.editTopic = true;
 
 				this.$nextTick(() => {
-					document.querySelector(`#chan-${this.channel.id} .topic-edit`).focus();
+					document.querySelector(`#chan-${this.channel.id} .topic-input`).focus();
 				});
 			}
 		},
-		saveTopic(event) {
+		saveTopic() {
 			this.channel.editTopic = false;
-			const newTopic = event.target.value;
+			const newTopic = document.querySelector(`#chan-${this.channel.id} .topic-input`).value;
 
 			if (this.channel.topic !== newTopic) {
 				const target = this.channel.id;
diff --git a/client/css/style.css b/client/css/style.css
index 9e392726..5f6c4754 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -277,6 +277,7 @@ kbd {
 #chat .toggle-button::after,
 #chat .toggle-content .more-caret::before,
 #chat .scroll-down-arrow::after,
+#chat .topic-container .save-topic span::before,
 #version-checker::before,
 .context-menu-item::before,
 #help .website-link::before,
@@ -969,6 +970,12 @@ background on hover (unless active) */
 	flex-shrink: 0;
 }
 
+.topic-container {
+	position: relative;
+	flex-grow: 1;
+	padding-left: 10px;
+}
+
 #windows .header .topic {
 	color: var(--body-color-muted);
 	margin-left: 8px;
@@ -978,19 +985,41 @@ background on hover (unless active) */
 	font-size: 14px;
 }
 
-#windows .header .topic-edit {
+#windows .header .topic-input {
 	color: inherit;
 	background: transparent;
 	border: 1px solid #cdd3da;
 	border-radius: 2px;
-	margin: 2px 0 2px 8px;
-	padding: 0 10px;
-	flex-grow: 1;
+	padding-right: 37px;
+	padding-left: 10px;
+	width: 100%;
+	height: 35px;
 	overflow: hidden;
 	font-size: 14px;
 	outline: none;
 }
 
+.topic-container .save-topic {
+	position: absolute;
+	top: 6px;
+	right: 0;
+}
+
+.topic-container .save-topic span {
+	font-size: 16px;
+	color: #607992;
+	width: 35px;
+	height: 35px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	cursor: pointer;
+}
+
+.topic-container .save-topic span:hover {
+	opacity: 0.6;
+}
+
 #chat {
 	overflow: hidden;
 	flex: 1 0 auto;
@@ -1842,6 +1871,10 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 	content: "\f06e"; /* https://fontawesome.com/icons/eye?style=solid */
 }
 
+.topic-container .save-topic span::before {
+	content: "\f00c"; /* https://fontawesome.com/icons/check?style=solid */
+}
+
 .password-container .reveal-password.visible span::before {
 	content: "\f070"; /* https://fontawesome.com/icons/eye-slash?style=solid */
 	color: #ff4136;
diff --git a/client/js/contextMenuFactory.js b/client/js/contextMenuFactory.js
index 9c661dac..0b6d43be 100644
--- a/client/js/contextMenuFactory.js
+++ b/client/js/contextMenuFactory.js
@@ -322,7 +322,7 @@ function addEditTopicItem() {
 		document.querySelector(`#sidebar .chan[data-id="${Number(itemData)}"]`).click();
 
 		vueApp.$nextTick(() => {
-			document.querySelector(`#chan-${Number(itemData)} .topic-edit`).focus();
+			document.querySelector(`#chan-${Number(itemData)} .topic-input`).focus();
 		});
 	}