From 233e3d9387f2022f524fd981cb74e9fa1fb1e029 Mon Sep 17 00:00:00 2001
From: bjarnef <bjarne_fyrstenborg@hotmail.com>
Date: Sun, 27 Mar 2016 19:07:09 +0200
Subject: [PATCH] Fix issues with tree icons + legacy icons

---
 .../components/tree/umbtreeitem.directive.js  | 11 +++++------
 src/Umbraco.Web.UI.Client/src/less/hacks.less |  8 ++++++--
 src/Umbraco.Web.UI.Client/src/less/tree.less  | 19 +++++++++++++------
 3 files changed, 24 insertions(+), 14 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
index 20fdc6e332..f4fe0db4e6 100644
--- 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
@@ -34,7 +34,7 @@ angular.module("umbraco.directives")
         //TODO: Remove more of the binding from this template and move the DOM manipulation to be manually done in the link function,
         // this will greatly improve performance since there's potentially a lot of nodes being rendered = a LOT of watches!
 
-        template: '<li ng-class="{\'current\': (node == currentNode)}" on-right-click="altSelect(node, $event)">' +
+        template: '<li ng-class="{\'current\': (node == currentNode), \'has-children\': node.hasChildren}" on-right-click="altSelect(node, $event)">' +
             '<div ng-class="getNodeCssClass(node)" ng-swipe-right="options(node, $event)" >' +
             //NOTE: This ins element is used to display the search icon if the node is a container/listview and the tree is currently in dialog
             //'<ins ng-if="tree.enablelistviewsearch && node.metaData.isContainer" class="umb-tree-node-search icon-search" ng-click="searchNode(node, $event)" alt="searchAltText"></ins>' + 
@@ -72,14 +72,13 @@ angular.module("umbraco.directives")
                     //set the padding
                     .css("padding-left", (node.level * 20) + "px");
 
-                //remove first 'ins' if there is no children
-                //show/hide last 'ins' depending on children
+                //toggle visibility of last 'ins' depending on children
+                //visibility still ensure the space is "reserved", so both nodes with and without children are aligned.
                 if (!node.hasChildren) {
-                    element.find("ins:first").remove();
-                    element.find("ins").last().hide();
+                    element.find("ins").last().css("visibility", "hidden");
                 }
                 else {
-                    element.find("ins").last().show();
+                    element.find("ins").last().css("visibility", "visible");
                 }
 
                 var icon = element.find("i:first");
diff --git a/src/Umbraco.Web.UI.Client/src/less/hacks.less b/src/Umbraco.Web.UI.Client/src/less/hacks.less
index 0d41eed050..fb809af015 100644
--- a/src/Umbraco.Web.UI.Client/src/less/hacks.less
+++ b/src/Umbraco.Web.UI.Client/src/less/hacks.less
@@ -63,9 +63,13 @@ iframe, .content-column-body {
 
 
 /*tree legacy icon*/
-.legacy-custom-file{
-  width: 16px; height: 16px; margin-right: 11px; display: inline-block;
+.legacy-custom-file {
+  width: 16px;
+  height: 16px;
+  min-width: 20px; /* this ensure the icon takes up same space as font-icon (20px) */
+  display: inline-block;
   background-position: center center;
+  background-repeat: no-repeat;
 }
 
 /*
diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less
index 185b5a6e3b..61286c05a9 100644
--- a/src/Umbraco.Web.UI.Client/src/less/tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/tree.less
@@ -155,6 +155,11 @@
 	display: flex;
 }
 
+.umb-tree li > div:hover a:not(.umb-options) {
+	overflow: hidden;
+    margin-right: 6px;
+}
+
 .umb-tree .icon {
 	vertical-align: middle;
 	margin: 0 13px 0 0;
@@ -477,7 +482,6 @@ div.locked:before{
 	width:100%;
 	height:1px;
 	overflow:hidden;
-
 	position: absolute;
 	left: 0;
 	bottom: 0;
@@ -495,15 +499,18 @@ div.locked:before{
 
 /*body.touch .umb-tree .icon{font-size: 19px;}*/
 body.touch .umb-tree ins{font-size: 14px; visibility: visible; padding: 7px;}
-body.touch .umb-tree li div {
+body.touch .umb-tree li > div {
 	padding-top: 8px;
 	padding-bottom: 8px;
 	font-size: 110%;
 }
 
-body.touch .umb-actions a{
-	padding: 7px 25px 7px 20px;
-	font-size: 110%;
+// change height of this if touch devices should have a different height of preloader.
+body.touch .umb-tree li div.l div {
+	padding: 0;
 }
 
-body.touch a.umb-options i {margin-top: 20px;}
+body.touch .umb-actions a {
+	padding: 7px 25px 7px 20px;
+	font-size: 110%;
+}
\ No newline at end of file