From fbe49acc77a44bb2fc3eed8825c33a6a8d057dd2 Mon Sep 17 00:00:00 2001
From: antoine <antoine@lecoati.com>
Date: Wed, 23 Jul 2014 10:55:07 +0200
Subject: [PATCH] preview cell with fixed

---
 .../src/less/gridview.less                    |   3 +-
 .../src/views/propertyeditors/grid/grid.html  | 147 ++++++++----------
 2 files changed, 71 insertions(+), 79 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 339100dcea..ed82b4896e 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -574,7 +574,7 @@
 
  .usky-grid  .mainTbpt {
      cursor:pointer;
-     border-spacing: 5px;
+     border-spacing: 3px;
      border-collapse: separate;
      height: 35px;
      border: 2px solid @grayLight;  
@@ -586,6 +586,7 @@
      border: 1px dashed @grayLight;  
      margin:0px;
      background-color: rgba(228, 228, 228, 0.41);
+     overflow: hidden;
  }
 
 
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 fbb6ad2e96..8ec76dd642 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
@@ -41,26 +41,26 @@
                     
                     <!-- for each row in template section -->
                     <div 
-                        ng-repeat="row in section.rows" 
-                        class="usky-row"
-                        ng-mouseover="setCurrentRow(row)" 
-                        ng-mouseleave="disableCurrentRow()"
-                        ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMoveControl == row}">
+                         ng-repeat="row in section.rows"
+                         class="usky-row"
+                         ng-mouseover="setCurrentRow(row)"
+                         ng-mouseleave="disableCurrentRow()"
+                         ng-class="{removingControl:currentRemoveControl == row, movingControl:currentMoveControl == row}">
 
                         <!-- Row tool -->
-                        <div class="row-tools" ng-animate="'fade'" 
-                            ng-if="currentRow == row && currentControl === null">
+                        <div class="row-tools" ng-animate="'fade'"
+                             ng-if="currentRow == row && currentControl === null">
 
                             <!-- delete row -->
                             <div class="cell-tools-remove">
                                 <div class="iconBox"
-                                    ng-click="deletePrompt = true"
-                                    ng-mouseover="setCurrentRemoveControl(row)" 
-                                    ng-mouseleave="disableCurrentRemoveControl(row)">
-                                    
+                                     ng-click="deletePrompt = true"
+                                     ng-mouseover="setCurrentRemoveControl(row)"
+                                     ng-mouseleave="disableCurrentRemoveControl(row)">
+
                                     <span ng-if="deletePrompt">
-                                        Are you sure? 
-                                            <a href style="text-decoration: underline" ng-click="removeRow(section, $index)">Yes</a> 
+                                        Are you sure?
+                                        <a href style="text-decoration: underline" ng-click="removeRow(section, $index)">Yes</a>
                                     </span>
 
                                     <i ng-if="!deletePrompt" class="icon icon-trash"></i>
@@ -69,62 +69,57 @@
 
                             <div class="cell-tools-move">
                                 <div class="iconBox"
-                                    ng-mouseover="setCurrentMoveControl(row)" 
-                                    ng-mouseleave="disableCurrentMoveControl(row)">
+                                     ng-mouseover="setCurrentMoveControl(row)"
+                                     ng-mouseleave="disableCurrentMoveControl(row)">
                                     <i class="icon icon-navigation"></i>
                                 </div>
                             </div>
                         </div>
 
                         <!-- row container -->
-                        <div 
-                            ng-class="{last:$index==model.value.length-1,first:$first}" 
-                            class="{{row.cssClass}} mainContainer">
+                        <div ng-class="{last:$index==model.value.length-1,first:$first}"
+                             class="{{row.cssClass}} mainContainer">
 
                             <div class="mainTb">
                                 <div class="tb">
                                     <div class="tr">
 
                                         <!-- cells in row -->
-                                        <div 
-                                            style="width:{{ area.$percentage }}%"
-                                            ng-class="{last:$last,first:$first}"
-                                            class="td mainTd usky-cell"
-                                            ng-repeat="area in row.areas">                    
+                                        <div style="width:{{ area.$percentage }}%"
+                                             ng-class="{last:$last,first:$first}"
+                                             class="td mainTd usky-cell"
+                                             ng-repeat="area in row.areas">
 
 
                                             <!-- if area is empty tools -->
-                                            <div 
-                                                class="usky-control usky-control-placeholder"
-                                                ng-if="area.controls.length == 0">
+                                            <div class="usky-control usky-control-placeholder"
+                                                 ng-if="area.controls.length == 0">
+
+                                                <div ng-if="area.allowed && area.allowed.length === 1"
+                                                     ng-init="singleEditor = area.$allowedEditors[0]"
+                                                     class="cell-tools-add-single single-editor-{{singleEditor.alias}}">
 
-                                                <div 
-                                                    ng-if="area.allowed && area.allowed.length === 1" 
-                                                    ng-init="singleEditor = area.$allowedEditors[0]" 
-                                                    class="cell-tools-add-single single-editor-{{singleEditor.alias}}">
-                                                    
                                                     <a href ng-click="addControl(singleEditor, area)">
                                                         <i class="icon {{singleEditor.icon}}"></i>
                                                         <div class="help-text">{{singleEditor.name}}</div>
                                                     </a>
 
-                                                    <p class="placeholder" ng-if="area.$allowsRTE" ng-click="addControl(singleEditor, area)"> 
+                                                    <p class="placeholder" ng-if="area.$allowsRTE" ng-click="addControl(singleEditor, area)">
                                                         Start writing here...
                                                     </p>
                                                 </div>
 
                                                 <div ng-if="!area.allowed || area.allowed.length > 1">
 
-                                                    <p class="placeholder" ng-if="area.$allowsRTE" ng-click="addTinyMce(area)"> 
+                                                    <p class="placeholder" ng-if="area.$allowsRTE" ng-click="addTinyMce(area)">
                                                         Start writing here...
                                                     </p>
 
-                                                    <div class="cell-tools-add"> 
-                                                        <div
-                                                            class="iconBox" 
-                                                            ng-repeat="editor in area.$allowedEditors track by editor.alias"
-                                                            ng-click="addControl(editor,area)">
-                                                                <i class="icon {{editor.icon}}"></i>
+                                                    <div class="cell-tools-add">
+                                                        <div class="iconBox"
+                                                             ng-repeat="editor in area.$allowedEditors track by editor.alias"
+                                                             ng-click="addControl(editor,area)">
+                                                            <i class="icon {{editor.icon}}"></i>
                                                         </div>
                                                     </div>
                                                 </div>
@@ -132,50 +127,48 @@
 
 
                                             <!-- Controls in cell -->
-                                            <div
-                                                ng-repeat="control in area.controls"
-                                                ng-class="{last:$last,
+                                            <div ng-repeat="control in area.controls"
+                                                 ng-class="{last:$last,
                                                             removingControl:currentRemoveControl == control,
                                                             toolsControl:currentToolsControl == control,
                                                             selectedControl:currentControl == control}"
-                                                ng-mouseover="setCurrentControl(control)" 
-                                                ng-mouseleave="disableCurrentControl(control)"
-                                                class="usky-control">
-                                               
+                                                 ng-mouseover="setCurrentControl(control)"
+                                                 ng-mouseleave="disableCurrentControl(control)"
+                                                 class="usky-control">
+
                                                 <!-- Filled cell tools -->
                                                 <div class="cell-tools"
-                                                    ng-animate="'fade'" 
-                                                    ng-if="control && ( currentControl == control)">
-                                                    
-                                                    <div class="cell-tools-add" 
-                                                        ng-if="area.max === undefined || area.max < area.controls.length" 
-                                                        ng-mouseover="setCurrentToolsControl(control)" 
-                                                        ng-mouseleave="disableCurrentToolsControl(control)">
+                                                     ng-animate="'fade'"
+                                                     ng-if="control && ( currentControl == control)">
 
-                                                        <div 
-                                                            class="iconBox" 
-                                                            ng-repeat="editor in area.$allowedEditors"
-                                                            ng-click="addControl(editor,area, control.$index)"
-                                                            ng-show="(currentToolsControl == control)">
-                                                                <i class="icon {{editor.icon}}"></i>
+                                                    <div class="cell-tools-add"
+                                                         ng-if="area.max === undefined || area.max < area.controls.length"
+                                                         ng-mouseover="setCurrentToolsControl(control)"
+                                                         ng-mouseleave="disableCurrentToolsControl(control)">
+
+                                                        <div class="iconBox"
+                                                             ng-repeat="editor in area.$allowedEditors"
+                                                             ng-click="addControl(editor,area, control.$index)"
+                                                             ng-show="(currentToolsControl == control)">
+                                                            <i class="icon {{editor.icon}}"></i>
                                                         </div>
 
-                                                        <div class="iconBox" 
-                                                            ng-if="currentToolsControl != control">
+                                                        <div class="iconBox"
+                                                             ng-if="currentToolsControl != control">
                                                             <i class=" icon icon-add"></i>
                                                         </div>
                                                     </div>
 
                                                     <!-- delete cell -->
-                                                    <div class="cell-tools-remove">    
+                                                    <div class="cell-tools-remove">
                                                         <div class="iconBox"
-                                                            ng-click="deletePrompt = true"
-                                                            ng-mouseover="setCurrentRemoveControl(control)" 
-                                                            ng-mouseleave="disableCurrentRemoveControl(control)">
-                                                            
+                                                             ng-click="deletePrompt = true"
+                                                             ng-mouseover="setCurrentRemoveControl(control)"
+                                                             ng-mouseleave="disableCurrentRemoveControl(control)">
+
                                                             <span ng-if="deletePrompt">
-                                                                Are you sure? 
-                                                                    <a href style="text-decoration: underline" ng-click="removeControl(area, $parent.$index)">Yes</a> 
+                                                                Are you sure?
+                                                                <a href style="text-decoration: underline" ng-click="removeControl(area, $parent.$index)">Yes</a>
                                                             </span>
 
                                                             <i ng-if="!deletePrompt" class="icon icon-trash"></i>
@@ -184,12 +177,11 @@
                                                 </div>
 
                                                 <!-- Redering the editor for specific control -->
-                                                <div 
-                                                    ng-if="control && control.$editorPath" 
-                                                    ng-include="control.$editorPath"
-                                                    class="usky-cell usky-cell-{{control.editor.view}}">
+                                                <div ng-if="control && control.$editorPath"
+                                                     ng-include="control.$editorPath"
+                                                     class="usky-cell usky-cell-{{control.editor.view}}">
                                                 </div>
-                                              
+
                                             </div>
                                             <!-- Controls repeat end -->
 
@@ -214,13 +206,12 @@
                     <div class="tr">
                         <div class="td middle">
                             <ul>
-                                <li ng-repeat="layout in  section.$allowedLayouts">
+                                <li ng-repeat="layout in  section.$allowedLayouts" ng-show="layout.areas.length > 0">
                                     <div class="tb mainTbpt" ng-click="addRow(section, layout)">
                                         <div class="tr">
-                                            <div 
-                                                style="width:{{ area.$percentage}}%" 
-                                                class="middle mainTdpt td" 
-                                                ng-repeat="area in layout.areas">
+                                            <div style="width:{{ percentage(area.grid); }}%"
+                                                 class="middle mainTdpt td"
+                                                 ng-repeat="area in layout.areas">
                                                 <i class="icon {{cellPreview(area)}}"></i>
                                             </div>
                                         </div>