start on mini list view for pickers

src/Umbraco.Web.UI.Client/src/less/components/umb-table.less

@@ -256,3 +256,16 @@ input.umb-table__input {
     flex: 1 1 25%;
     max-width: 25%;
 }
+
+.umb-table--condensed {
+
+    .umb-table-cell:first-of-type:not(.not-fixed) {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    .umb-table-body__icon {
+        font-size: 20px;
+    }
+
+}

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

@@ -1,6 +1,6 @@
 //used for the media picker dialog
 angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
-	function ($scope, entityResource, eventsService, $log, searchService, angularHelper, $timeout, localizationService, treeService) {
+	function ($scope, entityResource, eventsService, $log, searchService, angularHelper, $timeout, localizationService, treeService, contentResource) {
 
 	    var tree = null;
 	    var dialogOptions = $scope.model;
@@ -106,13 +106,16 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
                 //iterate children
 	            _.each(args.children, function (child) {
 
+					console.log("child", child);
+
 	                //check if any of the items are list views, if so we need to add some custom
 	                // children: A node to activate the search, any nodes that have already been
 	                // selected in the search
 	                if (child.metaData.isContainer) {
 	                    child.hasChildren = true;
 	                    child.children = [
-	                        {
+	                        {	
+								id: child.id,
                                 level: child.level + 1,
                                 hasChildren: false,
                                 parent: function () {
@@ -177,13 +180,26 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
 	        if (args.node.metaData.listViewNode) {
 	            //check if list view 'search' node was selected
 
-                $scope.searchInfo.showSearch = true;
-                $scope.searchInfo.searchFromId = args.node.metaData.listViewNode.id;
-                $scope.searchInfo.searchFromName = args.node.metaData.listViewNode.name;
+				//alert("list view");
+
+				$scope.showMiniListView = true;
+
+				console.log(args);
+
+				$scope.pagination = {
+                    pageSize: 10,
+                    pageNumber: 1,
+                    filter: '',
+                    orderDirection: "Ascending",
+                    orderBy: "SortOrder",
+                    orderBySystemField: true
+                };
+
+				getPagedChildren(args.node);
+
+				$scope.miniListView.nodeName = args.node.metaData.listViewNode.name;
+				$scope.miniListView.nodeId = args.node.metaData.listViewNode.id;
 
-                //add transition classes
-	            var listViewNode = args.node.parent();
-	            listViewNode.cssClasses.push('tree-node-slide-up-hide-active');
 	        }
             else if (args.node.metaData.isSearchResult) {
                 //check if the item selected was a search result from a list view
@@ -504,4 +520,72 @@ angular.module("umbraco").controller("Umbraco.Overlays.TreePickerController",
 	        $scope.dialogTreeEventHandler.unbind("treeNodeExpanded", nodeExpandedHandler);
 	        $scope.dialogTreeEventHandler.unbind("treeNodeSelect", nodeSelectHandler);
 	    });
+
+		/* Mini List View */
+		$scope.miniListView = {};
+
+		$scope.nextPage = function(pageNumber) {
+			$scope.pagination.pageNumber = pageNumber;
+			getPagedChildren($scope.miniListView.node);
+		};
+
+		$scope.prevPage = function(pageNumber) {
+			$scope.pagination.pageNumber = pageNumber;
+			getPagedChildren($scope.miniListView.node);		
+		};
+
+		$scope.goToPage = function(pageNumber) {
+			$scope.pagination.pageNumber = pageNumber;
+			getPagedChildren($scope.miniListView.node);		
+		};
+
+		$scope.selectListViewItem = function(item) {
+			select(item.name, item.id);
+            //toggle checked state
+            item.selected = item.selected === true ? false : true;
+		};
+
+		$scope.exitMiniListView = function() {
+			console.log($scope.miniListView);
+			$scope.showMiniListView = false;
+		};
+
+		$scope.searchMiniListView = function() {
+			searchMiniListView();
+		};
+
+		function getPagedChildren(node) {
+
+			// start load indicator
+			$scope.miniListView.loading = true;
+
+			contentResource.getChildren(node.id, $scope.pagination)
+				.then(function (data) {
+
+					// update children
+					$scope.miniListView.node = node;
+					$scope.miniListView.children = data.items;
+
+					// update pagination
+					$scope.pagination.totalItems = data.totalItems;
+					$scope.pagination.totalPages = data.totalPages;
+
+					// stop load indicator
+					$scope.miniListView.loading = false;
+
+				});
+
+		}
+
+		var searchMiniListView = _.debounce(function () {
+			
+			$scope.$apply(function () {
+				if ($scope.pagination.filter !== null && $scope.pagination.filter !== undefined) {
+					$scope.pagination.pageNumber = 1;
+					getPagedChildren($scope.miniListView.node, $scope.pagination);
+				}
+			});
+
+		}, 500);
+
 	});

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

@@ -1,35 +1,116 @@
 <div ng-controller="Umbraco.Overlays.TreePickerController">
 
-   <div class="umb-control-group">
-      <umb-tree-search-box
-         ng-if="enableSearh"
-         hide-search-callback="hideSearch"
-         search-callback="onSearchResults"
-         search-from-id="{{searchInfo.searchFromId}}"
-         search-from-name="{{searchInfo.searchFromName}}"
-         show-search="{{searchInfo.showSearch}}"
-         section="{{section}}">
-      </umb-tree-search-box>
-   </div>
+    <div ng-hide="showMiniListView">
+        <div class="umb-control-group">
+            <umb-tree-search-box
+                ng-if="enableSearh"
+                hide-search-callback="hideSearch"
+                search-callback="onSearchResults"
+                search-from-id="{{searchInfo.searchFromId}}"
+                search-from-name="{{searchInfo.searchFromName}}"
+                show-search="{{searchInfo.showSearch}}"
+                section="{{section}}">
+            </umb-tree-search-box>
+        </div>
 
-   <umb-tree-search-results
-      ng-if="searchInfo.showSearch"
-      results="searchInfo.results"
-      select-result-callback="selectResult">
-   </umb-tree-search-results>
+        <umb-tree-search-results
+            ng-if="searchInfo.showSearch"
+            results="searchInfo.results"
+            select-result-callback="selectResult">
+        </umb-tree-search-results>
 
-   <div ng-hide="searchInfo.showSearch" ng-animate="'tree-fade-out'">
-      <umb-tree
-         section="{{section}}"
-         treealias="{{treeAlias}}"
-         hideheader="{{hideHeader}}"
-         hideoptions="true"
-         isdialog="true"
-         customtreeparams="{{customTreeParams}}"
-         eventhandler="dialogTreeEventHandler"
-         enablelistviewsearch="true"
-         enablecheckboxes="{{multiPicker}}">
-      </umb-tree>
-   </div>
+        <div ng-hide="searchInfo.showSearch || showMiniListView" ng-animate="'tree-fade-out'">
+            <umb-tree
+                section="{{section}}"
+                treealias="{{treeAlias}}"
+                hideheader="{{hideHeader}}"
+                hideoptions="true"
+                isdialog="true"
+                customtreeparams="{{customTreeParams}}"
+                eventhandler="dialogTreeEventHandler"
+                enablelistviewsearch="true"
+                enablecheckboxes="{{multiPicker}}">
+            </umb-tree>
+        </div>
+    </div>
 
-</div>
+    <div ng-if="showMiniListView">
+
+        <div class="umb-control-group">
+            <div class="flex items-center">
+                <a href="" ng-click="exitMiniListView()">
+                    <i class="icon-arrow-left" style="margin-right: 10px; opacity: 0.8;"></i>
+                </a>
+                <h4>{{ miniListView.nodeName }}</h4>
+            </div>
+        </div>
+        
+        <div class="umb-table umb-table--condensed" style="min-width: auto;">
+
+            <!-- Head -->
+            <div class="umb-table-head">
+                <div class="umb-table-row">
+                    <div class="umb-table-cell"></div>
+                    <!-- umb-table__name -->
+                    <div class="umb-table-cell">
+                        <localize key="general_name">Name</localize>
+                    </div>
+                    <div class="umb-table-cell">
+                        <form class="form-search -no-margin-bottom pull-right" novalidate>
+                            <div class="inner-addon left-addon">
+                                <i class="icon icon-search" style="font-size: 14px;"></i>
+                                <input
+                                    class="form-control search-input"
+                                    type="text"
+                                    localize="placeholder"
+                                    placeholder="@general_typeToSearch"
+                                    ng-model="pagination.filter"
+                                    ng-change="searchMiniListView()"
+                                    prevent-enter-submit
+                                    no-dirty-check>
+                            </div>
+                        </form>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Body -->
+            <div class="umb-table-body">
+
+                <!-- Items -->
+                <div class="umb-table-row"
+                    ng-repeat="child in miniListView.children"
+                    ng-click="selectListViewItem(child)"
+                    ng-class="{
+                        '-selected':child.selected
+                    }">
+                    <div class="umb-table-cell">
+                        <i class="umb-table-body__icon umb-table-body__fileicon {{child.icon}}"></i>
+                        <i class="umb-table-body__icon umb-table-body__checkicon icon-check"></i>
+                    </div>
+                    <div class="umb-table-cell">{{ child.name }}</div>
+                </div>
+
+                <!-- Loading -->
+                <div ng-if="miniListView.loading" class="umb-table-row" style="height: 40px; position: relative;">
+                    <umb-load-indicator></umb-load-indicator>
+                </div>
+
+            </div>
+
+        </div>
+
+        <div class="flex justify-center">
+            <umb-pagination
+                ng-if="pagination.totalPages > 0"
+                page-number="pagination.pageNumber"
+                total-pages="pagination.totalPages"
+                on-next="nextPage"
+                on-prev="prevPage"
+                on-go-to-page="goToPage">
+            </umb-pagination>
+        </div>
+
+    </div>
+
+</div>