From a4bf118f6da00bf9f4163bbdb10fa804361c7aef Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 12 Nov 2015 09:53:21 +0100
Subject: [PATCH] fix cell padding, add rows

---
 .../src/less/gridview.less                    |  62 +++--
 .../src/views/propertyeditors/grid/grid.html  | 219 ++++++++++--------
 2 files changed, 162 insertions(+), 119 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 6f0bf51150..38b12da603 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -95,22 +95,27 @@
  }
  */
 
+/*
  .umb-grid  .tr {
  }
+ */
 
  .umb-grid  .middle {
      text-align: center;
  }
 
+/*
  .umb-grid  .mainTb {
      border-collapse: separate;
  }
+ */
  .umb-grid  .mainTd {
      position:relative;
  }
 
 
 
+
  // COLUMN
  // -------------------------
  .umb-grid  .umb-column {
@@ -146,15 +151,20 @@
 // -------------------------
 .umb-grid .umb-cell{
      position: relative;
-     border: 2px solid transparent;
-     //border: 1px dashed rgba(0,0,0,0);
-     min-height:127px;
-     background-color: @grayLighter;
-     box-sizing: border-box;
-     transition: border 100ms linear;
+     background-color: #ffffff;
+     padding: 10px;
 }
 
-.umb-grid .umb-cell:hover {
+.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;
    cursor: pointer;
 }
@@ -218,11 +228,11 @@
 
 .umb-grid  .cell-tools-remove {
     display:inline-block;
-    position: absolute;
-    top: 0px;
-    right: 5px;
-    text-align: right;
-    z-index: 500;
+    //position: absolute;
+    //top: 0px;
+    //right: 5px;
+    //text-align: right;
+    //z-index: 500;
 }
 
 .umb-grid .cell-tools-remove .iconBox:hover, .umb-grid .cell-tools-remove .iconBox:hover *{
@@ -232,11 +242,11 @@
 
 .umb-grid  .cell-tools-move {
     display:inline-block;
-    position: absolute;
-    top: 33px;
-    right: 5px;
-    z-index: 500;
-    cursor: move
+    //position: absolute;
+    //top: 33px;
+    //right: 5px;
+    //z-index: 500;
+    //cursor: move
 }
 
 .umb-grid .cell-tools-edit{
@@ -286,14 +296,28 @@
 }
 */
 
+.umb-grid .umb-row-title {
+   margin-bottom: 20px;
+   display: block;
+   padding-left: 10px;
+   padding-right: 10px;
+}
+
 .umb-grid ins.item-label {
    text-transform: uppercase;
    font-size: 13px;
    color: @gray;
-   margin-bottom: 20px;
    font-weight: bold;
    text-decoration: none;
-   display: block;
+   display: inline-block;
+}
+
+.umb-grid .row-tools {
+   display: inline-block;
+}
+
+.umb-grid .umb-add-row {
+   text-align: center;
 }
 
 /*
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 754cd8df98..bbe727fa6b 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
@@ -51,63 +51,62 @@
                     <div ui-sortable="sortableOptions" ng-model="section.rows">
 
                         <!-- for each row in template section -->
-                        <div ng-repeat="row in section.rows"
-                             class="umb-row"
-                             ng-mouseenter="setCurrentRow(row)"
-                             ng-mouseleave="disableCurrentRow()">
+                        <!-- ng-mouseenter="setCurrentRow(row)" -->
+                        <!-- ng-mouseleave="disableCurrentRow()"  -->
+                        <div ng-repeat="row in section.rows" class="umb-row">
 
-                            <!-- Row tool -->
-                            <div class="row-tools" ng-animate="'fade'"
-                                ng-if="currentRow === row && currentControl === null">
+                            <div class="umb-row-title">
 
-                                <!-- delete row -->
-                                <div class="cell-tools-remove">
-                                    <div class="iconBox"
-                                         ng-click="showPrompt(row)"
-                                         ng-mouseover="setWarnighlightRow(row)"
-                                         ng-mouseleave="disableWarnhighlightRow(row)">
+                               <ins class="item-label">{{row.name}}</ins>
 
-                                        <span class="prompt" ng-if="row.deletePrompt">
-                                            <localize key="general_areyousure" />
-                                            <a href ng-click="removeRow(section, $index)"><localize key="general_yes" /></a>
-                                            <a href ng-click="clearPrompt(row, $event)"><localize key="general_no" /></a>
-                                        </span>
+                               <!-- Row tool -->
+                               <div class="row-tools">
 
-                                        <i ng-if="!row.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
-                                    </div>
-                                </div>
+                                   <!-- delete row -->
+                                   <div class="cell-tools-remove">
+                                       <div ng-click="showPrompt(row)"
+                                            ng-mouseover="setWarnighlightRow(row)"
+                                            ng-mouseleave="disableWarnhighlightRow(row)">
 
-                                <div class="cell-tools-move">
-                                    <a class="iconBox"
-                                       ng-mouseover="setInfohighlightRow(row)"
-                                       ng-mouseleave="disableInfohighlightRow(row)"
-                                       href>
-                                        <i class="icon icon-navigation" title="@general_move" localize="title"></i>
-                                    </a>
-                                </div>
+                                           <span class="prompt" ng-if="row.deletePrompt">
+                                               <localize key="general_areyousure" />
+                                               <a href ng-click="removeRow(section, $index)"><localize key="general_yes" /></a>
+                                               <a href ng-click="clearPrompt(row, $event)"><localize key="general_no" /></a>
+                                           </span>
 
-                                <div class="cell-tools-edit" ng-if="hasSettings">
-                                    <a class="iconBox"
-                                       ng-mouseover="setInfohighlightRow(row)"
-                                       ng-mouseleave="disableInfohighlightRow(row)"
-                                       ng-click="editGridItemSettings(row, 'row')"
-                                       href>
-                                        <i class="icon icon-settings" title="@grid_settings" localize="title"></i>
-                                    </a>
-                                </div>
+                                           <i ng-if="!row.deletePrompt" class="icon icon-trash" title="@general_delete" localize="title"></i>
+                                       </div>
+                                   </div>
+
+                                   <div class="cell-tools-move">
+                                       <a ng-mouseover="setInfohighlightRow(row)"
+                                          ng-mouseleave="disableInfohighlightRow(row)"
+                                          href>
+                                           <i class="icon icon-navigation" title="@general_move" localize="title"></i>
+                                       </a>
+                                   </div>
+
+                                   <div class="cell-tools-edit" ng-if="hasSettings">
+                                       <a ng-mouseover="setInfohighlightRow(row)"
+                                          ng-mouseleave="disableInfohighlightRow(row)"
+                                          ng-click="editGridItemSettings(row, 'row')"
+                                          href>
+                                           <i class="icon icon-settings" title="@grid_settings" localize="title"></i>
+                                       </a>
+                                   </div>
+
+                               </div>
 
                             </div>
 
                             <!-- row container -->
-                            <div class="{{row.cssClass}} mainContainer umb-row-inner"
+                            <div class="{{row.cssClass}} umb-row-inner"
                                  ng-class="{last:$last,
                                             first:$first,
                                             warnhighlight:currentWarnhighlightRow == row,
                                             infohighlight:currentInfohighlightRow == row,
                                             selectedRow:currentRow == row && currentControl === null}">
 
-                                <ins class="item-label">{{row.name}}</ins>
-
                                 <div class="mainTb">
                                     <div class="tb">
                                         <div class="tr">
@@ -117,78 +116,85 @@
                                                  class="td mainTd umb-cell"
                                                  ng-class="{last:$last,first:$first, infohighlight:currentInfohighlightArea == area,
                                                             warnhighlight:currentWarnhighlightArea == area}"
-                                                 ng-repeat="area in row.areas" ui-sortable="sortableOptionsCell" ng-model="area.controls">
+                                                 ng-repeat="area in row.areas"
+                                                 ui-sortable="sortableOptionsCell"
+                                                 ng-model="area.controls"
+                                                 ng-click="addItemOverlay($event, area, 0, area.$uniqueId);">
 
-                                                <!-- Controls in areas -->
-                                                <div ng-repeat="control in area.controls"
-                                                     ng-mouseover="setCurrentControl(control)"
-                                                     ng-mouseleave="disableCurrentControl(control)"
-                                                     ng-animate="'fade'"
-                                                     class="umb-control">
+                                                <div class="umb-cell-content">
 
-                                                    <!-- 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>
+                                                           <ins class="item-label">{{control.editor.name}}</ins>
+
+                                                           <!-- 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>
+
                                                 <!--
                                                 <div class="umb-control umb-control-placeholder"
                                                      ng-if="area.controls.length == 0">
@@ -229,7 +235,20 @@
                     <!-- row sortable end -->
                     <!-- column tools -->
 
-                    <div class="templates-preview">
+                    <div class="umb-add-row">
+
+                       <a href=""
+                          class="iconBox"
+                          ng-click="toggleAddRow()"
+                          ng-if="!showRowConfigurations">
+
+                          <i class=" icon icon-add" title="@general_add" localize="title"></i>
+
+                       </a>
+
+                    </div>
+
+                    <div class="templates-preview" ng-if="showRowConfigurations">
 
                         <div class="preview-rows columns"
                              ng-repeat="layout in  section.$allowedLayouts"