[NIFI-2720] update view configuration properties tables dialogs to match editable configuration properties dialogs

This closes #1051.
This commit is contained in:
Scott Aslan 2016-09-22 17:18:54 -04:00 committed by Pierre Villard
parent 49297b725d
commit f06aeaee2a
1 changed files with 42 additions and 16 deletions

View File

@ -383,8 +383,8 @@
this.position = function (position) { this.position = function (position) {
wrapper.css({ wrapper.css({
'top': position.top - 22, 'top': position.top - 21,
'left': position.left - 20 'left': position.left - 43
}); });
}; };
@ -717,14 +717,14 @@
var wrapper = $('<div class="property-detail"></div>').css({ var wrapper = $('<div class="property-detail"></div>').css({
'z-index': 1999, 'z-index': 1999,
'position': 'absolute', 'position': 'absolute',
'padding': '5px', 'padding': '10px 20px',
'overflow': 'hidden', 'overflow': 'hidden',
'border-radius': '2px', 'border-radius': '2px',
'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px', 'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
'background-color': 'rgb(255, 255, 255)', 'background-color': 'rgb(255, 255, 255)',
'cursor': 'move', 'cursor': 'move',
'top': offset.top - 5, 'top': offset.top - 24,
'left': offset.left - 5 'left': offset.left - 20
}).appendTo('body'); }).appendTo('body');
var allowableValues = nf.Common.getAllowableValues(propertyDescriptor); var allowableValues = nf.Common.getAllowableValues(propertyDescriptor);
@ -763,7 +763,11 @@
var width = cellNode.width() - 16; var width = cellNode.width() - 16;
// build the combo field // build the combo field
$('<div class="value-combo combo"></div>').width(width).combo({ $('<div class="value-combo combo"></div>').css({
'width': width,
'margin-top': '10px',
'margin-bottom': '10px'
}).combo({
options: options, options: options,
maxHeight: maxHeight, maxHeight: maxHeight,
selectedOption: { selectedOption: {
@ -772,10 +776,9 @@
}).appendTo(wrapper); }).appendTo(wrapper);
$('<div class="button">Ok</div>').css({ $('<div class="button">Ok</div>').css({
'margin': '0 0 0 5px', 'position': 'relative',
'float': 'left', 'top': '10px',
'color': '#fff', 'left': '20px'
'background': '#728E9B'
}).hover( }).hover(
function () { function () {
$(this).css('background', '#004849'); $(this).css('background', '#004849');
@ -793,7 +796,18 @@
var editorClass = languageId + '-editor'; var editorClass = languageId + '-editor';
// prevent dragging over the nf editor // prevent dragging over the nf editor
wrapper.draggable({ wrapper.css({
'z-index': 1999,
'position': 'absolute',
'padding': '10px 20px',
'overflow': 'hidden',
'border-radius': '2px',
'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
'background-color': 'rgb(255, 255, 255)',
'cursor': 'move',
'top': offset.top - 22,
'left': offset.left - 43
}).draggable({
cancel: 'input, textarea, pre, .button, .' + editorClass, cancel: 'input, textarea, pre, .button, .' + editorClass,
containment: 'parent' containment: 'parent'
}); });
@ -812,12 +826,25 @@
} }
}); });
} else { } else {
wrapper.css({
'z-index': 1999,
'position': 'absolute',
'padding': '10px 20px',
'overflow': 'hidden',
'border-radius': '2px',
'box-shadow': 'rgba(0, 0, 0, 0.247059) 0px 2px 5px',
'background-color': 'rgb(255, 255, 255)',
'cursor': 'move',
'top': offset.top - 26,
'left': offset.left - 20
});
// create the input field // create the input field
$('<textarea hidefocus rows="5" readonly="readonly"/>').css({ $('<textarea hidefocus rows="5" readonly="readonly"/>').css({
'height': '80px', 'height': '80px',
'resize': 'both',
'width': cellNode.width() + 'px', 'width': cellNode.width() + 'px',
'margin': '20px 20px' 'margin': '10px 0px'
}).text(property.value).on('keydown', function (evt) { }).text(property.value).on('keydown', function (evt) {
if (evt.which === $.ui.keyCode.ESCAPE) { if (evt.which === $.ui.keyCode.ESCAPE) {
cleanUp(); cleanUp();
@ -845,10 +872,9 @@
// add an ok button that will remove the entire pop up // add an ok button that will remove the entire pop up
var ok = $('<div class="button">Ok</div>').css({ var ok = $('<div class="button">Ok</div>').css({
'margin': '0 0 0 5px', 'position': 'relative',
'float': 'left', 'top': '10px',
'color': '#fff', 'left': '20px'
'background': '#728E9B'
}).hover( }).hover(
function () { function () {
$(this).css('background', '#004849'); $(this).css('background', '#004849');