Merge pull request #2149 from thelounge/xpaw/sidebar-flex

Cleanup sidebar to use flexbox
This commit is contained in:
Pavel Djundik 2018-03-08 09:04:11 +02:00 committed by GitHub
commit d1648823c3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 88 additions and 71 deletions

View File

@ -249,7 +249,9 @@ kbd {
#nick button::before,
#image-viewer .previous-image-btn::before,
#image-viewer .next-image-btn::before,
#sidebar .collapse-network::before {
#sidebar .not-secure-icon::before,
#sidebar .not-connected-icon::before,
#sidebar .collapse-network-icon::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;
@ -276,14 +278,13 @@ kbd {
.context-menu-action-kick::before { content: "\f05e"; /* http://fontawesome.io/icon/ban/ */ }
.context-menu-network::before,
#sidebar .chan.lobby::before,
#chat .lobby .title::before { content: "\f0a0"; /* http://fontawesome.io/icon/hdd-o/ */ }
#sidebar .not-secure .chan.lobby::before {
#sidebar .not-secure-icon::before {
content: "\f09c"; /* https://fontawesome.com/v4.7.0/icon/unlock/ */
}
#sidebar .not-connected .chan.lobby::before {
#sidebar .not-connected-icon::before {
content: "\f127"; /* https://fontawesome.com/v4.7.0/icon/chain-broken/ TODO v5: unlink */
}
@ -555,6 +556,7 @@ kbd {
#sidebar .network,
#sidebar .network-placeholder {
position: relative;
margin-bottom: 30px;
touch-action: pan-y;
}
@ -567,8 +569,8 @@ kbd {
#sidebar .chan,
#sidebar .chan-placeholder {
display: block;
padding: 8px 16px 8px 32px;
display: flex;
padding: 8px 14px;
transition: color 0.2s;
width: 100%;
}
@ -577,18 +579,40 @@ kbd {
color: #84ce88;
font-size: 15px;
font-weight: bold;
padding-left: 0;
}
#sidebar .chan.lobby:hover,
#sidebar .lobby-wrap {
display: flex;
flex-grow: 1;
}
#sidebar .chan.lobby .lobby-wrap:hover,
#sidebar .chan.lobby.active {
color: #c0f8c3;
}
#sidebar .not-connected-tooltip,
#sidebar .not-secure-tooltip {
display: none;
margin: 0 8px;
}
#sidebar .not-connected .not-connected-tooltip,
#sidebar .not-secure .not-secure-tooltip {
display: inline-block;
}
#sidebar .not-connected .not-secure-tooltip {
/* Do not display insecure icon if disconnected */
display: none;
}
#sidebar .not-secure .chan.lobby {
color: #f39c12;
}
#sidebar .not-secure .chan.lobby:hover,
#sidebar .not-secure .chan.lobby .lobby-wrap:hover,
#sidebar .not-secure .chan.lobby.active {
color: #f8c572;
}
@ -597,29 +621,24 @@ kbd {
color: #e74c3c;
}
#sidebar .not-connected .chan.lobby:hover,
#sidebar .not-connected .chan.lobby .lobby-wrap:hover,
#sidebar .not-connected .chan.lobby.active {
color: #f1978e;
}
#sidebar .chan::before,
#chat .title::before {
width: 14px;
margin-right: 12px;
}
#sidebar .chan::before {
float: left;
line-height: 18px;
}
#chat .title::before {
margin-top: 17px;
}
#sidebar .chan .name {
position: relative;
z-index: 0;
display: block;
flex-grow: 1;
overflow: hidden;
white-space: nowrap;
margin-right: 5px;
@ -636,11 +655,10 @@ kbd {
}
#sidebar .badge,
#sidebar .add-channel,
#sidebar .close {
float: right;
margin-left: 5px;
margin-right: -5px;
#sidebar .add-channel-tooltip,
#sidebar .close-tooltip {
flex-shrink: 0;
line-height: 1;
}
#sidebar .badge {
@ -648,8 +666,7 @@ kbd {
border-radius: 3px;
color: #afb6c0;
font-size: 10px;
margin-top: 1px;
padding: 3px 6px;
padding: 4px 6px;
transition: background-color 0.2s, color 0.2s;
}
@ -662,11 +679,6 @@ kbd {
color: #49505a;
}
#sidebar .close-tooltip {
float: right;
}
#sidebar .leave,
#sidebar .close {
width: 18px;
height: 18px;
@ -674,7 +686,6 @@ kbd {
transition: opacity 0.2s, background-color 0.2s;
}
#sidebar .leave::before,
#sidebar .close::before {
font-size: 20px;
font-weight: normal;
@ -712,25 +723,31 @@ kbd {
transform: rotate(45deg) translateZ(0);
}
#sidebar .network .collapse-network {
border-radius: 3px;
width: 32px;
height: 34px;
float: left;
opacity: 0.4;
transition: opacity 0.2s, background-color 0.2s, transform 0.2s;
}
button.collapse-network:first-child:nth-last-child(3) {
#sidebar .network .lobby:nth-last-child(2) .collapse-network {
/* Hide collapse button if there are no channels/queries */
display: none;
width: 0;
overflow: hidden;
}
#sidebar .network.collapsed .collapse-network {
#sidebar .network .collapse-network {
width: 40px;
opacity: 0.4;
padding-left: 11px;
transition: opacity 0.2s;
}
#sidebar .network .collapse-network-icon {
display: block;
width: 20px;
height: 20px;
transition: transform 0.2s;
}
#sidebar .network.collapsed .collapse-network-icon {
transform: rotate(-90deg);
}
#sidebar .network .collapse-network::before {
#sidebar .network .collapse-network-icon::before {
content: "\f0d7"; /* http://fontawesome.io/icon/caret-down/ */
color: #fff;
}
@ -744,16 +761,10 @@ button.collapse-network:first-child:nth-last-child(3) {
display: unset;
}
#sidebar .chan.active .leave:hover,
#sidebar .chan.active .close:hover {
opacity: 1;
}
#sidebar .tse-scrollbar {
top: 2px;
right: 3px;
}
#footer {
background: rgba(0, 0, 0, 0.06);
bottom: 0;
@ -1055,6 +1066,7 @@ button.collapse-network:first-child:nth-last-child(3) {
*/
#sidebar .join-form {
display: none;
padding: 0 18px 8px;
}
#sidebar .join-form .input {
@ -1063,19 +1075,14 @@ button.collapse-network:first-child:nth-last-child(3) {
margin-right: auto;
margin-top: 5px;
margin-bottom: 5px;
width: 80%;
}
#sidebar .join-form .btn {
display: block;
width: 80%;
width: 100%;
margin: auto;
}
#sidebar .add-channel-tooltip {
float: right;
}
#chat .show-more {
display: none;
padding: 10px;

View File

@ -25,7 +25,6 @@ const historyObserver = window.IntersectionObserver ?
module.exports = {
appendMessage,
buildChannelMessages,
collapseNetwork,
renderChannel,
renderChannelUsers,
renderNetworks,
@ -306,10 +305,10 @@ function loadMoreHistory(entries) {
});
}
sidebar.on("click", ".collapse-network", (event) => collapseNetwork($(event.target)));
sidebar.on("click", ".collapse-network", (e) => {
const collapseButton = $(e.target);
function collapseNetwork(collapseButton) {
$("#sidebar").find(`.network[data-id='${collapseButton.attr("data-id")}']`).toggleClass("collapsed");
collapseButton.closest(".network").toggleClass("collapsed");
if (collapseButton.attr("aria-expanded") === "true") {
collapseButton.attr("aria-expanded", false);
@ -318,4 +317,6 @@ function collapseNetwork(collapseButton) {
collapseButton.attr("aria-expanded", true);
collapseButton.attr("aria-label", "Collapse");
}
}
return false;
});

View File

@ -9,7 +9,7 @@ const sidebar = $("#sidebar");
socket.on("join", function(data) {
const id = data.network;
const network = sidebar.find(`#network-${id}-chanlist`);
const network = sidebar.find(`#network-${id}`);
network.append(
templates.chan({
channels: [data.chan],

View File

@ -7,7 +7,7 @@ const sidebar = $("#sidebar");
socket.on("quit", function(data) {
const id = data.network;
const network = sidebar.find(`#network-${id}-chanlist`);
const network = sidebar.find(`#network-${id}`);
network.children(".chan").each(function() {
// this = child

View File

@ -24,12 +24,12 @@ socket.on("sync_sort", function(data) {
return true; // No point in continuing
}
const network = container.find(`#network-${data.target}-chanlist`);
const network = container.find(`#network-${data.target}`);
$(network).insertBefore(position);
});
} else if (type === "channels") {
const network = $(`#network-${data.target}-chanlist`);
const network = $(`#network-${data.target}`);
$.each(order, function(index, value) {
if (index === 0) { // Shouldn't attempt to move lobby

View File

@ -9,17 +9,30 @@
aria-selected="false"
>
{{#equal type "lobby"}}
<button class="collapse-network" aria-label="Collapse" aria-controls="network-{{id}}" aria-expanded="true">
<span class="collapse-network-icon"></span>
</button>
<div class="lobby-wrap">
<span class="name" title="{{name}}">{{name}}</span>
<span class="not-secure-tooltip tooltipped tooltipped-w" aria-label="Insecure connection">
<span class="not-secure-icon"></span>
</span>
<span class="not-connected-tooltip tooltipped tooltipped-w" aria-label="Disconnected">
<span class="not-connected-icon"></span>
</span>
<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
</div>
<span class="add-channel-tooltip tooltipped tooltipped-w tooltipped-no-touch" aria-label="Join a channel…" data-alt-label="Cancel">
<button class="add-channel" aria-label="Join a channel…" data-id="{{id}}"></button>
</span>
{{/equal}}
<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
{{#notEqual type "lobby"}}
<span class="name" title="{{name}}">{{name}}</span>
<span class="badge{{#if highlight}} highlight{{/if}}">{{#if unread}}{{roundBadgeNumber unread}}{{/if}}</span>
<span class="close-tooltip tooltipped tooltipped-w" aria-label="Leave">
<button class="close" aria-label="Leave"></button>
</span>
{{/notEqual}}
<span class="name" title="{{name}}">{{name}}</span>
</div>
{{#equal type "lobby"}}
{{> join_channel}}

View File

@ -5,12 +5,8 @@
data-id="{{id}}"
data-nick="{{nick}}"
data-options="{{tojson serverOptions}}"
role="region"
>
<div id="network-{{id}}-chanlist" role="region" class="chanlist">
<button class="collapse-network" aria-label="Collapse" data-id="{{id}}"
aria-controls="network-{{id}}-chanlist" aria-expanded="true">
</button>
{{> chan}}
</div>
{{> chan}}
</section>
{{/each}}