From 9b1983a239f999dfbc782eef44b106acf529326a Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@busb.org>
Date: Wed, 25 Nov 2015 09:26:26 +0100
Subject: [PATCH] Added labels to show when styles/config are added to
 rows/cells

---
 .../src/less/components/umb-grid.less         | 53 +++++++++++++++++++
 .../propertyeditors/grid/grid.controller.js   | 15 ++++++
 .../src/views/propertyeditors/grid/grid.html  | 12 +++++
 3 files changed, 80 insertions(+)

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
index 0b4475149d..5d5bf2fb45 100644
--- a/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
+++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-grid.less
@@ -790,6 +790,59 @@
     }
 }
 
+// Has Config
+// -------------------------
+
+.umb-grid-has-config {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    font-size: 12px;
+    color: fade(@black, 44);
+
+    margin-left: 6px;
+}
+
+.umb-row.-active {
+    .umb-grid-has-config {
+        color: fade(@white, 66);
+    }
+
+    .umb-cell {
+        .umb-grid-has-config {
+            color: fade(@black, 44);
+        }
+    }
+}
+
+.umb-row.-active.-editor-active {
+    .umb-grid-has-config {
+        color: fade(@black, 44);
+    }
+}
+
+.umb-cell {
+    .umb-grid-has-config {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+    }
+
+    &.-active {
+        .umb-grid-has-config {
+            color: @blue;
+        }
+    }
+
+    &.-has-config {
+        .cell-tools {
+            color: @blue;
+        }
+    }
+
+
+}
 
 
 // Overlay
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 838b57007a..ac1e247f73 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
@@ -205,6 +205,20 @@ angular.module("umbraco")
 
        };
 
+
+       // Check if row/cell has any styles or configerations, return true/false
+       $scope.hasConfig = function(object) {
+           var hasSettings = false;
+
+           if(_.isEmpty(object.styles) && _.isEmpty(object.config)) {
+               hasSettings = false;
+           } else {
+               hasSettings = true;
+           }
+
+           return hasSettings;
+       };
+
         // *********************************************
         // Template management functions
         // *********************************************
@@ -610,6 +624,7 @@ angular.module("umbraco")
                 original.styles = row.styles;
                 original.config = row.config;
 
+
                 //sync area configuration
                 _.each(original.areas, function (area, areaIndex) {
 
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 65f32b8499..3fe1a87d2b 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
@@ -56,10 +56,13 @@
                              ng-repeat="row in section.rows"
                              ng-click="clickRow(row, $event)"
                              ng-class="{
+                                     '-has-config': hasConfig(row),
                                      '-active': currentRow === row,
                                      '-editor-active': currentCell !== null && currentRow === row || currentControl !== null && currentRow === row}"
                              on-outside-click="clickOutsideRow()">
 
+
+
                             <div class="umb-row-title-bar">
 
                                 <div class="umb-row-title">{{row.name}}</div>
@@ -88,6 +91,10 @@
 
                                </div>
 
+                               <div class="umb-grid-has-config" ng-if="hasConfig(row)">
+                                  Styles is applied
+                               </div>
+
                             </div>
 
                             <!-- row container -->
@@ -111,6 +118,7 @@
                                                     'first':$first,
                                                     'infohighlight':currentInfohighlightArea == area,
                                                     'warnhighlight':currentWarnhighlightArea == area,
+                                                    '-has-config' :hasConfig(area),
                                                     '-active': currentCell == area}"
                                                     ng-model="area.controls"
                                                  ng-click="clickCell(area, row, $event)">
@@ -128,6 +136,10 @@
                                                       ng-class="{'-active': currentCell == area}"
                                                       ui-sortable="sortableOptionsCell">
 
+                                                      <div class="umb-grid-has-config" ng-if="hasConfig(area)">
+                                                         Styles is applied
+                                                      </div>
+
                                                       <div class="cell-tools" ng-if="currentCell == area">
                                                          <div class="cell-tool" ng-click="editGridItemSettings(area, 'cell')">
                                                             <i class="icon-settings"></i>