From 1762db8bd476069dd8ad5423af24e7f595026647 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sat, 14 Apr 2018 23:02:35 -0400 Subject: [PATCH] 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 | 50 +++++++++++++-------------------- client/js/render.js | 2 +- client/js/socket-events/init.js | 2 +- client/js/socket-events/more.js | 21 +++++++++----- client/js/socket.js | 2 +- client/themes/morning.css | 11 -------- client/views/chat.tpl | 2 +- 7 files changed, 37 insertions(+), 53 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 3be8fbb4..1475ec56 100644 --- a/client/css/style.css +++ b/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 { - 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; +#chat .show-more .btn { width: 100%; -} - -#chat .show-more-button:hover { - opacity: 1; + margin: 0; } #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; } diff --git a/client/js/render.js b/client/js/render.js index 4bbfb548..6986a8b5 100644 --- a/client/js/render.js +++ b/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; diff --git a/client/js/socket-events/init.js b/client/js/socket-events/init.js index 11d8b3e6..1e2af2a9 100644 --- a/client/js/socket-events/init.js +++ b/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) { diff --git a/client/js/socket-events/more.js b/client/js/socket-events/more.js index ffde8419..220f8a3f 100644 --- a/client/js/socket-events/more.js +++ b/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") - .text("Show older messages") - .prop("disabled", false); + // Swap button text back from its alternative label + const showMoreBtn = scrollable.find(".show-more button"); + 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 - .text("Loading older messages…") - .prop("disabled", true); + // Swap button text with its alternative label + swapText(self); + 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); +} diff --git a/client/js/socket.js b/client/js/socket.js index 77008f51..8e77ff70 100644 --- a/client/js/socket.js +++ b/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 diff --git a/client/themes/morning.css b/client/themes/morning.css index c02ca6a3..f177cd4d 100644 --- a/client/themes/morning.css +++ b/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; } diff --git a/client/views/chat.tpl b/client/views/chat.tpl index dbd4d1c0..88346f9a 100644 --- a/client/views/chat.tpl +++ b/client/views/chat.tpl @@ -21,7 +21,7 @@
- +