From 70207e537402819057d2cf12b0ee2a184ff1dd43 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 12 Feb 2018 20:46:02 +0100 Subject: [PATCH 1/8] Fix issues with "add"-button in single and multiple media picker --- .../propertyeditors/mediapicker/mediapicker.controller.js | 2 ++ .../src/views/propertyeditors/mediapicker/mediapicker.html | 6 +++--- 2 files changed, 5 insertions(+), 3 deletions(-) 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 1874a0623e..ed5b7e42c6 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 @@ -136,6 +136,8 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl }; $scope.sortableOptions = { + items: "li:not(.unsortable)", + cancel: ".unsortable", update: function(e, ui) { var r = []; //TODO: Instead of doing this with a half second delay would be better to use a watch like we do in the diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html index 47cd981b15..c649c3f547 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html @@ -3,7 +3,7 @@

-
+
  • @@ -30,8 +30,8 @@
-
  • - +
  • +
    • From 74d8341620392caff8ec47c295e63c54beb20bde Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 12 Feb 2018 20:46:48 +0100 Subject: [PATCH 2/8] Add bottom margin for multiple media picker --- src/Umbraco.Web.UI.Client/src/less/property-editors.less | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 7082c15a14..5e6e2b3e11 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -243,7 +243,7 @@ ul.color-picker li a { .umb-mediapicker .umb-sortable-thumbnails li { flex-direction: column; - margin: 0 5px 0 0; + margin: 0 5px 5px 0; padding: 5px; } From bf00f7a663329fbf8e1f9cc684eab173b7856296 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 12 Feb 2018 20:54:49 +0100 Subject: [PATCH 3/8] Enable sortable option based on single or multiple media picker --- .../views/propertyeditors/mediapicker/mediapicker.controller.js | 1 + 1 file changed, 1 insertion(+) 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 ed5b7e42c6..ea1473d3ca 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 @@ -136,6 +136,7 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl }; $scope.sortableOptions = { + disabled: !$scope.isMultiPicker, items: "li:not(.unsortable)", cancel: ".unsortable", update: function(e, ui) { From 6ec9a2ae453003ee833addd86e40355b7c79ce1a Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 12 Feb 2018 21:01:08 +0100 Subject: [PATCH 4/8] Add specific class for "add" list item --- .../views/propertyeditors/mediapicker/mediapicker.controller.js | 2 +- .../src/views/propertyeditors/mediapicker/mediapicker.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 ea1473d3ca..74234d3c36 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 @@ -137,7 +137,7 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl $scope.sortableOptions = { disabled: !$scope.isMultiPicker, - items: "li:not(.unsortable)", + items: "li:not(.add-wrapper)", cancel: ".unsortable", update: function(e, ui) { var r = []; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html index c649c3f547..e904d4c6bf 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.html @@ -30,7 +30,7 @@
    -
  • +
  • From df182674b4f9811ae74310155084d0659c2ba9ee Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 12 Feb 2018 21:37:22 +0100 Subject: [PATCH 5/8] Make thumbnail same size as add button --- src/Umbraco.Web.UI.Client/src/less/property-editors.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 5e6e2b3e11..469b7e968a 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -282,8 +282,8 @@ ul.color-picker li a { } .umb-sortable-thumbnails .umb-sortable-thumbnails__wrapper { - width: 120px; - height: 114px; + width: 124px; + height: 124px; overflow: hidden; } From 47d08e69a4d09e7d89a50c5eb8afcd6893c24379 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 12 Feb 2018 21:56:48 +0100 Subject: [PATCH 6/8] Update comment --- .../propertyeditors/mediapicker/mediapicker.controller.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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 74234d3c36..bf7462942a 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 @@ -141,8 +141,8 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl cancel: ".unsortable", update: function(e, ui) { var r = []; - //TODO: Instead of doing this with a half second delay would be better to use a watch like we do in the - // content picker. THen we don't have to worry about setting ids, render models, models, we just set one and let the + // TODO: Instead of doing this with a half second delay would be better to use a watch like we do in the + // content picker. Then we don't have to worry about setting ids, render models, models, we just set one and let the // watch do all the rest. $timeout(function(){ angular.forEach($scope.images, function(value, key) { From bd3d626147c3980745473ba4e5e88b5fad5a029c Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 12 Feb 2018 21:58:39 +0100 Subject: [PATCH 7/8] Add move cursor when media picker is multiple picker and thumbnails are sortable --- src/Umbraco.Web.UI.Client/src/less/property-editors.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 469b7e968a..992778dc61 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -298,6 +298,10 @@ ul.color-picker li a { visibility: hidden; } +.umb-sortable-thumbnails:not(.ui-sortable-disabled) > li:not(.unsortable) { + cursor: move; +} + .umb-sortable-thumbnails li:hover .umb-sortable-thumbnails__actions { opacity: 1; visibility: visible; From 040e45ca70472f6ad9b81073fe234291990f4f02 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Mon, 12 Feb 2018 22:27:23 +0100 Subject: [PATCH 8/8] Ensure move cursor is added the multiple media picker (sortable), but not on imagepicker prevalue editor, which not has ui-sortable --- src/Umbraco.Web.UI.Client/src/less/property-editors.less | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/property-editors.less b/src/Umbraco.Web.UI.Client/src/less/property-editors.less index 992778dc61..9bc287fdd9 100644 --- a/src/Umbraco.Web.UI.Client/src/less/property-editors.less +++ b/src/Umbraco.Web.UI.Client/src/less/property-editors.less @@ -298,9 +298,11 @@ ul.color-picker li a { visibility: hidden; } -.umb-sortable-thumbnails:not(.ui-sortable-disabled) > li:not(.unsortable) { - cursor: move; -} +.umb-sortable-thumbnails.ui-sortable:not(.ui-sortable-disabled) { + > li:not(.unsortable) { + cursor: move; + } +} .umb-sortable-thumbnails li:hover .umb-sortable-thumbnails__actions { opacity: 1;