From f058de8bcd7d74bd9c5d5972ebaf951c833df3a6 Mon Sep 17 00:00:00 2001 From: Nick O'Leary Date: Thu, 2 Apr 2020 16:49:58 +0100 Subject: [PATCH] Update TypedInput to use flexbox and remove resizing code --- .../src/js/ui/common/typedInput.js | 68 +++---------------- .../src/sass/ui/common/typedInput.scss | 21 ++---- 2 files changed, 16 insertions(+), 73 deletions(-) diff --git a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js index cb4de12d2..88c842c2f 100644 --- a/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js +++ b/packages/node_modules/@node-red/editor-client/src/js/ui/common/typedInput.js @@ -488,56 +488,6 @@ done(labelWidth); } }, - _resize: function() { - var that = this; - if (this.uiWidth !== null) { - this.uiSelect.width(this.uiWidth); - } - var type = this.typeMap[this.propertyType]; - if (type && type.hasValue === false) { - this.selectTrigger.addClass("red-ui-typedInput-full-width"); - } else { - this.selectTrigger.removeClass("red-ui-typedInput-full-width"); - this._getLabelWidth(this.selectTrigger, function(labelWidth) { - that.elementDiv.css('left',labelWidth+"px"); - that.valueLabelContainer.css('left',labelWidth+"px"); - if (that.optionExpandButton.shown) { - that.elementDiv.css('right',"22px"); - that.valueLabelContainer.css('right',"22px"); - } else { - that.elementDiv.css('right','0'); - that.valueLabelContainer.css('right','0'); - that.input.css({ - 'border-top-right-radius': '4px', - 'border-bottom-right-radius': '4px' - }); - } - if (that.optionSelectTrigger) { - if (type && type.options && type.hasValue === true) { - that.optionSelectLabel.css({'left':'auto'}) - that._getLabelWidth(that.optionSelectLabel, function(lw) { - that.optionSelectTrigger.css({'width':(23+lw)+"px"}); - that.elementDiv.css('right',(23+lw)+"px"); - that.input.css({ - 'border-top-right-radius': 0, - 'border-bottom-right-radius': 0 - }); - }); - } else { - that.optionSelectLabel.css({'left':'0'}) - that.optionSelectTrigger.css({'width':'calc( 100% - '+labelWidth+'px )'}); - if (!that.optionExpandButton.shown) { - that.elementDiv.css({'right':0}); - that.input.css({ - 'border-top-right-radius': '4px', - 'border-bottom-right-radius': '4px' - }); - } - } - } - }); - } - }, _updateOptionSelectLabel: function(o) { var opt = this.typeMap[this.propertyType]; this.optionSelectLabel.empty(); @@ -565,7 +515,6 @@ } if (opt.hasValue) { this.optionValue = o.value; - this._resize(); this.input.trigger('change',this.propertyType,this.value()); } } else { @@ -605,11 +554,12 @@ this.propertyType = null; this.type(currentType); } - setTimeout(function() {that._resize();},0); }, width: function(desiredWidth) { this.uiWidth = desiredWidth; - this._resize(); + if (this.uiWidth !== null) { + this.uiSelect.width(this.uiWidth); + } }, value: function(value) { var that = this; @@ -680,8 +630,6 @@ } else if (opt.icon.indexOf("/") !== -1) { image = new Image(); - image.onload = function() { that._resize(); } - image.onerror = function() { that._resize(); } image.name = opt.icon; image.src = mapDeprecatedIcon(opt.icon); $('',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel); @@ -693,6 +641,12 @@ if (opt.hasValue === false || (opt.showLabel !== false && !opt.icon)) { this.selectLabel.text(opt.label); } + if (opt.hasValue === false) { + this.selectTrigger.addClass("red-ui-typedInput-full-width"); + } else { + this.selectTrigger.removeClass("red-ui-typedInput-full-width"); + } + if (this.optionMenu) { this.optionMenu.remove(); this.optionMenu = null; @@ -881,9 +835,6 @@ this._trigger("typechange",null,this.propertyType); this.input.trigger('change',this.propertyType,this.value()); } - if (!image) { - this._resize(); - } } } }, @@ -910,7 +861,6 @@ }, show: function() { this.uiSelect.show(); - this._resize(); }, hide: function() { this.uiSelect.hide(); diff --git a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss index be2d50674..243c42e17 100644 --- a/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss +++ b/packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss @@ -18,7 +18,7 @@ border: 1px solid $form-input-border-color; border-radius: 4px; height: 34px; - display: inline-block; + display: inline-flex; padding: 0; margin: 0; vertical-align: middle; @@ -26,12 +26,7 @@ overflow:visible; position: relative; .red-ui-typedInput-input-wrap { - position: absolute; - left:0; - right:0; - top:0; - bottom:0; - outline: red; + flex-grow: 1; } input.red-ui-typedInput-input { width: 100%; @@ -49,7 +44,7 @@ border-color: $form-input-focus-color !important; } .red-ui-typedInput-value-label { - position: absolute; + flex-grow: 1; display: inline-block; height: 32px; box-sizing: border-box; @@ -104,12 +99,11 @@ button.red-ui-typedInput-option-trigger { text-align: left; border: none; - position: absolute; + flex-basis: auto; box-sizing: border-box; border-top-left-radius: 4px; border-bottom-left-radius: 4px; padding: 0 1px 0 5px; - display:inline-block; background: $form-button-background; height: 32px; line-height: 30px; @@ -151,7 +145,7 @@ button.red-ui-typedInput-option-trigger text-decoration: none; } &.red-ui-typedInput-full-width { - width: 100%; + flex-grow: 1; border-top-right-radius: 4px; border-bottom-right-radius: 4px; } @@ -167,7 +161,6 @@ button.red-ui-typedInput-option-expand { border-bottom-right-radius: 4px; border-top-left-radius: 0; border-bottom-left-radius: 0; - right: 0; } button.red-ui-typedInput-option-trigger { @@ -176,8 +169,8 @@ button.red-ui-typedInput-option-trigger { border-top-right-radius: 4px; border-bottom-right-radius: 4px; padding: 0 0 0 0; - position:absolute; - right: 0; + position:relative; + flex-grow: 1; .red-ui-typedInput-option-label { background:$form-button-background; color: $form-text-color;