Introduce toggleButton and move flow-disabled to use it

Gruntfile.js

@@ -145,6 +145,7 @@ module.exports = function(grunt) {
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/tabs.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/stack.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js",
+                    "packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/actions.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/deploy.js",
                     "packages/node_modules/@node-red/editor-client/src/js/ui/diff.js",

packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js

@@ -0,0 +1,105 @@
+/**
+ * Copyright JS Foundation and other contributors, http://js.foundation
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ **/
+(function($) {
+
+/**
+ * options:
+ *   - invertState : boolean - if "true" the button will show "enabled" when the
+ *                             checkbox is not selected and vice versa.
+ *   - enabledIcon : string - the icon for "enabled" state, default "fa-check-square-o"
+ *   - enabledLabel : string - the label for "enabled" state, default "Enabled" ("editor:workspace.enabled")
+ *   - disabledIcon : string - the icon for "disabled" state, default "fa-square-o"
+ *   - disabledLabel : string - the label for "disabled" state, default "Disabled" ("editor:workspace.disabled")
+ *   - class: string - additional classes to apply to the button - eg "red-ui-button-small"
+ * methods:
+ *   -
+ */
+    $.widget( "nodered.toggleButton", {
+        _create: function() {
+            var that = this;
+
+            var invertState = false;
+            if (this.options.hasOwnProperty("invertState")) {
+                invertState = this.options.invertState;
+            }
+            var enabledIcon = this.options.enabledIcon || "fa-check-square-o";
+            var disabledIcon = this.options.disabledIcon || "fa-square-o";
+            var enabledLabel = this.options.enabledLabel || RED._("editor:workspace.enabled");
+            var disabledLabel = this.options.disabledLabel || RED._("editor:workspace.disabled");
+
+            this.element.addClass("red-ui-toggleButton");
+            this.element.css("display","none");
+            this.element.on("focus", function() {
+                that.button.focus();
+            });
+            this.button = $('<button type="button" class="red-ui-button toggle single"><i class="fa"></i> <span></span></button>');
+            if (this.options.class) {
+                this.button.addClass(this.options.class)
+            }
+            this.element.after(this.button);
+            this.buttonIcon = this.button.find("i");
+            this.buttonLabel = this.button.find("span");
+
+            // Quick hack to find the maximum width of the button
+            this.button.addClass("selected");
+            this.buttonIcon.addClass(enabledIcon);
+            this.buttonLabel.text(enabledLabel);
+            var width = this.button.width();
+            this.button.removeClass("selected");
+            this.buttonIcon.removeClass(enabledIcon);
+            that.buttonIcon.addClass(disabledIcon);
+            that.buttonLabel.text(disabledLabel);
+            width = Math.max(width,this.button.width());
+            this.buttonIcon.removeClass(disabledIcon);
+
+            // Fix the width of the button so it doesn't jump around when toggled
+            if (width > 0) {
+                this.button.width(Math.ceil(width));
+            }
+
+            this.button.on("click",function(e) {
+                if (that.buttonIcon.hasClass(disabledIcon)) {
+                    that.button.addClass("selected");
+                    that.buttonIcon.addClass(enabledIcon);
+                    that.buttonIcon.removeClass(disabledIcon);
+                    that.element.prop("checked",!invertState);
+                    that.buttonLabel.text(enabledLabel);
+                } else {
+                    that.buttonIcon.addClass(disabledIcon);
+                    that.button.removeClass("selected");
+                    that.buttonIcon.removeClass(enabledIcon);
+                    that.element.prop("checked",invertState);
+                    that.buttonLabel.text(disabledLabel);
+                }
+            })
+
+            this.element.on("change", function(e) {
+                if ($(this).prop("checked") !== invertState) {
+                    that.button.addClass("selected");
+                    that.buttonIcon.addClass(enabledIcon);
+                    that.buttonIcon.removeClass(disabledIcon);
+                    that.buttonLabel.text(enabledLabel);
+                } else {
+                    that.button.removeClass("selected");
+                    that.buttonIcon.addClass(disabledIcon);
+                    that.buttonIcon.removeClass(enabledIcon);
+                    that.buttonLabel.text(disabledLabel);
+                }
+            })
+            this.element.trigger("change");
+        }
+    });
+})(jQuery);

packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js

@@ -158,9 +158,8 @@ RED.workspaces = (function() {
                 '</div>').appendTo(dialogForm);
 
                 $('<div class="form-row">'+
-                    '<label for="node-input-disabled-btn" data-i18n="editor:workspace.status"></label>'+
+                    '<label for="node-input-disabled" data-i18n="editor:workspace.status"></label>'+
-                    '<button type="button" id="node-input-disabled-btn" class="red-ui-button"><i class="fa fa-toggle-on"></i> <span id="node-input-disabled-label"></span></button> '+
+                    '<input type="checkbox" id="node-input-disabled"/>'+
-                    '<input type="checkbox" id="node-input-disabled" style="display: none;"/>'+
                 '</div>').appendTo(dialogForm);
 
                 var row = $('<div class="form-row node-text-editor-row">'+
@@ -190,33 +189,13 @@ RED.workspaces = (function() {
                     })
                 });
 
-                dialogForm.find('#node-input-disabled-btn').on("click",function(e) {
-                    var i = $(this).find("i");
-                    if (i.hasClass('fa-toggle-off')) {
-                        i.addClass('fa-toggle-on');
-                        i.removeClass('fa-toggle-off');
-                        $("#node-input-disabled").prop("checked",false);
-                        $("#node-input-disabled-label").text(RED._("editor:workspace.enabled"));
-                    } else {
-                        i.addClass('fa-toggle-off');
-                        i.removeClass('fa-toggle-on');
-                        $("#node-input-disabled").prop("checked",true);
-                        $("#node-input-disabled-label").text(RED._("editor:workspace.disabled"));
-                    }
-                })
-
                 if (workspace.hasOwnProperty("disabled")) {
                     $("#node-input-disabled").prop("checked",workspace.disabled);
-                    if (workspace.disabled) {
-                        dialogForm.find("#node-input-disabled-btn i").removeClass('fa-toggle-on').addClass('fa-toggle-off');
-                        $("#node-input-disabled-label").text(RED._("editor:workspace.disabled"));
-                    } else {
-                        $("#node-input-disabled-label").text(RED._("editor:workspace.enabled"));
-                    }
                 } else {
                     workspace.disabled = false;
-                    $("#node-input-disabled-label").text(RED._("editor:workspace.enabled"));
                 }
+                $("#node-input-disabled").toggleButton({invertState: true})
+
 
                 $('<input type="text" style="display: none;" />').prependTo(dialogForm);
                 dialogForm.on("submit", function(e) { e.preventDefault();});

packages/node_modules/@node-red/editor-client/src/sass/colors.scss

@@ -34,10 +34,10 @@ $shadow: rgba(0, 0, 0, 0.2);
 $primary-text-color: #555;//#0f0;
 // UI control label text
 $secondary-text-color: #888;//#00f;
-$secondary-text-color-focus: #999;//#009;
+$secondary-text-color-focus: #666;//#009;
 $secondary-text-color-hover: #666;//#006;
 $secondary-text-color-active: #666;//#006;
-$secondary-text-color-selected: #AAA;//#00A;
+$secondary-text-color-selected: #666;//#00A;
 $secondary-text-color-inactive: #666;//#006;
 $secondary-text-color-disabled: #bbb;//#00C;
 $secondary-text-color-disabled-active: #999;//#009;

packages/node_modules/@node-red/editor-client/src/sass/mixins.scss

@@ -151,6 +151,9 @@
             margin-bottom: 0;
             cursor: default;
         }
+        &:not(.selected) {
+            margin-top: 1px;
+        }
     }
 }
 @mixin editor-button {

packages/node_modules/@node-red/editor-client/src/sass/tabs.scss

@@ -247,6 +247,9 @@
         &.red-ui-tab-link-button-menu {
             border-color: $tab-background;
         }
+        &:not(.single):not(.selected) {
+            margin-top: 4px;
+        }
     }
 }
 .red-ui-tab-scroll {