Support custom SVG icon in property actions

src/Umbraco.Web.UI.Client/src/common/directives/components/property/umbpropertyactions.component.js

@@ -22,6 +22,7 @@
 
         vm.$onDestroy = onDestroy;
         vm.$onInit = onInit;
+        vm.$onChanges = onChanges;
 
         function initDropDown() {
             keyboardService.bind("esc", vm.close);
@@ -72,6 +73,25 @@
                 vm.labels.closeText = values[1];
             });
         }
+
+        function onChanges(simpleChanges) {
+            if (simpleChanges.actions) {
+
+              let actions = simpleChanges.actions.currentValue || [];
+
+              Utilities.forEach(actions, action => {
+
+                if (action.labelKey) {
+                    localizationService.localize(action.labelKey, (action.labelTokens || []), action.label).then(data => {
+                      action.label = data;
+                    });
+
+                    action.useLegacyIcon = action.useLegacyIcon === false ? false : true;
+                    action.icon = (action.useLegacyIcon ? 'icon-' : '') + action.icon;
+                }
+              });
+            }
+        }
     }
 
     var umbPropertyActionsComponent = {

src/Umbraco.Web.UI.Client/src/views/components/property/umb-property-actions.html

@@ -11,8 +11,8 @@
         <ul class="umb-contextmenu">
             <li ng-repeat="action in vm.actions" role="menuitem" class="umb-contextmenu-item" ng-class="{'-opens-dialog': action.opensDialog}">
                 <button type="button" class="btn-reset umb-outline" ng-click="vm.executeAction(action)" ng-disabled="action.isDisabled === true">
-                    <umb-icon icon="icon-{{action.icon}}" class="icon"></umb-icon>
-                    <span class="menu-label"><localize key="{{::action.labelKey}}" tokens="action.labelTokens"></localize></span>
+                    <umb-icon icon="{{action.icon}}" class="icon"></umb-icon>
+                    <span class="menu-label">{{::action.label}}</span>
                 </button>
             </li>
         </ul>

src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/umbBlockListPropertyEditor.component.js

@@ -32,10 +32,10 @@
 
         var unsubscribe = [];
         var modelObject;
-
+        
         // Property actions:
-        var copyAllBlocksAction = null;
-        var deleteAllBlocksAction = null;
+        let copyAllBlocksAction = null;
+        let deleteAllBlocksAction = null;
 
         var inlineEditing = false;
         var liveEditing = true;
@@ -112,21 +112,23 @@
             } else if(vm.umbElementEditorContent && vm.umbElementEditorContent.getScope) {
                 scopeOfExistence = vm.umbElementEditorContent.getScope();
             }
-
+            
             copyAllBlocksAction = {
                 labelKey: "clipboard_labelForCopyAllEntries",
                 labelTokens: [vm.model.label],
-                icon: "documents",
+                icon: "icon-documents",
                 method: requestCopyAllBlocks,
-                isDisabled: true
+                isDisabled: true,
+                useLegacyIcon: false
             };
 
             deleteAllBlocksAction = {
-                labelKey: 'clipboard_labelForRemoveAllEntries',
+                labelKey: "clipboard_labelForRemoveAllEntries",
                 labelTokens: [],
-                icon: 'trash',
+                icon: "icon-trash",
                 method: requestDeleteAllBlocks,
-                isDisabled: true
+                isDisabled: true,
+                useLegacyIcon: false
             };
 
             var propertyActions = [

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

@@ -117,12 +117,13 @@ function contentPickerController($scope, $q, $routeParams, $location, entityReso
         }
     };
 
-    var removeAllEntriesAction = {
-        labelKey: 'clipboard_labelForRemoveAllEntries',
+    let removeAllEntriesAction = {
+        labelKey: "clipboard_labelForRemoveAllEntries",
         labelTokens: [],
-        icon: 'trash',
+        icon: "icon-trash",
         method: removeAllEntries,
-        isDisabled: true
+        isDisabled: true,
+        useLegacyIcon: false
     };
 
     if ($scope.model.config) {

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

@@ -3,7 +3,7 @@
 angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerController",
     function ($scope, entityResource, mediaHelper, $timeout, userService, localizationService, editorService, overlayService, clipboardService) {
 
-        var vm = this;
+        const vm = this;
 
         vm.labels = {};
         vm.labels.deletedItem = "";
@@ -341,20 +341,22 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
             });
         }
 
-        var copyAllEntriesAction = {
-            labelKey: 'clipboard_labelForCopyAllEntries',
+        let copyAllEntriesAction = {
+            labelKey: "clipboard_labelForCopyAllEntries",
             labelTokens: ['Media'],
-            icon: "documents",
+            icon: "icon-documents",
             method: copyAllEntries,
-            isDisabled: true
+            isDisabled: true,
+            useLegacyIcon: false
         }
 
-        var removeAllEntriesAction = {
-            labelKey: 'clipboard_labelForRemoveAllEntries',
+        let removeAllEntriesAction = {
+            labelKey: "clipboard_labelForRemoveAllEntries",
             labelTokens: [],
-            icon: 'trash',
+            icon: "icon-trash",
             method: removeAllEntries,
-            isDisabled: true
+            isDisabled: true,
+            useLegacyIcon: false
         };
 
         if (multiPicker === true) {

src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker3/umbMediaPicker3PropertyEditor.component.js

@@ -33,8 +33,8 @@
         var unsubscribe = [];
 
         // Property actions:
-        var copyAllMediasAction = null;
-        var removeAllMediasAction = null;
+        let copyAllMediasAction = null;
+        let removeAllMediasAction = null;
 
         var vm = this;
 
@@ -69,17 +69,19 @@
             copyAllMediasAction = {
                 labelKey: "clipboard_labelForCopyAllEntries",
                 labelTokens: [vm.model.label],
-                icon: "documents",
+                icon: "icon-documents",
                 method: requestCopyAllMedias,
-                isDisabled: true
+                isDisabled: true,
+                useLegacyIcon: false
             };
 
             removeAllMediasAction = {
-                labelKey: 'clipboard_labelForRemoveAllEntries',
+                labelKey: "clipboard_labelForRemoveAllEntries",
                 labelTokens: [],
-                icon: 'trash',
+                icon: "icon-trash",
                 method: requestRemoveAllMedia,
-                isDisabled: true
+                isDisabled: true,
+                useLegacyIcon: false
             };
 
             var propertyActions = [];

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

@@ -2,7 +2,7 @@
 //with a specified callback, this callback will receive an object with a selection on it
 function memberGroupPicker($scope, editorService, memberGroupResource, localizationService, overlayService){
 
-    var vm = this;
+    const vm = this;
 
     vm.openMemberGroupPicker = openMemberGroupPicker;
     vm.remove = remove;
@@ -13,12 +13,13 @@ function memberGroupPicker($scope, editorService, memberGroupResource, localizat
         return str.replace(rgxtrim, '');
     }
 
-    var removeAllEntriesAction = {
-        labelKey: 'clipboard_labelForRemoveAllEntries',
+    let removeAllEntriesAction = {
+        labelKey: "clipboard_labelForRemoveAllEntries",
         labelTokens: [],
-        icon: 'trash',
+        icon: "icon-trash",
         method: removeAllEntries,
-        isDisabled: true
+        isDisabled: true,
+        useLegacyIcon: false
     };
 
     $scope.renderModel = [];

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

@@ -1,17 +1,34 @@
-function multiUrlPickerController($scope, localizationService, entityResource, iconHelper, editorService) {
+function multiUrlPickerController($scope, localizationService, entityResource, iconHelper, editorService, overlayService) {
 
     var vm = {
         labels: {
             general_recycleBin: ""
         }
     };
 
+    let removeAllEntriesAction = {
+        labelKey: "clipboard_labelForRemoveAllEntries",
+        labelTokens: [],
+        icon: "icon-trash",
+        method: removeAllEntries,
+        isDisabled: true,
+        useLegacyIcon: false
+    };
+
     $scope.renderModel = [];
 
     if ($scope.preview) {
         return;
     }
 
+    if ($scope.model.config && parseInt($scope.model.config.maxNumber) !== 1 && $scope.umbProperty) {
+        var propertyActions = [
+          removeAllEntriesAction
+        ];
+
+        $scope.umbProperty.setPropertyActions(propertyActions);
+    }
+
     if (!Array.isArray($scope.model.value)) {
         $scope.model.value = [];
     }
@@ -58,17 +75,26 @@ function multiUrlPickerController($scope, localizationService, entityResource, i
                 $scope.multiUrlPickerForm.maxCount.$setValidity("maxCount", true);
             }
             $scope.sortableOptions.disabled = $scope.renderModel.length === 1;
+
+            removeAllEntriesAction.isDisabled = $scope.renderModel.length === 0;
+
             //Update value
             $scope.model.value = $scope.renderModel;
         }
     );
 
     $scope.remove = function ($index) {
         $scope.renderModel.splice($index, 1);
-
+        
         setDirty();
     };
 
+    $scope.clear = function ($index) {
+      $scope.renderModel = [];
+
+      setDirty();
+    };
+
     $scope.openLinkPicker = function (link, $index) {
         var target = link ? {
             name: link.name,
@@ -143,6 +169,22 @@ function multiUrlPickerController($scope, localizationService, entityResource, i
         }
     }
 
+    function removeAllEntries() {
+        localizationService.localizeMany(["content_nestedContentDeleteAllItems", "general_delete"]).then(function (data) {
+          overlayService.confirmDelete({
+            title: data[1],
+            content: data[0],
+            close: function () {
+              overlayService.close();
+            },
+            submit: function () {
+              $scope.clear();
+              overlayService.close();
+            }
+          });
+        });
+    }
+
     function init() {
 
         localizationService.localizeMany(["general_recycleBin"])

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

@@ -1,4 +1,4 @@
-(function () {
+(function () {
     'use strict';
 
     /**
@@ -67,7 +67,8 @@
 
     function NestedContentController($scope, $interpolate, $filter, serverValidationManager, contentResource, localizationService, iconHelper, clipboardService, eventsService, overlayService) {
 
-        var vm = this;
+        const vm = this;
+
         var model = $scope.$parent.$parent.model;
 
         var contentTypeAliases = [];
@@ -135,17 +136,27 @@
             });
         }
 
-        var copyAllEntriesAction = {
-            labelKey: 'clipboard_labelForCopyAllEntries',
+        let copyAllEntriesAction = {
+            labelKey: "clipboard_labelForCopyAllEntries",
             labelTokens: [model.label],
-            icon: 'documents',
+            icon: "icon-documents",
             method: copyAllEntries,
-            isDisabled: true
-        }
+            isDisabled: true,
+            useLegacyIcon: false
+        };
 
+        let removeAllEntriesAction = {
+            labelKey: "clipboard_labelForRemoveAllEntries",
+            labelTokens: [],
+            icon: "icon-trash",
+            method: removeAllEntries,
+            isDisabled: true,
+            useLegacyIcon: false
+        };
+
+        function removeAllEntries() {
 
-        var removeAllEntries = function () {
-            localizationService.localizeMany(["content_nestedContentDeleteAllItems", "general_delete"]).then(function (data) {
+            localizationService.localizeMany(["content_nestedContentDeleteAllItems", "general_delete"]).then(data => {
                 overlayService.confirmDelete({
                     title: data[1],
                     content: data[0],
@@ -161,22 +172,12 @@
                 });
             });
         }
-
-        var removeAllEntriesAction = {
-            labelKey: 'clipboard_labelForRemoveAllEntries',
-            labelTokens: [],
-            icon: 'trash',
-            method: removeAllEntries,
-            isDisabled: true
-        };
-
+
         // helper to force the current form into the dirty state
         function setDirty() {
-
             if (vm.umbProperty) {
                 vm.umbProperty.setDirty();
             }
-
         };
 
         function addNode(alias) {
@@ -729,8 +730,6 @@
             removeAllEntriesAction.isDisabled = copyAllEntriesAction.isDisabled;
         }
 
-
-
         var propertyActions = [
             copyAllEntriesAction,
             removeAllEntriesAction