Implement condensed messages option entirely with CSS

Fixes #1432
This commit is contained in:
Pavel Djundik 2017-08-30 15:43:31 +03:00
parent 5821247b3d
commit d814abd1cf
6 changed files with 40 additions and 39 deletions

View File

@ -820,24 +820,33 @@ kbd {
flex-basis: 100%;
}
#chat .condensed-text {
#chat .condensed-summary .content {
display: block;
cursor: pointer;
transition: opacity 0.2s;
}
#chat .condensed-text:hover {
opacity: 0.6;
}
#chat .condensed-text .toggle-button:hover {
opacity: 1;
}
#chat .condensed.closed .msg {
#chat .condensed-summary {
display: none;
}
#chat .condensed > .time {
#chat.condensed-status-messages .condensed-summary {
display: flex;
}
#chat .condensed-summary:hover {
opacity: 0.6;
}
#chat .condensed-summary .toggle-button:hover {
opacity: 1;
}
#chat.condensed-status-messages .condensed.closed .msg {
display: none;
}
#chat .condensed-summary .time {
visibility: hidden;
}
@ -1132,11 +1141,6 @@ kbd {
color: #555;
}
#chat.hide-status-messages .join,
#chat.hide-status-messages .mode,
#chat.hide-status-messages .nick,
#chat.hide-status-messages .part,
#chat.hide-status-messages .quit,
#chat.hide-status-messages .condensed,
#chat.hide-motd .motd {
display: none !important;

View File

@ -50,6 +50,6 @@ function updateText(condensed, addedTypes) {
text = strings.join(", ") + ", and " + text;
}
condensed.find(".condensed-text")
condensed.find(".condensed-summary .content")
.html(text + templates.msg_condensed_toggle());
}

View File

@ -295,7 +295,7 @@ $(function() {
}
});
chat.on("click", ".condensed-text", function() {
chat.on("click", ".condensed-summary .content", function() {
$(this).closest(".msg.condensed").toggleClass("closed");
});

View File

@ -84,6 +84,7 @@ settings.on("change", "input, select, textarea", function() {
chat.toggleClass("hide-" + name, !self.prop("checked"));
} else if (name === "statusMessages") {
chat.toggleClass("hide-status-messages", options[name] === "hidden");
chat.toggleClass("condensed-status-messages", options[name] === "condensed");
} else if (name === "coloredNicks") {
chat.toggleClass("colored-nicks", self.prop("checked"));
} else if (name === "theme") {

View File

@ -61,10 +61,9 @@ function appendMessage(container, chanId, chanType, msg) {
return;
}
// TODO: To fix #1432, statusMessage option should entirely be implemented in CSS
// If current window is not a channel or this message is not condensable,
// then just append the message to container and be done with it
if (constants.condensedTypes.indexOf(msg.type) === -1 || chanType !== "channel" || options.statusMessages !== "condensed") {
if (constants.condensedTypes.indexOf(msg.type) === -1 || chanType !== "channel") {
container.append(renderedMessage);
return;
}
@ -74,21 +73,18 @@ function appendMessage(container, chanId, chanType, msg) {
if (lastChild.hasClass("condensed")) {
lastChild.append(renderedMessage);
condensed.updateText(lastChild, [msg.type]);
// If the previous message can be condensed, we create a new condensed wrapper
} else if (lastChild.is(constants.condensedTypesQuery)) {
return;
}
const newCondensed = buildChatMessage(chanId, {
type: "condensed",
time: msg.time,
previews: []
});
condensed.updateText(newCondensed, [msg.type, lastChild.attr("data-type")]);
container.append(newCondensed);
newCondensed.append(lastChild);
condensed.updateText(newCondensed, [msg.type]);
newCondensed.append(renderedMessage);
} else {
container.append(renderedMessage);
}
container.append(newCondensed);
}
function buildChatMessage(chanId, msg) {

View File

@ -1,7 +1,7 @@
<div class="msg condensed closed" data-time="{{time}}">
<div class="condensed-summary">
<span class="time">{{tz time}}</span>
<span class="from"></span>
<span class="content">
<span class="condensed-text"></span>
</span>
<span class="content"></span>
</div>
</div>