From 49a374dbcace09975a220d3a869afe263bd61a03 Mon Sep 17 00:00:00 2001
From: per ploug <pph@umbraco.dk>
Date: Thu, 26 Jun 2014 23:36:04 +0200
Subject: [PATCH] Fixing various grid bugs with the new structure

---
 .../src/less/gridview.less                    |   2 +-
 .../directives/html/umb-control-group.html    |   4 +-
 .../propertyeditors/grid/editors/rte.html     |   2 +-
 .../propertyeditors/grid/grid.controller.js   | 600 +++++++++---------
 .../src/views/propertyeditors/grid/grid.html  |   6 +-
 .../grid/grid.prevalues.controller.js         |   8 +-
 .../propertyeditors/grid/grid.prevalues.html  |  45 +-
 .../Views/Partials/Grid/bootstrap3.cshtml     |  12 +-
 8 files changed, 352 insertions(+), 327 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/less/gridview.less b/src/Umbraco.Web.UI.Client/src/less/gridview.less
index 5a6b9e17ae..0d21573ab3 100644
--- a/src/Umbraco.Web.UI.Client/src/less/gridview.less
+++ b/src/Umbraco.Web.UI.Client/src/less/gridview.less
@@ -241,7 +241,7 @@
 // CONTROL PLACEHOLDER
 // -------------------------
 .usky-grid  .usky-control-placeholder {
-    min-height: 100px;
+    min-height: 50px;
     position: relative;
     text-align: center;
     text-align: -moz-center;
diff --git a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-control-group.html b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-control-group.html
index 7284e96cc4..9d144d79d3 100644
--- a/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-control-group.html
+++ b/src/Umbraco.Web.UI.Client/src/views/directives/html/umb-control-group.html
@@ -1,7 +1,7 @@
 <div class="umb-property">
-    <div class="control-group umb-control-group" ng-class="{error: !formValid()}">
+    <div class="control-group umb-control-group" ng-class="{error: !formValid(), hidelabel:hideLabel=='true'}">
         <div class="umb-el-wrap">
-            <label class="control-label" for="{{alias}}">
+            <label ng-if="hideLabel!=='true'" class="control-label" for="{{alias}}">
                 {{labelstring}}
                     <small>{{description}}</small>
             </label>
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html
index 199bdbeacb..708cd9071d 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/editors/rte.html
@@ -1,4 +1,4 @@
 <div
-	unique-id="control.uniqueId"
+	unique-id="control.$uniqueId"
     value="control.value"
     grid-rte configuration="model.config.rte"></div>
\ No newline at end of file
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 05dbb1d425..27037a5b89 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
@@ -2,326 +2,330 @@ angular.module("umbraco")
     .controller("Umbraco.PropertyEditors.GridController",
     function ($scope, $http, assetsService, $rootScope, dialogService, gridService, mediaResource, imageHelper, $timeout) {
 
-        var gridConfigPath = $scope.model.config.items.gridConfigPath;
+        // Grid status variables 
+        $scope.currentRow = null;
+        $scope.currentCell = null;
+        $scope.currentToolsControl = null;
+        $scope.currentControl = null;
+        $scope.openRTEToolbarId = null;
 
-        if(!gridConfigPath){
-            gridConfigPath = "views/propertyeditors/grid/grid.default.config.js";
-        }
+        
+        // *********************************************
+        // Sortable options
+        // *********************************************
 
-        assetsService.loadJs(gridConfigPath).then(function(){
+        $scope.sortableOptions = {
+            distance: 10,
+            cursor: "move",
+            placeholder: 'ui-sortable-placeholder',
+            handle: '.cell-tools-move',
+            start: function (e, ui) {
+                ui.item.find('.mceNoEditor').each(function () {
+                    tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
 
-                // Grid config
-                $scope.uSkyGridConfig = uSkyGridConfig;
+                });
+            },
+            stop: function (e, ui) {
+                ui.item.find('.mceNoEditor').each(function () {
+                    tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id'));
+                });
+            }
+        };
 
-                // Grid status variables 
-                $scope.currentRow = null;
-                $scope.currentCell = null;
-                $scope.currentToolsControl = null;
-                $scope.currentControl = null;
+        // *********************************************
+        // Template management functions
+        // *********************************************
+
+        $scope.addTemplate = function (template) {
+            $scope.model.value = angular.copy(template);
+            
+            //default row data
+            _.forEach($scope.model.value.sections, function(section){
+                $scope.initSection(section);
+            });
+        };
+
+
+        // *********************************************
+        // Row management function
+        // *********************************************
+
+        $scope.setCurrentRow = function (row) {
+            $scope.currentRow = row;
+        };
+
+        $scope.disableCurrentRow = function () {
+            $scope.currentRow = null;
+        };
+
+        
+        $scope.getAllowedLayouts = function(column){
+            var layouts = $scope.model.config.items.layouts;
+
+            if(column.allowed && column.allowed.length > 0){
+                return _.filter(layouts, function(layout){
+                    return _.indexOf(column.allowed, layout.name) >= 0;
+                });
+            }else{
+                return layouts;
+            } 
+        };
+
+        $scope.addRow = function (column, layout) {
+            //copy the selected layout into the rows collection
+            var row = angular.copy(layout);
+            column.rows.push(row);
+        };
+
+        $scope.removeRow = function (section, $index) {
+            if (section.rows.length > 0) {
+                section.rows.splice($index, 1);
                 $scope.openRTEToolbarId = null;
 
-                gridService.getGridEditors().then(function(response){
-                    $scope.availableEditors = response.data;
+                $scope.initContent();
+            }
+        };
+
+
+        // *********************************************
+        // Cell management functions
+        // *********************************************
+
+        $scope.setCurrentCell = function (cell) {
+            $scope.currentCell = cell;
+        };
+
+        $scope.disableCurrentCell = function (cell) {
+            $scope.currentCell = null;
+        };
+
+        $scope.cellPreview = function(cell){
+            if(cell && cell.$allowedEditors){
+                var editor = cell.$allowedEditors[0];
+                return editor.icon;
+            }else{
+                return "icon-layout";
+            }
+        };
+
+
+
+
+        // *********************************************
+        // Control management functions
+        // *********************************************
+        $scope.setCurrentControl = function (Control) {
+            $scope.currentControl = Control;
+        };
+
+        $scope.disableCurrentControl = function (Control) {
+            $scope.currentControl = null;
+        };
+
+        $scope.setCurrentToolsControl = function (Control) {
+            $scope.currentToolsControl = Control;
+        };
+
+        $scope.disableCurrentToolsControl = function (Control) {
+            $scope.currentToolsControl = null;
+        };
+
+        $scope.setCurrentRemoveControl = function (Control) {
+            $scope.currentRemoveControl = Control;
+        };
+
+        $scope.disableCurrentRemoveControl = function (Control) {
+            $scope.currentRemoveControl = null;
+        };
+
+        $scope.setCurrentMoveControl = function (Control) {
+            $scope.currentMoveControl = Control;
+        };
+
+        $scope.disableCurrentMoveControl = function (Control) {
+            $scope.currentMoveControl = null;
+        };
+
+        $scope.setUniqueId = function (cell, index) {
+            var date = new Date();
+            var components = [
+                date.getYear(),
+                date.getMonth(),
+                date.getDate(),
+                date.getHours(),
+                date.getMinutes(),
+                date.getSeconds(),
+                date.getMilliseconds()
+            ];
+            return components.join("");
+        };
+
+
+        $scope.addControl = function (editor, cell, index){
+            var newControl = {
+                value: null,
+                editor: editor
+            };
+
+            if (index === undefined) {
+                index = cell.controls.length;
+            }
+
+            //populate control
+            $scope.initControl(newControl, index+1);
+
+            cell.controls.splice(index + 1, 0, newControl);
+        };
+
+        $scope.addTinyMce = function(cell){
+            var rte = $scope.getEditor("rte");
+            $scope.addControl(rte, cell);
+        };
+
+        $scope.getEditor = function(alias){
+            return  _.find($scope.availableEditors, function(editor){return editor.alias === alias});
+        };
+
+        $scope.removeControl = function (cell, $index) {
+            cell.controls.splice($index, 1);
+        };
+
+        $scope.percentage = function(spans){
+            return ((spans/12)*100).toFixed(1);
+        };
+
+
+
+
+        
+
+
+
+        // *********************************************
+        // INITIALISATION
+        // these methods are called from ng-init on the template
+        // so we can controll their first load data
+        // 
+        // intialisation sets non-saved data like percentage sizing, allowed editors and
+        // other data that should all be pre-fixed with $ to strip it out on save
+        // *********************************************                
+
+        // *********************************************
+        // Init template + sections
+        // *********************************************
+        $scope.initContent = function() {
+            var clear = true;
+
+            if ($scope.model.value && $scope.model.value.sections && $scope.model.value.sections.length > 0) {
+                _.forEach($scope.model.value.sections, function(section){
+                    
+                    $scope.initSection(section);
+
+                    //we do this to ensure that the grid can be reset by deleting the last row
+                    if(section.rows.length > 0){
+                        clear = false;
+                    }
                 });
-                
-                // *********************************************
-                // Sortable options
-                // *********************************************
+            }
 
-                $scope.sortableOptions = {
-                    distance: 10,
-                    cursor: "move",
-                    placeholder: 'ui-sortable-placeholder',
-                    handle: '.cell-tools-move',
-                    start: function (e, ui) {
-                        ui.item.find('.mceNoEditor').each(function () {
-                            tinyMCE.execCommand('mceRemoveEditor', false, $(this).attr('id'));
+            if(clear){
+                $scope.model.value = undefined;
+            }
+        };
 
-                        });
-                    },
-                    stop: function (e, ui) {
-                        ui.item.find('.mceNoEditor').each(function () {
-                            tinyMCE.execCommand('mceAddEditor', false, $(this).attr('id'));
-                        });
-                    }
-                };
+        $scope.initSection = function(section){
+            section.$percentage = $scope.percentage(section.grid);
 
-                // *********************************************
-                // Template management functions
-                // *********************************************
+            var layouts = $scope.model.config.items.layouts;
 
-                $scope.checkContent = function() {
-                    var isEmpty = true;
-                    if ($scope.model.value && 
-                        $scope.model.value.sections) {
-                        angular.forEach($scope.model.value.sections, function (value, key) {
-                            if ( value.rows && value.rows.length > 0) {
-                                isEmpty = false;
-                            }
-                        });
-                    }
+            if(section.allowed && section.allowed.length > 0){
+                return _.filter(layouts, function(layout){
+                    section.$allowedLayouts = _.indexOf(section.allowed, layout.name) >= 0;
+                });
+            }else{
+                section.$allowedLayouts = layouts;
+            }
 
-                    if (isEmpty)
-                    {
-                        $scope.model.value = undefined;
-                    }
-                };
+            if(!section.rows){
+                section.rows = [];
+            }else{
+                _.forEach(section.rows, function(row){
+                    $scope.initRow(row);
+                });    
+            }
+        };
 
-                $scope.addTemplate = function (template) {
-                    $scope.model.value = angular.copy(template);
-                    
-                    //default row data
-                    _.forEach($scope.model.value.sections, function(section){
-                        section.rows = [];
+
+        // *********************************************
+        // Init layout / row
+        // *********************************************                
+        $scope.initRow = function(row){
+            
+            if(!row.areas){
+                row.areas = [];
+            }
+
+            //set a disposable unique ID
+            row.$uniqueId = $scope.setUniqueId();
+            
+            //populate with data
+            _.forEach(row.areas, function(area){
+                if(!area.controls){
+                    area.controls = [];
+                }else{
+                    _.forEach(area.controls, function(control, index){
+                        $scope.initControl(control, index);
                     });
-                };
-
-
-                // *********************************************
-                // Row management function
-                // *********************************************
-
-                $scope.setCurrentRow = function (row) {
-                    $scope.currentRow = row;
-                };
-
-                $scope.disableCurrentRow = function () {
-                    $scope.currentRow = null;
-                };
-
+                }
                 
-                $scope.getAllowedLayouts = function(column){
-                    var layouts = $scope.model.config.items.layouts;
+                area.$percentage = $scope.percentage(area.grid);
 
-                    if(column.allowed && column.allowed.length > 0){
-                        return _.filter(layouts, function(layout){
-                            return _.indexOf(column.allowed, layout.name) >= 0;
-                        });
-                    }else{
-                        return layouts;
-                    } 
-                };
-
-                $scope.addRow = function (column, layout) {
-                    //copy the selected layout into the rows collection
-                    var row = angular.copy(layout);
-                    column.rows.push(row);
-                };
-
-                $scope.removeRow = function (column, $index) {
-                    if (column.rows.length > 0) {
-                        column.rows.splice($index, 1);
-                        $scope.openRTEToolbarId = null;
-                        $scope.checkContent();
-                    }
-                };
-
-
-                // *********************************************
-                // Cell management functions
-                // *********************************************
-
-                $scope.setCurrentCell = function (cell) {
-                    $scope.currentCell = cell;
-                };
-
-                $scope.disableCurrentCell = function (cell) {
-                    $scope.currentCell = null;
-                };
-
-                $scope.cellPreview = function(cell){
-                    if(cell && cell.$allowedEditors){
-                        var editor = cell.$allowedEditors[0];
-                        return editor.icon;
-                    }else{
-                        return "icon-layout";
-                    }
-                };
-
-
-
-
-                // *********************************************
-                // Control management functions
-                // *********************************************
-                $scope.setCurrentControl = function (Control) {
-                    $scope.currentControl = Control;
-                };
-
-                $scope.disableCurrentControl = function (Control) {
-                    $scope.currentControl = null;
-                };
-
-                $scope.setCurrentToolsControl = function (Control) {
-                    $scope.currentToolsControl = Control;
-                };
-
-                $scope.disableCurrentToolsControl = function (Control) {
-                    $scope.currentToolsControl = null;
-                };
-
-                $scope.setCurrentRemoveControl = function (Control) {
-                    $scope.currentRemoveControl = Control;
-                };
-
-                $scope.disableCurrentRemoveControl = function (Control) {
-                    $scope.currentRemoveControl = null;
-                };
-
-                $scope.setCurrentMoveControl = function (Control) {
-                    $scope.currentMoveControl = Control;
-                };
-
-                $scope.disableCurrentMoveControl = function (Control) {
-                    $scope.currentMoveControl = null;
-                };
-
-                $scope.setUniqueId = function (cell, index) {
-                    var date = new Date();
-                    var components = [
-                        date.getYear(),
-                        date.getMonth(),
-                        date.getDate(),
-                        date.getHours(),
-                        date.getMinutes(),
-                        date.getSeconds(),
-                        date.getMilliseconds()
-                    ];
-                    return components.join("");
-                };
-
-
-                $scope.addControl = function (editor, cell, index){
-                    var newId = $scope.setUniqueId();
-                    var newControl = {
-                        $uniqueId: newId,
-                        value: null,
-                        editor: editor
-                    };
-
-                    if (index === undefined) {
-                        index = cell.controls.length;
-                    }
-
-                    //populate control
-                    $scope.initControl(newControl, index+1);
-
-                    cell.controls.splice(index + 1, 0, newControl);
-                };
-
-                $scope.addTinyMce = function(cell){
-                    var rte = $scope.getEditor("rte");
-                    $scope.addControl(rte, cell);
-                };
-
-                $scope.getEditor = function(alias){
-                    return  _.find($scope.availableEditors, function(editor){return editor.alias === alias});
-                };
-
-                $scope.removeControl = function (cell, $index) {
-                    cell.controls.splice($index, 1);
-                };
-
-                $scope.percentage = function(spans){
-                    return ((spans/12)*100).toFixed(1);
-                };
-
-
-
-
-                // *********************************************
-                // Init grid
-                // *********************************************
-                $scope.checkContent();
-
-
-
-                // *********************************************
-                // INITIALISATION
-                // these methods are called from ng-init on the template
-                // so we can controll their first load data
-                // 
-                // intialisation sets non-saved data like percentage sizing, allowed editors and
-                // other data that should all be pre-fixed with $ to strip it out on save
-                // *********************************************                
-
-                // *********************************************
-                // Init template + sections
-                // *********************************************                
-                $scope.initSection = function(section){
-                    section.$percentage = $scope.percentage(section.grid);
-
-                    var layouts = $scope.model.config.items.layouts;
-
-                    if(section.allowed && sectionn.allowed.length > 0){
-                        return _.filter(layouts, function(layout){
-                            section.$allowedLayouts = _.indexOf(section.allowed, layout.name) >= 0;
-                        });
-                    }else{
-                        section.$allowedLayouts = layouts;
-                    } 
-                };
-
-
-                // *********************************************
-                // Init layout / row
-                // *********************************************                
-                $scope.initRow = function(row){
-                    
-                    if(!row.areas){
-                        row.areas = [];
-                    }
-
-                    //set a disposable unique ID
-                    row.$uniqueId = $scope.setUniqueId();
-                    
-                    //populate with data
-                    _.forEach(row.areas, function(area){
-                        if(!area.controls){
-                            area.controls = [];
-                        }
-                        
-                        area.$percentage = $scope.percentage(area.grid);
-
-                        if(!area.allowed){
-                            area.$allowedEditors = $scope.availableEditors;
-                            area.$allowsRTE = true;
-                        }else{
-                            area.$allowedEditors = _.filter($scope.availableEditors, function(editor){
-                                return _.indexOf(area.allowed, editor.alias) >= 0;
-                            });
-
-                            if(_.indexOf(area.allowed,"rte")>=0){
-                                area.$allowsRTE = true;
-                            }
-                        }
+                if(!area.allowed){
+                    area.$allowedEditors = $scope.availableEditors;
+                    area.$allowsRTE = true;
+                }else{
+                    area.$allowedEditors = _.filter($scope.availableEditors, function(editor){
+                        return _.indexOf(area.allowed, editor.alias) >= 0;
                     });
-                };
 
-
-
-                // *********************************************
-                // Init control
-                // *********************************************                
-
-                $scope.initControl = function(control, index){
-                    control.$index = index;
-
-                    //if its a path
-                    if(_.indexOf(control.editor.view, "/") >= 0){
-                        control.$editorPath = control.editor.view;
-                    }else{
-                        //use convention
-                        control.$editorPath = "views/propertyeditors/grid/editors/" + control.editor.view + ".html";
+                    if(_.indexOf(area.allowed,"rte")>=0){
+                        area.$allowsRTE = true;
                     }
-                };
+                }
             });
+        };
+
+
 
         // *********************************************
-        // asset styles
-        // *********************************************
+        // Init control
+        // *********************************************                
 
-        //assetsService.loadCss("/App_Plugins/Lecoati.uSky.Grid/lib/jquery-ui-1.10.4.custom/css/ui-lightness/jquery-ui-1.10.4.custom.min.css");
-        //assetsService.loadCss($scope.model.config.items.approvedBackgroundCss);
+        $scope.initControl = function(control, index){
+            control.$index = index;
+            control.$uniqueId = $scope.setUniqueId();
 
+            if(!control.$editorPath){
+                //if its a path
+                if(_.indexOf(control.editor.view, "/") >= 0){
+                    control.$editorPath = control.editor.view;
+                }else{
+                    //use convention
+                    control.$editorPath = "views/propertyeditors/grid/editors/" + control.editor.view + ".html";
+                }
+            }
+        };
+        
+
+        gridService.getGridEditors().then(function(response){
+            $scope.availableEditors = response.data;
+
+            $scope.contentReady = true;
+
+            // *********************************************
+            // Init grid
+            // *********************************************
+            $scope.initContent();
+
+        });
     });
\ No newline at end of file
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 3911fab34b..ecb86ffa1f 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
@@ -1,6 +1,6 @@
 <div ng-controller="Umbraco.PropertyEditors.GridController" class="usky-grid">
 
-
+<div ng-if="contentReady">
     <!-- Template picker -->
     <div class="uSky-templates tb" ng-show="!model.value || model.value == ''">
         <div class="tr">
@@ -141,7 +141,6 @@
                                                             selectedControl:currentControl == control}"
                                                 ng-mouseover="setCurrentControl(control)" 
                                                 ng-mouseleave="disableCurrentControl(control)"
-                                                ng-init="initControl(control, $index)"
                                                 class="usky-control">
                                                
                                                 <!-- Filled cell tools -->
@@ -191,6 +190,7 @@
                                                     ng-include="control.$editorPath"
                                                     class="usky-cell usky-cell-{{control.editor.view}}">
                                                 </div>
+                                              
                                             </div>
                                             <!-- Controls repeat end -->
 
@@ -246,4 +246,6 @@
             <!-- column repeat end -->
         </div>
     </div>
+</div>
+
 </div>
\ No newline at end of file
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js
index 8ee402ab7c..095b0bb04c 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.controller.js
@@ -12,7 +12,6 @@ angular.module("umbraco")
                         }
                     ]
                 },
-
                 {
                     name: "2 column",
                     sections: [
@@ -24,7 +23,6 @@ angular.module("umbraco")
                         }
                     ]
                 },
-
                 {
                     name: "2 column reversed",
                     sections: [
@@ -45,7 +43,7 @@ angular.module("umbraco")
                     areas: [
                         {
                             grid: 12,
-                            editors: ["Headline","subHeadline"]
+                            editors: ["headline"]
                         }
                     ]
                 },
@@ -60,9 +58,7 @@ angular.module("umbraco")
                         }
                     ]
                 }
-            ],
-
-            gridConfigPath: "views/propertyeditors/grid/config/grid.default.config.js"
+            ]
         };
 
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
index 9976f81875..6f9e4fad65 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/grid.prevalues.html
@@ -97,15 +97,38 @@
 
                             <div ng-if="currentSection.allowAll === false">
                                 <hr />
-                                <ul class="unstyled">
-                                    <li ng-repeat="layout in model.value.layouts">
-                                        <label>
-                                              <input type="checkbox" 
-                                                checklist-model="currentSection.allowed" 
-                                                checklist-value="layout.name"> {{layout.name}}  
-                                        </label>
-                                    </li>
-                                </ul>
+
+                                <div class="control-group uSky-templates-rows">
+                                    <ul class="unstyled"
+                                        ui-sortable
+                                        ng-model="model.value.templates">
+                                        
+                                        <li ng-repeat="layout in model.value.layouts">
+
+                                            <input type="checkbox" 
+                                              checklist-model="currentSection.allowed" 
+                                              checklist-value="layout.name" 
+                                              style="float: left; margin-right: 10px;">
+
+                                            <div class="uSky-templates-row"  style="float: left">
+                                                <a href class="tb mainTbpt">
+                                                    <div class="tr">
+                                                        <div style="width:{{ percentage(area.grid); }}%" class="middle mainTdpt td" ng-repeat="area in layout.areas">
+                                                            <i class="icon {{areaPreview(area)}}"></i>
+                                                        </div>
+                                                    </div>
+                                                </a>
+                                            </div>
+
+                                            <div>
+                                                {{layout.name}}<br/>
+                                                <small>{{layout.areas.length}} configurable areas</small><br/>
+                                            </div>
+
+                                            <br style="clear: both"/> 
+                                        </li>   
+                                    </ul> 
+                                </div>
                             </div>
                         </umb-control-group>
 
@@ -180,7 +203,7 @@
                 <input type="text" class="" ng-model="currentLayout.name" />
             </umb-control-group>
 
-            <umb-control-group label="Areas" hide-label="false" description="Choose an area from the layout to edit">
+            <umb-control-group label="Layout areas" hide-label="false" description="Choose an area from the layout to edit">
                  <div class="uSky-templates-template" 
                      style="margin: 0; width: 350px; position: relative;">
                      <div class="tb" style="height: 70px; border-width: 2px; padding: 2px">
@@ -226,7 +249,7 @@
                                         ng-model="currentArea.allowAll" 
                                         ng-checked="currentArea.allowed === undefined" 
                                         ng-change="toggleCollection(currentArea.allowed, currentArea.allowAll)" /> 
-                                        Allow all layouts
+                                        Allow all editors
                                 </label>
                             </li>
                         </ul>
diff --git a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml b/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml
index 284a8423c3..abe52adea8 100644
--- a/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml
+++ b/src/Umbraco.Web.UI/Views/Partials/Grid/bootstrap3.cshtml
@@ -8,20 +8,20 @@
     
     <div class="uSky-grid @(onlyOneColumn > 1 ? "container" : "")">
         <div class="row clearfix">
-            @foreach (var column in Model.columns)
+            @foreach (var section in Model.sections)
             {
-                <div class="col-md-@column.grid column">
-                    @foreach (var row in column.rows)
+                <div class="col-md-@section.grid column">
+                    @foreach (var row in section.rows)
                     {
                         <div class="gridrow_@row.uniqueId" >
                             <div class="container">
                                 <div class="row clearfix">
 
-                                    @foreach (var cell in row.cells)
+                                    @foreach (var area in row.areas)
                                     {
-                                        <div class="col-md-@cell.model.grid column">
+                                        <div class="col-md-@area.grid column">
 
-                                            @foreach (var control in cell.controls)
+                                            @foreach (var control in area.controls)
                                             {
                                                 if (control != null && control.editor != null && control.editor.view != null)
                                                 {