frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2023-10-10 13:36:53 +02:00
Code Issues Releases Wiki Activity

Improve typedInput label width calculation

Browse Source 
If the label contains an img, the width calculation needs
to wait for the img to be loaded. This fix is a bit hacky
as it doesn't actually tie into the onload event, but should
be good enough
This commit is contained in:
Nick O'Leary 2019-07-01 11:14:21 +01:00
parent a974e84ad1
commit 8b3b541a56
No known key found for this signature in database
GPG Key ID: 4F2157149161A6C9
2 changed files with 52 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -439,21 +439,27 @@
}) })
}); });
}, },
_getLabelWidth: function(label) { _getLabelWidth: function(label, done) {
var labelWidth = label.outerWidth(); var labelWidth = label.outerWidth();
if (labelWidth === 0) { if (labelWidth === 0) {
var container = $('<div class="red-ui-typedInput-container"></div>').css({ var wrapper = $('<div class="red-ui-editor"></div>').css({
position:"absolute", position:"absolute",
"white-space": "nowrap", "white-space": "nowrap",
top:0 top:-2000
}).appendTo(document.body); }).appendTo(document.body);
var container = $('<div class="red-ui-typedInput-container"></div>').appendTo(wrapper);
var newTrigger = label.clone().appendTo(container); var newTrigger = label.clone().appendTo(container);
labelWidth = newTrigger.outerWidth(); setTimeout(function() {
container.remove(); labelWidth = newTrigger.outerWidth();
wrapper.remove();
done(labelWidth);
},50)
} else {
done(labelWidth);
} }
return labelWidth;
}, },
_resize: function() { _resize: function() {
var that = this;
if (this.uiWidth !== null) { if (this.uiWidth !== null) {
this.uiSelect.width(this.uiWidth); this.uiSelect.width(this.uiWidth);
} }
@ -462,47 +468,44 @@
this.selectTrigger.addClass("red-ui-typedInput-full-width"); this.selectTrigger.addClass("red-ui-typedInput-full-width");
} else { } else {
this.selectTrigger.removeClass("red-ui-typedInput-full-width"); this.selectTrigger.removeClass("red-ui-typedInput-full-width");
var labelWidth = this._getLabelWidth(this.selectTrigger); this._getLabelWidth(this.selectTrigger, function(labelWidth) {
this.elementDiv.css('left',labelWidth+"px"); that.elementDiv.css('left',labelWidth+"px");
this.valueLabelContainer.css('left',labelWidth+"px"); that.valueLabelContainer.css('left',labelWidth+"px");
if (this.optionExpandButton.is(":visible")) { if (that.optionExpandButton.is(":visible")) {
this.elementDiv.css('right',"22px"); that.elementDiv.css('right',"22px");
this.valueLabelContainer.css('right',"22px"); that.valueLabelContainer.css('right',"22px");
} else {
this.elementDiv.css('right','0');
this.valueLabelContainer.css('right','0');
this.input.css({
'border-top-right-radius': '4px',
'border-bottom-right-radius': '4px'
});
}
// if (this.optionSelectTrigger) {
// this.optionSelectTrigger.css({'left':(labelWidth)+"px",'width':'calc( 100% - '+labelWidth+'px )'});
// }
if (this.optionSelectTrigger) {
if (type && type.options && type.hasValue === true) {
this.optionSelectLabel.css({'left':'auto'})
var lw = this._getLabelWidth(this.optionSelectLabel);
this.optionSelectTrigger.css({'width':(23+lw)+"px"});
this.elementDiv.css('right',(23+lw)+"px");
this.input.css({
'border-top-right-radius': 0,
'border-bottom-right-radius': 0
});
} else { } else {
this.optionSelectLabel.css({'left':'0'}) that.elementDiv.css('right','0');
this.optionSelectTrigger.css({'width':'calc( 100% - '+labelWidth+'px )'}); that.valueLabelContainer.css('right','0');
if (!this.optionExpandButton.is(":visible")) { that.input.css({
this.elementDiv.css({'right':0}); 'border-top-right-radius': '4px',
this.input.css({ 'border-bottom-right-radius': '4px'
'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.is(":visible")) {
that.elementDiv.css({'right':0});
that.input.css({
'border-top-right-radius': '4px',
'border-bottom-right-radius': '4px'
});
}
} }
} }
} });
} }
}, },
_updateOptionSelectLabel: function(o) { _updateOptionSelectLabel: function(o) {
@ -624,6 +627,8 @@
} }
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);
@ -766,10 +771,7 @@
} }
this.input.trigger('change',this.propertyType,this.value()); this.input.trigger('change',this.propertyType,this.value());
} }
if (image) { if (!image) {
image.onload = function() { that._resize(); }
image.onerror = function() { that._resize(); }
} else {
this._resize(); this._resize();
} }
} }

3
packages/node_modules/@node-red/editor-client/src/sass/ui/common/typedInput.scss vendored
View File

@ -90,6 +90,9 @@
display: inline-block; display: inline-block;
height: 100%; height: 100%;
padding: 0 1px 0 5px; padding: 0 1px 0 5px;
img {
max-width: none;
}
} }
&:not(.disabled):hover { &:not(.disabled):hover {