Move condense caret to the right, animate transition, add hover state (with transition), reuse thumbnail toggle style

This commit is contained in:
Jérémie Astori 2017-08-06 12:35:01 -04:00
parent b508783101
commit 853e646670
No known key found for this signature in database
GPG Key ID: B9A4F245CD67BDE8
9 changed files with 30 additions and 63 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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"),

View File

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

View File

@ -0,0 +1 @@
<button class="toggle-button" aria-label="Toggle status messages"></button>