From ed5c44ba532111471976eb04eb8f8967c773d45c Mon Sep 17 00:00:00 2001
From: Scott Aslan <jaslan@hortonworks.com>
Date: Wed, 3 Aug 2016 15:31:38 -0400
Subject: [PATCH] [NIFI-2053] update open/close palettes. This closes #775

---
 .../WEB-INF/partials/canvas/navigation.jsp    | 24 +++++------
 .../src/main/webapp/css/bulletin-board.css    |  2 +-
 .../src/main/webapp/css/navigation.css        | 41 +++++++++++++++----
 .../webapp/css/processor-configuration.css    |  5 ---
 .../slickgrid/css/slick-default-theme.css     | 11 ++---
 .../nf-ng-canvas-graph-controls-controller.js |  4 +-
 6 files changed, 49 insertions(+), 38 deletions(-)

diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp
index b09382fb94..ed67aaa80a 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/WEB-INF/partials/canvas/navigation.jsp
@@ -23,17 +23,15 @@
 </nf-breadcrumbs>
 <div id="graph-controls">
     <div id="navigation-control" class="graph-control">
-        <div class="graph-control-docked pointer" title="Navigate"
+        <div class="graph-control-docked pointer fa fa-compass" title="Navigate"
              ng-click="appCtrl.serviceProvider.graphControlsCtrl.undock($event)">
-            <div class="graph-control-icon fa fa-compass"></div>
         </div>
-        <div class="graph-control-header-container hidden">
-            <div class="graph-control-header-icon">
-                <div class="graph-control-icon fa fa-compass"></div>
+        <div class="graph-control-header-container hidden pointer"
+             ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
+            <div class="graph-control-header-icon fa fa-compass">
             </div>
             <div class="graph-control-header">Navigate</div>
-            <div class="graph-control-header-action"
-                 ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
+            <div class="graph-control-header-action">
                 <div class="graph-control-expansion fa fa-plus-square-o pointer"></div>
             </div>
             <div class="clear"></div>
@@ -65,17 +63,15 @@
         </div>
     </div>
     <div id="operation-control" class="graph-control">
-        <div class="graph-control-docked pointer" title="Operate"
+        <div class="graph-control-docked pointer fa fa-hand-o-up" title="Operate"
              ng-click="appCtrl.serviceProvider.graphControlsCtrl.undock($event)">
-            <div class="graph-control-icon fa fa-hand-o-up"></div>
         </div>
-        <div class="graph-control-header-container hidden">
-            <div class="graph-control-header-icon">
-                <div class="graph-control-icon fa fa-hand-o-up"></div>
+        <div class="graph-control-header-container hidden pointer"
+             ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
+            <div class="graph-control-header-icon fa fa-hand-o-up">
             </div>
             <div class="graph-control-header">Operate</div>
-            <div class="graph-control-header-action"
-                 ng-click="appCtrl.serviceProvider.graphControlsCtrl.expand($event)">
+            <div class="graph-control-header-action">
                 <div class="graph-control-expansion fa fa-plus-square-o pointer"></div>
             </div>
             <div class="clear"></div>
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
index 7a8ffda65d..b7d9b83537 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/bulletin-board.css
@@ -37,7 +37,7 @@
 #bulletin-board-refresh-container {
     position: absolute;
     right: 20px;
-    bottom: 40px;
+    bottom: 0px;
     left: 20px;
 }
 
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css
index 5e2c19da65..2439d229e1 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/navigation.css
@@ -53,9 +53,9 @@
     margin-left: -1px;
 }
 
-#graph-controls .graph-control-icon {
-    font-size: 15px;
+.graph-control-header-icon.fa {
     color: #004849; /*link-color*/
+    margin-left: 7px !important;
 }
 
 div.graph-control {
@@ -64,10 +64,28 @@ div.graph-control {
     border-top: 1px solid #aabbc3;
     border-right: 1px solid #aabbc3;
     border-bottom: 1px solid #aabbc3;
-    padding: 10px;
     margin-bottom: 2px;
 }
 
+.graph-control-content {
+    margin-left: 10px;
+    margin-right: 10px;
+    margin-bottom: 10px;
+}
+
+.docked {
+    height: 32px;
+    width: 32px;
+}
+
+div.graph-control-docked {
+    height: 100%;
+    width: 100%;
+    text-align: center;
+    line-height: 34px;
+    color: #004849;
+}
+
 .docked:hover {
     border-top: 1px solid #004849; /*tint base-color 60%*/
     border-right: 1px solid #004849; /*tint base-color 60%*/
@@ -92,12 +110,14 @@ div.graph-control button:disabled {
 }
 
 div.graph-control div.graph-control-expansion {
-    color: #004849; /*link-color*/
+    color: #728E9B;
+    line-height: 34px;
+    margin-left: 9px !important;
 }
 
 div.graph-control-header-icon {
     float: left;
-    padding: 0 5px 0 0;
+    margin: 8px 10px 0px 0px;
 }
 
 div.graph-control-header {
@@ -106,12 +126,17 @@ div.graph-control-header {
     font-family: 'Roboto Slab';
     color: #262626;
     letter-spacing: 0.05rem;
-    line-height: 15px;
+    margin: 10px 0px;
 }
 
 div.graph-control-header-action {
     float: right;
-    font-size: 15px;
+    height: 32px;
+    width: 32px;
+}
+
+.graph-control-header-container:hover {
+    background: linear-gradient(90deg, rgba(227,232,235,0) 254px, rgba(227,232,235,1) 32px);
 }
 
 /* navigate buttons */
@@ -210,7 +235,7 @@ div.button-spacer-large {
 }
 
 #birdseye {
-    width: 248px;
+    width: 264px;
     height: 150px;
     background: #fff;
     z-index: 1001;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
index 85478e8365..912d2ccc21 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/css/processor-configuration.css
@@ -112,10 +112,6 @@ div.relationship-description {
     outline: none;
 }
 
-#run-duration-labels {
-    font-family: sans-serif;
-}
-
 #run-duration-zero {
     float: left;
 }
@@ -156,7 +152,6 @@ div.relationship-description {
 
 #run-duration-explanation {
     margin-top: 5px;
-    color: #9F6000;
     font-size: 9px;
     font-weight: bold;
     line-height: normal;
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css
index c9b0d68805..780d0d30ca 100755
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/jquery/slickgrid/css/slick-default-theme.css
@@ -102,20 +102,14 @@ classes should alter those!
     border-right: 0px !important;
 }
 
-.grid-canvas *:last-child .fa{
-    float: left;
-}
-
-.grid-canvas *:last-child .icon{
-    float: left;
-}
-
 .slick-viewport .fa {
     color: #004849;
     line-height: 22px;
     margin-top: 0px !important;
     width: 12px;
     height: 12px;
+    float: left;
+    margin-right: 3px !important;
 }
 
 .slick-viewport .icon {
@@ -125,6 +119,7 @@ classes should alter those!
     width: 12px;
     height: 12px;
     float: left;
+    margin-right: 3px !important;
 }
 
 .slick-header.ui-state-default, .slick-headerrow.ui-state-default {
diff --git a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
index 3094547b74..3c44bb149b 100644
--- a/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
+++ b/nifi-nar-bundles/nifi-framework-bundle/nifi-framework/nifi-web/nifi-web-ui/src/main/webapp/js/nf/canvas/controllers/nf-ng-canvas-graph-controls-controller.js
@@ -134,7 +134,7 @@ nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operat
          * @param {jQuery} $event
          */
         undock: function ($event) {
-            openGraphControl($($event.target).parent().parent());
+            openGraphControl($($event.target).parent());
         },
 
         /**
@@ -143,7 +143,7 @@ nf.ng.Canvas.GraphControlsCtrl = function (serviceProvider, navigateCtrl, operat
          */
         expand: function ($event) {
             var icon = $($event.target);
-            if (icon.hasClass('fa-plus-square-o')) {
+            if (icon.find('.fa-plus-square-o').length > 0 || icon.hasClass('fa-plus-square-o') || icon.parent().children().find('.fa-plus-square-o').length > 0) {
                 openGraphControl(icon.closest('div.graph-control'));
             } else {
                 hideGraphControl(icon.closest('div.graph-control'));