From e092dcc33c2007fbfb4b243d84385a7cc64d6ce5 Mon Sep 17 00:00:00 2001 From: WolverinDEV Date: Sun, 17 Feb 2019 13:56:49 +0100 Subject: [PATCH] Reworked the channel tree selected lines --- ChangeLog.md | 1 + shared/js/proto.ts | 15 ++++++++++++++- shared/js/ui/channel.ts | 11 ++++++----- shared/js/ui/client.ts | 7 +++++++ shared/js/ui/view.ts | 30 ++++++++++++++++-------------- 5 files changed, 44 insertions(+), 20 deletions(-) diff --git a/ChangeLog.md b/ChangeLog.md index a2287f77..d45b80c1 100644 --- a/ChangeLog.md +++ b/ChangeLog.md @@ -10,6 +10,7 @@ - Fixed query visibility setting - Removed useless client infos for query clients - Added an auto reconnect system + - Reworked the channel tree selected lines * **15.02.19** - Fixed MS Edge loading/document issues diff --git a/shared/js/proto.ts b/shared/js/proto.ts index 8b142c88..fbf42942 100644 --- a/shared/js/proto.ts +++ b/shared/js/proto.ts @@ -17,6 +17,7 @@ interface JQuery { visible_height() : number; + visible_width() : number; /* bootstrap */ alert() : JQuery; @@ -151,7 +152,19 @@ if(typeof ($) !== "undefined") { }); const result = this.height(); - console.log(original_style); + this.attr("style", original_style || ""); + return result; + } + if(!$.fn.visible_width) + $.fn.visible_width = function (this: JQuery) { + const original_style = this.attr("style"); + this.css({ + position: 'absolute!important', + visibility: 'hidden!important', + display: 'block!important' + }); + + const result = this.width(); this.attr("style", original_style || ""); return result; } diff --git a/shared/js/ui/channel.ts b/shared/js/ui/channel.ts index 4b794681..9e4aeeab 100644 --- a/shared/js/ui/channel.ts +++ b/shared/js/ui/channel.ts @@ -139,7 +139,7 @@ class ChannelEntry { let current = entry.currentChannel(); if(deep) { while(current) { - if(current.parent_channel() == self) { + if(current == self) { result.push(entry); break; } @@ -171,15 +171,16 @@ class ChannelEntry { return clients; } - update_family_index() { + update_family_index(enforce?: boolean) { const current_index = this._family_index; const new_index = this.calculate_family_index(true); - if(current_index == new_index) return; + if(current_index == new_index && !enforce) return; this._tag_channel.css("z-index", this._family_index); + this._tag_channel.css("padding-left", (this._family_index + 1) * 16 + "px"); } - private calculate_family_index(enforce_recalculate: boolean = false) : number { + calculate_family_index(enforce_recalculate: boolean = false) : number { if(this._family_index !== undefined && !enforce_recalculate) return this._family_index; @@ -202,7 +203,6 @@ class ChannelEntry { container_entry.attr("channel-id", this.channelId); container_entry.addClass(this._channel_name_alignment); - container_entry.css('z-index', this.calculate_family_index()); /* channel icon (type) */ { @@ -290,6 +290,7 @@ class ChannelEntry { } tag_channel.append(this._tag_channel = container_entry); + this.update_family_index(true); } { const container_client = $.spawn("div").addClass("container-clients"); diff --git a/shared/js/ui/client.ts b/shared/js/ui/client.ts index 6a3ebb58..a7579013 100644 --- a/shared/js/ui/client.ts +++ b/shared/js/ui/client.ts @@ -762,6 +762,13 @@ class ClientEntry { return undefined; } } + + update_family_index() { + if(!this._channel) return; + const index = this._channel.calculate_family_index(); + + this.tag.css('padding-left', (index + 2) * 16 + "px"); + } } class LocalClientEntry extends ClientEntry { diff --git a/shared/js/ui/view.ts b/shared/js/ui/view.ts index fe065ddd..c7d1a537 100644 --- a/shared/js/ui/view.ts +++ b/shared/js/ui/view.ts @@ -236,7 +236,6 @@ class ChannelTree { this.channel_first = channel.channel_next; - let oldParent = channel.parent_channel(); channel.channel_next = undefined; channel.channel_previous = channel_previous; channel.parent = parent; @@ -253,19 +252,18 @@ class ChannelTree { channel.channel_next.channel_previous = channel; } else { if(parent) { - let siblings = parent.children(); - if(siblings.length <= 1) { //Self should be already in there + let children = parent.children(); + if(children.length <= 1) { //Self should be already in there let left = channel.rootTag(); left.appendTo(parent.siblingTag()); channel.channel_next = undefined; } else { - channel.channel_previous = siblings[siblings.length - 2]; - channel.channel_previous.rootTag().after(channel.rootTag()); + channel.channel_previous = undefined; + channel.rootTag().prependTo(parent.siblingTag()); - channel.channel_next = channel.channel_previous.channel_next; + channel.channel_next = children[1]; /* children 0 shall be the channel itself */ channel.channel_next.channel_previous = channel; - channel.channel_previous.channel_next = channel; } } else { this.htmlTree.find(".server").after(channel.rootTag()); @@ -279,10 +277,17 @@ class ChannelTree { } channel.update_family_index(); - if(channel.channel_previous == channel) /* shall never happen */ + channel.children(true).forEach(e => e.update_family_index()); + channel.clients(true).forEach(e => e.update_family_index()); + + if(channel.channel_previous == channel) { /* shall never happen */ channel.channel_previous = undefined; - if(channel.channel_next == channel) /* shall never happen */ + debugger; + } + if(channel.channel_next == channel) { /* shall never happen */ channel.channel_next = undefined; + debugger; + } } deleteClient(client: ClientEntry) { @@ -312,6 +317,7 @@ class ChannelTree { client.currentChannel().reorderClients(); channel.updateChannelTypeIcon(); + client.update_family_index(); return client; } @@ -320,11 +326,6 @@ class ChannelTree { client.channelTree = this; } - reorderAllClients() { - for(let channel of this.channels) - channel.reorderClients(); - } - moveClient(client: ClientEntry, channel: ChannelEntry) { let oldChannel = client.currentChannel(); client["_channel"] = channel; @@ -340,6 +341,7 @@ class ChannelTree { client.currentChannel().updateChannelTypeIcon(); } client.updateClientStatusIcons(); + client.update_family_index(); } findClient?(clientId: number) : ClientEntry {