From 4bc5bb9c648fb155f3a3f1a8d9113eb721cd2209 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 16 Nov 2015 10:57:06 +0100
Subject: [PATCH] style control bars + add outside click to deselect controls
 and cells

---
 .../src/less/gridview.less                    | 27 ++++++++++++++++--
 .../propertyeditors/grid/grid.controller.js   | 28 +++++++++++++++++--
 .../src/views/propertyeditors/grid/grid.html  | 19 +++++++------
 3 files changed, 61 insertions(+), 13 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 9bd3efa7e2..ba0267b2f2 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -177,6 +177,11 @@
    border-color: @blue;
 }
 
+.umb-grid .umb-cell-tool {
+
+}
+
+/*
 .umb-grid  .cell-tools {
     transition: all .20s ease-in-out;
     -moz-transition: all .20s ease-in-out;
@@ -199,6 +204,7 @@
 .umb-grid .cell-tools:hover{
     opacity: 1;
 }
+*/
 
 .umb-grid .cell-tools-add {
    color: @blue;
@@ -665,16 +671,33 @@
  .umb-grid .umb-control-bar {
     opacity: 0;
     background: @blue;
-    padding: 2px 10px;
-    display: block;
+    padding: 2px 5px;
     color: #ffffff;
     font-size: 10px;
+    height: 0;
+    display: flex;
+    transition: height 0.1s ease-in, opacity 0.1s ease-in;
+    align-items: center;
+ }
+
+ .umb-grid .umb-control-title {
+    display: flex;
+    align-items: center;
  }
 
   .umb-grid .umb-control.-active .umb-control-bar {
      opacity: 1;
+     height: 25px;
  }
 
+.umb-grid .umb-control-tools {
+   margin-left: auto;
+}
+
+.umb-grid .umb-control-tool {
+   font-size: 16px;
+   margin-right: 5px;
+}
 
 
  /**************************************************************************************************/
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
index 4701c54ab7..705b16dc76 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.controller.js
@@ -213,9 +213,14 @@ angular.module("umbraco")
         // Row management function
         // *********************************************
 
-        $scope.clickRow = function (row) {
+        $scope.clickRow = function (row, event) {
            $scope.currentRow = null;
+           $scope.currentCell = null;
+           $scope.currentControl = null;
+
            $scope.currentRow = row;
+
+           event.stopPropagation();
         };
 
         $scope.setWarnighlightRow = function (row) {
@@ -305,9 +310,16 @@ angular.module("umbraco")
         // Area management functions
         // *********************************************
 
-        $scope.clickCell = function (cell) {
+        $scope.clickCell = function (cell, row, event) {
+
+           $scope.currentRow = null;
            $scope.currentCell = null;
+           $scope.currentControl = null;
+
+           $scope.currentRow = row;
            $scope.currentCell = cell;
+
+           event.stopPropagation();
         };
 
         $scope.setCurrentCell = function (cell) {
@@ -339,9 +351,16 @@ angular.module("umbraco")
         // *********************************************
         // Control management functions
         // *********************************************
-        $scope.clickControl = function (control) {
+        $scope.clickControl = function (control, cell, row, event) {
+            $scope.currentRow = null;
+            $scope.currentCell = null;
             $scope.currentControl = null;
+
+            $scope.currentRow = row;
+            $scope.currentCell = cell;
             $scope.currentControl = control;
+
+            event.stopPropagation();
         };
 
         $scope.disableCurrentControl = function (Control) {
@@ -403,6 +422,9 @@ angular.module("umbraco")
                 index = cell.controls.length;
             }
 
+            $scope.currentControl = null;
+            $scope.currentControl = newControl;
+
             //populate control
             $scope.initControl(newControl, index + 1);
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
index 06dcb2ce34..fbcc3b85fa 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.html
@@ -54,7 +54,7 @@
                         <!-- ng-mouseleave="disableCurrentRow()"  -->
                         <div class="umb-row"
                              ng-repeat="row in section.rows"
-                             ng-click="clickRow(row)"
+                             ng-click="clickRow(row, $event)"
                              ng-class="{'-active': currentRow === row}">
 
                             <div class="umb-row-title-bar">
@@ -128,7 +128,7 @@
                                                     '-active': currentCell == area}"
                                                  ui-sortable="sortableOptionsCell"
                                                  ng-model="area.controls"
-                                                 ng-click="clickCell(area)">
+                                                 ng-click="clickCell(area, row, $event)">
 
                                                  <!-- Cell placeholder -->
                                                  <div class="umb-cell-content -placeholder"
@@ -146,18 +146,17 @@
                                                       <!-- ng-mouseover="setCurrentControl(control)" -->
                                                       <!-- ng-mouseleave="disableCurrentControl(control)" -->
                                                       <div ng-repeat="control in area.controls"
-                                                          ng-click="clickControl(control)"
+                                                          ng-click="clickControl(control, area, row, $event)"
                                                           ng-class="{'-active': currentControl === control}"
                                                           ng-animate="'fade'"
                                                           class="umb-control">
 
-                                                          <!-- Filled cell tools -->
+                                                          <!-- Filled cell tools
                                                           <div class="cell-tools"
                                                                ng-class="{'with-prompt': control.deletePrompt}"
                                                                ng-animate="'fade'"
                                                                ng-if="control && (currentControl == control)">
 
-                                                             <!-- delete control -->
                                                              <div class="cell-tools-remove">
                                                                   <div class="iconBox"
                                                                        ng-click="showPrompt(control)"
@@ -174,7 +173,6 @@
                                                                   </div>
                                                              </div>
 
-                                                             <!-- move control -->
                                                              <div class="cell-tools-move">
                                                                   <a class="iconBox"
                                                                      ng-mouseover="setInfohighlightControl(control)"
@@ -184,7 +182,6 @@
                                                                   </a>
                                                              </div>
 
-                                                             <!-- setting area -->
                                                              <div class="cell-tools-edit" ng-if="hasSettings && $first">
                                                                   <a class="iconBox"
                                                                      ng-mouseover="setInfohighlightArea(area)"
@@ -196,6 +193,7 @@
                                                              </div>
 
                                                           </div>
+                                                          -->
 
                                                           <div class="umb-control-inner" ng-class="{last:$last,
                                                                      infohighlight:currentInfohighlightControl == control,
@@ -205,11 +203,16 @@
                                                                <div class="umb-control-bar">
 
                                                                   <div class="umb-control-title">
+                                                                     <div class="umb-control-tool">
+                                                                        <i class="umb-control-tool-icon icon-navigation"></i>
+                                                                     </div>
                                                                      {{control.editor.name}}
                                                                   </div>
 
                                                                   <div class="umb-control-tools">
-
+                                                                     <div class="umb-control-tool" ng-click="removeControl(area, $index)">
+                                                                        <i class="umb-control-tool-icon icon-trash"></i>
+                                                                     </div>
                                                                   </div>
 
                                                                </div>