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

Allow toggleButton icons to be optional

This commit is contained in:
Nick O'Leary 2020-09-16 11:41:48 +01:00
parent 3824cdde68
commit 5686158245
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
1 changed files with 30 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -37,8 +37,8 @@
invertState = this.options.invertState;
}
var baseClass = this.options.baseClass || "red-ui-button";
var enabledIcon = this.options.enabledIcon || "fa-check-square-o";
var disabledIcon = this.options.disabledIcon || "fa-square-o";
var enabledIcon = this.options.hasOwnProperty('enabledIcon')?this.options.enabledIcon : "fa-check-square-o";
var disabledIcon = this.options.hasOwnProperty('disabledIcon')?this.options.disabledIcon : "fa-square-o";
var enabledLabel = this.options.hasOwnProperty('enabledLabel') ? this.options.enabledLabel : RED._("editor:workspace.enabled");
var disabledLabel = this.options.hasOwnProperty('disabledLabel') ? this.options.disabledLabel : RED._("editor:workspace.disabled");
@ -46,25 +46,35 @@
this.element.on("focus", function() {
that.button.focus();
});
this.button = $('<button type="button" class="red-ui-toggleButton '+baseClass+' toggle single"><i class="fa"></i> <span></span></button>');
this.button = $('<button type="button" class="red-ui-toggleButton '+baseClass+' toggle single"><span></span></button>');
this.buttonLabel = $("<span>").appendTo(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");
if (enabledIcon && disabledIcon) {
this.buttonIcon = $('<i class="fa"></i>').prependTo(this.button);
}
// Quick hack to find the maximum width of the button
this.button.addClass("selected");
this.buttonIcon.addClass(enabledIcon);
if (this.buttonIcon) {
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);
if (this.buttonIcon) {
this.buttonIcon.removeClass(enabledIcon);
that.buttonIcon.addClass(disabledIcon);
}
that.buttonLabel.text(disabledLabel);
width = Math.max(width,this.button.width());
this.buttonIcon.removeClass(disabledIcon);
if (this.buttonIcon) {
this.buttonIcon.removeClass(disabledIcon);
}
// Fix the width of the button so it doesn't jump around when toggled
if (width > 0) {
@ -73,7 +83,7 @@
this.button.on("click",function(e) {
e.stopPropagation();
if (that.buttonIcon.hasClass(disabledIcon)) {
if (!that.state) {
that.element.prop("checked",!invertState);
} else {
that.element.prop("checked",invertState);
@ -84,13 +94,19 @@
this.element.on("change", function(e) {
if ($(this).prop("checked") !== invertState) {
that.button.addClass("selected");
that.buttonIcon.addClass(enabledIcon);
that.buttonIcon.removeClass(disabledIcon);
that.state = true;
if (that.buttonIcon) {
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.state = false;
if (that.buttonIcon) {
that.buttonIcon.addClass(disabledIcon);
that.buttonIcon.removeClass(enabledIcon);
}
that.buttonLabel.text(disabledLabel);
}
})