Implement icon parameter for doctype editor (#11008)

* fix: implement icon parameter for doctype editor issue #10108 * fix: move color from icon to class attribute * fix: removed defined colors, defaulting to the standard dark grey (ie "no color picked" in icon picker) * cleaned up unused dependencies, double quotes to single, removed unused 'color' param from the create methods, and use shorthand object creation in createDocType (if the key has the same name as the variable passed as a prop, we only need to pass the key name) * fix comment Co-authored-by: Nathan Woulfe <[email protected]>
umbraco · Sep 21, 2021 · 9a246a1 · 9a246a1
1 parent 674edd3
commit 9a246a1
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 35 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/create.controller.js b/src/Umbraco.Web.UI.Client/src/views/documenttypes/create.controller.js
@@ -6,11 +6,11 @@
  * @description
  * The controller for the doc type creation dialog
  */
-function DocumentTypesCreateController($scope, $location, navigationService, contentTypeResource, formHelper, appState, notificationsService, localizationService, iconHelper) {
+function DocumentTypesCreateController($scope, $location, navigationService, contentTypeResource, formHelper, appState) {
 
     $scope.model = {
-        allowCreateFolder: $scope.currentNode.parentId === null || $scope.currentNode.nodeType === "container",
-        folderName: "",
+        allowCreateFolder: $scope.currentNode.parentId === null || $scope.currentNode.nodeType === 'container',
+        folderName: '',
         creatingFolder: false
     };
 
@@ -31,18 +31,18 @@ function DocumentTypesCreateController($scope, $location, navigationService, con
 
                 navigationService.hideMenu();
 
-                var currPath = node.path ? node.path : "-1";
+                var currPath = node.path ? node.path : '-1';
 
                 navigationService.syncTree({
-                    tree: "documenttypes",
-                    path: currPath + "," + folderId,
+                    tree: 'documenttypes',
+                    path: currPath + ',' + folderId,
                     forceReload: true,
                     activate: true
                 });
 
                 formHelper.resetForm({ scope: $scope, formCtrl: $scope.createFolderForm });
 
-                var section = appState.getSectionState("currentSection");
+                var section = appState.getSectionState('currentSection');
 
             }, function (err) {
 
@@ -51,39 +51,54 @@ function DocumentTypesCreateController($scope, $location, navigationService, con
 
             });
         }
-    };   
+    };
+
+    function createDocType(config) {
+
+        $location.search('create', null);
+        $location.search('notemplate', null);
+        $location.search('iscomposition', null);
+        $location.search('iselement', null);
+        $location.search('icon', null);
+
+        var icon = null;
+
+        if (config.icon != undefined && config.icon != null) {
+            icon = config.icon;
+            if (config.color) {
+                icon += ' ' + config.color;
+            }
+        }
+
+        $location
+            .path('/settings/documenttypes/edit/' + node.id)
+            .search('create', 'true')
+            .search('notemplate', config.notemplate ? 'true' : null)
+            .search('iscomposition', config.iscomposition ? 'true' : null)
+            .search('iselement', config.iselement ? 'true' : null)
+            .search('icon', icon);
+
+        navigationService.hideMenu();
+    }
+
 
     // Disabling logic for creating document type with template if disableTemplates is set to true
     if (!disableTemplates) {
-        $scope.createDocType = function () {
-            $location.search('create', null);
-            $location.search('notemplate', null);
-            $location.path("/settings/documenttypes/edit/" + node.id).search("create", "true");
-            navigationService.hideMenu();
+        $scope.createDocType = function (icon) {
+            createDocType({ icon });
         };
     }
 
-    $scope.createComponent = function () {
-        $location.search('create', null);
-        $location.search('notemplate', null);
-        $location.path("/settings/documenttypes/edit/" + node.id).search("create", "true").search("notemplate", "true");
-        navigationService.hideMenu();
+    $scope.createComponent = function (icon) {
+        createDocType({ notemplate: true, icon });
     };
 
-    $scope.createComposition = function () {
-        $location.search('create', null);
-        $location.search('notemplate', null);
-        $location.search('iscomposition', null);
-        $location.path("/settings/documenttypes/edit/" + node.id).search("create", "true").search("notemplate", "true").search("iscomposition", "true");
-        navigationService.hideMenu();
+    $scope.createComposition = function (icon) {
+        createDocType({ iscomposition: true, iselement: true, icon });
     };
 
-    $scope.createElement = function () {
-        $location.search('create', null);
-        $location.search('notemplate', null);
-        $location.search('iselement', null);
-        $location.path("/settings/documenttypes/edit/" + node.id).search("create", "true").search("notemplate", "true").search("iselement", "true");
-        navigationService.hideMenu();
+    $scope.createElement = function (icon) {
+        createDocType({ iselement: true, icon });
     };
 
     $scope.close = function() {
@@ -92,4 +107,4 @@ function DocumentTypesCreateController($scope, $location, navigationService, con
     };
 }
 
-angular.module('umbraco').controller("Umbraco.Editors.DocumentTypes.CreateController", DocumentTypesCreateController);
+angular.module('umbraco').controller('Umbraco.Editors.DocumentTypes.CreateController', DocumentTypesCreateController);
diff --git a/src/Umbraco.Web.UI.Client/src/views/documenttypes/create.html b/src/Umbraco.Web.UI.Client/src/views/documenttypes/create.html
@@ -5,7 +5,7 @@ <h5><localize key="create_createUnder">Create an item under</localize> {{current
 
             <ul class="umb-actions umb-actions-child">
                 <li data-element="action-documentType" class="umb-action" ng-hide="model.disableTemplates">
-                    <button type="button" ng-click="createDocType()" class="umb-action-link umb-outline btn-reset" umb-auto-focus>
+                    <button type="button" ng-click="createDocType('icon-document')" class="umb-action-link umb-outline btn-reset" umb-auto-focus>
                         <umb-icon icon="icon-document" class="icon large"></umb-icon>
                         <span class="menu-label">
                             <localize key="create_documentTypeWithTemplate">Document Type with Template</localize>
@@ -14,7 +14,7 @@ <h5><localize key="create_createUnder">Create an item under</localize> {{current
                     </button>
                 </li>
                 <li data-element="action-documentTypeWithoutTemplate" class="umb-action">
-                    <button type="button" ng-click="createComponent()" class="umb-action-link umb-outline btn-reset">
+                    <button type="button" ng-click="createComponent('icon-item-arrangement')" class="umb-action-link umb-outline btn-reset">
                         <umb-icon icon="icon-item-arrangement" class="icon large"></umb-icon>
                         <span class="menu-label">
                             <localize key="create_documentType">Document Type</localize>
@@ -23,7 +23,7 @@ <h5><localize key="create_createUnder">Create an item under</localize> {{current
                     </button>
                 </li>
                 <li data-element="action-documentTypeWithIsElementTypeChecked" class="umb-action">
-                    <button type="button" ng-click="createElement()" class="umb-action-link umb-outline btn-reset">
+                    <button type="button" ng-click="createElement('icon-science')" class="umb-action-link umb-outline btn-reset">
                         <umb-icon icon="icon-science" class="icon large"></umb-icon>
                         <span class="menu-label">
                             <localize key="create_elementType">Element Type</localize>
@@ -32,7 +32,7 @@ <h5><localize key="create_createUnder">Create an item under</localize> {{current
                     </button>
                 </li>
                 <li data-element="action-documentTypeWithoutTemplateForComposition" class="umb-action">
-                    <button type="button" ng-click="createComposition()" class="umb-action-link umb-outline btn-reset">
+                    <button type="button" ng-click="createComposition('icon-defrag')" class="umb-action-link umb-outline btn-reset">
                         <umb-icon icon="icon-defrag" class="icon large"></umb-icon>
                         <span class="menu-label">
                             <localize key="create_composition">Composition</localize>

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
@@ -22,6 +22,7 @@
         var create = $routeParams.create;
         var noTemplate = $routeParams.notemplate;
         var isElement = $routeParams.iselement;
+        var icon = $routeParams.icon;
         var allowVaryByCulture = $routeParams.culturevary;
         var infiniteMode = $scope.model && $scope.model.infiniteMode;
         var documentTypeIcon = "";
@@ -72,6 +73,7 @@
                 if (create && !documentTypeId) documentTypeId = -1;
                 noTemplate = $scope.model.notemplate || $scope.model.noTemplate;
                 isElement = $scope.model.isElement;
+                icon = $scope.model.icon;
                 allowVaryByCulture = $scope.model.allowVaryByCulture;
                 vm.submitButtonKey = "buttons_saveAndClose";
                 vm.generateModelsKey = "buttons_generateModelsAndClose";
@@ -415,6 +417,12 @@
             if (isElement) {
                 contentType.isElement = true;
             }
+
+            // set icon if one is provided
+            if (icon !== null) {
+                contentType.icon = icon;
+            }
+
             // set vary by culture checkbox by default
             if (allowVaryByCulture) {
                 contentType.allowCultureVariant = true;