From 76ff12f681232ebe0ce727357e6e6f79acc95bae Mon Sep 17 00:00:00 2001
From: Simon Busborg <simon@umbraco.com>
Date: Tue, 19 Jan 2016 14:54:09 +0100
Subject: [PATCH] Fixes: U4-7762 Move document or media briefly show error- and
 success placeholders + odd position of checkmark at root level

---
 .../components/tree/umbtree.directive.js      | 57 +++++++++----------
 src/Umbraco.Web.UI.Client/src/less/tree.less  | 34 +++++++----
 .../application/umb-navigation.html           | 13 +++--
 .../tree/umb-tree-search-results.html         | 10 ++--
 4 files changed, 65 insertions(+), 49 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
index a7d271c892..75d0144982 100644
--- 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
@@ -31,8 +31,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
             var template = '<ul class="umb-tree ' + hideoptions + '"><li class="root">';
             template += '<div ng-hide="hideheader" on-right-click="altSelect(tree.root, $event)">' +
                 '<h5>' +
-                '<i ng-if="enablecheckboxes == \'true\'" ng-class="selectEnabledNodeClass(tree.root)"></i>' +
-                '<a href="#/{{section}}" ng-click="select(tree.root, $event)"  class="root-link">{{tree.name}}</a></h5>' +
+                '<a href="#/{{section}}" ng-click="select(tree.root, $event)"  class="root-link"><i ng-if="enablecheckboxes == \'true\'" ng-class="selectEnabledNodeClass(tree.root)"></i> {{tree.name}}</a></h5>' +
                 '<a class="umb-options" ng-hide="tree.root.isContainer || !tree.root.menuUrl" ng-click="options(tree.root, $event)" ng-swipe-right="options(tree.root, $event)"><i></i><i></i><i></i></a>' +
                 '</div>';
             template += '<ul>' +
@@ -47,12 +46,12 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
 
                 //flag to track the last loaded section when the tree 'un-loads'. We use this to determine if we should
                 // re-load the tree again. For example, if we hover over 'content' the content tree is shown. Then we hover
-                // outside of the tree and the tree 'un-loads'. When we re-hover over 'content', we don't want to re-load the 
+                // outside of the tree and the tree 'un-loads'. When we re-hover over 'content', we don't want to re-load the
                 // entire tree again since we already still have it in memory. Of course if the section is different we will
                 // reload it. This saves a lot on processing if someone is navigating in and out of the same section many times
                 // since it saves on data retreival and DOM processing.
                 var lastSection = "";
-                
+
                 //setup a default internal handler
                 if (!scope.eventhandler) {
                     scope.eventhandler = $({});
@@ -68,7 +67,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                         $(scope.eventhandler).trigger(eventName, args);
                     }
                 }
-                
+
                 /** This will deleteAnimations to true after the current digest */
                 function enableDeleteAnimations() {
                     //do timeout so that it re-enables them after this digest
@@ -102,9 +101,9 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                                 scope.loadChildren(node, true);
                             }
                         };
-                        
-                        /** 
-                            Used to do the tree syncing. If the args.tree is not specified we are assuming it has been 
+
+                        /**
+                            Used to do the tree syncing. If the args.tree is not specified we are assuming it has been
                             specified previously using the _setActiveTreeType
                         */
                         scope.eventhandler.syncTree = function(args) {
@@ -114,7 +113,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                             if (!args.path) {
                                 throw "args.path cannot be null";
                             }
-                            
+
                             var deferred = $q.defer();
 
                             //this is super complex but seems to be working in other places, here we're listening for our
@@ -123,7 +122,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                                 deferred.resolve(syncArgs);
                             });
 
-                            //this should normally be set unless it is being called from legacy 
+                            //this should normally be set unless it is being called from legacy
                             // code, so set the active tree type before proceeding.
                             if (args.tree) {
                                 loadActiveTree(args.tree);
@@ -140,7 +139,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
 
                             args.path = _.filter(args.path, function (item) { return (item !== "init" && item !== "-1"); });
 
-                            //Once those are filtered we need to check if the current user has a special start node id, 
+                            //Once those are filtered we need to check if the current user has a special start node id,
                             // if they do, then we're going to trim the start of the array for anything found from that start node
                             // and previous so that the tree syncs properly. The tree syncs from the top down and if there are parts
                             // of the tree's path in there that don't actually exist in the dom/model then syncing will not work.
@@ -162,13 +161,13 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
 
                             });
 
-                            
+
 
                             return deferred.promise;
                         };
 
-                        /** 
-                            Internal method that should ONLY be used by the legacy API wrapper, the legacy API used to 
+                        /**
+                            Internal method that should ONLY be used by the legacy API wrapper, the legacy API used to
                             have to set an active tree and then sync, the new API does this in one method by using syncTree.
                             loadChildren is optional but if it is set, it will set the current active tree and load the root
                             node's children - this is synonymous with the legacy refreshTree method - again should not be used
@@ -194,7 +193,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                     }
                 }
 
-                
+
                 //given a tree alias, this will search the current section tree for the specified tree alias and
                 //set that to the activeTree
                 //NOTE: loadChildren is ONLY used for legacy purposes, do not use this when syncing the tree as it will cause problems
@@ -214,7 +213,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                             }
                             return false;
                         });
-                        
+
                         if (!scope.activeTree) {
                             throw "Could not find the tree " + treeAlias + ", activeTree has not been set";
                         }
@@ -263,7 +262,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                             .then(function(data) {
                                 //set the data once we have it
                                 scope.tree = data;
-                                
+
                                 enableDeleteAnimations();
 
                                 scope.loading = false;
@@ -272,7 +271,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                                 scope.activeTree = scope.tree.root;
                                 emitEvent("treeLoaded", { tree: scope.tree });
                                 emitEvent("treeNodeExpanded", { tree: scope.tree, node: scope.tree.root, children: scope.tree.root.children });
-                           
+
                             }, function(reason) {
                                 scope.loading = false;
                                 notificationsService.error("Tree Error", reason);
@@ -294,9 +293,9 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                         if (activate === undefined || activate === true) {
                             scope.currentNode = data;
                         }
-                        
+
                         emitEvent("treeSynced", { node: data, activate: activate });
-                        
+
                         enableDeleteAnimations();
                     });
 
@@ -310,8 +309,8 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                         '';
                 };
 
-                /** method to set the current animation for the node. 
-                 *  This changes dynamically based on if we are changing sections or just loading normal tree data. 
+                /** method to set the current animation for the node.
+                 *  This changes dynamically based on if we are changing sections or just loading normal tree data.
                  *  When changing sections we don't want all of the tree-ndoes to do their 'leave' animations.
                  */
                 scope.animation = function() {
@@ -330,7 +329,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                     //emit treeNodeExpanding event, if a callback object is set on the tree
                     emitEvent("treeNodeExpanding", { tree: scope.tree, node: node });
 
-                    //standardising                
+                    //standardising
                     if (!node.children) {
                         node.children = [];
                     }
@@ -341,7 +340,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                             .then(function(data) {
                                 //emit expanded event
                                 emitEvent("treeNodeExpanded", { tree: scope.tree, node: node, children: data });
-                                
+
                                 enableDeleteAnimations();
 
                                 deferred.resolve(data);
@@ -350,7 +349,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                     else {
                         emitEvent("treeNodeExpanded", { tree: scope.tree, node: node, children: node.children });
                         node.expanded = true;
-                        
+
                         enableDeleteAnimations();
 
                         deferred.resolve(node.children);
@@ -369,13 +368,13 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                 };
 
                 /**
-                  Method called when an item is clicked in the tree, this passes the 
+                  Method called when an item is clicked in the tree, this passes the
                   DOM element, the tree node object and the original click
                   and emits it as a treeNodeSelect element if there is a callback object
                   defined on the tree
                 */
                 scope.select = function (n, ev) {
-                    //on tree select we need to remove the current node - 
+                    //on tree select we need to remove the current node -
                     // whoever handles this will need to make sure the correct node is selected
                     //reset current node selection
                     scope.currentNode = null;
@@ -386,7 +385,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                 scope.altSelect = function(n, ev) {
                     emitEvent("treeNodeAltSelect", { element: elem, tree: scope.tree, node: n, event: ev });
                 };
-                
+
                 //watch for section changes
                 scope.$watch("section", function(newVal, oldVal) {
 
@@ -408,7 +407,7 @@ function umbTreeDirective($compile, $log, $q, $rootScope, treeService, notificat
                         lastSection = newVal;
                     }
                 });
-                
+
                 setupExternalEvents();
                 loadTree();
             };
diff --git a/src/Umbraco.Web.UI.Client/src/less/tree.less b/src/Umbraco.Web.UI.Client/src/less/tree.less
index 33f4b6373d..8106c0c0a3 100644
--- a/src/Umbraco.Web.UI.Client/src/less/tree.less
+++ b/src/Umbraco.Web.UI.Client/src/less/tree.less
@@ -60,10 +60,13 @@
 .umb-tree li.root > div h5 {
 	margin: 0;
 	width: 100%;
+
+	display: flex;
+	align-items: center;
 }
 
-.umb-tree li.root > div h5 > a {
-	display: block;
+.umb-tree li.root > div h5 > a, .umb-tree-header {
+	display: flex;
 	padding: 20px 0 20px 20px;
 	box-sizing: border-box;
 }
@@ -186,6 +189,16 @@
     /*color:@turquoise;*/
 }
 
+.umb-tree .umb-search-group-item {
+	padding-left: 20px;
+}
+
+.umb-tree .umb-search-group-item-link {
+	display: flex;
+	flex-wrap: wrap;
+	flex-direction: column;
+}
+
 .icon-check:before {
 	content: "\e165";
 }
@@ -200,14 +213,14 @@
 
 a.umb-options {
 	visibility: hidden;
-	cursor: pointer;
-	display: inline-block;
-	text-align: center;
-	position: absolute;
-	right: 10px;
-	top: 2px;
-	padding: 0 5px 5px 5px;
-	border: 1px solid transparent;
+
+	display: flex;
+	justify-content: flex-end;
+
+    padding: 9px 5px;
+    text-align: center;
+    cursor: pointer;
+    margin-right: 10px;
 }
 
 a.umb-options i {
@@ -225,7 +238,6 @@ a.umb-options i:last-child {
 
 a.umb-options:hover {
 	background: @btnBackgroundHighlight;
-	border: 1px solid @grayLight;
 	.border-radius(@baseBorderRadius);
 }
 
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
index 3e87bccde6..db8fd92008 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/application/umb-navigation.html
@@ -36,16 +36,19 @@
                     <ul class="umb-tree">
                         <li class="root">
                             <div>
-                                <h5><localize key="general_searchResults">Search results</localize></h5>
+                                <h5 class="umb-tree-header"><localize key="general_searchResults">Search results</localize></h5>
                             </div>
 
                             <ul class="umb-search-group" ng-repeat="group in groups">
                                 <li ng-repeat="result in group.results" ng-class="{'current':selectedItem == result}">
-                                    <div>
-                                        <a ng-class="{'first':$first}" ng-click="searchHide()" ng-href="#/{{result.editorPath}}">
+                                    <div class="umb-search-group-item">
+                                        <a class="umb-search-group-item-link" ng-class="{'first':$first}" ng-click="searchHide()" ng-href="#/{{result.editorPath}}">
+
+                                            <div class="umb-search-group-item-name">
+                                                <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
+                                                {{result.name}}
+                                            </div>
 
-                                            <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
-                                            {{result.name}}
                                             <small class="search-subtitle" ng-show="result.subTitle">
                                                 {{result.subTitle}}
                                             </small>
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
index 2dc864f00c..e277ec63a8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/tree/umb-tree-search-results.html
@@ -4,9 +4,11 @@
             <ul class="umb-search-group">
                 <li ng-repeat="result in results">
                     <div style="padding-left: 20px">
-                        <a ng-class="{first:$first}" ng-click="selectResultCallback($event, result)">
-                            <i class="icon umb-tree-icon sprTree {{result.selected ? 'icon-check blue temporary' : result.icon}}"></i>
-                            {{result.name}}
+                        <a class="umb-search-group-item-link" ng-class="{first:$first}" ng-click="selectResultCallback($event, result)">
+                            <div class="umb-search-group-item-name">
+                                <i class="icon umb-tree-icon sprTree {{result.icon}}"></i>
+                                {{result.name}}
+                            </div>
                             <small class="search-subtitle" ng-if="result.subTitle">{{result.subTitle}}</small>
                         </a>
                     </div>
@@ -14,4 +16,4 @@
             </ul>
         </li>
     </ul>
-</div>
\ No newline at end of file
+</div>