frodovdr
/
node-red
mirror of https://github.com/node-red/node-red.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Introduce toggleButton and move flow-disabled to use it

This commit is contained in:
Nick O'Leary 2019-05-21 15:25:38 +01:00
parent 420e8c001b
commit 5f3e9a19ea
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
6 changed files with 118 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
Gruntfile.js
View File

@ -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",

105
packages/node_modules/@node-red/editor-client/src/js/ui/common/toggleButton.js vendored Normal file
View File

@ -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);

29
packages/node_modules/@node-red/editor-client/src/js/ui/workspaces.js vendored
View File

@ -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>'+
'<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" style="display: none;"/>'+
'<label for="node-input-disabled" data-i18n="editor:workspace.status"></label>'+
'<input type="checkbox" id="node-input-disabled"/>'+
'</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();});

4
packages/node_modules/@node-red/editor-client/src/sass/colors.scss vendored
View File

@ -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;

3
packages/node_modules/@node-red/editor-client/src/sass/mixins.scss vendored
View File

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

3
packages/node_modules/@node-red/editor-client/src/sass/tabs.scss vendored
View File

@ -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 {