From ac2cf769d5b10037aa9d2d2af4b160ddc7b638bd Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 12 Nov 2015 13:26:04 +0100
Subject: [PATCH] refactor cells so cells with and without editors are separate
 divs

---
 .../src/less/gridview.less                    |  28 ++-
 .../src/views/propertyeditors/grid/grid.html  | 169 ++++++++----------
 2 files changed, 100 insertions(+), 97 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 22e7b42a67..c9ae307efe 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -149,26 +149,42 @@
 
 // CELL
 // -------------------------
-.umb-grid .umb-cell{
+.umb-grid .umb-cell {
      position: relative;
      background-color: #ffffff;
      padding: 10px;
 }
 
 .umb-grid .umb-cell-content {
-   background-color: @grayLighter;
    min-height: 130px;
    display: block;
-   border: 2px solid transparent;
    box-sizing: border-box;
-   transition: border 100ms linear;
 }
 
-.umb-grid .umb-cell-content:hover {
-   border: 2px solid @blue;
+.umb-grid .umb-cell-content.-placeholder {
+   background-color: @grayLighter;
+   border-width: 2px;
+   border-style: solid;
+   border-color: transparent;
+   transition: border-color 100ms linear;
+}
+
+.umb-grid .umb-cell-content.-placeholder:hover {
+   border-color: @blue;
    cursor: pointer;
 }
 
+.umb-grid .umb-cell-content.-has-editors {
+   background-color: transparent;
+   border-style: solid;
+   border-width: 1px;
+   border-color: @grayLight;
+}
+
+.umb-grid .umb-cell-content.-has-editors:hover {
+   cursor: auto;
+}
+
 .umb-grid  .cell-tools {
     transition: all .20s ease-in-out;
     -moz-transition: all .20s ease-in-out;
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 ce0da74c2b..e12a4bc7a1 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
@@ -111,116 +111,103 @@
                                         <div class="tr">
 
                                             <!-- Areas in row -->
-                                            <div ng-style="{width: area.$percentage + '%'}"
-                                                 class="td mainTd umb-cell"
-                                                 ng-class="{last:$last,first:$first, infohighlight:currentInfohighlightArea == area,
-                                                            warnhighlight:currentWarnhighlightArea == area}"
+                                            <div class="umb-cell td mainTd"
                                                  ng-repeat="area in row.areas"
+                                                 ng-style="{width: area.$percentage + '%'}"
+                                                 ng-class="{
+                                                    'last':$last,
+                                                    'first':$first,
+                                                    'infohighlight':currentInfohighlightArea == area,
+                                                    'warnhighlight':currentWarnhighlightArea == area}"
                                                  ui-sortable="sortableOptionsCell"
-                                                 ng-model="area.controls"
-                                                 ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
+                                                 ng-model="area.controls">
 
-                                                <div class="umb-cell-content">
+                                                 <!-- Cell placeholder -->
+                                                 <div class="umb-cell-content -placeholder"
+                                                      ng-if="area.controls.length === 0"
+                                                      ng-click="openEditorOverlay($event, area, 0, area.$uniqueId);">
+                                                      <a href="" class="cell-tools-add">Add editor</a>
+                                                 </div>
 
-                                                   <!-- Controls in areas -->
-                                                   <div ng-repeat="control in area.controls"
-                                                        ng-mouseover="setCurrentControl(control)"
-                                                        ng-mouseleave="disableCurrentControl(control)"
-                                                        ng-animate="'fade'"
-                                                        class="umb-control">
+                                                 <!-- Cell with editors -->
+                                                 <div class="umb-cell-content -has-editors"
+                                                      ng-if="area.controls.length > 0">
 
-                                                       <!-- Filled cell tools -->
-                                                       <div class="cell-tools"
-                                                            ng-class="{'with-prompt': control.deletePrompt}"
-                                                            ng-animate="'fade'"
-                                                            ng-if="control && (currentControl == control)">
+                                                      <!-- Controls in areas -->
+                                                      <div ng-repeat="control in area.controls"
+                                                          ng-mouseover="setCurrentControl(control)"
+                                                          ng-mouseleave="disableCurrentControl(control)"
+                                                          ng-animate="'fade'"
+                                                          class="umb-control">
 
-                                                           <!-- delete control -->
-                                                           <div class="cell-tools-remove">
-                                                               <div class="iconBox"
-                                                                    ng-click="showPrompt(control)"
-                                                                    ng-mouseover="setWarnhighlightControl(control)"
-                                                                    ng-mouseleave="disableWarnhighlightControl(control)">
+                                                          <!-- Filled cell tools -->
+                                                          <div class="cell-tools"
+                                                               ng-class="{'with-prompt': control.deletePrompt}"
+                                                               ng-animate="'fade'"
+                                                               ng-if="control && (currentControl == control)">
 
-                                                                   <span class="prompt" ng-if="control.deletePrompt">
-                                                                       <localize key="general_areyousure" />
-                                                                       <a href ng-click="removeControl(area, $index)"><localize key="general_yes" /></a>
-                                                                       <a href ng-click="clearPrompt(control, $event)"><localize key="general_no" /></a>
-                                                                   </span>
+                                                             <!-- delete control -->
+                                                             <div class="cell-tools-remove">
+                                                                  <div class="iconBox"
+                                                                       ng-click="showPrompt(control)"
+                                                                       ng-mouseover="setWarnhighlightControl(control)"
+                                                                       ng-mouseleave="disableWarnhighlightControl(control)">
 
-                                                                   <i ng-if="!control.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
-                                                               </div>
-                                                           </div>
+                                                                      <span class="prompt" ng-if="control.deletePrompt">
+                                                                          <localize key="general_areyousure" />
+                                                                          <a href ng-click="removeControl(area, $index)"><localize key="general_yes" /></a>
+                                                                          <a href ng-click="clearPrompt(control, $event)"><localize key="general_no" /></a>
+                                                                      </span>
 
-                                                           <!-- move control -->
-                                                           <div class="cell-tools-move">
-                                                               <a class="iconBox"
-                                                                  ng-mouseover="setInfohighlightControl(control)"
-                                                                  ng-mouseleave="disableInfohighlightControl(control)"
-                                                                  href>
-                                                                   <i class="icon icon-navigation" title="@general_move" localize="title"></i>
-                                                               </a>
-                                                           </div>
+                                                                      <i ng-if="!control.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
+                                                                  </div>
+                                                             </div>
 
-                                                           <!-- setting area -->
-                                                           <div class="cell-tools-edit" ng-if="hasSettings && $first">
-                                                               <a class="iconBox"
-                                                                  ng-mouseover="setInfohighlightArea(area)"
-                                                                  ng-mouseleave="disableInfohighlightArea(area)"
-                                                                  ng-click="editGridItemSettings(area, 'cell')"
-                                                                  href>
-                                                                   <i class="icon icon-settings" title="@grid_settings" localize="title"></i>
-                                                               </a>
-                                                           </div>
+                                                             <!-- move control -->
+                                                             <div class="cell-tools-move">
+                                                                  <a class="iconBox"
+                                                                     ng-mouseover="setInfohighlightControl(control)"
+                                                                     ng-mouseleave="disableInfohighlightControl(control)"
+                                                                     href>
+                                                                      <i class="icon icon-navigation" title="@general_move" localize="title"></i>
+                                                                  </a>
+                                                             </div>
 
-                                                       </div>
+                                                             <!-- setting area -->
+                                                             <div class="cell-tools-edit" ng-if="hasSettings && $first">
+                                                                  <a class="iconBox"
+                                                                     ng-mouseover="setInfohighlightArea(area)"
+                                                                     ng-mouseleave="disableInfohighlightArea(area)"
+                                                                     ng-click="editGridItemSettings(area, 'cell')"
+                                                                     href>
+                                                                      <i class="icon icon-settings" title="@grid_settings" localize="title"></i>
+                                                                  </a>
+                                                             </div>
 
-                                                       <div class="umb-control-inner" ng-class="{last:$last,
-                                                                  infohighlight:currentInfohighlightControl == control,
-                                                                  warnhighlight:currentWarnhighlightControl == control,
-                                                                  selectedControl:currentControl == control}">
+                                                          </div>
 
-                                                           <ins class="item-label">{{control.editor.name}}</ins>
+                                                          <div class="umb-control-inner" ng-class="{last:$last,
+                                                                     infohighlight:currentInfohighlightControl == control,
+                                                                     warnhighlight:currentWarnhighlightControl == control,
+                                                                     selectedControl:currentControl == control}">
 
-                                                           <!-- Redering the editor for specific control -->
-                                                           <div ng-if="control && control.$editorPath"
-                                                                ng-include="control.$editorPath"
-                                                                class="umb-cell-{{control.editor.view}}">
-                                                           </div>
-                                                       </div>
-                                                   </div>
-                                                <!-- Controls repeat end -->
-                                                <!-- if area is empty tools -->
+                                                             <ins class="item-label">{{control.editor.name}}</ins>
 
-                                                </div>
+                                                             <!-- Redering the editor for specific control -->
+                                                             <div ng-if="control && control.$editorPath"
+                                                                   ng-include="control.$editorPath"
+                                                                   class="umb-cell-{{control.editor.view}}">
+                                                             </div>
+                                                          </div>
+                                                      </div>
+                                                   <!-- Controls repeat end -->
+                                                   <!-- if area is empty tools -->
 
-                                                <!--
-                                                <div class="umb-control umb-control-placeholder"
-                                                     ng-if="area.controls.length == 0">
-                                                    <div class="help-text" style="margin-bottom: 15px">
-                                                        <localize key="grid_addElement"/>
-                                                    </div><br />
-                                                </div>
-                                                --->
-
-                                                <a href="" class="cell-tools-add">Add editor</a>
-
-                                                <!--
-                                                <div class="cell-tools-add"
-                                                     ng-class="{emptyArea:area.controls.length == 0}"
-                                                     ng-if="!currentToolsControl"
-                                                     ng-animate="'fade'">
-
-                                                    <a class="iconBox" href ng-click="addItemOverlay($event, area, 0, area.$uniqueId);">
-                                                        <i class=" icon icon-add" title="@general_add" localize="title"></i>
-                                                    </a>
-
-                                                    <div ng-if="overlayMenu.show && overlayMenu.key == area.$uniqueId" ng-include="'views/propertyeditors/grid/dialogs/additem.html'"></div>
-                                                </div>
-                                                --->
+                                                 </div>
 
                                             </div>
                                             <!-- cells repeat end -->
+
                                         </div>
                                     </div>
                                 </div>