[NIFI-2038] Make component buttons larger, add hover icon, and add grip across bottom

[NIFI-2031] update global menu styles
[NIFI-2037] Increase header icons font sizes
[NIFI-2036] update logo
[NIFI-2144] consistent view details icons
This closes #604

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/canvas-header.jsp

@@ -20,52 +20,60 @@
     <div flex layout="row" layout-align="space-between center">
         <div id="component-container">
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.processor}}"
-                    id="processor-component" class="component-button"
+                    id="processor-component"
+                    class="component-button icon icon-processor"
                     ng-disabled="!appCtrl.nf.Canvas.canWrite();"
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.processorComponent);">
-                <div class="icon icon-processor"></div>
+                <span class="component-button-grip"></span>
             </button>
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.inputPort}}"
-                    id="port-in-component" class="component-button"
+                    id="port-in-component"
+                    class="component-button icon icon-port-in"
                     ng-disabled="!appCtrl.nf.Canvas.canWrite();"
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.inputPortComponent);">
-                <div class="icon icon-port-in"></div>
+                <span class="component-button-grip"></span>
             </button>
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.outputPort}}"
-                    id="port-out-component" class="component-button"
+                    id="port-out-component"
+                    class="component-button icon icon-port-out"
                     ng-disabled="!appCtrl.nf.Canvas.canWrite();"
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.outputPortComponent);">
-                <div class="icon icon-port-out"></div>
+                <span class="component-button-grip"></span>
             </button>
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.processGroup}}"
-                    id="group-component" class="component-button"
+                    id="group-component"
+                    class="component-button icon icon-group"
                     ng-disabled="!appCtrl.nf.Canvas.canWrite();"
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.groupComponent);">
-                <div class="icon icon-group"></div>
+                <span class="component-button-grip"></span>
             </button>
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.remoteProcessGroup}}"
-                    id="group-remote-component" class="component-button"
+                    id="group-remote-component"
+                    class="component-button icon icon-group-remote"
                     ng-disabled="!appCtrl.nf.Canvas.canWrite();"
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.remoteGroupComponent);">
-                <div class="icon icon-group-remote"></div>
+                <span class="component-button-grip"></span>
             </button>
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.funnel}}"
-                    id="funnel-component" class="component-button"
+                    id="funnel-component"
+                    class="component-button icon icon-funnel"
                     ng-disabled="!appCtrl.nf.Canvas.canWrite();"
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.funnelComponent);">
-                <div class="icon icon-funnel"></div>
+                <span class="component-button-grip"></span>
             </button>
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.template}}"
-                    id="template-component" class="component-button"
+                    id="template-component"
+                    class="component-button icon icon-template"
                     ng-disabled="!appCtrl.nf.Canvas.canWrite();"
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.templateComponent);">
-                <div class="icon icon-template"></div>
+                <span class="component-button-grip"></span>
             </button>
             <button title="{{appCtrl.serviceProvider.headerCtrl.toolboxCtrl.config.type.label}}"
-                    id="label-component" class="component-button"
+                    id="label-component"
+                    class="component-button icon icon-label"
                     ng-disabled="!appCtrl.nf.Canvas.canWrite();"
                     nf-draggable="appCtrl.serviceProvider.headerCtrl.toolboxCtrl.draggableComponentConfig(appCtrl.serviceProvider.headerCtrl.toolboxCtrl.labelComponent);">
-                <div class="icon icon-label"></div>
+                <span class="component-button-grip"></span>
             </button>
         </div>
         <div layout="row" layout-align="space-between center">

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

@@ -34,12 +34,13 @@ md-toolbar.md-small .md-toolbar-tools {
 }
 
 #header .icon {
-    font-size:30px;
+    font-size:32px;
     color: #004849;
+    padding-left:12px
 }
 
 #header .fa {
-    font-size:30px;
+    font-size:32px;
     color: #004849;
 }
 
@@ -63,32 +64,28 @@ md-toolbar.md-small .md-toolbar-tools {
 
 #nifi-logo {
     height: 37px;
-    margin: 0 20px 0 15px;
+    margin:0 20px 3px 15px;
 }
 
 #global-menu-button {
-    background-color:#AABBC3; /*tint base-color 40%*/
+    background-color: #AABBC1; /*tint base-color 40%*/
-    border:1px solid #AABBC3; /*tint base-color 40%*/
+    border: 0;
-    border-top-left-radius:2px;
-    border-top-right-radius:2px;
-    margin:0 10px;
     cursor: pointer;
-    height: 40px;
+    height: 56px;
-    width: 40px;
+    width: 63px;
 }
 
 #global-menu-button:hover {
-    background-color:#C7D2D7; /*tint base-color 60%*/
+    background-color: #e3e8eb; /*tint base-color 60%*/
-    box-shadow:0 1px 1px rgba(0,0,0,0.15);
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
 }
 
 #global-menu-content {
     font-size: 13px;
-    padding: 0px 0;
+    padding: 3px 0;
     background-color: rgba(249, 250, 251, 0.97); /*tint base-color 96%*/
     border: 1px solid #004849; /*link-color*/
-    border-radius:2px;
+    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.3);
-    box-shadow:0 2px 3px rgba(0,0,0,0.35);
     width: 215px;
     max-height: inherit;
 }
@@ -141,21 +138,27 @@ md-toolbar.md-small .md-toolbar-tools {
 
 
 #header .component-button {
-    background-color:#AABBC3; /*tint base-color 40%*/
+    background: none;
-    border-radius:2px;
+    height: 56px;
+    position: relative;
+    width: 56px;
     border: none;
-    height: 40px;
-    width: 40px;
 }
 
 #header .component-button:hover {
-    background-color:#C7D2D7; /*tint base-color 60%*/
+    background-color: #e3e8eb;
-    box-shadow:0 1px 1px rgba(0,0,0,0.15);
+    box-shadow: 0 3px 6px rgba(0,0,0,0.3);
     cursor:grab;
     cursor:-moz-grab;
     cursor:-webkit-grab;
 }
 
+#header .component-button:active {
+    cursor: grabbing;
+    cursor: -webkit-grabbing;
+    cursor: -moz-grabbing;
+}
+
 #header .component-button:disabled {
     background-color:#AABBC3; /*tint base-color 40%*/
     cursor:not-allowed;
@@ -166,6 +169,15 @@ md-toolbar.md-small .md-toolbar-tools {
     color:#669192;
 }
 
+.component-button-grip {
+    background: repeating-linear-gradient(90deg,rgba(170,187,195,1),rgba(170,187,195,1) 4px,rgba(170,187,195,0) 4px,rgba(170,187,195,0) 6px);
+    bottom: 2px;
+    height: 4px;
+    left: 2px;
+    position: absolute;
+    width: 52px;
+}
+
 /* styles for the status link */
 
 #anonymous-user-alert {

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/images/nifi-logo.svg

@@ -14,4 +14,4 @@
     See the License for the specific language governing permissions and
     limitations under the License.
 -->
-<svg id="nifi-logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 89 37"><defs><style>.cls-1{fill:#728e9b;}.cls-2{fill:#e3e8eb;}</style></defs><title>Untitled-1</title><path id="drop" class="cls-1" d="M75.09 35.88a12.55 12.55 0 0 1-12.55-12.55c0-6 4.68-11.69 7.88-15.87A45.4 45.4 0 0 0 75.09 0a45.38 45.38 0 0 0 4.68 7.43c3.2 4.18 7.88 9.9 7.88 15.87h-8v4.6h-4.6v8zm4.91-3v-4.1h-4.1v4.1H80zm-4.1 4.1a12.24 12.24 0 0 0 4.1-.79v-2.11h-4.1v2.85zm8.7-8.7v-4.1h-4.1v4.1h4.1zm.24 5.34l.51-.51v-3.63h-4.1v4.1h3.59zM81.52 37a12.26 12.26 0 0 0 3-1.86h-3V37zm6.38-8.73a12.21 12.21 0 0 0 .79-4.1h-2.85v4.1h2.06zm-1 4.55a12.24 12.24 0 0 0 1.86-3h-1.9v3z"/><path id="fi" class="cls-2" d="M33.07 14.89v-4.37h3.25V7.68a7.64 7.64 0 0 1 .46-2.83A4.47 4.47 0 0 1 38.11 3a5.26 5.26 0 0 1 2.11-1A11.93 11.93 0 0 1 43 1.69q1.72 0 3.44.14v4.55a3.55 3.55 0 0 0-.65 0h-.59a3 3 0 0 0-1.91.46 1.89 1.89 0 0 0-.56 1.53v2.18h3.72v4.37h-3.71v20.6h-6.42V14.89h-3.25zM50.27 2v5.45h6.41V2h-6.41zm0 8.55v25h6.41v-25h-6.41z"/><path id="ni" class="cls-1" d="M6.41 10.52v2.93h.09a6.51 6.51 0 0 1 2.65-2.72 7.84 7.84 0 0 1 3.72-.86 6.33 6.33 0 0 1 4.72 1.67q1.65 1.67 1.65 5.44v18.54h-6.42V18.28a4.29 4.29 0 0 0-.65-2.72 2.6 2.6 0 0 0-2.09-.77q-3.39 0-3.39 4.14v16.59H.27v-25h6.14zM23.54 2v5.45H30V2h-6.46zm0 8.55v25H30v-25h-6.46z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="1275 1191 270.156 114.21"><defs><style>.a{fill:#6a8791;}.b{fill:#ebf0f2;}</style></defs><g transform="translate(1275 1191)"><path class="a" d="M19.069,33.206v9.1h.289a20.231,20.231,0,0,1,8.236-8.452,24.366,24.366,0,0,1,11.557-2.673q9.535,0,14.663,5.2t5.129,16.9V110.93H39.007v-53.6q0-6.068-2.022-8.451t-6.5-2.384q-10.548,0-10.546,12.858v51.576H0V33.206Z" transform="translate(0 -1.199)"/><rect class="a" width="19.937" height="17.047" transform="translate(72.338 5.424)"/><rect class="a" width="19.937" height="77.725" transform="translate(72.338 32.007)"/><g transform="translate(188.753 0)"><path class="a" d="M235.332,110.859A39.029,39.029,0,0,1,196.3,71.83c0-18.555,14.538-36.338,24.483-49.32A146.1,146.1,0,0,0,234.927.253a.451.451,0,0,1,.811,0A146.04,146.04,0,0,0,249.88,22.51c9.941,12.979,24.484,30.765,24.484,49.32H250.547a.917.917,0,0,0-.916.916V86.131H236.25a.917.917,0,0,0-.916.916v23.812Z" transform="translate(-196.303 0)"/><path class="a" d="M252.248,104.929V92.185H240.417a.917.917,0,0,0-.916.916v11.828Z" transform="translate(-197.965 -3.545)"/><path class="a" d="M239.5,118.325a38.062,38.062,0,0,0,12.747-2.451v-6.419H240.417a.917.917,0,0,0-.916.916Z" transform="translate(-197.965 -4.21)"/><path class="a" d="M267.115,90.054V77.311H255.287a.917.917,0,0,0-.916.916V90.053h12.744Z" transform="translate(-198.537 -2.973)"/><path class="a" d="M268.737,106.559l.015-.015a2.675,2.675,0,0,0,.766-1.89V94.581H256.773v12.747h10.07A2.671,2.671,0,0,0,268.737,106.559Z" transform="translate(-198.629 -3.638)"/><path class="a" d="M257.673,118.546a38.1,38.1,0,0,0,9.423-5.792h-9.423Z" transform="translate(-198.663 -4.337)"/><path class="a" d="M278.058,90.054a37.952,37.952,0,0,0,2.453-12.743h-8.867V90.054Z" transform="translate(-199.201 -2.973)"/><path class="a" d="M274.942,104.906a38.074,38.074,0,0,0,5.789-9.425h-5.789Z" transform="translate(-199.328 -3.672)"/><path class="a" d="M274.942,104.906a38.074,38.074,0,0,0,5.789-9.425h-5.789Z" transform="translate(-199.328 -3.672)"/></g><path class="b" d="M106.031,45.769V32.189h10.112V23.377a23.771,23.771,0,0,1,1.444-8.812A13.905,13.905,0,0,1,121.7,8.785a16.359,16.359,0,0,1,6.573-3.107,37.077,37.077,0,0,1,8.668-.938q5.342,0,10.69.433V19.33a11.014,11.014,0,0,0-2.022-.144h-1.879q-4.191,0-5.923,1.444T136.078,25.4v6.789h11.558V45.769H136.078v64.144H116.141V45.769Z" transform="translate(-4.078 -0.182)"/><rect class="b" width="19.936" height="17.047" transform="translate(155.41 5.424)"/><rect class="b" width="19.936" height="77.725" transform="translate(155.41 32.007)"/><path class="b" d="M227.593,19.637c-.72,1.006-1.429,2.019-2.154,3.02-2.286,3.155-4.694,6.217-7.051,9.319q1.385.192,2.779.425c1.967-3.291,3.968-6.562,5.852-9.9.528-.936,1.044-1.879,1.567-2.819C229,18.938,228.041,19.012,227.593,19.637Z" transform="translate(-8.4 -0.736)"/><path class="b" d="M217.548,37.951c.346-.611.706-1.213,1.059-1.82-1.055-.2-2.111-.4-3.165-.564l-.01,0a130.66,130.66,0,0,0-9.138,14.021c-4.907,8.9-8.311,18.841-6.746,29.1a36.515,36.515,0,0,0,12.167,21.969,35.929,35.929,0,0,0,4.418,3.264.469.469,0,0,0,.574-.735,39.143,39.143,0,0,1-10.557-17.8c-2.92-10.773-.493-21.812,3.665-31.915A138.355,138.355,0,0,1,217.548,37.951Z" transform="translate(-7.661 -1.368)"/></g></svg>

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

@@ -94,12 +94,21 @@ nf.ng.Canvas.ToolboxCtrl = function (processorComponent,
          * NOTE: The `component` must implement a dropHandler.
          */
         draggableComponentConfig: function(component) {
+
+            //add hover effect
+            component.getElement().hover(function () {
+                component.getElement().removeClass(component.icon).addClass(component.hoverIcon);
+            }, function () {
+                component.getElement().removeClass(component.hoverIcon).addClass(component.icon);
+            })
+
             return {
                 zIndex: 1011,
                 revert: true,
                 revertDuration: 0,
                 cancel: false,
                 containment: 'body',
+                cursor: '-webkit-grabbing',
                 start: function (e, ui) {
                     // hide the context menu if necessary
                     nf.ContextMenu.hide();

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

@@ -21,6 +21,9 @@ nf.ng.FunnelComponent = function (serviceProvider) {
     'use strict';
 
     function FunnelComponent() {
+        this.icon = 'icon icon-funnel';
+
+        this.hoverIcon = 'icon icon-funnel-add';
     }
     FunnelComponent.prototype = {
         constructor: FunnelComponent,

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

@@ -69,6 +69,10 @@ nf.ng.GroupComponent = function (serviceProvider) {
 
     function GroupComponent() {
 
+        this.icon = 'icon icon-group';
+
+        this.hoverIcon = 'icon icon-group-add';
+
         /**
          * The group component's modal.
          */

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

@@ -69,6 +69,10 @@ nf.ng.InputPortComponent = function (serviceProvider) {
 
     function InputPortComponent() {
 
+        this.icon = 'icon icon-port-in';
+
+        this.hoverIcon = 'icon icon-port-in-add';
+
         /**
          * The input port component's modal.
          */

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

@@ -21,6 +21,9 @@ nf.ng.LabelComponent = function (serviceProvider) {
     'use strict';
 
     function LabelComponent() {
+        this.icon = 'icon icon-label';
+
+        this.hoverIcon = 'icon icon-label-add';
     }
     LabelComponent.prototype = {
         constructor: LabelComponent,

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

@@ -69,6 +69,10 @@ nf.ng.OutputPortComponent = function (serviceProvider) {
 
     function OutputPortComponent() {
 
+        this.icon = 'icon icon-port-out';
+
+        this.hoverIcon = 'icon icon-port-out-add';
+
         /**
          * The output port component's modal.
          */

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

@@ -244,6 +244,10 @@ nf.ng.ProcessorComponent = function (serviceProvider) {
 
     function ProcessorComponent() {
 
+        this.icon = 'icon icon-processor';
+
+        this.hoverIcon = 'icon icon-processor-add';
+
         /**
          * The processor component's modal.
          */

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

@@ -97,6 +97,10 @@ nf.ng.RemoteProcessGroupComponent = function (serviceProvider) {
 
     function RemoteProcessGroupComponent() {
 
+        this.icon = 'icon icon-group-remote';
+
+        this.hoverIcon = 'icon icon-group-remote-add';
+
         /**
          * The remote group component's modal.
          */

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

@@ -56,6 +56,10 @@ nf.ng.TemplateComponent = function (serviceProvider) {
 
     function TemplateComponent() {
 
+        this.icon = 'icon icon-template';
+
+        this.hoverIcon = 'icon icon-template-add';
+
         /**
          * The template component's modal.
          */

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-controller-services.js

@@ -496,7 +496,7 @@ nf.ControllerServices = (function () {
                 return '';
             }
             
-            var markup = '<div class="pointer view-controller-service fa fa-info" title="View Details" style="margin-top: 5px; float: left;" ></div>';
+            var markup = '<div class="pointer view-controller-service fa fa-info-circle" title="View Details" style="margin-top: 5px; float: left;" ></div>';
 
             // always include a button to view the usage
             markup += '<div title="Usage" class="pointer controller-service-usage fa fa-book" style="margin-left: -2px; margin-top: 5px; float: left;" ></div>';

nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/nf-queue-listing.js

@@ -518,7 +518,7 @@ nf.QueueListing = (function () {
 
             // define a custom formatter for showing more processor details
             var moreDetailsFormatter = function (row, cell, value, columnDef, dataContext) {
-                return '<div class="pointer show-flowfile-details fa fa-info" title="View Details" style="margin-top: 5px; float: left;"></div>';
+                return '<div class="pointer show-flowfile-details fa fa-info-circle" title="View Details" style="margin-top: 5px; float: left;"></div>';
             };
 
             // function for formatting data sizes

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

@@ -622,7 +622,7 @@ nf.SummaryTable = (function () {
 
         // define a custom formatter for showing more processor details
         var moreConnectionDetails = function (row, cell, value, columnDef, dataContext) {
-            return '<div class="pointer show-connection-details fa fa-info" title="View Details" style="margin-top: 5px;"></div>';
+            return '<div class="pointer show-connection-details fa fa-info-circle" title="View Details" style="margin-top: 5px;"></div>';
         };
 
         // define the input, read, written, and output columns (reused between both tables)