diff --git a/Gruntfile.js b/Gruntfile.js index 4d289a828..f75794e40 100644 --- a/Gruntfile.js +++ b/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", 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 new file mode 100644 index 000000000..8e8b13326 --- /dev/null +++ b/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 = $(''); + 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); diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js index 35b62cba5..6ccd01e5b 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js @@ -158,9 +158,8 @@ RED.workspaces = (function() { '').appendTo(dialogForm); $('
'+ - ''+ - ' '+ - ''+ + ''+ + ''+ '
').appendTo(dialogForm); var 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}) + $('').prependTo(dialogForm); dialogForm.on("submit", function(e) { e.preventDefault();}); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss b/packages/node_modules/@node-red/editor-client/src/sass/colors.scss index 99ffaacab..84dbe7ade 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/colors.scss +++ b/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; diff --git a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss b/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss index d7d20db0b..91978057e 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/mixins.scss +++ b/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 { diff --git a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss b/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss index a73922641..53358ac98 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/tabs.scss +++ b/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 {