From 853e64667090d41406eadd21cd0cd42f9b7c565a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Sun, 6 Aug 2017 12:35:01 -0400 Subject: [PATCH] Move condense caret to the right, animate transition, add hover state (with transition), reuse thumbnail toggle style --- client/css/style.css | 45 +++++++++++---------------- client/js/condensed.js | 4 ++- client/js/lounge.js | 8 ++--- client/js/renderPreview.js | 2 +- client/themes/morning.css | 14 +-------- client/themes/zenburn.css | 14 +-------- client/views/index.js | 1 + client/views/msg_condensed.tpl | 4 +-- client/views/msg_condensed_toggle.tpl | 1 + 9 files changed, 30 insertions(+), 63 deletions(-) create mode 100644 client/views/msg_condensed_toggle.tpl diff --git a/client/css/style.css b/client/css/style.css index bce2f8a6..13b70968 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -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; diff --git a/client/js/condensed.js b/client/js/condensed.js index 2115e1eb..8c994742 100644 --- a/client/js/condensed.js +++ b/client/js/condensed.js @@ -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()); } diff --git a/client/js/lounge.js b/client/js/lounge.js index 20260c71..6c478862 100644 --- a/client/js/lounge.js +++ b/client/js/lounge.js @@ -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() { diff --git a/client/js/renderPreview.js b/client/js/renderPreview.js index 3f09ff44..14edb400 100644 --- a/client/js/renderPreview.js +++ b/client/js/renderPreview.js @@ -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") diff --git a/client/themes/morning.css b/client/themes/morning.css index 17e68bcd..3a5e7677 100644 --- a/client/themes/morning.css +++ b/client/themes/morning.css @@ -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 { diff --git a/client/themes/zenburn.css b/client/themes/zenburn.css index 1465a3b3..5e73ed96 100644 --- a/client/themes/zenburn.css +++ b/client/themes/zenburn.css @@ -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 { diff --git a/client/views/index.js b/client/views/index.js index 44da5ae9..aae3c78b 100644 --- a/client/views/index.js +++ b/client/views/index.js @@ -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"), diff --git a/client/views/msg_condensed.tpl b/client/views/msg_condensed.tpl index 13e52960..914ef27c 100644 --- a/client/views/msg_condensed.tpl +++ b/client/views/msg_condensed.tpl @@ -1,7 +1,7 @@
{{tz time}} - + - +
diff --git a/client/views/msg_condensed_toggle.tpl b/client/views/msg_condensed_toggle.tpl new file mode 100644 index 00000000..2c740773 --- /dev/null +++ b/client/views/msg_condensed_toggle.tpl @@ -0,0 +1 @@ +