Fixes issue with inserting macros + updates the dialog ui

src/Umbraco.Web.UI.Client/src/views/common/overlays/macropicker/macropicker.controller.js

@@ -7,15 +7,19 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
 
     $scope.macros = [];
     $scope.model.selectedMacro = null;
-    $scope.wizardStep = "macroSelect";
     $scope.model.macroParams = [];
+
+    $scope.wizardStep = "macroSelect";
     $scope.noMacroParams = false;
 
-    $scope.changeMacro = function() {
+    $scope.selectMacro = function (macro) {
+
+        $scope.model.selectedMacro = macro;
+
         if ($scope.wizardStep === "macroSelect") {
             editParams();
         } else {
-            submitForm();
+            $scope.model.submit($scope.model);
         }
     };
 
@@ -25,12 +29,15 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
         macroResource.getMacroParameters($scope.model.selectedMacro.id)
             .then(function (data) {
 
+                
+
                 //go to next page if there are params otherwise we can just exit
                 if (!angular.isArray(data) || data.length === 0) {
 
-                    $scope.noMacroParams = true;
+                    $scope.model.submit($scope.model);
 
                 } else {
+                    
                     $scope.wizardStep = "paramSelect";
                     $scope.model.macroParams = data;
 
@@ -83,6 +90,10 @@ function MacroPickerController($scope, entityResource, macroResource, umbPropEdi
     entityResource.getAll("Macro", ($scope.model.dialogData && $scope.model.dialogData.richTextEditor && $scope.model.dialogData.richTextEditor === true) ? "UseInEditor=true" : null)
         .then(function (data) {
 
+            if (angular.isArray(data) && data.length == 0) {
+                $scope.nomacros = true;
+            }
+
             //if 'allowedMacros' is specified, we need to filter
             if (angular.isArray($scope.model.dialogData.allowedMacros) && $scope.model.dialogData.allowedMacros.length > 0) {
                 $scope.macros = _.filter(data, function(d) {

src/Umbraco.Web.UI.Client/src/views/common/overlays/macropicker/macropicker.html

@@ -2,17 +2,39 @@
 
     <div ng-switch="wizardStep">
 
-        <umb-control-group label="Choose a macro" ng-switch-when="macroSelect">
-            <select class="umb-editor" ng-change="changeMacro()"
-                    name="selectedMacro"
-                    ng-model="model.selectedMacro"
-                    ng-options="m as m.name for m in macros"
-                    required>
-                <option value=""><localize key="choose" />...</option>
-            </select>
-            <span class="help-inline" val-msg-for="selectedMacro" val-toggle-msg="required"><localize key="required" /></span>
-        </umb-control-group>
 
+        <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 />
+            </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">