From f06aeaee2afbd7e606c98c630a3b20487e8d2e29 Mon Sep 17 00:00:00 2001
From: Scott Aslan <scottyaslan@gmail.com>
Date: Thu, 22 Sep 2016 17:18:54 -0400
Subject: [PATCH] [NIFI-2720] update view configuration properties tables
 dialogs to match editable configuration properties dialogs

This closes #1051.
---
 .../propertytable/jquery.propertytable.js     | 58 ++++++++++++++-----
 1 file changed, 42 insertions(+), 16 deletions(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
index d8636f9f58..47a4497696 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/propertytable/jquery.propertytable.js
@@ -383,8 +383,8 @@
 
         this.position = function (position) {
             wrapper.css({
-                'top': position.top - 22,
-                'left': position.left - 20
+                'top': position.top - 21,
+                'left': position.left - 43
             });
         };
 
@@ -717,14 +717,14 @@
                 var wrapper = $('<div class="property-detail"></div>').css({
                     'z-index': 1999,
                     'position': 'absolute',
-                    'padding': '5px',
+                    '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 - 5,
-                    'left': offset.left - 5
+                    'top': offset.top - 24,
+                    'left': offset.left - 20
                 }).appendTo('body');
 
                 var allowableValues = nf.Common.getAllowableValues(propertyDescriptor);
@@ -763,7 +763,11 @@
                     var width = cellNode.width() - 16;
 
                     // 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,
                         maxHeight: maxHeight,
                         selectedOption: {
@@ -772,10 +776,9 @@
                     }).appendTo(wrapper);
 
                     $('<div class="button">Ok</div>').css({
-                        'margin': '0 0 0 5px',
-                        'float': 'left',
-                        'color': '#fff',
-                        'background': '#728E9B'
+                        'position': 'relative',
+                        'top': '10px',
+                        'left': '20px'
                     }).hover(
                         function () {
                             $(this).css('background', '#004849');
@@ -793,7 +796,18 @@
                         var editorClass = languageId + '-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,
                             containment: 'parent'
                         });
@@ -812,12 +826,25 @@
                             }
                         });
                     } 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
                         $('<textarea hidefocus rows="5" readonly="readonly"/>').css({
                             'height': '80px',
+                            'resize': 'both',
                             'width': cellNode.width() + 'px',
-                            'margin': '20px 20px'
+                            'margin': '10px 0px'
                         }).text(property.value).on('keydown', function (evt) {
                             if (evt.which === $.ui.keyCode.ESCAPE) {
                                 cleanUp();
@@ -845,10 +872,9 @@
 
                     // add an ok button that will remove the entire pop up
                     var ok = $('<div class="button">Ok</div>').css({
-                        'margin': '0 0 0 5px',
-                        'float': 'left',
-                        'color': '#fff',
-                        'background': '#728E9B'
+                        'position': 'relative',
+                        'top': '10px',
+                        'left': '20px'
                     }).hover(
                         function () {
                             $(this).css('background', '#004849');