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

Merge branch 'v8/dev' into v8/contrib

Browse Source
This commit is contained in:
Sebastiaan Janssen
2020-01-09 13:29:39 +01:00
parent 324f18052f 83112dbd19
commit ecb6f93e54
11 changed files with 85 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -312,14 +312,7 @@ Use this directive to generate a thumbnail grid of media items.
scope.onDetailsHover(item, $event, hover);
}
};
scope.clickEdit = function(item, $event) {
if (scope.onClickEdit) {
scope.onClickEdit({"item": item})
$event.stopPropagation();
}
};
var unbindItemsWatcher = scope.$watch('items', function(newValue, oldValue) {
if (angular.isArray(newValue)) {
activate();
@@ -341,8 +334,8 @@ Use this directive to generate a thumbnail grid of media items.
onDetailsHover: "=",
onClick: '=',
onClickName: "=",
onClickEdit: "&?",
allowOnClickEdit: "@?",
allowOpenFolder: "=",
allowOpenFile: "=",
filterBy: "=",
itemMaxWidth: "@",
itemMaxHeight: "@",

27
src/Umbraco.Web.UI.Client/src/less/components/umb-breadcrumbs.less
View File

@@ -4,6 +4,7 @@
margin-left: 0;
display: flex;
flex-wrap: wrap;
user-select: none;
}
.umb-breadcrumbs__ancestor {
@@ -12,10 +13,23 @@
}
.umb-breadcrumbs__action {
position: relative;
background: transparent;
border: 0 none;
padding: 0;
margin-top: -4px;
border-radius: 3px;
padding: 0 4px;
color: @ui-option-type;
&.--current {
font-weight: bold;
pointer-events: none;
}
&:hover {
color: @ui-option-type-hover;
background-color: @white;
}
}
.umb-breadcrumbs__ancestor-link,
@@ -26,6 +40,7 @@
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
padding: 0 4px;
}
.umb-breadcrumbs__ancestor-link {
@@ -39,13 +54,13 @@
.umb-breadcrumbs__separator {
position: relative;
top: 1px;
margin-left: 5px;
margin-right: 5px;
margin: 0 1px;
margin-top: -3px;
color: @gray-7;
}
input.umb-breadcrumbs__add-ancestor {
height: 25px;
margin: 0 0 0 3px;
height: 24px;
margin: -2px 0 -2px 3px;
width: 100px;
}

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

@@ -40,25 +40,41 @@
}
}
.umb-media-grid__item.-selectable {
.umb-media-grid__item.-selectable,
.umb-media-grid__item.-folder {// If folders isnt selectable, they opens if clicked, therefor...
cursor: pointer;
.tabbing-active &:focus {
outline: 2px solid @inputBorderTabFocus;
}
}
.umb-media-grid__item.-file {
background-color: @white;
}
.umb-media-grid__item.-folder {
&.-selectable {
.media-grid-item-edit:hover .umb-media-grid__item-name,
.media-grid-item-edit:focus .umb-media-grid__item-name {
text-decoration: underline;
}
}
&.-unselectable {
&:hover, &:focus {
.umb-media-grid__item-name {
text-decoration: underline;
}
}
}
}
.umb-media-grid__item.-selected {
color:@ui-selected-type;
.umb-media-grid__item-overlay {
color: @ui-selected-type;
}
}
.umb-media-grid__item.-selected,
.umb-media-grid__item.-selected,
.umb-media-grid__item.-selectable:hover {
&::before {
content: "";
@@ -139,10 +155,10 @@
background: fade(@white, 92%);
transition: opacity 150ms;
&:hover {
&.-can-open:hover {
text-decoration: underline;
}
.tabbing-active &:focus {
opacity: 1;
}
@@ -190,7 +206,7 @@
align-items: center;
color: @black;
transition: opacity 150ms;
&:hover {
color: @ui-action-discreet-type-hover;
}

2
src/Umbraco.Web.UI.Client/src/less/property-editors.less
View File

@@ -249,7 +249,7 @@
transition: all 150ms ease-in-out;
&:focus,
&:active,
&:hover {
color: @ui-action-discreet-type-hover;
border-color: @ui-action-discreet-type-hover;

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

@@ -1,7 +1,7 @@
//used for the media picker dialog
angular.module("umbraco")
.controller("Umbraco.Editors.MediaPickerController",
function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService, editorService) {
function ($scope, $timeout, mediaResource, entityResource, userService, mediaHelper, mediaTypeHelper, eventsService, treeService, localStorageService, localizationService) {
var vm = this;
@@ -22,7 +22,6 @@ angular.module("umbraco")
vm.clickHandler = clickHandler;
vm.clickItemName = clickItemName;
vm.editMediaItem = editMediaItem;
vm.gotoFolder = gotoFolder;
var dialogOptions = $scope.model;
@@ -37,8 +36,7 @@ angular.module("umbraco")
$scope.cropSize = dialogOptions.cropSize;
$scope.lastOpenedNode = localStorageService.get("umbLastOpenedMediaNodeId");
$scope.lockedFolder = true;
$scope.allowMediaEdit = dialogOptions.allowMediaEdit ? dialogOptions.allowMediaEdit : false;
var userStartNodes = [];
var umbracoSettings = Umbraco.Sys.ServerVariables.umbracoSettings;
@@ -132,7 +130,7 @@ angular.module("umbraco")
// ID of a UDI or legacy int ID still could be null/undefinied here
// As user may dragged in an image that has not been saved to media section yet
if(id){
if (id) {
entityResource.getById(id, "Media")
.then(function (node) {
$scope.target = node;
@@ -144,8 +142,7 @@ angular.module("umbraco")
openDetailsDialog();
}
}, gotoStartNode);
}
else {
} else {
// No ID set - then this is going to be a tmpimg that has not been uploaded
// User editing this will want to be changing the ALT text
openDetailsDialog();
@@ -254,11 +251,14 @@ angular.module("umbraco")
}
}
function clickItemName(item) {
function clickItemName(item, event, index) {
if (item.isFolder) {
gotoFolder(item);
}
}
else {
$scope.clickHandler(item, event, index);
}
};
function selectMedia(media) {
if (!media.selectable) {
@@ -510,30 +510,6 @@ angular.module("umbraco")
}
}
function editMediaItem(item) {
var mediaEditor = {
id: item.id,
submit: function (model) {
editorService.close()
// update the media picker item in the picker so it matched the saved media item
// the media picker is using media entities so we get the
// entity so we easily can format it for use in the media grid
if (model && model.mediaNode) {
entityResource.getById(model.mediaNode.id, "media")
.then(function (mediaEntity) {
angular.extend(item, mediaEntity);
setMediaMetaData(item);
setUpdatedMediaNodes(item);
});
}
},
close: function (model) {
setUpdatedMediaNodes(item);
editorService.close();
}
};
editorService.mediaEditor(mediaEditor);
};
/**
* Called when the umbImageGravity component updates the focal point value

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

@@ -56,19 +56,19 @@
<div class="row umb-control-group" ng-show="!vm.searchOptions.filter">
<ul class="umb-breadcrumbs">
<li ng-hide="startNodeId != -1" class="umb-breadcrumbs__ancestor">
<button type="button" class="umb-breadcrumbs__action" ng-click="vm.gotoFolder()">
<button type="button" class="umb-breadcrumbs__action umb-outline umb-outline--surronding" ng-click="vm.gotoFolder()" ng-class="{'--current':path.length === 0}">
<localize key="treeHeaders_media">Media</localize>
</button>
<span class="umb-breadcrumbs__separator" aria-hidden="true">&#47;</span>
</li>
<li ng-repeat="item in path" class="umb-breadcrumbs__ancestor">
<button type="button" class="umb-breadcrumbs__action" ng-click="vm.gotoFolder(item)">{{item.name}}</button>
<button type="button" class="umb-breadcrumbs__action umb-outline umb-outline--surronding" ng-click="vm.gotoFolder(item)" ng-class="{'--current':$last}">{{item.name}}</button>
<span class="umb-breadcrumbs__separator" aria-hidden="true">&#47;</span>
</li>
<li class="umb-breadcrumbs__ancestor" ng-show="!lockedFolder">
<button type="button" class="umb-breadcrumbs__action" ng-hide="model.showFolderInput" ng-click="model.showFolderInput = true">
<button type="button" class="umb-breadcrumbs__action umb-outline umb-outline--surronding" ng-hide="model.showFolderInput" ng-click="model.showFolderInput = true">
<i class="icon icon-add small" aria-hidden="true"></i>
<span class="sr-only">
<localize key="visuallyHiddenTexts_createNewFolder">Create new folder</localize>
@@ -105,8 +105,6 @@
items="images"
on-click="vm.clickHandler"
on-click-name="vm.clickItemName"
on-click-edit="vm.editMediaItem(item)"
allow-on-click-edit="{{allowMediaEdit}}"
item-max-width="150"
item-max-height="150"
item-min-width="100"
@@ -115,7 +113,8 @@
only-images={{onlyImages}}
only-folders={{onlyFolders}}
include-sub-folders={{showChilds}}
current-folder-id="{{currentFolder.id}}">
current-folder-id="{{currentFolder.id}}"
allow-open-folder="!disableFolderSelect">
</umb-media-grid>

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

@@ -1,13 +1,23 @@
<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', '-selectable': item.selectable, '-unselectable': !item.selectable}">
<div data-element="media-grid-item-{{$index}}"
class="umb-media-grid__item umb-outline umb-outline--surrounding"
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, '-folder': item.isFolder, '-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>
<button data-element="media-grid-item-edit" class="umb-media-grid__item-overlay btn-reset" ng-class="{'-locked': item.selected || !item.file || !item.thumbnail}" ng-click="clickItemName(item, $event, $index)" type="button">
<div data-element="media-grid-item-edit"
class="umb-media-grid__item-overlay umb-outline"
ng-class="{'-locked': item.selected || !item.file || !item.thumbnail, '-can-open': (item.isFolder ? allowOpenFolder : allowOpenFile)}"
ng-click="clickItemName(item, $event, $index)"
tabindex="{{item.isFolder && item.selectable ? '0' : '-1'}}"
>
<i ng-if="onDetailsHover" class="icon-info umb-media-grid__info" ng-mouseover="hoverItemDetails(item, $event, true)" ng-mouseleave="hoverItemDetails(item, $event, false)"></i>
<div class="umb-media-grid__item-name">{{item.name}}</div>
</button>
</div>
<!-- Check backgrund -->
<div class="umb-media-grid__image-background" ng-if="item.thumbnail || item.extension === 'svg'"></div>

2
src/Umbraco.Web.UI.Client/src/views/prevalueeditors/mediafolderpicker.html
View File

@@ -27,7 +27,7 @@
</li>
<li style="border: none;" class="add-wrapper unsortable" ng-hide="model.value">
<button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link add-link-square btn-reset" ng-click="add()" prevent-default>
<button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link add-link-square btn-reset umb-outline umb-outline--surrounding" ng-click="add()" prevent-default>
<i class="icon icon-add large" aria-hidden="true"></i>
</button>
</li>

4
src/Umbraco.Web.UI.Client/src/views/propertyeditors/listview/layouts/grid/grid.html
View File

@@ -52,7 +52,9 @@
<umb-media-grid items="vm.itemsWithoutFolders"
on-details-hover="vm.hoverMediaItemDetails"
on-click="vm.selectItem"
on-click-name="vm.goToItem">
on-click-name="vm.goToItem"
allow-open-folder="true"
allow-open-file="true">
</umb-media-grid>
<umb-tooltip ng-if="vm.mediaDetailsTooltip.show"

2
src/Umbraco.Web.UI.Client/src/views/propertyeditors/mediapicker/mediapicker.controller.js
View File

@@ -205,7 +205,7 @@ angular.module('umbraco').controller("Umbraco.PropertyEditors.MediaPickerControl
multiPicker: multiPicker,
onlyImages: onlyImages,
disableFolderSelect: disableFolderSelect,
allowMediaEdit: true,
submit: function (model) {
editorService.close();

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

@@ -45,7 +45,7 @@
</div>
</li>
<li style="border: none;" class="add-wrapper unsortable" ng-if="vm.showAdd() && allowAddMedia">
<button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link btn-reset" ng-click="vm.add()" ng-class="{'add-link-square': (mediaItems.length === 0 || isMultiPicker)}" prevent-default>
<button aria-label="Open media picker" data-element="sortable-thumbnails-add" class="add-link btn-reset umb-outline umb-outline--surrounding" ng-click="vm.add()" ng-class="{'add-link-square': (mediaItems.length === 0 || isMultiPicker)}" prevent-default>
<i class="icon icon-add large" aria-hidden="true"></i>
</button>
</li>