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:
parent
a6ecb54cc4
commit
f058de8bcd
@ -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();
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user