Improved client rename functionality

shared/css/static/channel-tree.scss

@@ -174,6 +174,13 @@
                 &.client-name-own {
                     font-weight: bold;
                 }
+
+                line-height: 16px;
+
+                flex-grow: 1;
+                flex-shrink: 1;
+
+                min-width: 75px;
             }
 
             .container-icons {
@@ -204,6 +211,15 @@
 
                 .client-name {
                     color: whitesmoke;
+
+                    &:focus {
+                        color: black;
+
+                        padding-top: 1px;
+                        padding-bottom: 1px;
+
+                        z-index: 1000;
+                    }
                 }
             }
         }

shared/js/ui/client.ts

@@ -869,6 +869,8 @@ class LocalClientEntry extends ClientEntry {
     openRename() : void {
         const _self = this;
 
+        this.channelTree.client_mover.enabled = false;
+
         const elm = this.tag.find(".client-name");
         elm.attr("contenteditable", "true");
         elm.removeClass("client-name-own");
@@ -884,6 +886,8 @@ class LocalClientEntry extends ClientEntry {
         });
 
         elm.focusout(e => {
+            this.channelTree.client_mover.enabled = true;
+
             if(!_self.renaming) return;
             _self.renaming = false;
 

shared/js/ui/client_move.ts

@@ -10,6 +10,8 @@ class ClientMover {
     hovered_channel: HTMLDivElement;
     callback: (channel?: ChannelEntry) => any;
 
+    enabled: boolean = true;
+
     private _bound_finish;
     private _bound_move;
     private _active: boolean = false;
@@ -43,6 +45,9 @@ class ClientMover {
     activate(client: ClientEntry | ClientEntry[], callback: (channel?: ChannelEntry) => any, event: any) {
         this.finish_listener(undefined);
 
+        if(!this.enabled)
+            return false;
+
         this.selected_client = client;
         this.callback = callback;
         console.log(tr("Starting mouse move"));
@@ -58,6 +63,9 @@ class ClientMover {
     }
 
     private move_listener(event) {
+        if(!this.enabled)
+            return;
+
         //console.log("Mouse move: " + event.pageX + " - " + event.pageY);
         if(!event.pageX || !event.pageY) return;
         if(!this.origin_point)