From 7fec928ba8f72f6479a6591b96020eaa520819ef Mon Sep 17 00:00:00 2001 From: Al McKinlay Date: Tue, 20 Feb 2018 08:42:50 +0000 Subject: [PATCH 1/3] Make networks collapsable --- client/css/style.css | 33 +++++++++++++++++++++++++++- client/js/render.js | 15 +++++++++++++ client/js/socket-events/join.js | 2 +- client/js/socket-events/quit.js | 2 +- client/js/socket-events/sync_sort.js | 4 ++-- client/themes/crypto.css | 2 +- client/views/network.tpl | 4 ++++ 7 files changed, 56 insertions(+), 6 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 25f0a381..3748c88c 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -248,7 +248,8 @@ kbd { #help .report-issue-link::before, #nick button::before, #image-viewer .previous-image-btn::before, -#image-viewer .next-image-btn::before { +#image-viewer .next-image-btn::before, +#sidebar .collapse-network::before { font: normal normal normal 14px/1 FontAwesome; font-size: inherit; /* Can't have font-size inherit on line above, so need to override */ -webkit-font-smoothing: antialiased; @@ -523,6 +524,10 @@ kbd { font-size: 14px; } +#sidebar .network.collapsed .chan:not(.lobby) { + display: none; +} + #sidebar button, #sidebar .chan, #sidebar .sign-out { @@ -703,6 +708,32 @@ kbd { transform: rotate(45deg) translateZ(0); } +#sidebar .network .collapse-network { + border-radius: 3px; + width: 25px; + height: 34px; + float: left; + opacity: 0.4; + transition: opacity 0.2s, background-color 0.2s, transform 0.2s; +} + +#sidebar .network .collapse-network::before { + font-weight: normal; + display: inline-block; + line-height: 16px; + text-align: center; + content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */ + color: #fff; +} + +#sidebar .network.collapsed .collapse-network::before { + content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */ +} + +#sidebar .collapse-network:hover { + opacity: 1; +} + #sidebar .chan.active .close { opacity: 0.4; display: unset; diff --git a/client/js/render.js b/client/js/render.js index 79809e01..4549e71a 100644 --- a/client/js/render.js +++ b/client/js/render.js @@ -24,6 +24,7 @@ const historyObserver = window.IntersectionObserver ? module.exports = { appendMessage, buildChannelMessages, + collapseNetwork, renderChannel, renderChannelUsers, renderNetworks, @@ -285,3 +286,17 @@ function loadMoreHistory(entries) { target.trigger("click"); }); } + +sidebar.on("click", ".collapse-network", (event) => collapseNetwork($(event.target))); + +function collapseNetwork(collapseButton) { + $("#sidebar").find(`.network[data-id='${collapseButton.attr("data-id")}']`).toggleClass("collapsed"); + + if (collapseButton.attr("aria-expanded") === "true") { + collapseButton.attr("aria-expanded", false); + collapseButton.attr("aria-label", "Expand"); + } else { + collapseButton.attr("aria-expanded", true); + collapseButton.attr("aria-label", "Collapse"); + } +} diff --git a/client/js/socket-events/join.js b/client/js/socket-events/join.js index 71ddfc29..441383d7 100644 --- a/client/js/socket-events/join.js +++ b/client/js/socket-events/join.js @@ -9,7 +9,7 @@ const sidebar = $("#sidebar"); socket.on("join", function(data) { const id = data.network; - const network = sidebar.find("#network-" + id); + const network = sidebar.find(`#network-${id}-chanlist`); network.append( templates.chan({ channels: [data.chan], diff --git a/client/js/socket-events/quit.js b/client/js/socket-events/quit.js index 37b7df4c..948f4be5 100644 --- a/client/js/socket-events/quit.js +++ b/client/js/socket-events/quit.js @@ -7,7 +7,7 @@ const sidebar = $("#sidebar"); socket.on("quit", function(data) { const id = data.network; - const network = sidebar.find("#network-" + id); + const network = sidebar.find(`#network-${id}-chanlist`); network.children(".chan").each(function() { // this = child diff --git a/client/js/socket-events/sync_sort.js b/client/js/socket-events/sync_sort.js index 2a344eca..2612239b 100644 --- a/client/js/socket-events/sync_sort.js +++ b/client/js/socket-events/sync_sort.js @@ -24,12 +24,12 @@ socket.on("sync_sort", function(data) { return true; // No point in continuing } - const network = container.find("#network-" + value); + const network = container.find(`#network-${data.target}-chanlist`); $(network).insertBefore(position); }); } else if (type === "channels") { - const network = $("#network-" + data.target); + const network = $(`#network-${data.target}-chanlist`); $.each(order, function(index, value) { if (index === 0) { // Shouldn't attempt to move lobby diff --git a/client/themes/crypto.css b/client/themes/crypto.css index 93725d15..239b4fc2 100644 --- a/client/themes/crypto.css +++ b/client/themes/crypto.css @@ -64,7 +64,7 @@ a:hover, font-size: 12px; } -#sidebar .chan:first-child { +#sidebar .chan.lobby { color: #00ff0e; } diff --git a/client/views/network.tpl b/client/views/network.tpl index 0f0ade56..d53b1fd9 100644 --- a/client/views/network.tpl +++ b/client/views/network.tpl @@ -6,6 +6,10 @@ data-nick="{{nick}}" data-options="{{tojson serverOptions}}" > + +
{{> chan}} +
{{/each}} From 49f2721908b9ce4320a51134f6986281c266208f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?J=C3=A9r=C3=A9mie=20Astori?= Date: Fri, 2 Mar 2018 01:08:56 -0500 Subject: [PATCH 2/3] Tweak collapse/expand icon design - Animate the caret similarly to previews and status messages - Tweak margins to center things a bit - Remove unused CSS attributes --- client/css/style.css | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index 3748c88c..c3986f6c 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -564,7 +564,7 @@ kbd { #sidebar .chan, #sidebar .chan-placeholder { display: block; - padding: 8px 25px; + padding: 8px 16px 8px 32px; transition: color 0.2s; width: 100%; } @@ -710,24 +710,20 @@ kbd { #sidebar .network .collapse-network { border-radius: 3px; - width: 25px; + width: 32px; height: 34px; float: left; opacity: 0.4; transition: opacity 0.2s, background-color 0.2s, transform 0.2s; } -#sidebar .network .collapse-network::before { - font-weight: normal; - display: inline-block; - line-height: 16px; - text-align: center; - content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */ - color: #fff; +#sidebar .network.collapsed .collapse-network { + transform: rotate(-90deg); } -#sidebar .network.collapsed .collapse-network::before { - content: "\f0da"; /* http://fontawesome.io/icon/caret-right/ */ +#sidebar .network .collapse-network::before { + content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */ + color: #fff; } #sidebar .collapse-network:hover { From 894d6f162d93d5dcde488609b41385b76368ec0e Mon Sep 17 00:00:00 2001 From: Alistair McKinlay Date: Fri, 2 Mar 2018 13:59:45 +0000 Subject: [PATCH 3/3] Hide collapse button if no channels --- client/css/style.css | 5 +++++ client/views/network.tpl | 7 ++++--- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/client/css/style.css b/client/css/style.css index c3986f6c..5c22789c 100644 --- a/client/css/style.css +++ b/client/css/style.css @@ -717,6 +717,11 @@ kbd { transition: opacity 0.2s, background-color 0.2s, transform 0.2s; } +button.collapse-network:first-child:nth-last-child(3) { + /* Hide collapse button if there are no channels/queries */ + display: none; +} + #sidebar .network.collapsed .collapse-network { transform: rotate(-90deg); } diff --git a/client/views/network.tpl b/client/views/network.tpl index d53b1fd9..cca45a5e 100644 --- a/client/views/network.tpl +++ b/client/views/network.tpl @@ -6,10 +6,11 @@ data-nick="{{nick}}" data-options="{{tojson serverOptions}}" > -
- {{> chan}} + + {{> chan}}
{{/each}}