From 071eb4bc233d3890141e70cd10d899d4f36cf719 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Oct 2015 15:28:48 +0200 Subject: [PATCH 01/62] add directive to make sticky bars --- .../components/umbstickybar.directive.js | 116 ++++++++++++++++++ 1 file changed, 116 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js new file mode 100644 index 0000000000..94c07bb414 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js @@ -0,0 +1,116 @@ +(function() { + 'use strict'; + + function StickyBarDirective($rootScope) { + + function link(scope, el, attr, ctrl) { + + var bar = $(el); + var scrollableContainer = null; + var scrollBody = $(attr.scrollBody); + var clonedBar = null; + var cloneIsMade = false; + + function activate() { + + if (attr.scrollableContainer) { + scrollableContainer = $(attr.scrollableContainer); + } else { + scrollableContainer = $(window); + } + + scrollableContainer.on('scroll.umbStickyBar', determineVisibility).trigger("scroll"); + $(window).on('resize.umbStickyBar', determineVisibility); + + scope.$on('$destroy', function() { + scrollableContainer.off('.umbStickyBar'); + $(window).off('.umbStickyBar'); + }); + + } + + function determineVisibility() { + + var scrollTop = scrollableContainer.scrollTop(); + var elementTop = bar.offset().top; + + if (scrollTop > elementTop) { + + if (!cloneIsMade) { + + createClone(); + + clonedBar.css({ + 'visibility': 'visible' + }); + + } else { + + calculateSize(); + + } + + } else { + + if (cloneIsMade) { + + //remove cloned element (switched places with original on creation) + bar.remove(); + bar = clonedBar; + clonedBar = null; + + bar.removeClass('-umb-sticky-bar'); + bar.css({ + position: 'relative', + 'width': 'auto', + 'z-index': 'auto', + 'visibility': 'visible' + }); + + cloneIsMade = false; + + } + + } + + } + + function calculateSize() { + clonedBar.css({ + width: bar.outerWidth(), + height: bar.height() + }); + } + + function createClone() { + //switch place with cloned element, to keep binding intact + clonedBar = bar; + bar = clonedBar.clone(); + clonedBar.after(bar); + clonedBar.addClass('-umb-sticky-bar'); + clonedBar.css({ + 'position': 'fixed', + 'z-index': 10000, + 'visibility': 'hidden' + }); + + cloneIsMade = true; + calculateSize(); + + } + + activate(); + + } + + var directive = { + restrict: 'A', + link: link + }; + + return directive; + } + + angular.module('umbraco.directives').directive('umbStickyBar', StickyBarDirective); + +})(); From f9a236f63907d21b18e1293bc1f739e53f9d35e8 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Oct 2015 15:32:54 +0200 Subject: [PATCH 02/62] add directives to add sub headers to editors, make left and right content in sub headers and make sub sections --- .../subheader/umbeditorsubheader.directive.js | 18 +++++++ ...umbeditorsubheadercontentleft.directive.js | 18 +++++++ ...mbeditorsubheadercontentright.directive.js | 18 +++++++ .../umbeditorsubheadersection.directive.js | 18 +++++++ src/Umbraco.Web.UI.Client/src/less/belle.less | 1 + .../subheader/umb-editor-sub-header.less | 52 +++++++++++++++++++ .../umb-editor-sub-header-content-left.html | 1 + .../umb-editor-sub-header-content-right.html | 1 + .../umb-editor-sub-header-section.html | 1 + .../subheader/umb-editor-sub-header.html | 7 +++ 10 files changed, 135 insertions(+) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-content-left.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-content-right.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-section.html create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js new file mode 100644 index 0000000000..b03d289a44 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheader.directive.js @@ -0,0 +1,18 @@ +(function() { + 'use strict'; + + function EditorSubHeaderDirective() { + + var directive = { + transclude: true, + restrict: 'E', + replace: true, + templateUrl: 'views/components/editor/subheader/umb-editor-sub-header.html' + }; + + return directive; + } + + angular.module('umbraco.directives').directive('umbEditorSubHeader', EditorSubHeaderDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js new file mode 100644 index 0000000000..d1c5bca923 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentleft.directive.js @@ -0,0 +1,18 @@ +(function() { + 'use strict'; + + function EditorSubHeaderContentLeftDirective() { + + var directive = { + transclude: true, + restrict: 'E', + replace: true, + templateUrl: 'views/components/editor/subheader/umb-editor-sub-header-content-left.html' + }; + + return directive; + } + + angular.module('umbraco.directives').directive('umbEditorSubHeaderContentLeft', EditorSubHeaderContentLeftDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js new file mode 100644 index 0000000000..819d7e30a6 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadercontentright.directive.js @@ -0,0 +1,18 @@ +(function() { + 'use strict'; + + function EditorSubHeaderContentRightDirective() { + + var directive = { + transclude: true, + restrict: 'E', + replace: true, + templateUrl: 'views/components/editor/subheader/umb-editor-sub-header-content-right.html' + }; + + return directive; + } + + angular.module('umbraco.directives').directive('umbEditorSubHeaderContentRight', EditorSubHeaderContentRightDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js new file mode 100644 index 0000000000..4ea2de83f1 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/editor/subheader/umbeditorsubheadersection.directive.js @@ -0,0 +1,18 @@ +(function() { + 'use strict'; + + function EditorSubHeaderSectionDirective() { + + var directive = { + transclude: true, + restrict: 'E', + replace: true, + templateUrl: 'views/components/editor/subheader/umb-editor-sub-header-section.html' + }; + + return directive; + } + + angular.module('umbraco.directives').directive('umbEditorSubHeaderSection', EditorSubHeaderSectionDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index b6f4536b95..d522216d5c 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -84,6 +84,7 @@ @import "components/umb-editor-navigation.less"; @import "components/umb-editor-sub-views.less"; @import "components/umb-editor-toolbar.less"; +@import "components/editor/subheader/umb-editor-sub-header.less"; @import "components/umb-grid-selector.less"; @import "components/umb-child-selector.less"; @import "components/umb-group-builder.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less new file mode 100644 index 0000000000..b94879b8ea --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less @@ -0,0 +1,52 @@ +.umb-editor-sub-header { + padding: 20px 0; + margin-bottom: 20px; + background: #ffffff; + display: flex; + justify-content: space-between; +} + +.umb-editor-sub-header.-umb-sticky-bar { + box-shadow: + 0 5px 0 rgba(0, 0, 0, 0.08), + 0 1px 0 rgba(0, 0, 0, 0.16); + transition: box-shadow 1s; + margin-top: -30px; +} + +.umb-editor-sub-header__content-left { + margin-right: auto; +} + +.umb-editor-sub-header__content-right { + margin-left: auto; +} + +.umb-editor-sub-header__content-left, +.umb-editor-sub-header__content-right { + display: flex; + align-items: stretch; +} + +.umb-editor-sub-header__section { + border-left: 1px solid @grayLight; + display: flex; + align-items: center; + padding-left: 20px; + padding-right: 20px; +} + +.umb-editor-sub-header__content-left .umb-editor-sub-header__section:first-child { + border-left: none; + padding-left: 0; +} + +.umb-editor-sub-header__content-right .umb-editor-sub-header__section { + border-left: none; + border-right: 1px solid @grayLight; +} + +.umb-editor-sub-header__content-right .umb-editor-sub-header__section:last-child { + border-right: none; + padding-right: 0; +} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-content-left.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-content-left.html new file mode 100644 index 0000000000..9c5297908b --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-content-left.html @@ -0,0 +1 @@ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-content-right.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-content-right.html new file mode 100644 index 0000000000..982ea1868a --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-content-right.html @@ -0,0 +1 @@ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-section.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-section.html new file mode 100644 index 0000000000..1b2ab2e639 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header-section.html @@ -0,0 +1 @@ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html new file mode 100644 index 0000000000..c30d96ee3d --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html @@ -0,0 +1,7 @@ +
+
From 5f25844921a3d7aa75105990b7f2ba7be98114b2 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Oct 2015 15:55:49 +0200 Subject: [PATCH 03/62] add client side sorting to media grid --- .../components/umbmediagrid.directive.js | 14 ++++++++++++++ 1 file changed, 14 insertions(+) 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 c7858df500..771cd3adfa 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 @@ -9,6 +9,20 @@ scope.mediaItems = []; var itemMaxHeight = 200; + scope.mediaItemsSortingOptions = { + distance: 10, + tolerance: "pointer", + opacity: 0.7, + scroll: true, + cursor: "move", + zIndex: 6000, + placeholder: "umb-media-grid__placeholder", + start: function(e, ui) { + ui.placeholder.height(ui.item.height()); + ui.placeholder.width(ui.item.width()); + } + }; + function activate() { scope.folders = []; From 31e84ae9aec7e7c74d67458a4706ff7f61065ace Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Oct 2015 19:31:08 +0200 Subject: [PATCH 04/62] remove unused attr on umb-editor-sub-header directive --- .../src/common/directives/components/umbstickybar.directive.js | 1 - .../views/components/editor/subheader/umb-editor-sub-header.html | 1 - 2 files changed, 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js index 94c07bb414..0782474a25 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js @@ -7,7 +7,6 @@ var bar = $(el); var scrollableContainer = null; - var scrollBody = $(attr.scrollBody); var clonedBar = null; var cloneIsMade = false; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html index c30d96ee3d..5a8e38c47c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/editor/subheader/umb-editor-sub-header.html @@ -2,6 +2,5 @@ class="umb-editor-sub-header" umb-sticky-bar scrollable-container=".umb-editor-container" - scroll-body="#list-view-editor" ng-transclude> From 550cff0fcb966e3e6961ea0d37857eb424a6a740 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Oct 2015 19:39:04 +0200 Subject: [PATCH 05/62] bind sortable logic to html --- .../src/views/components/umb-media-grid.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 f84770bb3d..98c0512b9d 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 @@ -16,7 +16,7 @@ -
+
From 6586f08a2f76c5d5d5c981615dba7e7db918b01a Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Oct 2015 19:40:34 +0200 Subject: [PATCH 06/62] Add editor sub header to list view --- .../propertyeditors/listview/listview.html | 75 +++++++++++-------- 1 file changed, 45 insertions(+), 30 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html index 402746c994..86c15fe117 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/listview.html @@ -1,14 +1,17 @@
-
+
-
+
-
+
-
-
-
+ + + + + +
Create @@ -22,48 +25,60 @@
+ +
- - Publish - + + Publish +
+
- - Unpublish - + + Unpublish +
+
- - Delete - -
-
+ + Delete + +
-
+
+
+
-
-
- - -
-
+ + + + + + + + + -
+ +
+
+ + +
+
+ -
-
-
+ - + -
From d78f426e9446b7b8e788c449bb88007ba185bc12 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Oct 2015 19:51:29 +0200 Subject: [PATCH 07/62] add styling to sortable placeholder --- .../src/less/components/umb-media-grid.less | 6 ++++++ 1 file changed, 6 insertions(+) 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 66e1885042..01478d5a17 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 @@ -170,3 +170,9 @@ opacity: 1; transition: opacity 0.2s; } + +.umb-media-grid__placeholder { + background: @grayLighter; + border: 2px dashed @grayLight; + box-sizing: border-box; +} From 74bf23140ba8e4e9e485406ddba69b7e85047184 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Wed, 14 Oct 2015 19:52:51 +0200 Subject: [PATCH 08/62] add no-margin-bottom modifier to form styling --- src/Umbraco.Web.UI.Client/src/less/forms.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/Umbraco.Web.UI.Client/src/less/forms.less b/src/Umbraco.Web.UI.Client/src/less/forms.less index 38b63ad100..a0d436ae97 100644 --- a/src/Umbraco.Web.UI.Client/src/less/forms.less +++ b/src/Umbraco.Web.UI.Client/src/less/forms.less @@ -87,6 +87,10 @@ form { margin: 0 0 @baseLineHeight; } +form.-no-margin-bottom { + margin-bottom: 0; +} + fieldset { padding: 0; margin: 0; From f5fa860b5c8fc82f12346143b68b5a43cb6a952c Mon Sep 17 00:00:00 2001 From: Per Ploug Date: Thu, 15 Oct 2015 14:08:29 +0200 Subject: [PATCH 09/62] Get Media folders from node --- .../src/common/resources/media.resource.js | 40 ++++++++++++++++++- src/Umbraco.Web/Editors/MediaController.cs | 15 +++++++ 2 files changed, 54 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js b/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js index a8eda14161..f6443735cf 100644 --- a/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js +++ b/src/Umbraco.Web.UI.Client/src/common/resources/media.resource.js @@ -392,7 +392,45 @@ function mediaResource($q, $http, umbDataFormatter, umbRequestHelper) { }), 'Failed to add folder'); }, - + + /** + * @ngdoc method + * @name umbraco.resources.mediaResource#getChildFolders + * @methodOf umbraco.resources.mediaResource + * + * @description + * Retrieves all media children with types used as folders. + * Uses the convention of looking for media items with mediaTypes ending in + * *Folder so will match "Folder", "bannerFolder", "secureFolder" etc, + * + * ##usage + * 
+         * mediaResource.getChildFolders(1234)
+         *    .then(function(data) {
+         *        alert('folders');
+         *    });
+         *
+ * + * @param {int} parentId Id of the media item to query for child folders + * @returns {Promise} resourcePromise object. + * + */ + getChildFolders: function(parentId){ + if(!parentId){ + parentId = -1; + } + + return umbRequestHelper.resourcePromise( + $http.get( + umbRequestHelper.getApiUrl( + "mediaApiBaseUrl", + "GetChildFolders", + [ + { id: parentId } + ])), + 'Failed to retrieve child folders for media item ' + parentId); + }, + /** * @ngdoc method * @name umbraco.resources.mediaResource#emptyRecycleBin diff --git a/src/Umbraco.Web/Editors/MediaController.cs b/src/Umbraco.Web/Editors/MediaController.cs index e03f55a785..c3a181eb9b 100644 --- a/src/Umbraco.Web/Editors/MediaController.cs +++ b/src/Umbraco.Web/Editors/MediaController.cs @@ -118,6 +118,21 @@ namespace Umbraco.Web.Editors return foundMedia.Select(Mapper.Map); } + /// + /// Returns media items known to be a container of other media items + /// + /// + /// + [FilterAllowedOutgoingMedia(typeof(IEnumerable))] + public IEnumerable GetChildFolders(int id = -1) + { + //Suggested convention for folder mediatypes - we can make this more or less complicated as long as we document it... + //if you create a media type, which has an alias that ends with ...Folder then its a folder: ex: "secureFolder", "bannerFolder", "Folder" + var folderTypes = Services.ContentTypeService.GetAllMediaTypes().Where(x => x.Alias.EndsWith("Folder")).Select(x => x.Id); + + var children = (id < 0) ? Services.MediaService.GetRootMedia() : Services.MediaService.GetById(id).Children(); + return children.Where(x => folderTypes.Contains(x.ContentTypeId)).Select(Mapper.Map); + } /// /// Returns the root media objects From efb96b25fcc3914e9d6de440096dc393197579ae Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Oct 2015 14:33:36 +0200 Subject: [PATCH 10/62] Add tooltip directive, use tooltip to show media item details, styles changes to media items to fit in info icon --- .../components/umbmediagrid.directive.js | 15 ++- .../components/umbtooltip.directive.js | 82 ++++++++++++++ src/Umbraco.Web.UI.Client/src/less/belle.less | 2 + .../components/tooltip/umb-tooltip-list.less | 19 ++++ .../less/components/tooltip/umb-tooltip.less | 13 +++ .../src/less/components/umb-media-grid.less | 100 +++++++++++------- .../src/views/components/umb-media-grid.html | 21 ++-- .../src/views/components/umb-tooltip.html | 1 + .../listview/layouts/grid/grid.html | 14 ++- .../grid/grid.listviewlayout.controller.js | 20 ++++ 10 files changed, 234 insertions(+), 53 deletions(-) create mode 100644 src/Umbraco.Web.UI.Client/src/common/directives/components/umbtooltip.directive.js create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip-list.less create mode 100644 src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less create mode 100644 src/Umbraco.Web.UI.Client/src/views/components/umb-tooltip.html 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 771cd3adfa..20d50ed5f9 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 @@ -136,6 +136,18 @@ item.selected = !item.selected; }; + scope.onDetailsOver = function(item, event) { + if(scope.detailsHover) { + scope.detailsHover(item, event, true); + } + }; + + scope.onDetailsOut = function(item, event) { + if(scope.detailsHover) { + scope.detailsHover(item, event, false); + } + }; + var unbindItemsWatcher = scope.$watch('items', function(newValue, oldValue){ activate(); }); @@ -151,7 +163,8 @@ replace: true, templateUrl: 'views/components/umb-media-grid.html', scope: { - items: '=' + items: '=', + detailsHover: "=" }, link: link }; diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtooltip.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtooltip.directive.js new file mode 100644 index 0000000000..4dd539d147 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbtooltip.directive.js @@ -0,0 +1,82 @@ +(function() { + 'use strict'; + + function TooltipDirective($timeout) { + + function link(scope, el, attr, ctrl) { + + scope.tooltipStyles = {}; + scope.tooltipStyles.left = 0; + scope.tooltipStyles.top = 0; + + function activate() { + + $timeout(function() { + setTooltipPosition(scope.event); + }); + + } + + function setTooltipPosition(event) { + + var viewportWidth = null; + var viewportHeight = null; + var elementHeight = null; + var elementWidth = null; + + var position = { + right: "inherit", + left: "inherit", + top: "inherit", + bottom: "inherit" + }; + + // viewport size + viewportWidth = $(window).innerWidth(); + viewportHeight = $(window).innerHeight(); + + // element size + elementHeight = el.context.clientHeight; + elementWidth = el.context.clientWidth; + + position.left = event.pageX - (elementWidth / 2); + position.top = event.pageY; + + // check to see if element is outside screen + // outside right + if (position.left + elementWidth > viewportWidth) { + position.right = 0; + position.left = "inherit"; + } + + // outside bottom + if (position.top + elementHeight > viewportHeight) { + position.bottom = 0; + position.top = "inherit"; + } + + scope.tooltipStyles = position; + + } + + activate(); + + } + + var directive = { + restrict: 'E', + transclude: true, + replace: true, + templateUrl: 'views/components/umb-tooltip.html', + scope: { + event: "=" + }, + link: link + }; + + return directive; + } + + angular.module('umbraco.directives').directive('umbTooltip', TooltipDirective); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index d522216d5c..f01465f9b8 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -98,6 +98,8 @@ @import "components/umb-breadcrumbs.less"; @import "components/umb-media-grid.less"; @import "components/umb-layout-selector.less"; +@import "components/tooltip/umb-tooltip.less"; +@import "components/tooltip/umb-tooltip-list.less"; @import "components/overlays/umb-overlay-backdrop.less"; @import "components/buttons/umb-button.less"; diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip-list.less b/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip-list.less new file mode 100644 index 0000000000..4f704be511 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip-list.less @@ -0,0 +1,19 @@ +.umb-tooltip-list { + list-style: none; + margin-left: 0; + margin-bottom: 0; + padding: 10px; +} + +.umb-tooltip-list__item { + margin-bottom: 5px; +} + +.umb-tooltip-list__item:last-child { + margin-bottom: 0; +} + +.umb-tooltip-list__item-label { + font-weight: bold; + margin-bottom: -3px; +} diff --git a/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less b/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less new file mode 100644 index 0000000000..b058cd1b4e --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/less/components/tooltip/umb-tooltip.less @@ -0,0 +1,13 @@ +.umb-tooltip { + position: fixed; + display: flex; + background: #ffffff; + padding: 10px; + z-index: 1000; + max-width: 200px; + font-size: 12px; + animation-duration: 0.1s; + animation-timing-function: ease-in; + animation: fadeIn; + margin-top: 15px; +} 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 01478d5a17..43599f469c 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 @@ -21,16 +21,13 @@ margin: 5px; display: flex; align-items: center; - padding: 10px 30px 10px 20px; + padding: 10px 20px; box-sizing: border-box; flex: 1 1 200px; border: 1px solid transparent; transition: border 0.2s; position: relative; -} - -.umb-media-grid__folder.-selected { - background: rgba(255, 255, 255, 0.6); + justify-content: space-between; } .umb-media-grid__folder:focus, @@ -43,6 +40,11 @@ border: 1px solid @blue; } +.umb-media-grid__folder-description { + display: flex; + align-items: center; +} + .umb-media-grid__folder-icon { font-size: 20px; color: @gray; @@ -67,6 +69,7 @@ margin: 7px; position: relative; background: @grayLighter; + overflow: hidden; } .umb-media-grid__item:hover { @@ -91,33 +94,36 @@ } .umb-media-grid__item-overlay { - display: none; + display: flex; + justify-content: center; + align-items: center; + opacity: 0; position: absolute; right: 0; bottom: 0; left: 0; z-index: 100; - padding: 5px; + padding: 5px 10px; + box-sizing: border-box; + font-size: 13px; overflow: hidden; color: white; - text-align: center; white-space: nowrap; - background: black; background: rgba(0, 0, 0, 0.4); + background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.75)); } .umb-media-grid__item:hover .umb-media-grid__item-overlay { - display: block; + opacity: 1; + animation: fadeIn; + animation-duration: 0.2s; + animation-timing-function: ease-in-out; } .umb-media-grid__item-name { - text-align: center; - color: @gray; - font-size: 12px; - position: absolute; - bottom: 20px; - right: 0; - left: 0; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } .umb-media-grid__item-icon { @@ -129,46 +135,58 @@ transform: translate(-50%,-50%); } -.umb-media-grid__select { +.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: 30px; - height: 30px; + width: 25px; + height: 25px; background: rgba(0, 0, 0, 0.4); - position: absolute; - top: 10px; - right: 10px; - z-index: 10; 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__select.-size-20 { - width: 20px; - height: 20px; +.umb-media-grid__action.-not-clickable { + cursor: default; } -.umb-media-grid__select:hover { +.umb-media-grid__action:first-child { + margin-left: 0; +} + +.umb-media-grid__action:hover { background: @blue; - transition: background 0.2s; + transition: background 0.1s; } -.umb-media-grid__select.-selected { +.umb-media-grid__action.-selected { opacity: 1; background: @blue; } -.umb-media-grid__select-icon { - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - color: white; -} - -.umb-media-grid__item:hover .umb-media-grid__select, -.umb-media-grid__folder:hover .umb-media-grid__select{ +.umb-media-grid__item:hover .umb-media-grid__action:not(.-selected), +.umb-media-grid__folder:hover .umb-media-grid__action:not(.-selected) { opacity: 1; - transition: opacity 0.2s; + animation: fadeIn; + animation-duration: 0.2s; + animation-timing-function: ease-in-out; } .umb-media-grid__placeholder { 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 98c0512b9d..8def649838 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 @@ -4,14 +4,13 @@ - - -
{{ folder.name }}
- -
- +
+ +
{{ folder.name }}
+ +
@@ -20,14 +19,16 @@ -
- +
+ +
-
{{item.name}}
+
+
{{item.name}}
+
{{item.name}} - {{item.name}} diff --git a/src/Umbraco.Web.UI.Client/src/views/components/umb-tooltip.html b/src/Umbraco.Web.UI.Client/src/views/components/umb-tooltip.html new file mode 100644 index 0000000000..18095e599c --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/components/umb-tooltip.html @@ -0,0 +1 @@ +
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 2c46da8159..feb0e33831 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 @@ -16,9 +16,21 @@ + items="listViewResultSet.items" + details-hover="vm.showMediaDetailsTooltip"> + +
    +
  • +
    {{ property.header }}
    +
    {{ vm.mediaDetailsTooltip.item[property.alias] }}
    +
    • +
+ +
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js index 99f660017f..2568f6caa3 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.listviewlayout.controller.js @@ -21,6 +21,7 @@ vm.dragLeave = dragLeave; vm.onFilesQueue = onFilesQueue; vm.onUploadComplete = onUploadComplete; + vm.showMediaDetailsTooltip = showMediaDetailsTooltip; function dragEnter(el, event) { vm.activeDrag = true; @@ -41,6 +42,25 @@ } + vm.mediaDetailsTooltip = {}; + + + function showMediaDetailsTooltip(item, event, isHovering) { + + if (isHovering && !vm.mediaDetailsTooltip.show) { + + vm.mediaDetailsTooltip.event = event; + vm.mediaDetailsTooltip.item = item; + vm.mediaDetailsTooltip.show = true; + + } else if (!isHovering && vm.mediaDetailsTooltip.show) { + + vm.mediaDetailsTooltip.show = false; + + } + + } + } angular.module("umbraco").controller("Umbraco.PropertyEditors.ListView.GridLayoutController", ListViewGridLayoutController); From fbbaa154292228c0ae9cd38540d99524e43b950b Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Thu, 15 Oct 2015 21:14:13 +0200 Subject: [PATCH 11/62] editor sub header: less top and bottom padding + better bar top position for better transition to fixed position --- .../common/directives/components/umbstickybar.directive.js | 4 ++-- .../components/editor/subheader/umb-editor-sub-header.less | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js index 0782474a25..489a5cc57c 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/umbstickybar.directive.js @@ -9,6 +9,7 @@ var scrollableContainer = null; var clonedBar = null; var cloneIsMade = false; + var barTop = bar.context.offsetTop; function activate() { @@ -31,9 +32,8 @@ function determineVisibility() { var scrollTop = scrollableContainer.scrollTop(); - var elementTop = bar.offset().top; - if (scrollTop > elementTop) { + if (scrollTop > barTop) { if (!cloneIsMade) { diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less index b94879b8ea..cb47b9ef70 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less @@ -1,5 +1,5 @@ .umb-editor-sub-header { - padding: 20px 0; + padding: 15px 0; margin-bottom: 20px; background: #ffffff; display: flex; From d10752bbf95dfa1401d2b38296872035c3199271 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Oct 2015 09:42:40 +0200 Subject: [PATCH 12/62] move sub header up to header to save space --- .../components/editor/subheader/umb-editor-sub-header.less | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less index cb47b9ef70..ea71f36d7e 100644 --- a/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less +++ b/src/Umbraco.Web.UI.Client/src/less/components/editor/subheader/umb-editor-sub-header.less @@ -1,9 +1,10 @@ .umb-editor-sub-header { padding: 15px 0; - margin-bottom: 20px; + margin-bottom: 30px; background: #ffffff; display: flex; justify-content: space-between; + margin-top: -30px; } .umb-editor-sub-header.-umb-sticky-bar { @@ -11,7 +12,6 @@ 0 5px 0 rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 0, 0, 0.16); transition: box-shadow 1s; - margin-top: -30px; } .umb-editor-sub-header__content-left { From 53fdc801f3c6fad7d8520dc78b160c996b1a7161 Mon Sep 17 00:00:00 2001 From: Per Ploug Date: Fri, 16 Oct 2015 11:26:04 +0200 Subject: [PATCH 13/62] Return basic entity instead of display entity --- src/Umbraco.Web/Editors/MediaController.cs | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web/Editors/MediaController.cs b/src/Umbraco.Web/Editors/MediaController.cs index c3a181eb9b..dcea71669b 100644 --- a/src/Umbraco.Web/Editors/MediaController.cs +++ b/src/Umbraco.Web/Editors/MediaController.cs @@ -123,15 +123,15 @@ namespace Umbraco.Web.Editors ///
/// /// - [FilterAllowedOutgoingMedia(typeof(IEnumerable))] - public IEnumerable GetChildFolders(int id = -1) + [FilterAllowedOutgoingMedia(typeof(IEnumerable>))] + public IEnumerable> GetChildFolders(int id = -1) { //Suggested convention for folder mediatypes - we can make this more or less complicated as long as we document it... //if you create a media type, which has an alias that ends with ...Folder then its a folder: ex: "secureFolder", "bannerFolder", "Folder" var folderTypes = Services.ContentTypeService.GetAllMediaTypes().Where(x => x.Alias.EndsWith("Folder")).Select(x => x.Id); var children = (id < 0) ? Services.MediaService.GetRootMedia() : Services.MediaService.GetById(id).Children(); - return children.Where(x => folderTypes.Contains(x.ContentTypeId)).Select(Mapper.Map); + return children.Where(x => folderTypes.Contains(x.ContentTypeId)).Select(Mapper.Map>); } /// From f7c2f779c23f888d66bc19343157cb12707d78e0 Mon Sep 17 00:00:00 2001 From: Per Ploug Date: Fri, 16 Oct 2015 12:48:34 +0200 Subject: [PATCH 14/62] Fixed: U4-7264 Support for folder upload part of the media library polish, when a folder is dragged to the view, it will check if folders exist, and create if needed, this makes it easier to replicate a folder structure when uploading. --- src/Umbraco.Web/Editors/MediaController.cs | 38 ++++++++++++++++++++-- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/src/Umbraco.Web/Editors/MediaController.cs b/src/Umbraco.Web/Editors/MediaController.cs index dcea71669b..68deecbcbf 100644 --- a/src/Umbraco.Web/Editors/MediaController.cs +++ b/src/Umbraco.Web/Editors/MediaController.cs @@ -424,7 +424,7 @@ namespace Umbraco.Web.Editors { return Request.CreateValidationErrorResponse("The request was not formatted correctly, the currentFolder is not an integer"); } - + //ensure the user has access to this folder by parent id! if (CheckPermissions( new Dictionary(), @@ -438,9 +438,42 @@ namespace Umbraco.Web.Editors Services.TextService.Localize("speechBubbles/invalidUserPermissionsText"), SpeechBubbleIcon.Warning))); } - + var tempFiles = new PostedFiles(); + var mediaService = ApplicationContext.Services.MediaService; + + //in case we pass a path with a folder in it, we will create it and upload media to it. + string path; + if (result.FormData.ContainsKey("path")) + { + var folders = result.FormData["path"].Split('/'); + + for (int i = 0; i < folders.Length-1; i++) + { + var folderName = folders[i]; + + //get current parent + var mediaRoot = mediaService.GetById(parentId); + + //look for matching folder + var folderMediaItem = mediaRoot.Children().FirstOrDefault(x => x.Name == folderName && x.ContentType.Alias == Core.Constants.Conventions.MediaTypes.Folder); + if (folderMediaItem == null) + { + //if null, create a folder + folderMediaItem = mediaService.CreateMedia(folderName, mediaRoot, Constants.Conventions.MediaTypes.Folder); + mediaService.Save(folderMediaItem); + + //set the media root to the folder id so uploaded files will end there. + parentId = folderMediaItem.Id; + } + else + { + parentId = folderMediaItem.Id; + } + } + } + //get the files foreach (var file in result.FileData) { @@ -454,7 +487,6 @@ namespace Umbraco.Web.Editors if (UmbracoConfig.For.UmbracoSettings().Content.ImageFileTypes.Contains(ext)) mediaType = Constants.Conventions.MediaTypes.Image; - var mediaService = ApplicationContext.Services.MediaService; var f = mediaService.CreateMedia(fileName, parentId, mediaType, Security.CurrentUser.Id); var fileInfo = new FileInfo(file.LocalFileName); From b6bbb8e79d6475b9960aade221d6d4fabbec1e63 Mon Sep 17 00:00:00 2001 From: Per Ploug Date: Fri, 16 Oct 2015 12:58:08 +0200 Subject: [PATCH 15/62] Related to: U4-7264 Support for folder upload Enable a larger file max size for upload as 4mb is quickly very limiting. --- src/Umbraco.Web.UI/web.Template.config | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI/web.Template.config b/src/Umbraco.Web.UI/web.Template.config index 924a5436f8..d7498558f1 100644 --- a/src/Umbraco.Web.UI/web.Template.config +++ b/src/Umbraco.Web.UI/web.Template.config @@ -79,7 +79,7 @@ - + + + + + + From 0b7f6b3239504432c084d85ba475dde3f16fac85 Mon Sep 17 00:00:00 2001 From: Mads Rasmussen Date: Fri, 16 Oct 2015 17:10:21 +0200 Subject: [PATCH 16/62] add support for icon on link style buttons --- .../directives/components/buttons/umbbutton.directive.js | 3 ++- .../src/views/components/buttons/umb-button.html | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js index 4df813f429..790aaab1b1 100644 --- a/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js +++ b/src/Umbraco.Web.UI.Client/src/common/directives/components/buttons/umbbutton.directive.js @@ -51,7 +51,8 @@ state: "=?", shortcut: "@?", label: "@?", - labelKey: "@?" + labelKey: "@?", + icon: "@?" } }; diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html index f1a8ccf14b..874f7f5df9 100644 --- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html +++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html @@ -10,6 +10,7 @@ + {{label}} {{label}} @@ -17,6 +18,7 @@ -