From d5f66ebe02767850dc0f57afcd9f606d05f28039 Mon Sep 17 00:00:00 2001
From: Mads Rasmussen <mads@umbraco.com>
Date: Thu, 16 Feb 2017 19:59:45 +0100
Subject: [PATCH] update image properties to match media grid component

---
 .../mediaPicker/mediapicker.controller.js     | 29 ++++++++++++++-----
 .../overlays/mediaPicker/mediapicker.html     |  8 ++---
 2 files changed, 26 insertions(+), 11 deletions(-)

diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
index c21fdd8a00..9cb78cdff2 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.controller.js
@@ -254,15 +254,30 @@ angular.module("umbraco")
                 $scope.loading = true;
                 entityResource.getPagedDescendants($scope.startNodeId, "Media", $scope.searchOptions)
                     .then(function (data) {
+                        // update image data to work with image grid
+                        angular.forEach(data.items, function(mediaItem){
+                            // set thumbnail and src
+                            mediaItem.thumbnail = mediaHelper.resolveFileFromEntity(mediaItem, true);
+                            mediaItem.image = mediaHelper.resolveFileFromEntity(mediaItem, false);
+                            // set properties to match a media object
+                            mediaItem.properties = [
+                                {
+                                    alias: "umbracoWidth",
+                                    value: mediaItem.metaData.umbracoWidth.Value
+                                },
+                                {
+                                    alias: "umbracoHeight",
+                                    value: mediaItem.metaData.umbracoHeight.Value
+                                }
+                            ];
+                        });
                         // update images
                         $scope.images = data.items ? data.items : [];
                         // update pagination
-                        $scope.searchOptions = {
-                            pageNumber: data.pageNumber,
-                            pageSize: data.pageSize,
-                            totalItems: data.totalItems,
-                            totalPages: data.totalPages
-                        };
+                        $scope.searchOptions.pageNumber = data.pageNumber;
+                        $scope.searchOptions.pageSize = data.pageSize;
+                        $scope.searchOptions.totalItems = data.totalItems;
+                        $scope.searchOptions.totalPages = data.totalPages;
                         // set already selected images to selected
                         preSelectImages();
                         $scope.loading = false;
@@ -273,7 +288,7 @@ angular.module("umbraco")
                 $scope.loading = true;
                 mediaResource.getChildren(id)
                     .then(function(data) {
-                        $scope.searchTerm = "";
+                        $scope.searchOptions.filter = "";
                         $scope.images = data.items ? data.items : [];
                         // set already selected images to selected
                         preSelectImages();
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
index 084559b9c9..01355dcf12 100644
--- a/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
+++ b/src/Umbraco.Web.UI.Client/src/views/common/overlays/mediaPicker/mediapicker.html
@@ -17,7 +17,7 @@
          <div class="form-search">
             <i class="icon-search"></i>
             <input
-                class="umb-search-field search-query"
+                class="umb-search-field search-query -full-width-input"
                 ng-model="searchOptions.filter"
                 localize="placeholder"
                 placeholder="@placeholders_search"
@@ -37,7 +37,7 @@
 
       </div>
 
-      <div class="row umb-control-group" ng-if="!searchTerm">
+      <div class="row umb-control-group" ng-if="!searchOptions.filter">
          <ul class="umb-breadcrumbs">
             <li ng-hide="startNodeId != -1" class="umb-breadcrumbs__ancestor">
                <a href ng-click="gotoFolder()" prevent-default>Media</a>
@@ -75,7 +75,7 @@
          files-queued="onFilesQueue"
          accept="{{acceptedFileTypes}}"
          max-file-size="{{maxFileSize}}"
-         hide-dropzone="{{!activeDrag && images.length > 0 || searchTerm }}"
+         hide-dropzone="{{!activeDrag && images.length > 0 || searchOptions.filter }}"
          compact="{{ images.length > 0 }}">
       </umb-file-dropzone>
 
@@ -101,7 +101,7 @@
         </div>
 
         <umb-empty-state
-            ng-if="searchTerm && images.length === 0 && !loading"
+            ng-if="searchOptions.filter && images.length === 0 && !loading"
             position="center">
             <localize key="general_searchNoResult"></localize>
         </umb-empty-state>