Use umb-icon component in tree item

umbraco · Feb 8, 2021 · 044573d · 044573d
1 parent 5fc37df
commit 044573d
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/tree/umbtree.directive.js
@@ -348,7 +348,7 @@ function umbTreeDirective($q, $rootScope, treeService, notificationsService, use
             };
 
             $scope.selectEnabledNodeClass = node =>
-                node && node.selected ? 'icon umb-tree-icon sprTree icon-check green temporary' : '';            
+                node && node.selected ? 'icon sprTree icon-check green temporary' : '-hidden';
 
             /* helper to force reloading children of a tree node */
             $scope.loadChildren = (node, forceReload) => loadChildren(node, forceReload);

diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less b/src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
@@ -341,7 +341,12 @@ body.touch .umb-tree {
     vertical-align: middle;
     margin: 0 13px 0 0;
     color: @ui-option-type;
-    font-size: 20px;   
+    font-size: 20px;
+
+    &.-hidden {
+        display: none;
+        visibility: hidden;
+    }
 
     &.blue {
         color: @blue;

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,11 @@
         <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)" aria-hidden="true"></i>
+                    <umb-icon icon="icon-check"
+                              class="umb-tree-icon icon-check"
+                              ng-class="selectEnabledNodeClass(tree.root)"
+                              ng-if="enablecheckboxes === 'true'">
+                    </umb-icon>
                     {{tree.name}}
                 </a>
             </h5>
@@ -38,7 +42,11 @@ <h5>
         <div class="umb-tree-root" data-element="tree-root" ng-class="getNodeCssClass(group)" ng-hide="hideheader === 'true'" on-right-click="altSelect(group, $event)">
             <h5>
                 <a ng-href="#/{{section}}" ng-click="select(group, $event)" class="umb-tree-root-link umb-outline" data-element="tree-root-link">
-                    <i ng-if="enablecheckboxes === 'true'" ng-class="selectEnabledNodeClass(group)" aria-hidden="true"></i>
+                    <umb-icon icon="icon-check"
+                              class="umb-tree-icon icon-check"
+                              ng-class="selectEnabledNodeClass(group)"
+                              ng-if="enablecheckboxes === 'true'">
+                    </umb-icon>
                     {{group.name}}
                 </a>
             </h5>