Fix size of context sidebar refresh toggle buttons

node-red · Sep 22, 2020 · 103e212 · 103e212
1 parent 2f33575
commit 103e212
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 6 deletions.
diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js
@@ -46,8 +46,10 @@
             this.element.on("focus", function() {
                 that.button.focus();
             });
-            this.button = $('<button type="button" class="red-ui-toggleButton '+baseClass+' toggle single"><span></span></button>');
-            this.buttonLabel = $("<span>").appendTo(this.button);
+            this.button = $('<button type="button" class="red-ui-toggleButton '+baseClass+' toggle single"></button>');
+            if (enabledLabel || disabledLabel) {
+                this.buttonLabel = $("<span>").appendTo(this.button);
+            }
 
             if (this.options.class) {
                 this.button.addClass(this.options.class)
@@ -63,14 +65,18 @@
             if (this.buttonIcon) {
                 this.buttonIcon.addClass(enabledIcon);
             }
-            this.buttonLabel.text(enabledLabel);
+            if (this.buttonLabel) {
+                this.buttonLabel.text(enabledLabel);
+            }
             var width = this.button.width();
             this.button.removeClass("selected");
             if (this.buttonIcon) {
                 this.buttonIcon.removeClass(enabledIcon);
                 that.buttonIcon.addClass(disabledIcon);
             }
-            that.buttonLabel.text(disabledLabel);
+            if (this.buttonLabel) {
+                that.buttonLabel.text(disabledLabel);
+            }
             width = Math.max(width,this.button.width());
             if (this.buttonIcon) {
                 this.buttonIcon.removeClass(disabledIcon);
@@ -99,15 +105,19 @@
                         that.buttonIcon.addClass(enabledIcon);
                         that.buttonIcon.removeClass(disabledIcon);
                     }
-                    that.buttonLabel.text(enabledLabel);
+                    if (that.buttonLabel) {
+                        that.buttonLabel.text(enabledLabel);
+                    }
                 } else {
                     that.button.removeClass("selected");
                     that.state = false;
                     if (that.buttonIcon) {
                         that.buttonIcon.addClass(disabledIcon);
                         that.buttonIcon.removeClass(enabledIcon);
                     }
-                    that.buttonLabel.text(disabledLabel);
+                    if (that.buttonLabel) {
+                        that.buttonLabel.text(disabledLabel);
+                    }
                 }
             })
             this.element.trigger("change");

diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss b/packages/node_modules/@node-red/editor-client/src/sass/tab-context.scss
@@ -39,6 +39,13 @@
         vertical-align: top;
     }
 
+    button.red-ui-toggleButton.toggle {
+        text-align: center;
+        i {
+            min-width: 10px;
+        }
+    }
+
 }
 
 .red-ui-sidebar-context-property {