From a9411aa246bdb9b60a9beb243a2ee78876d7410f Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Mon, 7 Dec 2015 20:21:52 +0100
Subject: [PATCH] change grid items settings dialog to new overlay component

---
 .../grid/dialogs/config.controller.js         | 77 ---------------
 .../propertyeditors/grid/dialogs/config.html  | 58 +++--------
 .../propertyeditors/grid/grid.controller.js   | 95 +++++++++++++++++--
 .../src/views/propertyeditors/grid/grid.html  |  7 ++
 4 files changed, 107 insertions(+), 130 deletions(-)
 delete mode 100644 src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js
deleted file mode 100644
index d60535acd1..0000000000
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.controller.js
+++ /dev/null
@@ -1,77 +0,0 @@
-angular.module("umbraco")
-    .controller("Umbraco.PropertyEditors.GridController.Dialogs.Config",
-    function ($scope, $http) {
-
-        var placeHolder = "{0}";
-        var addModifier = function(val, modifier){
-            if (!modifier || modifier.indexOf(placeHolder) < 0) {
-                return val;
-            } else {
-                return modifier.replace(placeHolder, val);
-            }
-        }
-
-        var stripModifier = function (val, modifier) {
-            if (!val || !modifier || modifier.indexOf(placeHolder) < 0) {
-                return val;
-            } else {
-                var paddArray = modifier.split(placeHolder);
-                if(paddArray.length == 1){
-                    if (modifier.indexOf(placeHolder) === 0) {
-                        return val.slice(0, -paddArray[0].length);
-                    } else {
-                        return val.slice(paddArray[0].length, 0);
-                    }
-                } else {
-                    if (paddArray[1].length === 0) {
-                        return val.slice(paddArray[0].length);
-                    }
-                    return val.slice(paddArray[0].length, -paddArray[1].length); 
-                }
-            }
-        }
-
-
-        $scope.styles = _.filter( angular.copy($scope.dialogOptions.config.items.styles), function(item){return (item.applyTo === undefined || item.applyTo === $scope.dialogOptions.itemType); });
-        $scope.config = _.filter( angular.copy($scope.dialogOptions.config.items.config), function(item){return (item.applyTo === undefined || item.applyTo === $scope.dialogOptions.itemType); });
-
-
-        var element = $scope.dialogOptions.gridItem;
-        if(angular.isObject(element.config)){
-            _.each($scope.config, function(cfg){
-                var val = element.config[cfg.key];
-                if(val){
-                    cfg.value = stripModifier(val, cfg.modifier);
-                }
-            });
-        }
-
-        if(angular.isObject(element.styles)){
-            _.each($scope.styles, function(style){
-                var val = element.styles[style.key];
-                if(val){
-                    style.value = stripModifier(val, style.modifier);
-                }
-            });
-        }
-
-
-        $scope.saveAndClose = function(){
-            var styleObject = {};
-            var configObject = {};
-
-            _.each($scope.styles, function(style){
-                if(style.value){
-                    styleObject[style.key] = addModifier(style.value, style.modifier);
-                }
-            });
-            _.each($scope.config, function (cfg) {
-                if (cfg.value) {
-                    configObject[cfg.key] = addModifier(cfg.value, cfg.modifier);
-                }
-            });
-
-            $scope.submit({config: configObject, styles: styleObject});
-        };
-
-    });
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html
index 429bd68abd..aa96348130 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/grid/dialogs/config.html
@@ -1,44 +1,16 @@
-
-<div class="umb-panel" ng-controller="Umbraco.PropertyEditors.GridController.Dialogs.Config">
-
-    <div class="umb-panel-body no-header with-footer compact">
-
-        <umb-pane>
-
-            <div ng-if="config">
-                <h4>Settings</h4>
-                <umb-property
-                    property="configValue"
-                    ng-repeat="configValue in config">
-                    <umb-editor model="configValue" is-pre-value="true"></umb-editor>
-                </umb-property>
-            </div>
-
-
-            <div ng-if="styles">
-                <h4>Style</h4>
-                <umb-property
-                    property="styleValue"
-                    ng-repeat="styleValue in styles">
-                    <umb-editor model="styleValue" is-pre-value="true"></umb-editor>
-                </umb-property>
-            </div>
-
-        </umb-pane>
-    </div>
-
-
-    <div class="umb-panel-footer">
-        <div class="umb-el-wrap umb-panel-buttons">
-            <div class="btn-toolbar umb-btn-toolbar pull-right">
-                <a href ng-click="close()" class="btn btn-link">
-                     <localize key="general_cancel">Cancel</localize>
-                </a>
-
-                <a href ng-click="saveAndClose()" class="btn btn-primary">
-                    <localize key="buttons_save">Save</localize>
-                </a>
-            </div>
-        </div>
-    </div>
+<div ng-if="model.config">
+    <umb-property
+        property="configValue"
+        ng-repeat="configValue in model.config">
+        <umb-editor model="configValue" is-pre-value="true"></umb-editor>
+    </umb-property>
+</div>
+
+<div ng-if="model.styles">
+    <h4>Style</h4>
+    <umb-property
+        property="styleValue"
+        ng-repeat="styleValue in model.styles">
+        <umb-editor model="styleValue" is-pre-value="true"></umb-editor>
+    </umb-property>
 </div>
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 464daa6b3e..d850a1c782 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
@@ -3,6 +3,7 @@ angular.module("umbraco")
     function ($scope, $http, assetsService, localizationService, $rootScope, dialogService, gridService, mediaResource, imageHelper, $timeout, umbRequestHelper) {
 
         // Grid status variables
+        var placeHolder = "";
         $scope.currentRow = null;
         $scope.currentCell = null;
         $scope.currentToolsControl = null;
@@ -326,19 +327,93 @@ angular.module("umbraco")
 
         $scope.editGridItemSettings = function (gridItem, itemType) {
 
-            dialogService.open(
-                {
-                    template: "views/propertyeditors/grid/dialogs/config.html",
-                    gridItem: gridItem,
-                    config: $scope.model.config,
-                    itemType: itemType,
-                    callback: function (data) {
-                        gridItem.styles = data.styles;
-                        gridItem.config = data.config;
-                        gridItem.hasConfig = gridItemHasConfig(data.styles, data.config);
+            placeHolder = "{0}";
+            var styles = _.filter( angular.copy($scope.model.config.items.styles), function(item){return (item.applyTo === undefined || item.applyTo === itemType); });
+            var config = _.filter( angular.copy($scope.model.config.items.config), function(item){return (item.applyTo === undefined || item.applyTo === itemType); });
+
+            if(angular.isObject(gridItem.config)){
+                _.each(config, function(cfg){
+                    var val = gridItem.config[cfg.key];
+                    if(val){
+                        cfg.value = stripModifier(val, cfg.modifier);
+                    }
+                });
+            }
+
+            if(angular.isObject(gridItem.styles)){
+                _.each(styles, function(style){
+                    var val = gridItem.styles[style.key];
+                    if(val){
+                        style.value = stripModifier(val, style.modifier);
+                    }
+                });
+            }
+
+            $scope.gridItemSettingsDialog = {};
+            $scope.gridItemSettingsDialog.view = "views/propertyeditors/grid/dialogs/config.html";
+            $scope.gridItemSettingsDialog.title = "Settings";
+            $scope.gridItemSettingsDialog.styles = styles;
+            $scope.gridItemSettingsDialog.config = config;
+
+            $scope.gridItemSettingsDialog.show = true;
+
+            $scope.gridItemSettingsDialog.submit = function(model) {
+
+                var styleObject = {};
+                var configObject = {};
+
+                _.each(model.styles, function(style){
+                    if(style.value){
+                        styleObject[style.key] = addModifier(style.value, style.modifier);
+                    }
+                });
+                _.each(model.config, function (cfg) {
+                    if (cfg.value) {
+                        configObject[cfg.key] = addModifier(cfg.value, cfg.modifier);
                     }
                 });
 
+                gridItem.styles = styleObject;
+                gridItem.config = configObject;
+                gridItem.hasConfig = gridItemHasConfig(styleObject, configObject);
+
+                $scope.gridItemSettingsDialog.show = false;
+                $scope.gridItemSettingsDialog = null;
+            };
+
+            $scope.gridItemSettingsDialog.close = function(oldModel) {
+                $scope.gridItemSettingsDialog.show = false;
+                $scope.gridItemSettingsDialog = null;
+            };
+
+        };
+
+        function stripModifier(val, modifier) {
+            if (!val || !modifier || modifier.indexOf(placeHolder) < 0) {
+                return val;
+            } else {
+                var paddArray = modifier.split(placeHolder);
+                if(paddArray.length == 1){
+                    if (modifier.indexOf(placeHolder) === 0) {
+                        return val.slice(0, -paddArray[0].length);
+                    } else {
+                        return val.slice(paddArray[0].length, 0);
+                    }
+                } else {
+                    if (paddArray[1].length === 0) {
+                        return val.slice(paddArray[0].length);
+                    }
+                    return val.slice(paddArray[0].length, -paddArray[1].length);
+                }
+            }
+        }
+
+        var addModifier = function(val, modifier){
+            if (!modifier || modifier.indexOf(placeHolder) < 0) {
+                return val;
+            } else {
+                return modifier.replace(placeHolder, val);
+            }
         };
 
         function gridItemHasConfig(styles, config) {
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 25e5450245..8340d298ef 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
@@ -272,4 +272,11 @@
       position="target">
     </umb-overlay>
 
+    <umb-overlay
+      ng-if="gridItemSettingsDialog.show"
+      model="gridItemSettingsDialog"
+      view="gridItemSettingsDialog.view"
+      position="right">
+    </umb-overlay>
+
 </div>