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

Merge pull request #9322 from umbraco/v8/feature/AB9079-use-tree-for-ElementType-pickers

Browse Source 
V8/feature/ab9079 use tree for element type pickers
This commit is contained in:
Warren Buckley
2020-11-23 15:32:13 +00:00
committed by GitHub
parent 9367c24738 aa06051418
commit 604e6f9abb
7 changed files with 103 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
src/Umbraco.Web.UI.Client/src/less/components/tree/umb-tree.less
View File

@@ -257,6 +257,7 @@ body.touch .umb-tree {
> .umb-tree-item__inner > i.icon,
> .umb-tree-item__inner > a {
cursor: not-allowed;
opacity: 0.4;
}
}

12
src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/treepicker/treepicker.html
View File

@@ -28,9 +28,8 @@
</div>
</div>
<div class="umb-control-group">
<div class="umb-control-group" ng-if="vm.enableSearh">
<umb-tree-search-box
ng-if="vm.enableSearh"
hide-search-callback="vm.hideSearch"
search-callback="vm.onSearchResults"
search-from-id="{{vm.searchInfo.searchFromId}}"
@@ -96,6 +95,15 @@
action="vm.close()">
</umb-button>
<umb-button
ng-if="model.extraActions"
ng-repeat="action in model.extraActions track by $index"
type="button"
button-style="{{action.style || 'link'}}"
label-key="{{action.labelKey}}"
action="action.action()">
</umb-button>
<umb-button
ng-if="vm.multiPicker"
type="button"

83
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.controller.js
View File

@@ -16,7 +16,7 @@
}
}
function BlockConfigurationController($scope, elementTypeResource, overlayService, localizationService, editorService, eventsService) {
function BlockConfigurationController($scope, elementTypeResource, overlayService, localizationService, editorService, eventsService, udiService) {
var unsubscribe = [];
@@ -95,47 +95,50 @@
}
};
vm.openAddDialog = function ($event, entry) {
vm.openAddDialog = function () {
//we have to add the 'alias' property to the objects, to meet the data requirements of itempicker.
var selectedItems = Utilities.copy($scope.model.value).forEach((obj) => {
var elementType = vm.getElementTypeByKey(obj.contentElementTypeKey);
if(elementType) {
obj.alias = elementType.alias;
return obj;
}
});
localizationService.localize("blockEditor_headlineCreateBlock").then(function(localizedTitle) {
var availableItems = vm.getAvailableElementTypes()
localizationService.localizeMany(["blockEditor_headlineCreateBlock", "blockEditor_labelcreateNewElementType"]).then(function(localized) {
var elemTypeSelectorOverlay = {
view: "itempicker",
title: localized[0],
availableItems: availableItems,
selectedItems: selectedItems,
createNewItem: {
action: function() {
overlayService.close();
vm.createElementTypeAndCallback(vm.addBlockFromElementTypeKey);
},
icon: "icon-add",
name: localized[1]
const contentTypePicker = {
title: localizedTitle,
section: "settings",
treeAlias: "documentTypes",
entityType: "documentType",
isDialog: true,
filter: function (node) {
if (node.metaData.isElement === true) {
var key = udiService.getKey(node.udi);
// If a Block with this ElementType as content already exists, we will emit it as a posible option.
return $scope.model.value.find(function (entry) {
return key === entry.contentElementTypeKey;
});
}
return true;
},
position: "target",
event: $event,
size: availableItems.length < 7 ? "small" : "medium",
submit: function (overlay) {
vm.addBlockFromElementTypeKey(overlay.selectedItem.key);
overlayService.close();
filterCssClass: "not-allowed",
select: function (node) {
vm.addBlockFromElementTypeKey(udiService.getKey(node.udi));
editorService.close();
},
close: function () {
overlayService.close();
}
};
editorService.close();
},
extraActions: [
{
style: "primary",
labelKey: "blockEditor_labelcreateNewElementType",
action: function () {
vm.createElementTypeAndCallback((documentTypeKey) => {
vm.addBlockFromElementTypeKey(documentTypeKey);
overlayService.open(elemTypeSelectorOverlay);
// At this point we will close the contentTypePicker.
editorService.close();
});
}
}
]
};
editorService.treePicker(contentTypePicker);
});
};
@@ -146,6 +149,7 @@
infiniteMode: true,
noTemplate: true,
isElement: true,
noTemplate: true,
submit: function (model) {
loadElementTypes().then( function () {
callback(model.documentTypeKey);
@@ -161,7 +165,7 @@
vm.addBlockFromElementTypeKey = function(key) {
var entry = {
var blockType = {
"contentElementTypeKey": key,
"settingsElementTypeKey": null,
"labelTemplate": "",
@@ -173,7 +177,10 @@
"thumbnail": null
};
$scope.model.value.push(entry);
$scope.model.value.push(blockType);
vm.openBlockOverlay(blockType);
};

63
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.controller.js
View File

@@ -10,7 +10,7 @@
(function () {
"use strict";
function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService) {
function BlockConfigurationOverlayController($scope, overlayService, localizationService, editorService, elementTypeResource, eventsService, udiService) {
var unsubscribe = [];
@@ -56,6 +56,7 @@
create: true,
infiniteMode: true,
isElement: true,
noTemplate: true,
submit: function (model) {
callback(model.documentTypeKey);
editorService.close();
@@ -69,35 +70,45 @@
vm.addSettingsForBlock = function($event, block) {
localizationService.localizeMany(["blockEditor_headlineAddSettingsElementType", "blockEditor_labelcreateNewElementType"]).then(function(localized) {
localizationService.localize("blockEditor_headlineAddSettingsElementType").then(function(localizedTitle) {
var elemTypeSelectorOverlay = {
view: "itempicker",
title: localized[0],
availableItems: vm.elementTypes,
position: "target",
event: $event,
size: vm.elementTypes.length < 7 ? "small" : "medium",
createNewItem: {
action: function() {
overlayService.close();
vm.createElementTypeAndCallback((key) => {
vm.applySettingsToBlock(block, key);
});
},
icon: "icon-add",
name: localized[1]
const settingsTypePicker = {
title: localizedTitle,
section: "settings",
treeAlias: "documentTypes",
entityType: "documentType",
isDialog: true,
filter: function (node) {
if (node.metaData.isElement === true) {
return false;
}
return true;
},
submit: function (overlay) {
vm.applySettingsToBlock(block, overlay.selectedItem.key);
overlayService.close();
filterCssClass: "not-allowed",
select: function (node) {
vm.applySettingsToBlock(block, udiService.getKey(node.udi));
editorService.close();
},
close: function () {
overlayService.close();
}
};
editorService.close();
},
extraActions: [
{
style: "primary",
labelKey: "blockEditor_labelcreateNewElementType",
action: function () {
vm.createElementTypeAndCallback((key) => {
vm.applySettingsToBlock(block, key);
// At this point we will close the contentTypePicker.
editorService.close();
});
}
}
]
};
editorService.treePicker(settingsTypePicker);
overlayService.open(elemTypeSelectorOverlay);
});
};
@@ -160,6 +171,7 @@
filter: function (i) {
return !(i.name.indexOf(".html") !== -1);
},
filterCssClass: "not-allowed",
select: function (node) {
const filepath = decodeURIComponent(node.id.replace(/\+/g, " "));
block.view = "~/" + filepath;
@@ -206,6 +218,7 @@
filter: function (i) {
return !(i.name.indexOf(".css") !== -1);
},
filterCssClass: "not-allowed",
select: function (node) {
const filepath = decodeURIComponent(node.id.replace(/\+/g, " "));
block.stylesheet = "~/" + filepath;