frodovdr/node-red
1
0
Fork 0
mirror of https://github.com/node-red/node-red.git synced 2025-03-01 10:36:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

Form input widths behave more consistently when resizing

Browse Source 
Fixes #919 #920
This commit is contained in:
Nick O'Leary
2016-06-26 23:48:59 +01:00
parent 682345da22
commit c3b1cf7c35
17 changed files with 118 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
editor/js/ui/editor.js
View File

@@ -214,22 +214,29 @@ RED.editor = (function() {
if (input.length === 0 ) {
return;
}
var existingWidthCSS = input[0].style.width;
var newWidth;
if (existingWidthCSS !== '') {
if (/%/.test(existingWidthCSS)) {
newWidth = (input.width()-10)+"%";
} else {
newWidth = input.width()-50;
}
var newWidth = input.width();
var attrStyle = input.attr('style');
var m;
if ((m = /width\s*:\s*(\d+(%|[a-z]+))/i.exec(attrStyle)) !== null) {
newWidth = m[1];
} else {
newWidth = "60%";
newWidth = "70%";
}
var select = $('<select id="'+prefix+'-'+property+'"></select>');
select.width(newWidth);
input.replaceWith(select);
var outerWrap = $("<div></div>").css({display:'inline-block',position:'relative'});
var selectWrap = $("<div></div>").css({position:'absolute',left:0,right:'40px'}).appendTo(outerWrap);
var select = $('<select id="'+prefix+'-'+property+'"></select>').appendTo(selectWrap);
outerWrap.width(newWidth).height(input.height());
if (outerWrap.width() === 0) {
outerWrap.width("70%");
}
input.replaceWith(outerWrap);
// set the style attr directly - using width() on FF causes a value of 114%...
select.attr('style',"width:100%");
updateConfigNodeSelect(property,type,node[property],prefix);
select.after(' <a id="'+prefix+'-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>');
$('<a id="'+prefix+'-lookup-'+property+'" class="editor-button"><i class="fa fa-pencil"></i></a>')
.css({position:'absolute',right:0,top:0})
.appendTo(outerWrap);
$('#'+prefix+'-lookup-'+property).click(function(e) {
showEditConfigNodeDialog(property,type,select.find(":selected").val(),prefix);
e.preventDefault();

54
editor/js/ui/typedInput.js
View File

@@ -112,11 +112,18 @@
this.disarmClick = false;
this.element.addClass('red-ui-typedInput');
this.uiWidth = this.element.width();
this.uiSelect = this.element
.wrap( "<div>" )
.parent();
this.uiWidth = this.element.outerWidth();
this.elementDiv = this.element.wrap("<div>").parent().addClass('red-ui-typedInput-input');
this.uiSelect = this.elementDiv.wrap( "<div>" ).parent();
var attrStyle = this.element.attr('style');
var m;
if ((m = /width\s*:\s*(\d+%)/i.exec(attrStyle)) !== null) {
this.element.css('width','100%');
this.uiSelect.width(m[1]);
this.uiWidth = null;
} else {
this.uiSelect.width(this.uiWidth);
}
["Right","Left"].forEach(function(d) {
var m = that.element.css("margin"+d);
that.uiSelect.css("margin"+d,m);
@@ -242,33 +249,31 @@
});
},
_getLabelWidth: function(label) {
var labelWidth = label.width();
var labelWidth = label.outerWidth();
if (labelWidth === 0) {
var newTrigger = label.clone();
newTrigger.css({
var container = $('<div class="red-ui-typedInput-container"></div>').css({
position:"absolute",
top:0,
left:-1000
}).appendTo(document.body);
labelWidth = newTrigger.width()+4;
newTrigger.remove();
var newTrigger = label.clone().appendTo(container);;
labelWidth = newTrigger.outerWidth();
container.remove();
}
return labelWidth;
},
_resize: function() {
if (this.uiWidth !== null) {
this.uiSelect.width(this.uiWidth);
}
if (this.typeMap[this.propertyType] && this.typeMap[this.propertyType].hasValue === false) {
this.selectTrigger.width(this.uiWidth+5);
this.selectTrigger.css('width',"100%");
} else {
this.selectTrigger.width('auto');
var labelWidth = this._getLabelWidth(this.selectTrigger);
var newWidth = this.uiWidth-labelWidth+4;
this.element.width(newWidth);
this.elementDiv.css('left',labelWidth+"px");
if (this.optionSelectTrigger) {
var triggerWidth = this._getLabelWidth(this.optionSelectTrigger);
labelWidth = this._getLabelWidth(this.optionSelectLabel)-4;
this.optionSelectLabel.width(labelWidth+(newWidth-triggerWidth));
this.optionSelectTrigger.css('left',(labelWidth+5)+"px");
}
}
},
@@ -338,7 +343,7 @@
if (opt.options) {
if (this.optionSelectTrigger) {
this.optionSelectTrigger.show();
this.element.hide();
this.elementDiv.hide();
this.optionMenu = this._createMenu(opt.options,function(v){
that.optionSelectLabel.text(v);
that.value(v);
@@ -361,13 +366,13 @@
if (opt.hasValue === false) {
this.oldValue = this.element.val();
this.element.val("");
this.element.hide();
this.elementDiv.hide();
} else {
if (this.oldValue !== undefined) {
this.element.val(this.oldValue);
delete this.oldValue;
}
this.element.show();
this.elementDiv.show();
}
this.element.trigger('change',this.propertyType,this.value());
}
@@ -400,6 +405,13 @@
this.uiSelect.addClass('input-error');
}
return result;
},
show: function() {
this.uiSelect.show();
this._resize();
},
hide: function() {
this.uiSelect.hide();
}
});
})(jQuery);