From 42717e3dec28537c48c83a22fb6a44b7d9c3df3e Mon Sep 17 00:00:00 2001
From: Pavel Djundik <xPaw@users.noreply.github.com>
Date: Wed, 26 Sep 2018 11:32:38 +0300
Subject: [PATCH] Enable `preserveWhitespace: false`, add spaces where needed,
 fix whitespace when copying text

---
 client/components/Message.vue            | 23 ++++++++++++++++++-----
 client/components/MessageTypes/ctcp.vue  |  2 +-
 client/components/MessageTypes/join.vue  |  2 +-
 client/components/MessageTypes/kick.vue  |  2 +-
 client/components/MessageTypes/part.vue  |  4 +---
 client/components/MessageTypes/quit.vue  |  4 +---
 client/components/MessageTypes/topic.vue |  9 ++-------
 client/css/style.css                     |  6 ++++++
 client/js/clipboard.js                   |  9 ---------
 webpack.config.js                        |  5 +++++
 10 files changed, 36 insertions(+), 30 deletions(-)

diff --git a/client/components/Message.vue b/client/components/Message.vue
index c3837bb1..00c947cf 100644
--- a/client/components/Message.vue
+++ b/client/components/Message.vue
@@ -5,7 +5,7 @@
 		:data-from="message.from && message.from.nick">
 		<span
 			:aria-label="message.time | localetime"
-			class="time tooltipped tooltipped-e">{{ messageTime }}</span>
+			class="time tooltipped tooltipped-e">{{ messageTime }} </span>
 		<template v-if="message.type === 'unhandled'">
 			<span class="from">[{{ message.command }}]</span>
 			<span class="content">
@@ -15,16 +15,16 @@
 			</span>
 		</template>
 		<template v-else-if="isAction()">
-			<span class="from" />
+			<span class="from"><span class="only-copy">*** </span></span>
 			<component
 				:is="messageComponent"
 				:network="network"
 				:message="message" />
 		</template>
 		<template v-else-if="message.type === 'action'">
-			<span class="from" />
+			<span class="from"><span class="only-copy">* </span></span>
 			<span class="content">
-				<span class="only-copy">* </span><Username :user="message.from" /> <ParsedMessage
+				<Username :user="message.from" />&#32;<ParsedMessage
 					:network="network"
 					:message="message" />
 				<LinkPreview
@@ -35,9 +35,22 @@
 			</span>
 		</template>
 		<template v-else>
-			<span class="from">
+			<span
+				v-if="message.type === 'message'"
+				class="from">
 				<template v-if="message.from && message.from.nick">
+					<span class="only-copy">&lt;</span>
 					<Username :user="message.from" />
+					<span class="only-copy">&gt; </span>
+				</template>
+			</span>
+			<span
+				v-else
+				class="from">
+				<template v-if="message.from && message.from.nick">
+					<span class="only-copy">-</span>
+					<Username :user="message.from" />
+					<span class="only-copy">- </span>
 				</template>
 			</span>
 			<span class="content">
diff --git a/client/components/MessageTypes/ctcp.vue b/client/components/MessageTypes/ctcp.vue
index c8d6c8fa..4e9cc53c 100644
--- a/client/components/MessageTypes/ctcp.vue
+++ b/client/components/MessageTypes/ctcp.vue
@@ -1,6 +1,6 @@
 <template>
 	<span class="content">
-		<Username :user="message.from" />
+		<Username :user="message.from" />&#32;
 		<span class="ctcp-message"><ParsedMessage :text="message.ctcpMessage" /></span>
 	</span>
 </template>
diff --git a/client/components/MessageTypes/join.vue b/client/components/MessageTypes/join.vue
index da16fdbf..2bc59119 100644
--- a/client/components/MessageTypes/join.vue
+++ b/client/components/MessageTypes/join.vue
@@ -1,7 +1,7 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask">({{ message.hostmask }})</i>
+		<i class="hostmask"> ({{ message.hostmask }})</i>
 		has joined the channel
 	</span>
 </template>
diff --git a/client/components/MessageTypes/kick.vue b/client/components/MessageTypes/kick.vue
index 38423e8d..cb1403b7 100644
--- a/client/components/MessageTypes/kick.vue
+++ b/client/components/MessageTypes/kick.vue
@@ -5,7 +5,7 @@
 		<Username :user="message.target" />
 		<i
 			v-if="message.text"
-			class="part-reason">(<ParsedMessage
+			class="part-reason"> (<ParsedMessage
 				:network="network"
 				:message="message" />)</i>
 	</span>
diff --git a/client/components/MessageTypes/part.vue b/client/components/MessageTypes/part.vue
index ef454525..989a8a7a 100644
--- a/client/components/MessageTypes/part.vue
+++ b/client/components/MessageTypes/part.vue
@@ -1,9 +1,7 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask">({{ message.hostmask }})</i>
-		has left the channel
-		<i
+		<i class="hostmask"> ({{ message.hostmask }})</i> has left the channel <i
 			v-if="message.text"
 			class="part-reason">(<ParsedMessage
 				:network="network"
diff --git a/client/components/MessageTypes/quit.vue b/client/components/MessageTypes/quit.vue
index c01dee87..41e2f1d8 100644
--- a/client/components/MessageTypes/quit.vue
+++ b/client/components/MessageTypes/quit.vue
@@ -1,9 +1,7 @@
 <template>
 	<span class="content">
 		<Username :user="message.from" />
-		<i class="hostmask">({{ message.hostmask }})</i>
-		has quit
-		<i
+		<i class="hostmask"> ({{ message.hostmask }})</i> has quit <i
 			v-if="message.text"
 			class="quit-reason">(<ParsedMessage
 				:network="network"
diff --git a/client/components/MessageTypes/topic.vue b/client/components/MessageTypes/topic.vue
index e9e9fa9c..485c6065 100644
--- a/client/components/MessageTypes/topic.vue
+++ b/client/components/MessageTypes/topic.vue
@@ -1,12 +1,7 @@
 <template>
 	<span class="content">
-		<template v-if="message.from && message.from.nick">
-			<Username :user="message.from" />
-			has changed the topic to:
-		</template>
-		<template v-else>
-			The topic is:
-		</template>
+		<template v-if="message.from && message.from.nick"><Username :user="message.from" /> has changed the topic to: </template>
+		<template v-else>The topic is: </template>
 		<span
 			v-if="message.text"
 			class="new-topic"><ParsedMessage
diff --git a/client/css/style.css b/client/css/style.css
index 11b4a7af..3f023ab4 100644
--- a/client/css/style.css
+++ b/client/css/style.css
@@ -2498,6 +2498,12 @@ part/quit messages where we don't load previews (adds a blank line otherwise) */
 		padding: 0;
 	}
 
+	#chat .from::after {
+		/* Add a space because mobile view changes to block display without paddings */
+		content: " ";
+		white-space: pre;
+	}
+
 	#chat .channel .msg.highlight {
 		padding-left: 5px;
 	}
diff --git a/client/js/clipboard.js b/client/js/clipboard.js
index 4e17887d..da33b646 100644
--- a/client/js/clipboard.js
+++ b/client/js/clipboard.js
@@ -1,7 +1,5 @@
 "use strict";
 
-const $ = require("jquery");
-
 module.exports = function(chat) {
 	const selection = window.getSelection();
 
@@ -14,13 +12,6 @@ module.exports = function(chat) {
 	const documentFragment = range.cloneContents();
 	const div = document.createElement("div");
 
-	$(documentFragment)
-		.find(".from .user")
-		.each((_, el) => {
-			el = $(el);
-			el.text(`<${el.text()}>`);
-		});
-
 	div.id = "js-copy-hack";
 	div.appendChild(documentFragment);
 	chat.appendChild(div);
diff --git a/webpack.config.js b/webpack.config.js
index 0fc64874..b168c280 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -24,6 +24,11 @@ const config = {
 				test: /\.vue$/,
 				use: {
 					loader: "vue-loader",
+					options: {
+						compilerOptions: {
+							preserveWhitespace: false,
+						},
+					},
 				},
 			},
 			{