WIP - quick test to move the tree node style above search bar

src/Umbraco.Web.UI.Client/src/common/directives/umbtreeitem.directive.js

@@ -33,7 +33,7 @@ angular.module("umbraco.directives")
 
         template: '<li ng-class="{\'current\': (node == currentNode)}" on-right-click="altSelect(node, $event)"><div ng-style="setTreePadding(node)" ng-class="node.stateCssClass" ng-class="{\'loading\': node.loading}" 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>' +
+            '<ins ng-if="tree.enablelistviewsearch && node.metaData.isContainer" class="icon-navigation-right" ng-click="searchNode(node, $event)" alt="searchAltText"></ins>' +
             '<ins ng-if="node.hasChildren" style="width:18px;"></ins>' +
             '<ins ng-show="node.hasChildren" ng-class="{\'icon-navigation-right\': !node.expanded, \'icon-navigation-down\': node.expanded}" ng-click="load(node)"></ins>' +
             //NOTE: If the tree supports check boxes, render different markup

src/Umbraco.Web.UI.Client/src/less/tree.less

@@ -145,9 +145,11 @@
 	padding-left: 35px;
 }
 
-.umb-tree .umb-tree-node-search {    
-    cursor:pointer;
-    /*color:@turquoise;*/
+.umb-tree.umb-tree-node-search > div > div {    
+    padding-left:20px;    
+}
+.umb-tree.umb-tree-node-search ins:first-child {
+    visibility:visible;
 }
 
 a.umb-options {

src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.controller.js

@@ -66,7 +66,16 @@ angular.module("umbraco").controller("Umbraco.Dialogs.TreePickerController",
 	    }
 
 	    function nodeSearchHandler(ev, args) {
-            if (args.node.metaData.isContainer === true) {
+	        if (args.node.metaData.isContainer === true) {
+
+	            //extract the html required to populate the contextual header
+	            var treeNodeDiv = $(args.event.target.parentElement.parentElement).find("div").first();
+
+	            var newDiv = treeNodeDiv.clone().wrap('<div></div>').parent();
+	            newDiv.find("ins:first").removeClass("icon-navigation-right").addClass("icon-navigation-down");
+
+	            $scope.searchInfo.searchFromHtml = newDiv.html(); //outerHtml
+
                 $scope.searchInfo.showSearch = true;
                 $scope.searchInfo.searchFromName = args.node.name;
                 $scope.searchInfo.searchFrom = args.node.id;

src/Umbraco.Web.UI.Client/src/views/common/dialogs/treepicker.html

@@ -1,7 +1,12 @@
 <div class="umb-panel" ng-controller="Umbraco.Dialogs.TreePickerController">
     <div class="umb-panel-header">
         <div class="umb-el-wrap umb-panel-buttons">
-            <div class="form-search">
+            
+            <div ng-if="searchInfo.showSearch && searchInfo.searchFromName" class="umb-tree hide-options umb-tree-node-search">
+                <div ng-bind-html="searchInfo.searchFromHtml"></div>
+            </div>
+
+            <div class="form-search">                
                 <i class="icon icon-search" ng-if="!searchInfo.showSearch"></i>
                 <a class="icon icon-arrow-left" ng-if="searchInfo.showSearch" title="Back" ng-click="hideSearch()"></a>
                 <input type="text"
@@ -9,11 +14,7 @@
                     class="umb-search-field search-query"
                     placeholder="{{searchPlaceholderText}}"
                     on-keyup="performSearch()"
-                    focus-when="{{searchInfo.showSearch}}">
-                <h4 ng-if="searchInfo.showSearch && searchInfo.searchFromName">
-                    <small><localize key="general_search">Search</localize>:&nbsp;</small>
-                    {{searchInfo.searchFromName}}
-                </h4>
+                    focus-when="{{searchInfo.showSearch}}">                
             </div>
         </div>        
     </div>