1
0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00

Update TypedInput to use flexbox and remove resizing code

This commit is contained in:
Nick O'Leary 2020-04-02 16:49:58 +01:00
parent a6ecb54cc4
commit f058de8bcd
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 16 additions and 73 deletions

View File

@ -488,56 +488,6 @@
done(labelWidth); 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) { _updateOptionSelectLabel: function(o) {
var opt = this.typeMap[this.propertyType]; var opt = this.typeMap[this.propertyType];
this.optionSelectLabel.empty(); this.optionSelectLabel.empty();
@ -565,7 +515,6 @@
} }
if (opt.hasValue) { if (opt.hasValue) {
this.optionValue = o.value; this.optionValue = o.value;
this._resize();
this.input.trigger('change',this.propertyType,this.value()); this.input.trigger('change',this.propertyType,this.value());
} }
} else { } else {
@ -605,11 +554,12 @@
this.propertyType = null; this.propertyType = null;
this.type(currentType); this.type(currentType);
} }
setTimeout(function() {that._resize();},0);
}, },
width: function(desiredWidth) { width: function(desiredWidth) {
this.uiWidth = desiredWidth; this.uiWidth = desiredWidth;
this._resize(); if (this.uiWidth !== null) {
this.uiSelect.width(this.uiWidth);
}
}, },
value: function(value) { value: function(value) {
var that = this; var that = this;
@ -680,8 +630,6 @@
} }
else if (opt.icon.indexOf("/") !== -1) { else if (opt.icon.indexOf("/") !== -1) {
image = new Image(); image = new Image();
image.onload = function() { that._resize(); }
image.onerror = function() { that._resize(); }
image.name = opt.icon; image.name = opt.icon;
image.src = mapDeprecatedIcon(opt.icon); image.src = mapDeprecatedIcon(opt.icon);
$('<img>',{src:mapDeprecatedIcon(opt.icon),style:"margin-right: 4px;height: 18px;"}).prependTo(this.selectLabel); $('<img>',{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)) { if (opt.hasValue === false || (opt.showLabel !== false && !opt.icon)) {
this.selectLabel.text(opt.label); 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) { if (this.optionMenu) {
this.optionMenu.remove(); this.optionMenu.remove();
this.optionMenu = null; this.optionMenu = null;
@ -881,9 +835,6 @@
this._trigger("typechange",null,this.propertyType); this._trigger("typechange",null,this.propertyType);
this.input.trigger('change',this.propertyType,this.value()); this.input.trigger('change',this.propertyType,this.value());
} }
if (!image) {
this._resize();
}
} }
} }
}, },
@ -910,7 +861,6 @@
}, },
show: function() { show: function() {
this.uiSelect.show(); this.uiSelect.show();
this._resize();
}, },
hide: function() { hide: function() {
this.uiSelect.hide(); this.uiSelect.hide();

View File

@ -18,7 +18,7 @@
border: 1px solid $form-input-border-color; border: 1px solid $form-input-border-color;
border-radius: 4px; border-radius: 4px;
height: 34px; height: 34px;
display: inline-block; display: inline-flex;
padding: 0; padding: 0;
margin: 0; margin: 0;
vertical-align: middle; vertical-align: middle;
@ -26,12 +26,7 @@
overflow:visible; overflow:visible;
position: relative; position: relative;
.red-ui-typedInput-input-wrap { .red-ui-typedInput-input-wrap {
position: absolute; flex-grow: 1;
left:0;
right:0;
top:0;
bottom:0;
outline: red;
} }
input.red-ui-typedInput-input { input.red-ui-typedInput-input {
width: 100%; width: 100%;
@ -49,7 +44,7 @@
border-color: $form-input-focus-color !important; border-color: $form-input-focus-color !important;
} }
.red-ui-typedInput-value-label { .red-ui-typedInput-value-label {
position: absolute; flex-grow: 1;
display: inline-block; display: inline-block;
height: 32px; height: 32px;
box-sizing: border-box; box-sizing: border-box;
@ -104,12 +99,11 @@ button.red-ui-typedInput-option-trigger
{ {
text-align: left; text-align: left;
border: none; border: none;
position: absolute; flex-basis: auto;
box-sizing: border-box; box-sizing: border-box;
border-top-left-radius: 4px; border-top-left-radius: 4px;
border-bottom-left-radius: 4px; border-bottom-left-radius: 4px;
padding: 0 1px 0 5px; padding: 0 1px 0 5px;
display:inline-block;
background: $form-button-background; background: $form-button-background;
height: 32px; height: 32px;
line-height: 30px; line-height: 30px;
@ -151,7 +145,7 @@ button.red-ui-typedInput-option-trigger
text-decoration: none; text-decoration: none;
} }
&.red-ui-typedInput-full-width { &.red-ui-typedInput-full-width {
width: 100%; flex-grow: 1;
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
} }
@ -167,7 +161,6 @@ button.red-ui-typedInput-option-expand {
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
border-top-left-radius: 0; border-top-left-radius: 0;
border-bottom-left-radius: 0; border-bottom-left-radius: 0;
right: 0;
} }
button.red-ui-typedInput-option-trigger { button.red-ui-typedInput-option-trigger {
@ -176,8 +169,8 @@ button.red-ui-typedInput-option-trigger {
border-top-right-radius: 4px; border-top-right-radius: 4px;
border-bottom-right-radius: 4px; border-bottom-right-radius: 4px;
padding: 0 0 0 0; padding: 0 0 0 0;
position:absolute; position:relative;
right: 0; flex-grow: 1;
.red-ui-typedInput-option-label { .red-ui-typedInput-option-label {
background:$form-button-background; background:$form-button-background;
color: $form-text-color; color: $form-text-color;