From 8e79e15c71c69ddb7c882ee0f0afde897006dd73 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Fri, 13 Jan 2017 11:16:15 +0100
Subject: [PATCH] use new umb node preview component in content picker

---
 .../contentpicker/contentpicker.controller.js |  8 ++-
 .../contentpicker/contentpicker.html          | 51 +++++++++----------
 2 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
index 667dfd0f22..c02ab7a588 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.controller.js
@@ -1,7 +1,7 @@
 //this controller simply tells the dialogs service to open a mediaPicker window
 //with a specified callback, this callback will receive an object with a selection on it
 
-function contentPickerController($scope, dialogService, entityResource, editorState, $log, iconHelper, $routeParams, fileManager, contentEditingHelper, angularHelper, navigationService, $location) {
+function contentPickerController($scope, dialogService, entityResource, editorState, $log, iconHelper, $routeParams, fileManager, contentEditingHelper, angularHelper, navigationService, $location, $timeout, miniEditorHelper) {
 
     function trim(str, chr) {
         var rgxtrim = (!chr) ? new RegExp('^\\s+|\\s+$', 'g') : new RegExp('^' + chr + '+|' + chr + '+$', 'g');
@@ -77,6 +77,8 @@ function contentPickerController($scope, dialogService, entityResource, editorSt
         : "Document";
     $scope.allowOpenButton = entityType === "Document" || entityType === "Media";
     $scope.allowEditButton = entityType === "Document";
+    $scope.allowRemoveButton = true;
+    $scope.sortable = true;
 
     //the dialog options for the picker
     var dialogOptions = {
@@ -200,6 +202,10 @@ function contentPickerController($scope, dialogService, entityResource, editorSt
     $scope.clear = function () {
         $scope.renderModel = [];
     };
+
+    $scope.openMiniEditor = function(node) {
+        miniEditorHelper.launchMiniEditor(node);
+    };
         
     var unsubscribe = $scope.$on("formSubmitting", function (ev, args) {
         var currIds = _.map($scope.renderModel, function (i) {
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
index 9f5f3fb60f..760063b94b 100644
--- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/contentpicker/contentpicker.html
@@ -1,33 +1,30 @@
 <div ng-controller="Umbraco.PropertyEditors.ContentPickerController" class="umb-editor umb-contentpicker">
 
     <ng-form name="contentPickerForm">
-
-        <ul class="unstyled list-icons"
-            ui-sortable
-            ng-model="renderModel">
-            <li ng-repeat="node in renderModel" ng-attr-title="{{model.config.showPathOnHover && 'Path: ' + node.path || undefined}}">
-                <i class="icon icon-navigation handle"></i>
-                <a href="#" prevent-default ng-click="remove($index)">
-                    <i class="icon icon-delete red hover-show"></i>
-                    <i class="{{node.icon}} hover-hide"></i>
-                    {{node.name}}
-                </a>
-                
-                <div ng-if="!dialogEditor && ((model.config.showOpenButton && allowOpenButton) || (model.config.showEditButton && allowEditButton))">
-                    <small ng-if="model.config.showOpenButton && allowOpenButton"><a href ng-click="showNode($index)"><localize key="open">Open</localize></a></small>
-                    <small ng-if="model.config.showEditButton && allowEditButton"><a href umb-launch-mini-editor="node"><localize key="edit">Edit</localize></a></small>
-                </div>
-            </li>
-        </ul>
-
-        <ul class="unstyled list-icons" ng-show="model.config.multiPicker === true || renderModel.length === 0">
-            <li>
-                <i class="icon icon-add blue"></i>
-                <a href="#" ng-click="openContentPicker()" prevent-default>
-                    <localize key="general_add">Add</localize>
-                </a>
-            </li>
-        </ul>
+        
+        <div ui-sortable ng-model="renderModel">
+            <umb-node-preview
+                ng-repeat="node in renderModel"
+                icon="node.icon"
+                name="node.name"
+                description="node.path"
+                sortable="sortable"
+                allow-remove="allowRemoveButton"
+                allow-open="model.config.showOpenButton && allowOpenButton && !dialogEditor"
+                allow-edit="model.config.showEditButton && allowEditButton && !dialogEditor"
+                on-remove="remove($index)"
+                on-open="showNode($index)"
+                on-edit="openMiniEditor(node)">
+            </umb-node-preview>
+        </div>
+ 
+        <a ng-show="model.config.multiPicker === true || renderModel.length === 0"
+            class="umb-node-preview-add"
+            href=""
+            ng-click="openContentPicker()"
+            prevent-default>
+            <localize key="general_add">Add</localize>
+        </a>
 
         <!--These are here because we need ng-form fields to validate against-->
         <input type="hidden" name="minCount" ng-model="renderModel" />