yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'v8/feature/2438AB-RTE-Image-Config-MediaFolder' of https://github.com/umbraco/Umbraco-CMS into v8/feature/2438AB-RTE-Image-Config-MediaFolder

Browse Source
This commit is contained in:
Warren Buckley
2019-09-11 10:03:19 +01:00
parent 28a0e0aa6f fdeaaad738
commit 39fd953ca8
5 changed files with 51 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
src/Umbraco.Web.UI.Client/src/common/directives/components/umbmediagrid.directive.js
View File

@@ -118,7 +118,9 @@ Use this directive to generate a thumbnail grid of media items.
var item = scope.items[i];
setItemData(item);
setOriginalSize(item, itemMaxHeight);
item.selectable = getSelectableState(item);
// remove non images when onlyImages is set to true
if(scope.onlyImages === "true" && !item.isFolder && !item.thumbnail){
scope.items.splice(i, 1);
@@ -188,6 +190,22 @@ Use this directive to generate a thumbnail grid of media items.
}
}
}
/**
* Returns wether a item should be selectable or not.
*/
function getSelectableState(item) {
// check if item is a folder or image
if (item.isFolder) {
return !scope.disableFolderSelect && !scope.onlyImages;
} else {
return !scope.onlyFolders;
}
return false;
}
function setOriginalSize(item, maxHeight) {
@@ -331,7 +349,9 @@ Use this directive to generate a thumbnail grid of media items.
itemMaxHeight: "@",
itemMinWidth: "@",
itemMinHeight: "@",
disableFolderSelect: "@",
onlyImages: "@",
onlyFolders: "@",
includeSubFolders: "@",
currentFolderId: "@"
},

20
src/Umbraco.Web.UI.Client/src/less/components/umb-media-grid.less
View File

@@ -21,12 +21,19 @@
margin: 10px;
position: relative;
user-select: none;
cursor: pointer;
user-select: none;
box-shadow: 0 1px 1px 0 rgba(0,0,0,.2);
transition: box-shadow 150ms ease-in-out;
}
.umb-media-grid__item.-unselectable {
}
.umb-media-grid__item.-selectable {
cursor: pointer;
}
.umb-media-grid__item.-file {
background-color: @white;
}
@@ -37,7 +44,8 @@
color: @ui-selected-type;
}
}
.umb-media-grid__item.-selected, .umb-media-grid__item:hover {
.umb-media-grid__item.-selected,
.umb-media-grid__item.-selectable:hover {
&::before {
content: "";
position: absolute;
@@ -52,7 +60,7 @@
pointer-events: none;
}
}
.umb-media-grid__item:hover {
.umb-media-grid__item.-selectable:hover {
&::before {
opacity: .33;
}
@@ -159,6 +167,10 @@
}
}
.umb-media-grid__item-name {
cursor: pointer;
}
.umb-media-grid__item-name {
white-space: nowrap;
overflow: hidden;

18
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.controller.js
View File

@@ -2,7 +2,7 @@
angular.module("umbraco")
.controller("Umbraco.Editors.MediaPickerController",
function ($scope, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService) {
if (!$scope.model.title) {
localizationService.localizeMany(["defaultdialogs_selectMedia", "general_includeFromsubFolders"])
.then(function (data) {
@@ -14,9 +14,10 @@ angular.module("umbraco")
}
var dialogOptions = $scope.model;
$scope.disableFolderSelect = dialogOptions.disableFolderSelect;
$scope.onlyImages = dialogOptions.onlyImages;
$scope.onlyFolders = dialogOptions.onlyFolders;
$scope.showDetails = dialogOptions.showDetails;
$scope.multiPicker = (dialogOptions.multiPicker && dialogOptions.multiPicker !== "0") ? true : false;
$scope.startNodeId = dialogOptions.startNodeId ? dialogOptions.startNodeId : -1;
@@ -188,26 +189,25 @@ angular.module("umbraco")
};
$scope.clickHandler = function (image, event, index) {
if (image.isFolder) {
if ($scope.disableFolderSelect) {
$scope.gotoFolder(image);
} else {
eventsService.emit("dialogs.mediaPicker.select", image);
selectImage(image);
}
} else {
eventsService.emit("dialogs.mediaPicker.select", image);
if ($scope.showDetails) {
$scope.target = image;
// handle both entity and full media object
if (image.image) {
$scope.target.url = image.image;
} else {
$scope.target.url = mediaHelper.resolveFile(image);
}
$scope.openDetailsDialog();
} else {
selectImage(image);
@@ -222,6 +222,9 @@ angular.module("umbraco")
};
function selectImage(image) {
if(!image.selectable) {
return;
}
if (image.selected) {
for (var i = 0; $scope.model.selection.length > i; i++) {
var imageInSelection = $scope.model.selection[i];
@@ -234,6 +237,7 @@ angular.module("umbraco")
if (!$scope.multiPicker) {
deselectAllImages($scope.model.selection);
}
eventsService.emit("dialogs.mediaPicker.select", image);
image.selected = true;
$scope.model.selection.push(image);
}

2
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/mediapicker/mediapicker.html
View File

@@ -98,7 +98,9 @@
item-max-height="150"
item-min-width="100"
item-min-height="100"
disable-folder-select={{disableFolderSelect}}
only-images={{onlyImages}}
only-folder={{onlyFolders}}
include-sub-folders={{showChilds}}
current-Folder-id="{{currentFolder.id}}">
</umb-media-grid>

2
src/Umbraco.Web.UI.Client/src/views/components/umb-media-grid.html
View File

@@ -1,5 +1,5 @@
<div data-element="media-grid" class="umb-media-grid">
<div data-element="media-grid-item-{{$index}}" class="umb-media-grid__item" title="{{item.name}}" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail, '-svg': item.extension == 'svg'}">
<div data-element="media-grid-item-{{$index}}" class="umb-media-grid__item" title="{{item.name}}" ng-click="clickItem(item, $event, $index)" ng-repeat="item in items | filter:filterBy" ng-style="item.flexStyle" ng-class="{'-selected': item.selected, '-file': !item.thumbnail, '-svg': item.extension == 'svg', '-selectable': item.selectable, '-unselectable': !item.selectable}">
<div>
<!--<i ng-show="item.selected" class="icon-check umb-media-grid__checkmark"></i>-->
<a ng-if="allowOnClickEdit === 'true'" ng-click="clickEdit(item, $event)" ng-href="" class="icon-edit umb-media-grid__edit"></a>