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