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

Improve typedInput label width calculation

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

View File

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

View File

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