From 6a9f6bc91b5d95562bdc1a3bddf48f661b1fafc7 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Mon, 21 Dec 2015 14:48:46 +0100 Subject: [PATCH 1/2] make it possible to select folders in media picker, fix issue with deselecting image in some cases + a bit code clean up. --- .../components/umbmediagrid.directive.js | 8 ++++ .../src/less/components/umb-media-grid.less | 13 ++++++ .../mediaPicker/mediapicker.controller.js | 37 +++++++--------- .../overlays/mediaPicker/mediapicker.html | 3 +- .../src/views/components/umb-media-grid.html | 5 ++- .../mediapicker/mediapicker.controller.js | 42 +++++++++---------- 6 files changed, 60 insertions(+), 48 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js index 2626fc7f33..b6edcf228c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js @@ -128,6 +128,13 @@ } }; + scope.clickFolderSelect = function(item, $event, $index) { + if(scope.onFolderSelect) { + scope.onFolderSelect(item, $event, $index); + $event.stopPropagation(); + } + }; + var unbindItemsWatcher = scope.$watch('items', function(newValue, oldValue){ if(angular.isArray(newValue)) { activate(); @@ -149,6 +156,7 @@ onDetailsHover: "=", onSelect: '=', onClick: '=', + onFolderSelect: "=", filterBy: "=" }, link: link diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less index 01c1cf5206..b63dcaf23d 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less @@ -13,6 +13,7 @@ position: relative; background: @grayLighter; overflow: hidden; + cursor: pointer; } .umb-media-grid__item:hover { @@ -73,6 +74,18 @@ box-sizing: border-box; } +.umb-media-grid__item-folder-select { + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 30px; + background: @grayLight; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; +} .umb-media-grid__item-icon { color: @gray; 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 48ac33125c..d48c67dc42 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 @@ -142,39 +142,32 @@ angular.module("umbraco") }; + $scope.selectFolder = function(folder, event, index) { + eventsService.emit("dialogs.mediaPicker.select", folder); + selectImage(folder); + }; + function selectImage(image) { - if ($scope.model.selectedImages.length > 0) { + if(image.selected) { - var selectImage = false; + for(var i = 0; $scope.model.selectedImages.length > i; i++) { - for (var i = 0; i < $scope.model.selectedImages.length; i++) { - - var selectedImage = $scope.model.selectedImages[i]; - - if (image.key === selectedImage.key) { + var imageInSelection = $scope.model.selectedImages[i]; + if(image.key === imageInSelection.key) { image.selected = false; $scope.model.selectedImages.splice(i, 1); - selectImage = false; - } else { - selectImage = true; } - - } - - if (selectImage) { - - if(!$scope.multiPicker) { - deselectAllImages($scope.model.selectedImages); - } - - image.selected = true; - $scope.model.selectedImages.push(image); } } else { - $scope.model.selectedImages.push(image); + + if(!$scope.multiPicker) { + deselectAllImages($scope.model.selectedImages); + } + image.selected = true; + $scope.model.selectedImages.push(image); } } 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 68752df784..370d1f96fe 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 @@ -70,7 +70,8 @@ + on-click="clickHandler" + on-folder-select="selectFolder"> diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html index bdcf0da482..7166050372 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html @@ -1,6 +1,6 @@
- +
@@ -13,12 +13,13 @@
{{ item.name }}
+
Select folder
{{item.name}} {{item.name}} - +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js index 0859e70cdd..b77ad15a23 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js @@ -59,35 +59,31 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl $scope.add = function() { - $scope.mediaPickerOverlay = {}; - $scope.mediaPickerOverlay.startNodeId = $scope.model.config.startNodeId; - $scope.mediaPickerOverlay.multiPicker = multiPicker; - $scope.mediaPickerOverlay.view = "mediaPicker"; - $scope.mediaPickerOverlay.title = "Select media"; - $scope.mediaPickerOverlay.show = true; + $scope.mediaPickerOverlay = { + view: "mediapicker", + title: "Select media", + startNodeId: $scope.model.config.startNodeId, + multiPicker: multiPicker, + show: true, + submit: function(model) { - $scope.mediaPickerOverlay.submit = function(model) { + _.each(model.selectedImages, function(media, i) { - _.each(model.selectedImages, function(media, i) { + if (!media.thumbnail) { + media.thumbnail = mediaHelper.resolveFileFromEntity(media, true); + } - if (!media.thumbnail) { - media.thumbnail = mediaHelper.resolveFileFromEntity(media, true); - } + $scope.images.push(media); + $scope.ids.push(media.id); + }); - $scope.images.push(media); - $scope.ids.push(media.id); - }); + $scope.sync(); - $scope.sync(); + $scope.mediaPickerOverlay.show = false; + $scope.mediaPickerOverlay = null; - $scope.mediaPickerOverlay.show = false; - $scope.mediaPickerOverlay = null; - }; - - $scope.mediaPickerOverlay.close = function(oldModel) { - $scope.mediaPickerOverlay.show = false; - $scope.mediaPickerOverlay = null; - }; + } + }; }; From 14db03e71807e146f9bc0173eedf254bc5297152 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 8 Jan 2016 10:12:02 +0100 Subject: [PATCH 2/2] set min size on media, set background pattern on media to make cleaner grid, streamline media library and media picker select functionality with list view. --- .../components/umbmediagrid.directive.js | 27 ++- .../src/less/components/umb-media-grid.less | 165 ++++++++---------- .../mediaPicker/mediapicker.controller.js | 16 +- .../overlays/mediaPicker/mediapicker.html | 2 +- .../src/views/components/umb-media-grid.html | 19 +- .../listview/layouts/grid/grid.html | 6 +- .../grid/grid.listviewlayout.controller.js | 17 +- 7 files changed, 119 insertions(+), 133 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js index b6edcf228c..01a127a613 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js @@ -100,7 +100,8 @@ var flexStyle = { "flex": flex + " 1 " + imageMinWidth + "px", - "max-width": mediaItem.width + "px" + "max-width": mediaItem.width + "px", + "min-width": "125px" }; mediaItem.flexStyle = flexStyle; @@ -109,16 +110,16 @@ } - scope.selectItem = function(item, $event, $index) { - if(scope.onSelect) { - scope.onSelect(item, $event, $index); - $event.stopPropagation(); + scope.clickItem = function(item, $event, $index) { + if(scope.onClick) { + scope.onClick(item, $event, $index); } }; - scope.clickItem = function(item) { - if(scope.onClick) { - scope.onClick(item); + scope.clickItemName = function(item, $event, $index) { + if(scope.onClickName) { + scope.onClickName(item, $event, $index); + $event.stopPropagation(); } }; @@ -128,13 +129,6 @@ } }; - scope.clickFolderSelect = function(item, $event, $index) { - if(scope.onFolderSelect) { - scope.onFolderSelect(item, $event, $index); - $event.stopPropagation(); - } - }; - var unbindItemsWatcher = scope.$watch('items', function(newValue, oldValue){ if(angular.isArray(newValue)) { activate(); @@ -154,9 +148,8 @@ scope: { items: '=', onDetailsHover: "=", - onSelect: '=', onClick: '=', - onFolderSelect: "=", + onClickName: "=", filterBy: "=" }, link: link diff --git a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less index b63dcaf23d..d353b7cdca 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less @@ -9,11 +9,25 @@ } .umb-media-grid__item { - margin: 2px; + margin: 10px; position: relative; - background: @grayLighter; overflow: hidden; cursor: pointer; + display: flex; + align-content: center; + align-items: center; + align-self: stretch; + box-shadow: 0 1px 1px 0 rgba(0,0,0,.2); + justify-content: center; + transition: box-shadow 100ms; +} + +.umb-media-grid__item.-file { + background-color: @grayLighter; +} + +.umb-media-grid__item.-selected { + box-shadow: 0 2px 8px 0 rgba(0,0,0,.35); } .umb-media-grid__item:hover { @@ -21,20 +35,32 @@ } .umb-media-grid__item-image { - width: 100%; max-width: 100%; height: auto; + position: relative; } -.umb-media-grid__item-image.-faded { - opacity: 0.5; - transition: opacity 100ms ease-in; +.umb-media-grid__item-image-placeholder { + width: 100%; + max-width: 100%; + height: auto; + position: relative; +} + +.umb-media-grid__image-background { + content: ""; + background: url("../img/checkered-background.png"); + background-repeat: repeat; + opacity: 0.5; + top: 0; + left: 0; + bottom: 0; + right: 0; + position: absolute; } .umb-media-grid__item-overlay { display: flex; - justify-content: center; - align-items: center; opacity: 0; position: absolute; right: 0; @@ -43,19 +69,36 @@ z-index: 100; padding: 5px 10px; box-sizing: border-box; - font-size: 13px; + font-size: 11px; overflow: hidden; color: white; white-space: nowrap; - background: rgba(0, 0, 0, 0.4); - background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75)); + background: @blue; + transition: opacity 150ms; +} + +.umb-media-grid__item.-file .umb-media-grid__item-overlay { + opacity: 1; + color: @gray; + background: @grayLighter; +} + +.umb-media-grid__item.-file:hover .umb-media-grid__item-overlay, +.umb-media-grid__item.-file.-selected .umb-media-grid__item-overlay { + color: @white; + background: @blue; +} + +.umb-media-grid__info { + margin-right: 5px; +} + +.umb-media-grid__item-overlay.-locked { + opacity: 1; } .umb-media-grid__item:hover .umb-media-grid__item-overlay { opacity: 1; - animation: fadeIn; - animation-duration: 0.2s; - animation-timing-function: ease-in-out; } .umb-media-grid__item-name { @@ -64,88 +107,30 @@ text-overflow: ellipsis; } -.umb-media-grid__item-non-image-name { - position: absolute; - top: 20px; - font-size: 12px; - text-align: center; - width: 100%; - padding: 0 10px; - box-sizing: border-box; -} - -.umb-media-grid__item-folder-select { - position: absolute; - bottom: 0; - left: 0; - right: 0; - height: 30px; - background: @grayLight; - display: flex; - align-items: center; - justify-content: center; - font-size: 12px; -} - .umb-media-grid__item-icon { color: @gray; position: absolute; - top: 50%; + top: 45%; left: 50%; font-size: 40px; transform: translate(-50%,-50%); } -.umb-media-grid__actions { - position: absolute; - z-index: 2; - width: 100%; - top: 0; - padding: 10px; - box-sizing: border-box; - display: flex; - align-items: center; - justify-content: flex-end; -} - -.umb-media-grid__action { - opacity: 0; - border: 1px solid #ffffff; - width: 25px; - height: 25px; - background: rgba(0, 0, 0, 0.4); - border-radius: 50px; - box-sizing: border-box; - display: flex; - justify-content: center; - align-items: center; - color: #ffffff; - margin-left: 7px; - cursor: pointer; -} - -.umb-media-grid__action.-not-clickable { - cursor: default; -} - -.umb-media-grid__action:first-child { - margin-left: 0; -} - -.umb-media-grid__action:hover { - background: @blue; - transition: background 0.1s; -} - -.umb-media-grid__action.-selected { - opacity: 1; - background: @blue; -} - -.umb-media-grid__item:hover .umb-media-grid__action:not(.-selected), -.umb-media-grid__folder:hover .umb-media-grid__action:not(.-selected) { - opacity: 1; - animation: fadeIn; - animation-duration: 0.2s; - animation-timing-function: ease-in-out; +.umb-media-grid__checkmark { + position: absolute; + z-index: 2; + top: 10px; + right: 10px; + width: 25px; + height: 25px; + border: 1px solid #ffffff; + background: @blue; + border-radius: 50px; + box-sizing: border-box; + display: flex; + justify-content: center; + align-items: center; + color: #ffffff; + margin-left: 7px; + transition: background 100ms; } 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 d48c67dc42..77114b13ca 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 @@ -71,6 +71,10 @@ angular.module("umbraco") $scope.gotoFolder = function(folder) { + if(!$scope.multiPicker) { + deselectAllImages($scope.model.selectedImages); + } + if(!folder){ folder = {id: -1, name: "Media", icon: "icon-folder"}; } @@ -125,7 +129,10 @@ angular.module("umbraco") $scope.clickHandler = function(image, event, index) { if (image.isFolder) { - $scope.gotoFolder(image); + + eventsService.emit("dialogs.mediaPicker.select", image); + selectImage(image); + } else { eventsService.emit("dialogs.mediaPicker.select", image); @@ -142,9 +149,10 @@ angular.module("umbraco") }; - $scope.selectFolder = function(folder, event, index) { - eventsService.emit("dialogs.mediaPicker.select", folder); - selectImage(folder); + $scope.clickItemName = function(item) { + if(item.isFolder) { + $scope.gotoFolder(item); + } }; function selectImage(image) { 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 370d1f96fe..b4d65167e7 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 @@ -71,7 +71,7 @@ items="images" filter-by="searchTerm" on-click="clickHandler" - on-folder-select="selectFolder"> + on-click-name="clickItemName"> diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html index 7166050372..feba1a98f4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html @@ -1,22 +1,17 @@
-
+
-
- - - -
+ -
+
+
{{item.name}}
-
{{ item.name }}
-
Select folder
- - {{item.name}} - {{item.name}} +
+ {{item.name}} + {{item.name}} diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html index ccf18b0236..f61feaeee0 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html @@ -32,14 +32,14 @@ ng-if="folders.length > 0" folders="folders" on-select="vm.selectFolder" - on-click="vm.clickItem"> + on-click="vm.clickFolder"> + on-click="vm.clickItem" + on-click-name="vm.clickItemName">