Merge pull request #2149 from thelounge/xpaw/sidebar-flex
Cleanup sidebar to use flexbox
This commit is contained in:
Pavel Djundik
GitHub
commit
d1648823c3
@ -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;
|
||||
|
||||
@ -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;
|
||||
});
|
||||
|
||||
@ -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],
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}}
|
||||
|
||||
@ -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>
|
||||
</section>
|
||||
{{/each}}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user