Merge pull request #2369 from thelounge/astorije/show-older-msg-btn

Make "Show older messages" style consistent with other buttons
This commit is contained in:
Jérémie Astori 2018-04-20 19:04:52 +02:00 committed by GitHub
commit 49c5e6a502
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 37 additions and 53 deletions

View File

@ -439,14 +439,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;
}
@ -1038,25 +1037,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 {
@ -1132,14 +1120,6 @@ kbd {
padding: 0 10px;
}
.inline-channel {
cursor: pointer;
}
.inline-channel:hover {
opacity: 0.6;
}
#chat .time,
#chat .from,
#chat .content {
@ -1190,17 +1170,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; }

View File

@ -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;

View File

@ -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) {

View File

@ -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);
}

View File

@ -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

View File

@ -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;
}

View File

@ -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>