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:
commit
49c5e6a502
@ -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; }
|
||||
|
@ -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;
|
||||
|
@ -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) {
|
||||
|
@ -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);
|
||||
}
|
||||
|
@ -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
|
||||
|
@ -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;
|
||||
}
|
||||
|
@ -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>
|
||||
|
Loading…
Reference in New Issue
Block a user