mirror of
https://github.com/thelounge/thelounge
synced 2024-11-22 20:13:07 +00:00
Make networks collapsable
This commit is contained in:
parent
c485ec8c42
commit
7fec928ba8
7 changed files with 56 additions and 6 deletions
|
@ -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;
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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],
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -64,7 +64,7 @@ a:hover,
|
|||
font-size: 12px;
|
||||
}
|
||||
|
||||
#sidebar .chan:first-child {
|
||||
#sidebar .chan.lobby {
|
||||
color: #00ff0e;
|
||||
}
|
||||
|
||||
|
|
|
@ -6,6 +6,10 @@
|
|||
data-nick="{{nick}}"
|
||||
data-options="{{tojson serverOptions}}"
|
||||
>
|
||||
<button class="collapse-network" aria-label="Collapse" data-id="{{id}}"
|
||||
aria-controls="network-{{id}}-chanlist" aria-expanded="true"></button>
|
||||
<div id="network-{{id}}-chanlist" role="region" class="chanlist">
|
||||
{{> chan}}
|
||||
</div>
|
||||
</section>
|
||||
{{/each}}
|
||||
|
|
Loading…
Reference in a new issue