From 3e36e06d77f15b53237493205549cd4b6fc5bd8b Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Wed, 1 Aug 2018 19:01:44 +0200
Subject: [PATCH] add extra markup for the infinite editor

---
 .../macropicker/macropicker.controller.js     |   6 +
 .../macropicker/macropicker.html              | 136 +++++++++++-------
 2 files changed, 88 insertions(+), 54 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js
index 058f71bfcf..aa63f2d6d6 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.controller.js
@@ -26,6 +26,12 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
         }
     };
 
+    $scope.close = function() {
+        if($scope.model.close) {
+            $scope.model.close();
+        }
+    }
+
     /** changes the view to edit the params of the selected macro */
     /** if there is pnly one macro, and it has parameters - editor can skip selecting the Macro **/
     function editParams(insertIfNoParameters) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
index 8f16bc40d4..a9551138e1 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/macropicker/macropicker.html
@@ -1,63 +1,91 @@
 <div ng-controller="Umbraco.Overlays.MacroPickerController">
 
-    <div ng-switch="wizardStep">
+    <umb-editor-view>
 
+        <umb-editor-header
+            name="model.title"
+            name-locked="true"
+            hide-alias="true"
+            hide-icon="true"
+            hide-description="true">
+        </umb-editor-header>
 
-        <div ng-switch-when="macroSelect">
+        <umb-editor-container>
+            <umb-box>
+                <umb-box-content>
+                    <div ng-switch="wizardStep">
 
-            <div class="form-search">
-                <i class="icon-search"></i>
-                <input type="text"
-                       style="width: 100%"
-                       ng-model="searchTerm"
-                       class="umb-search-field search-query input-block-level"
-                       localize="placeholder"
-                       placeholder="@placeholders_filter"
-                       umb-auto-focus
-                       no-dirty-check />
-            </div>
+                        <div ng-switch-when="macroSelect">
+                
+                            <div class="form-search">
+                                <i class="icon-search"></i>
+                                <input type="text"
+                                        style="width: 100%"
+                                        ng-model="searchTerm"
+                                        class="umb-search-field search-query input-block-level"
+                                        localize="placeholder"
+                                        placeholder="@placeholders_filter"
+                                        umb-auto-focus
+                                        no-dirty-check />
+                            </div>
+                
+                            <ul class="umb-card-grid">
+                                <li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm"
+                                    ng-click="selectMacro(availableItem)"
+                                    class="-three-in-row">
+                                    <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
+                                        <i class="icon-settings-alt"></i>
+                                        {{ availableItem.name }}
+                                    </a>
+                                </li>
+                            </ul>
+                
+                            <umb-empty-state ng-if="nomacros"
+                                                position="center">
+                                <localize key="defaultdialogs_noMacros">
+                                    There are no macros available to insert
+                                </localize>
+                            </umb-empty-state>
+                        </div>
+                
+                        <div ng-switch-when="paramSelect">
+                
+                            <h5>{{model.selectedMacro.name}}</h5>
+                
+                            <ul class="unstyled">
+                                <li ng-repeat="param in model.macroParams">
+                
+                                    <ng-form name="parameterForm">
+                                        <umb-control-group label="{{param.name}}">
+                                            <umb-property-editor model="param"></umb-property-editor>
+                                        </umb-control-group>
+                                    </ng-form>
+                
+                                </li>
+                            </ul>
+                
+                            <umb-empty-state ng-if="noMacroParams"
+                                                position="center">
+                                <localize key="defaultdialogs_noMacroParams">There are no parameters for this macro</localize>
+                            </umb-empty-state>
+                
+                        </div>
+                    </div>
+                </umb-box-content>
+            </umb-box>
+        </umb-editor-container>
 
-            <ul class="umb-card-grid">
-                <li ng-repeat="availableItem in macros | orderBy:'name' | filter:searchTerm"
-                    ng-click="selectMacro(availableItem)"
-                    class="-three-in-row">
-                    <a class="umb-card-grid-item" href="" title="{{ availableItem.name }}">
-                        <i class="icon-settings-alt"></i>
-                        {{ availableItem.name }}
-                    </a>
-                </li>
-            </ul>
+        <umb-editor-footer>
+            <umb-editor-footer-content-right>
+                <umb-button
+                    type="button"
+                    button-style="link"
+                    label-key="general_close"
+                    action="close()">
+                </umb-button>
+            </umb-editor-footer-content-right>
+        </umb-editor-footer>
 
-            <umb-empty-state ng-if="nomacros"
-                             position="center">
-                <localize key="defaultdialogs_noMacros">
-                    There are no macros available to insert
-                </localize>
-            </umb-empty-state>
-        </div>
-
-        <div ng-switch-when="paramSelect">
-
-            <h5>{{model.selectedMacro.name}}</h5>
-
-            <ul class="unstyled">
-                <li ng-repeat="param in model.macroParams">
-
-                    <ng-form name="parameterForm">
-                        <umb-control-group label="{{param.name}}">
-                            <umb-property-editor model="param"></umb-property-editor>
-                        </umb-control-group>
-                    </ng-form>
-
-                </li>
-            </ul>
-
-            <umb-empty-state ng-if="noMacroParams"
-                             position="center">
-                <localize key="defaultdialogs_noMacroParams">There are no parameters for this macro</localize>
-            </umb-empty-state>
-
-        </div>
-    </div>
+    </umb-editor-view>
 
 </div>