Make "Show older messages" style consistent with other buttons

Also store the loading text in a `data` attribute instead of duplicate in template + JS, in order to help with future internationalization

client/css/style.css

@@ -440,14 +440,13 @@ kbd {
 	position: relative;
 }
 
-#chat button,
 #form button,
-#chat .user {
+#chat .header button {
 	transition: opacity 0.2s;
 }
 
-#chat button:hover,
+#form button:hover,
-#form button:hover {
+#chat .header button:hover {
 	opacity: 0.6;
 }
 
@@ -1029,25 +1028,14 @@ kbd {
 #chat .show-more {
 	display: none;
 	padding: 10px;
+	padding-top: 15px;
 	padding-bottom: 0;
 	width: 100%;
 }
 
-#chat .show-more-button {
+#chat .show-more .btn {
-	background: #f4f4f4;
-	background-image: linear-gradient(#f4f4f4, #ececec);
-	border: 1px solid #d7d7d7;
-	border-bottom-color: #b7b7b7;
-	border-radius: 2px;
-	color: #555;
-	font-size: 12px;
-	height: 34px;
-	line-height: 0;
 	width: 100%;
-}
+	margin: 0;
-
-#chat .show-more-button:hover {
-	opacity: 1;
 }
 
 #chat .messages {
@@ -1123,14 +1111,6 @@ kbd {
 	padding: 0 10px;
 }
 
-.inline-channel {
-	cursor: pointer;
-}
-
-.inline-channel:hover {
-	opacity: 0.6;
-}
-
 #chat .time,
 #chat .from,
 #chat .content {
@@ -1181,17 +1161,25 @@ kbd {
 	word-break: normal;
 }
 
+/* Parsed nicks and channels */
+
+.chat .user,
+.inline-channel {
+	cursor: pointer;
+	transition: opacity 0.2s;
+}
+
+.chat .user:hover,
+.inline-channel:hover {
+	opacity: 0.6;
+}
+
 /* Nicknames */
 
 #chat .user {
-	cursor: pointer;
 	color: #50a656;
 }
 
-.chat .user:hover {
-	opacity: 0.6;
-}
-
 #chat.colored-nicks .user.color-1 { color: #107ead; }
 #chat.colored-nicks .user.color-2 { color: #a86500; }
 #chat.colored-nicks .user.color-3 { color: #008a3c; }

client/js/render.js

@@ -302,7 +302,7 @@ function loadMoreHistory(entries) {
 			return;
 		}
 
-		const target = $(entry.target).find(".show-more-button");
+		const target = $(entry.target).find("button");
 
 		if (target.prop("disabled")) {
 			return;

client/js/socket-events/init.js

@@ -32,7 +32,7 @@ socket.on("init", function(data) {
 	}
 
 	$("#connection-error").removeClass("shown");
-	$(".show-more-button, #input").prop("disabled", false);
+	$(".show-more button, #input").prop("disabled", false);
 	$("#submit").show();
 
 	if (lastMessageId < 0) {

client/js/socket-events/more.js

@@ -89,12 +89,13 @@ socket.on("more", function(data) {
 		scrollable.find(".show-more").removeClass("show");
 	}
 
-	scrollable.find(".show-more-button")
+	// Swap button text back from its alternative label
-		.text("Show older messages")
+	const showMoreBtn = scrollable.find(".show-more button");
-		.prop("disabled", false);
+	swapText(showMoreBtn);
+	showMoreBtn.prop("disabled", false);
 });
 
-chat.on("click", ".show-more-button", function() {
+chat.on("click", ".show-more button", function() {
 	const self = $(this);
 	const lastMessage = self.closest(".chat").find(".msg:not(.condensed)").first();
 	let lastMessageId = -1;
@@ -103,12 +104,18 @@ chat.on("click", ".show-more-button", function() {
 		lastMessageId = parseInt(lastMessage.prop("id").replace("msg-", ""), 10);
 	}
 
-	self
+	// Swap button text with its alternative label
-		.text("Loading older messages…")
+	swapText(self);
-		.prop("disabled", true);
+	self.prop("disabled", true);
 
 	socket.emit("more", {
 		target: self.data("id"),
 		lastId: lastMessageId,
 	});
 });
+
+// Given a button, swap its text with the content of `data-alt-text`
+function swapText(btn) {
+	const altText = btn.data("alt-text");
+	btn.data("alt-text", btn.text()).text(altText);
+}

client/js/socket.js

@@ -40,7 +40,7 @@ function handleDisconnect(data) {
 	const message = data.message || data;
 
 	$("#loading-page-message, #connection-error").text(`Waiting to reconnect… (${message})`).addClass("shown");
-	$(".show-more-button, #input").prop("disabled", true);
+	$(".show-more button, #input").prop("disabled", true);
 	$("#submit").hide();
 
 	// If the server shuts down, socket.io skips reconnection

client/themes/morning.css

@@ -111,17 +111,6 @@ body {
 	opacity: 1;
 }
 
-/* Buttons */
-#chat .show-more-button {
-	background: #2e3642;
-	border-color: #242a33;
-	color: #ccc;
-}
-
-#chat .show-more-button:hover {
-	color: #fff;
-}
-
 #chat .header {
 	color: #99a2b4;
 }

client/views/chat.tpl

@@ -21,7 +21,7 @@
 	<div class="chat-content">
 		<div class="chat">
 			<div class="show-more{{#if messages.length}} show{{/if}}">
-				<button class="show-more-button" data-id="{{id}}">Show older messages</button>
+				<button class="btn" data-id="{{id}}" data-alt-text="Loading…">Show older messages</button>
 			</div>
 			<div class="messages" role="log" aria-live="polite" aria-relevant="additions"></div>
 		</div>