Fixes: U4-9474 Update macro picker to follow the new picker UI

src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.controller.js

@@ -3,7 +3,11 @@ angular.module('umbraco')
 .controller("Umbraco.PropertyEditors.MacroContainerController",
 	
 	function($scope, dialogService, entityResource, macroService){
+
 		$scope.renderModel = [];
+		$scope.allowOpenButton = true;
+		$scope.allowRemoveButton = true;
+		$scope.sortableOptions = {};
 		
 		if($scope.model.value){
 			var macros = $scope.model.value.split('>');
@@ -20,6 +24,7 @@ angular.module('umbraco')
 					parsed.syntax = syntax;
 					collectDetails(parsed);
 					$scope.renderModel.push(parsed);
+					setSortingState($scope.renderModel);
 				}
 			});
 		}
@@ -27,11 +32,12 @@ angular.module('umbraco')
 		
 		function collectDetails(macro){
 			macro.details = "";
+			macro.icon = "icon-settings-alt";
 			if(macro.macroParamsDictionary){
 				angular.forEach((macro.macroParamsDictionary), function(value, key){
 					macro.details += key + ": " + value + " ";	
 				});	
-			}		
+			}
 		}
 
 		function openDialog(index){
@@ -61,6 +67,8 @@ angular.module('umbraco')
 					$scope.renderModel.push(macroObject);
 				}
 
+				setSortingState($scope.renderModel);
+
 				$scope.macroPickerOverlay.show = false;
 				$scope.macroPickerOverlay = null;
 			};
@@ -90,6 +98,7 @@ angular.module('umbraco')
 
 		$scope.remove =function(index){
 			$scope.renderModel.splice(index, 1);
+			setSortingState($scope.renderModel);
 		};
 
 	    $scope.clear = function() {
@@ -117,4 +126,13 @@ angular.module('umbraco')
 			return str.replace(rgxtrim, '');
 		}
 
+		function setSortingState(items) {
+			// disable sorting if the list only consist of one item
+			if(items.length > 1) {
+				$scope.sortableOptions.disabled = false;
+			} else {
+				$scope.sortableOptions.disabled = true;
+			}
+    	}
+
 });

src/Umbraco.Web.UI.Client/src/views/propertyeditors/macrocontainer/macrocontainer.html

@@ -1,30 +1,27 @@
 <div ng-controller="Umbraco.PropertyEditors.MacroContainerController" class="umb-editor umb-macrocontainer">
 
-    <ul class="unstyled list-icons" 
-		ui-sortable="sortableOptions"
-		ng-model="renderModel">	
-		<li ng-repeat="macro in renderModel" style="max-width: 300px">
+    <div ui-sortable="sortableOptions" ng-model="renderModel">
+        <div ng-repeat="macro in renderModel">
+            <umb-node-preview
+                name="macro.macroAlias"
+                icon="macro.icon"
+                description="macro.details"
+                sortable="!sortableOptions.disabled"
+                allow-remove="allowRemoveButton"
+                allow-open="allowOpenButton && macro.details"
+                on-remove="remove($index)"
+                on-open="edit($index)">
+            </umb-node-preview>
+        </div>
+    </div>
 
-			<i class="icon icon-navigation handle"></i>
-
-            <div class="pull-right">
-                <a href ng-click="edit($index)"><i ng-show="macro.details" class="icon icon-edit"></i></a>
-                <i class="icon icon-delete red" ng-click="remove($index)" ></i>
-            </div>
-
-			<a href="#" prevent-default ng-click="edit($index)">{{macro.macroAlias}}</a>
-            <small class="umb-detail">{{macro.details}}</small> 
-        </li>
-	</ul>
-
-    <ul class="unstyled list-icons" ng-hide="model.config.max && model.config.max > 0 && renderModel.length >= model.config.max">
-        <li>
-            <i class="icon icon-add blue"></i>
-            <a href="#" ng-click="add()" prevent-default>
-                <localize key="general_add">Add</localize>
-            </a>
-        </li>
-    </ul>
+    <a ng-hide="model.config.max && model.config.max > 0 && renderModel.length >= model.config.max"
+        class="umb-node-preview-add"
+        href=""
+        ng-click="add()"
+        prevent-default>
+        <localize key="general_add">Add</localize>
+    </a>
 
     <umb-overlay
         ng-if="macroPickerOverlay.show"