[NIFI-2189] Update open/close handlers for dialogs

[NIFI-2190] About Dialog fixed text overlayed on image
[NIFI-2187] Update iconResize.png
[NIFI-2166] When adding Processor to canvas, previously selected tags is no longer selected
This closes #615

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/about.css

@@ -16,8 +16,8 @@
  */
 #nf-about {
     overflow: hidden;
-    width: 450px;
-    height: 450px;
+    width: 500px;
+    height: 500px;
     max-height: 450px;
 }
 
@@ -33,10 +33,6 @@
     background: #000000;
 }
 
-#nf-about-content {
-    margin: 10px 0px 0px 0px;
-}
-
 #nf-version {
     font-weight:500;
     font-size: 13px;

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/modal/jquery.modal.js

@@ -47,7 +47,8 @@
  *   }],
  *   handler: {
  *      close: closeHandler,
- *      open: openHandler
+ *      open: openHandler,
+ *      resize: resizeHandler
  *   }
  * }
  *
@@ -177,6 +178,13 @@
                         }
                     }
 
+                    // save the open handler
+                    if (isDefinedAndNotNull(options.handler)) {
+                        if (isDefinedAndNotNull(options.handler.resize)) {
+                            nfDialog.resize = options.handler.resize;
+                        }
+                    }
+
                     // save the scrollable class name
                     if (isDefinedAndNotNull(options.scrollableContentStyle)) {
                         nfDialog.scrollableContentStyle = options.scrollableContentStyle;
@@ -232,6 +240,25 @@
             });
         },
 
+        /**
+         * Sets the handler that is used when the dialog is resized.
+         *
+         * @argument {function} handler The function to call when resizing the dialog
+         */
+        setResizeHandler: function (handler) {
+            return this.each(function (index, dialog) {
+
+                var nfDialog = {};
+                if (isDefinedAndNotNull($(this).data('nf-dialog'))) {
+                    nfDialog = $(dialog).data('nf-dialog');
+                }
+                nfDialog.resize = handler;
+
+                //persist data attribute
+                $(dialog).data('nfDialog', nfDialog);
+            });
+        },
+
         /**
          * Updates the button model for the selected dialog.
          *
@@ -417,6 +444,12 @@
                     dialogContent.removeClass(nfDialog.scrollableContentStyle);
                 }
             }
+
+            // invoke the handler
+            var handler = dialog.data('nf-dialog').resize;
+            if (isDefinedAndNotNull(handler) && typeof handler === 'function') {
+                handler.call(dialog);
+            }
         },
 
         /**

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/tagcloud/jquery.tagcloud.js

@@ -78,7 +78,7 @@
         if (!tagFilterExists) {
             // create the list item content
             var tagText = $('<div class="selected-tag-text"></div>').text(tag);
-            var removeTagIcon = $('<div class="fa fa-close pointer"></div>').click(function () {
+            var removeTagIcon = $('<div class="fa fa-close remove-selected-tag pointer"></div>').click(function () {
                 // remove this tag
                 $(this).closest('li').remove();
 

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-global-menu-controller.js

@@ -289,9 +289,18 @@ nf.ng.Canvas.GlobalMenuCtrl = function (serviceProvider) {
                 init: function () {
                     var self = this;
 
+                    var resizeAbout = function(){
+                        var dialog = $(this);
+                        var top = $('#nf-about-pic-container').height() + $('.dialog-header').height() + 10; //10 for padding-top
+                        dialog.find('.dialog-content').css('top', top);
+                    };
+
                     this.getElement().modal({
                         scrollableContentStyle: 'scrollable',
                         headerText: 'About Apache NiFi',
+                        handler: {
+                          resize: resizeAbout
+                        },
                         buttons: [{
                             buttonText: 'Ok',
                             color: {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/header/components/nf-ng-processor-component.js

@@ -566,14 +566,12 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
                 }]);
 
             // set a new handler for closing the the dialog
-            this.modal.update('setCloseHandler', {
-                close: function () {
-                    // remove the handler
-                    grid.onDblClick.unsubscribe(gridDoubleClick);
+            this.modal.update('setCloseHandler', function () {
+                // remove the handler
+                grid.onDblClick.unsubscribe(gridDoubleClick);
 
-                    // clear the current filters
-                    resetProcessorDialog();
-                }
+                // clear the current filters
+                resetProcessorDialog();
             });
 
             // show the dialog

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/nf-shell.js

@@ -94,13 +94,13 @@ nf.Shell = (function () {
                 shell.empty();
 
                 // register a new close handler
-                $('#shell-dialog').modal('setCloseHandler', {
-                    close: function () {
-                        deferred.resolve();
-                    },
-                    open: function () {
-                        nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
-                    }
+                $('#shell-dialog').modal('setCloseHandler', function () {
+                    deferred.resolve();
+                });
+
+                // register a new open handler
+                $('#shell-dialog').modal('setOpenHandler', function () {
+                    nf.Common.toggleScrollable($('#' + this.find('.tab-container').attr('id') + '-content').get(0));
                 });
 
                 // show the custom processor ui
@@ -150,13 +150,11 @@ nf.Shell = (function () {
                     content.detach();
 
                     // register a new close handler
-                    $('#shell-dialog').modal('setCloseHandler', {
-                        close: function () {
-                            deferred.resolve();
+                    $('#shell-dialog').modal('setCloseHandler', function () {
+                        deferred.resolve();
 
-                            // detach the content and add it back to the parent
-                            content.hide().detach().appendTo(parent);
-                        }
+                        // detach the content and add it back to the parent
+                        content.hide().detach().appendTo(parent);
                     });
 
                     // hide the undock button