Move condense caret to the right, animate transition, add hover state (with transition), reuse thumbnail toggle style
This commit is contained in:
parent
b508783101
commit
853e646670
@ -198,7 +198,6 @@ kbd {
|
||||
#settings #play:before,
|
||||
#form #submit:before,
|
||||
#chat .invite .from:before,
|
||||
#chat .condensed .expander:before,
|
||||
#chat .join .from:before,
|
||||
#chat .kick .from:before,
|
||||
#chat .part .from:before,
|
||||
@ -286,22 +285,6 @@ kbd {
|
||||
color: #2ecc40;
|
||||
}
|
||||
|
||||
#chat .condensed {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#chat .condensed div {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
#chat .condensed .expander:before {
|
||||
content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
|
||||
}
|
||||
|
||||
#chat .condensed.closed .expander:before {
|
||||
content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */
|
||||
}
|
||||
|
||||
#chat .join .from:before {
|
||||
content: "\f090"; /* http://fontawesome.io/icon/sign-in/ */
|
||||
color: #2ecc40;
|
||||
@ -827,8 +810,21 @@ kbd {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
#chat .condensed .msg {
|
||||
flex-basis: 100%;
|
||||
#chat .condensed .content {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
#chat .condensed-text {
|
||||
cursor: pointer;
|
||||
transition: opacity .2s;
|
||||
}
|
||||
|
||||
#chat .condensed-text:hover {
|
||||
opacity: .6;
|
||||
}
|
||||
|
||||
#chat .condensed-text .toggle-button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#chat .condensed.closed .msg {
|
||||
@ -1174,19 +1170,14 @@ kbd {
|
||||
|
||||
#chat .toggle-button {
|
||||
display: inline-block;
|
||||
color: #666;
|
||||
transition: color .2s, transform .2s;
|
||||
transition: opacity .2s, transform .2s;
|
||||
}
|
||||
|
||||
#chat .toggle-button.opened {
|
||||
#chat .toggle-button.opened, /* Thumbnail toggle */
|
||||
#chat .msg.condensed:not(.closed) .toggle-button { /* Expanded status message toggle */
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
#chat .toggle-button:hover {
|
||||
/* transform and opacity together glitch, so need to use RGBA transition */
|
||||
color: rgba(102, 102, 102, .8); /* #666 x .8 opacity */
|
||||
}
|
||||
|
||||
#chat .toggle-content {
|
||||
background: #f5f5f5;
|
||||
border-radius: 2px;
|
||||
|
@ -1,6 +1,7 @@
|
||||
"use strict";
|
||||
|
||||
const constants = require("./constants");
|
||||
const templates = require("../views");
|
||||
|
||||
module.exports = {
|
||||
updateText
|
||||
@ -33,5 +34,6 @@ function updateText(condensed, addedTypes) {
|
||||
text += obj[messageType] > 1 ? "s" : "";
|
||||
}
|
||||
}
|
||||
condensed.find(".condensed-msg").text(text);
|
||||
condensed.find(".condensed-text")
|
||||
.html(text + templates.msg_condensed_toggle());
|
||||
}
|
||||
|
@ -439,12 +439,8 @@ $(function() {
|
||||
}
|
||||
});
|
||||
|
||||
chat.on("click", ".condensed", function() {
|
||||
$(this).toggleClass("closed");
|
||||
});
|
||||
|
||||
chat.on("click", ".condensed div", function(e) {
|
||||
e.stopPropagation();
|
||||
chat.on("click", ".condensed-text", function() {
|
||||
$(this).closest(".msg.condensed").toggleClass("closed");
|
||||
});
|
||||
|
||||
chat.on("click", ".user", function() {
|
||||
|
@ -47,7 +47,7 @@ function renderPreview(preview, msg) {
|
||||
container.trigger("keepToBottom");
|
||||
}
|
||||
|
||||
$("#chat").on("click", ".toggle-button", function() {
|
||||
$("#chat").on("click", ".text .toggle-button", function() {
|
||||
const self = $(this);
|
||||
const container = self.closest(".chat");
|
||||
const content = self.closest(".content")
|
||||
|
@ -101,10 +101,6 @@ body {
|
||||
color: #428bca;
|
||||
}
|
||||
|
||||
#chat button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Increase contrast of some IRC colors */
|
||||
.irc-fg2 { color: #0074d9; }
|
||||
.irc-fg5 { color: #e969a7; }
|
||||
@ -208,17 +204,9 @@ body {
|
||||
}
|
||||
|
||||
/* Embeds */
|
||||
#chat .toggle-content,
|
||||
#chat .toggle-button {
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
#chat .toggle-button:hover {
|
||||
color: rgba(243, 243, 243, .8);
|
||||
}
|
||||
|
||||
#chat .toggle-content {
|
||||
background: #242a33;
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
#chat .toggle-content .body {
|
||||
|
@ -127,10 +127,6 @@ body {
|
||||
color: #8c8cbc;
|
||||
}
|
||||
|
||||
#chat button:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* Increase contrast of some IRC colors */
|
||||
.irc-fg2 { color: #1b94ff; }
|
||||
.irc-fg5 { color: #e969a7; }
|
||||
@ -235,17 +231,9 @@ body {
|
||||
|
||||
/* Previews */
|
||||
|
||||
#chat .toggle-content,
|
||||
#chat .toggle-button {
|
||||
color: #dcdccc;
|
||||
}
|
||||
|
||||
#chat .toggle-button:hover {
|
||||
color: rgba(220, 220, 204, .8);
|
||||
}
|
||||
|
||||
#chat .toggle-content {
|
||||
background: #333;
|
||||
color: #dcdccc;
|
||||
}
|
||||
|
||||
#chat .toggle-content .body {
|
||||
|
@ -25,6 +25,7 @@ module.exports = {
|
||||
date_marker: require("./date-marker.tpl"),
|
||||
msg: require("./msg.tpl"),
|
||||
msg_action: require("./msg_action.tpl"),
|
||||
msg_condensed_toggle: require("./msg_condensed_toggle.tpl"),
|
||||
msg_condensed: require("./msg_condensed.tpl"),
|
||||
msg_preview: require("./msg_preview.tpl"),
|
||||
msg_preview_toggle: require("./msg_preview_toggle.tpl"),
|
||||
|
@ -1,7 +1,7 @@
|
||||
<div class="msg {{type}} closed" data-time="{{time}}">
|
||||
<span class="time hide-text">{{tz time}}</span>
|
||||
<span class="from"><span class="expander"></span></span>
|
||||
<span class="from"></span>
|
||||
<span class="content">
|
||||
<span class="text condensed-msg"></span>
|
||||
<span class="condensed-text"></span>
|
||||
</span>
|
||||
</div>
|
||||
|
1
client/views/msg_condensed_toggle.tpl
Normal file
1
client/views/msg_condensed_toggle.tpl
Normal file
@ -0,0 +1 @@
|
||||
<button class="toggle-button" aria-label="Toggle status messages"></button>
|
Loading…
Reference in New Issue
Block a user