Some minor and major bugfixing

ChangeLog.md

@@ -1,6 +1,8 @@
 # Changelog:
 * **11.06.20**
     - Fixed channel tree deletions
+    - Removed layout recalculate bottleneck on connection handler switching
+    - Fixed empty channel tree on tab change, if the tree has some scroll offset
     
 * **10.06.20**
     - Finalize the channel file explorer

shared/css/static/menu-bar.scss

@@ -65,6 +65,10 @@
 			background-color: rgba(0, 0, 0, 0.13);
 		}
 
+		&.hidden {
+			display: none;
+		}
+
 		.sub-menu {
 			z-index: 1000;
 			display: none;

shared/js/ConnectionHandler.ts

@@ -32,7 +32,6 @@ import * as top_menu from "tc-shared/ui/frames/MenuBar";
 import {EventHandler, Registry} from "tc-shared/events";
 import {FileManager} from "tc-shared/file/FileManager";
 import {FileTransferState, TransferProvider} from "tc-shared/file/Transfer";
-import {guid} from "tc-shared/crypto/uid";
 import {traj} from "tc-shared/i18n/localize";
 import {md5} from "tc-shared/crypto/md5";
 
@@ -1069,5 +1068,10 @@ export interface ConnectionEvents {
     notify_connection_state_changed: {
         old_state: ConnectionState,
         new_state: ConnectionState
+    },
+
+    /* the handler has become visible/invisible for the client */
+    notify_visibility_changed: {
+        visible: boolean
     }
 }

shared/js/ui/frames/MenuBar.ts

@@ -92,6 +92,7 @@ namespace html {
         private _label: string;
         private _callback_click: () => any;
 
+        private visible_: boolean = true;
 
         constructor(label: string, mode: "side" | "down") {
             this._label = label;
@@ -167,9 +168,9 @@ namespace html {
 
         visible(value?: boolean): boolean {
             if(typeof(value) === "undefined")
-                return this.html_tag.is(':visible'); //FIXME!
+                return this.visible_;
 
-            this.html_tag.toggle(!!value);
+            this.html_tag.toggleClass("hidden", this.visible_ = !!value);
             return value;
         }
 

shared/js/ui/frames/connection_handlers.ts

@@ -68,15 +68,6 @@ export class ConnectionManager {
         handler.initialize_client_state(this.active_handler);
         this.connection_handlers.push(handler);
 
-        //FIXME: Load last status from last connection or via global variables!
-        /*
-        handler.set_away_status(this.default_server_state.away, false);
-        handler.client_status.input_muted = this.default_server_state.microphone_disabled;
-        handler.client_status.output_muted = this.default_server_state.speaker_disabled;
-        if(!this.default_server_state.microphone_disabled)
-            handler.acquire_recorder(default_recorder, true);
-         */
-
         handler.tag_connection_handler.appendTo(this._tag_connection_entries);
         this._tag.toggleClass("shown", this.connection_handlers.length > 1);
         this._update_scroll();
@@ -142,6 +133,9 @@ export class ConnectionManager {
             old_handler: old_handler,
             new_handler: handler
         });
+        old_handler?.events().fire("notify_visibility_changed", { visible: false });
+        handler?.events().fire("notify_visibility_changed", { visible: true });
+
         top_menu.update_state(); //FIXME: Top menu should listen to our events!
     }
 

shared/js/ui/tree/View.scss

@@ -10,18 +10,6 @@ html:root {
     --channel-tree-entry-marker-unread: rgba(168, 20, 20, 0.5);
 }
 
-@if 0 {
-    /* the channel tree */
-    .channel-tree {
-
-        .tree-entry {
-            &.client {
-
-            }
-        }
-    }
-}
-
 .channelTree {
     @include user-select(none);
     width: 100%;
@@ -109,8 +97,6 @@ html:root {
 .channelTreeContainer {
     @include chat-scrollbar-vertical();
 
-    scroll-behavior: smooth;
-
     position: relative;
     height: 100%;
 
@@ -119,4 +105,8 @@ html:root {
 
     overflow: hidden;
     overflow-y: auto;
+
+    &.smoothScroll {
+        scroll-behavior: smooth;
+    }
 }

shared/js/ui/tree/View.tsx

@@ -19,6 +19,7 @@ import {ServerEntry} from "tc-shared/ui/server";
 import {ClientEntry, ClientType} from "tc-shared/ui/client";
 import * as log from "tc-shared/log";
 import {LogCategory} from "tc-shared/log";
+import {ConnectionEvents} from "tc-shared/ConnectionHandler";
 
 const viewStyle = require("./View.scss");
 
@@ -35,6 +36,7 @@ export interface ChannelTreeViewState {
     view_height: number; /* in px */
 
     tree_version: number;
+    smoothScroll: boolean;
 }
 
 export type TreeEntry = ChannelEntry | ServerEntry | ClientEntry;
@@ -57,8 +59,10 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
     private listener_channel_change;
     private listener_state_collapsed;
     private listener_channel_properties;
+    private listener_tree_visibility_changed;
 
     private update_timeout;
+    private fixScrollTimer;
 
     private mouse_move: { x: number, y: number, down: boolean, fired: boolean } = { x: 0, y: 0, down: false, fired: false };
     private document_mouse_listener;
@@ -73,7 +77,8 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
         return {
             scroll_offset: 0,
             view_height: 0,
-            tree_version: 0
+            tree_version: 0,
+            smoothScroll: false
         };
     }
 
@@ -95,11 +100,14 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
             }
         });
         this.resize_observer.observe(this.ref_container.current);
+        this.props.tree.client.events().on("notify_visibility_changed", this.listener_tree_visibility_changed);
     }
 
     componentWillUnmount(): void {
         this.resize_observer.disconnect();
         this.resize_observer = undefined;
+
+        this.props.tree.client.events().off("notify_visibility_changed", this.listener_tree_visibility_changed);
     }
 
     protected initialize() {
@@ -120,6 +128,22 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
             this.mouse_move.fired = false;
 
             this.removeDocumentMouseListener();
+        };
+
+        this.listener_tree_visibility_changed = (event: ConnectionEvents["notify_visibility_changed"]) => {
+            clearTimeout(this.fixScrollTimer);
+            if(!event.visible) {
+                this.setState({ smoothScroll: false });
+                return;
+            }
+
+            this.fixScrollTimer = setTimeout(() => {
+                this.ref_container.current.scrollTop = this.state.scroll_offset;
+                this.fixScrollTimer = setTimeout(() => {
+                     this.setState({ smoothScroll: true });
+                }, 50);
+            }, 50);
+            console.log("Update scroll!");
         }
     }
 
@@ -174,7 +198,7 @@ export class ChannelTreeView extends ReactComponentBase<ChannelTreeViewPropertie
 
         return (
             <div
-                 className={viewStyle.channelTreeContainer}
+                 className={viewStyle.channelTreeContainer + " " + (this.state.smoothScroll ? viewStyle.smoothScroll : "")}
                  onScroll={() => this.onScroll()}
                  ref={this.ref_container}
                  onMouseDown={e => this.onMouseDown(e)}