From 49652fc40a415a211ff2fc571d014a03cea8c98b Mon Sep 17 00:00:00 2001
From: ollipa <25169984+ollipa@users.noreply.github.com>
Date: Sat, 3 Aug 2019 13:09:55 +0300
Subject: [PATCH 1/2] make channel topic editable from user interface

---
 client/components/Chat.vue      | 31 ++++++++++++++++++++++++++++++-
 client/css/style.css            | 13 +++++++++++++
 client/js/contextMenuFactory.js | 22 +++++++++++++++++++++-
 client/js/vue.js                |  1 +
 4 files changed, 65 insertions(+), 2 deletions(-)

diff --git a/client/components/Chat.vue b/client/components/Chat.vue
index f80ae191..5d9411c8 100644
--- a/client/components/Chat.vue
+++ b/client/components/Chat.vue
@@ -20,7 +20,16 @@
 				<div class="header">
 					<button class="lt" aria-label="Toggle channel list" />
 					<span class="title">{{ channel.name }}</span>
-					<span :title="channel.topic" class="topic"
+					<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"
+					/>
+					<span v-else :title="channel.topic" class="topic" @dblclick="editTopic"
 						><ParsedMessage
 							v-if="channel.topic"
 							:network="network"
@@ -77,6 +86,7 @@
 </template>
 
 <script>
+const socket = require("../js/socket");
 import ParsedMessage from "./ParsedMessage.vue";
 import MessageList from "./MessageList.vue";
 import ChatInput from "./ChatInput.vue";
@@ -118,6 +128,25 @@ export default {
 		hideUserVisibleError() {
 			this.$root.currentUserVisibleError = null;
 		},
+		editTopic() {
+			if (this.channel.type === "channel") {
+				this.channel.editTopic = true;
+
+				this.$nextTick(() => {
+					document.querySelector(`#chan-${this.channel.id} .topic-edit`).focus();
+				});
+			}
+		},
+		saveTopic(event) {
+			this.channel.editTopic = false;
+			const newTopic = event.target.value;
+
+			if (this.channel.topic !== newTopic) {
+				const target = this.channel.id;
+				const text = `/raw TOPIC ${this.channel.name} :${newTopic}`;
+				socket.emit("input", {target, text});
+			}
+		},
 	},
 };
 </script>
diff --git a/client/css/style.css b/client/css/style.css
index 4e7803d2..9e392726 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -978,6 +978,19 @@ background on hover (unless active) */
 	font-size: 14px;
 }
 
+#windows .header .topic-edit {
+	color: inherit;
+	background: transparent;
+	border: 1px solid #cdd3da;
+	border-radius: 2px;
+	margin: 2px 0 2px 8px;
+	padding: 0 10px;
+	flex-grow: 1;
+	overflow: hidden;
+	font-size: 14px;
+	outline: none;
+}
+
 #chat {
 	overflow: hidden;
 	flex: 1 0 auto;
diff --git a/client/js/contextMenuFactory.js b/client/js/contextMenuFactory.js
index 62dc47af..9c661dac 100644
--- a/client/js/contextMenuFactory.js
+++ b/client/js/contextMenuFactory.js
@@ -6,7 +6,7 @@ const utils = require("./utils");
 const ContextMenu = require("./contextMenu");
 const contextMenuActions = [];
 const contextMenuItems = [];
-const {findChannel} = require("./vue");
+const {vueApp, findChannel} = require("./vue");
 
 module.exports = {
 	addContextMenuItem,
@@ -316,6 +316,25 @@ function addChannelListItem() {
 	});
 }
 
+function addEditTopicItem() {
+	function setEditTopic(itemData) {
+		findChannel(Number(itemData)).channel.editTopic = true;
+		document.querySelector(`#sidebar .chan[data-id="${Number(itemData)}"]`).click();
+
+		vueApp.$nextTick(() => {
+			document.querySelector(`#chan-${Number(itemData)} .topic-edit`).focus();
+		});
+	}
+
+	addContextMenuItem({
+		check: (target) => target.hasClass("channel"),
+		className: "edit",
+		displayName: "Edit topic",
+		data: (target) => target.attr("data-id"),
+		callback: setEditTopic,
+	});
+}
+
 function addBanListItem() {
 	function banlist(itemData) {
 		socket.emit("input", {
@@ -376,6 +395,7 @@ function addDefaultItems() {
 	addEditNetworkItem();
 	addJoinItem();
 	addChannelListItem();
+	addEditTopicItem();
 	addBanListItem();
 	addIgnoreListItem();
 	addConnectItem();
diff --git a/client/js/vue.js b/client/js/vue.js
index 10c082ee..fea5d622 100644
--- a/client/js/vue.js
+++ b/client/js/vue.js
@@ -76,6 +76,7 @@ function initChannel(channel) {
 	channel.inputHistory = [""];
 	channel.historyLoading = false;
 	channel.scrolledToBottom = true;
+	channel.editTopic = false;
 
 	if (channel.type === "channel") {
 		channel.usersOutdated = true;

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 2/2] 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();
 		});
 	}