Update content type icon on save (#8585)

* Emit event when content type icon/color change * Allow node css class to change when icon change * Cleanup unused injected services * Add missing aria-hidden attribute in tree * Fix typo
umbraco · Aug 20, 2020 · 55c37e0 · 55c37e0
1 parent 8db0967
commit 55c37e0
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 11 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtreeitem.directive.js
@@ -190,14 +190,21 @@ angular.module("umbraco.directives")
 
             var evts = [];
 
-            //listen for section changes
+            // Listen for section changes
             evts.push(eventsService.on("appState.sectionState.changed", function(e, args) {
                 if (args.key === "currentSection") {
                     //when the section changes disable all delete animations
                     scope.node.deleteAnimations = false;
                 }
             }));
 
+            // Update tree icon if changed
+            evts.push(eventsService.on("editors.tree.icon.changed", function (e, args) {          
+                if (args.icon !== scope.node.icon && args.id === scope.node.id) {
+                    scope.node.icon = args.icon;
+                }
+            }));
+
             /** Depending on if any menu is shown and if the menu is shown for the current node, toggle delete animations */
             function toggleDeleteAnimations() {
                 //if both are false then remove animations

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-item.html
@@ -9,7 +9,7 @@
             <span class="sr-only">Expand child items for {{node.name}}</span>
         </button>
 
-        <i class="icon umb-tree-icon sprTree" ng-class="::node.cssClass" title="{{::node.title}}" ng-click="select(node, $event)" ng-style="::node.style" tabindex="-1"></i>
+        <i class="icon umb-tree-icon sprTree" ng-class="node.cssClass" title="{{::node.title}}" ng-click="select(node, $event)" ng-style="::node.style" tabindex="-1" aria-hidden="true"></i>
         <span class="umb-tree-item__annotation"></span>
         <a class="umb-tree-item__label" ng-href="#/{{::node.routePath}}" ng-click="select(node, $event)" title="{{::node.title}}">{{node.name}}</a>
 

diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree.html
@@ -4,7 +4,7 @@
         <div class="umb-tree-root" data-element="tree-root" ng-class="getNodeCssClass(tree.root)" ng-hide="hideheader === 'true'" on-right-click="altSelect(tree.root, $event)">
             <h5>
                 <a ng-href="#/{{section}}" ng-click="select(tree.root, $event)" class="umb-tree-root-link umb-outline" data-element="tree-root-link">
-                    <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(tree.root)"></i>
+                    <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(tree.root)" aria-hidden="true"></i>
                     {{tree.name}}
                 </a>
             </h5>

diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/edit.controller.js
@@ -9,7 +9,10 @@
 (function () {
     "use strict";
 
-    function DocumentTypesEditController($scope, $routeParams, contentTypeResource, dataTypeResource, editorState, contentEditingHelper, formHelper, navigationService, iconHelper, contentTypeHelper, notificationsService, $q, localizationService, overlayHelper, eventsService, angularHelper, editorService) {
+    function DocumentTypesEditController($scope, $routeParams, $q,
+        contentTypeResource, editorState, contentEditingHelper,
+        navigationService, iconHelper, contentTypeHelper, notificationsService,
+        localizationService, overlayHelper, eventsService, angularHelper, editorService) {
 
         var vm = this;
         var evts = [];
@@ -21,6 +24,7 @@
         var isElement = $routeParams.iselement;
         var allowVaryByCulture = $routeParams.culturevary;
         var infiniteMode = $scope.model && $scope.model.infiniteMode;
+        var documentTypeIcon = "";
 
         vm.save = save;
         vm.close = close;
@@ -354,6 +358,10 @@
                     // emit event
                     var args = { documentType: vm.contentType };
                     eventsService.emit("editors.documentType.saved", args);
+
+                    if (documentTypeIcon !== vm.contentType.icon) {
+                        eventsService.emit("editors.tree.icon.changed", args);
+                    }
 
                     vm.page.saveButtonState = "success";
 
@@ -403,10 +411,12 @@
             // convert icons for content type
             convertLegacyIcons(contentType);
 
-            vm.contentType = contentType;
-
             //set a shared state
-            editorState.set(vm.contentType);
+            editorState.set(contentType);
+
+            vm.contentType = contentType;
+
+            documentTypeIcon = contentType.icon;
 
             loadButtons();
         }

diff --git a/src/Umbraco.Web.UI.Client/src/views/mediatypes/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/mediatypes/edit.controller.js
@@ -10,7 +10,7 @@
     "use strict";
 
     function MediaTypesEditController($scope, $routeParams, $q,
-        mediaTypeResource, dataTypeResource, editorState, contentEditingHelper, 
+        mediaTypeResource, editorState, contentEditingHelper, 
         navigationService, iconHelper, contentTypeHelper, notificationsService,
         localizationService, overlayHelper, eventsService, angularHelper) {
 
@@ -19,6 +19,7 @@
         var mediaTypeId = $routeParams.id;
         var create = $routeParams.create;
         var infiniteMode = $scope.model && $scope.model.infiniteMode;
+        var mediaTypeIcon = "";
 
         vm.save = save;
         vm.close = close;
@@ -282,7 +283,7 @@
         function save() {
 
             // only save if there is no overlays open
-            if(overlayHelper.getNumberOfOverlays() === 0) {
+            if (overlayHelper.getNumberOfOverlays() === 0) {
 
                 var deferred = $q.defer();
 
@@ -339,9 +340,13 @@
                     var args = { mediaType: vm.contentType };
                     eventsService.emit("editors.mediaType.saved", args);
 
+                    if (mediaTypeIcon !== vm.contentType.icon) {
+                        eventsService.emit("editors.tree.icon.changed", args);
+                    }
+
                     vm.page.saveButtonState = "success";
 
-                    if(infiniteMode && $scope.model.submit) {
+                    if (infiniteMode && $scope.model.submit) {
                         $scope.model.submit();
                     }
 
@@ -378,6 +383,8 @@
             editorState.set(contentType);
 
             vm.contentType = contentType;
+
+            mediaTypeIcon = contentType.icon;
         }
 
         function convertLegacyIcons(contentType) {

diff --git a/src/Umbraco.Web.UI.Client/src/views/membertypes/edit.controller.js b/src/Umbraco.Web.UI.Client/src/views/membertypes/edit.controller.js
@@ -10,7 +10,7 @@
     "use strict";
 
     function MemberTypesEditController($scope, $routeParams, $q,
-        memberTypeResource, dataTypeResource, editorState, iconHelper,
+        memberTypeResource, editorState, iconHelper,
         navigationService, contentEditingHelper, notificationsService, localizationService,
         overlayHelper, contentTypeHelper, angularHelper, eventsService) {
 
@@ -19,6 +19,7 @@
         var infiniteMode = $scope.model && $scope.model.infiniteMode;
         var memberTypeId = $routeParams.id;
         var create = $routeParams.create;
+        var memberTypeIcon = "";
 
         vm.save = save;
         vm.close = close;
@@ -259,6 +260,10 @@
                     var args = { memberType: vm.contentType };
                     eventsService.emit("editors.memberType.saved", args);
 
+                    if (memberTypeIcon !== vm.contentType.icon) {
+                        eventsService.emit("editors.tree.icon.changed", args);
+                    }
+
                     vm.page.saveButtonState = "success";
 
                     if(infiniteMode && $scope.model.submit) {
@@ -299,6 +304,8 @@
             editorState.set(contentType);
 
             vm.contentType = contentType;
+
+            memberTypeIcon = contentType.icon;
         }
 
         function convertLegacyIcons(contentType) {