minor changes for a better developer experience

This commit is contained in:
Niels Lyngsø
2020-04-27 12:36:25 +02:00
parent 223e8b122e
commit 5ef98ada8c
6 changed files with 27 additions and 19 deletions
@@ -30,6 +30,7 @@
<div class="umb-block-card-grid">
<umb-block-card
class="umb-outline"
ng-repeat="block in vm.model.availableItems | filter:searchTerm"
block-config-model="block.blockConfigModel"
element-type-model="block.elementTypeModel"
@@ -13,7 +13,7 @@
angular
.module("umbraco")
.component("umbBlockListBlockContent", {
template: '<div ng-include="vm.view"></div>',
template: '<div ng-include="model.view"></div>',
controller: BlockListBlockContentController,
controllerAs: "model",
bindings: {
@@ -26,10 +26,10 @@
);
function BlockListBlockContentController($scope) {
var vm = this;
vm.$onInit = function() {
$scope.block = vm.block;
$scope.api = vm.api;
var model = this;
model.$onInit = function() {
$scope.block = model.block;
$scope.api = model.api;
};
}
@@ -19,25 +19,25 @@
<div class="umb-block-list__block" ng-class="{'--open':block.isOpen}">
<umb-block-list-scoped-block-content ng-if="block.config.stylesheet" class="umb-block-list__block--content blockelement__draggable-element" view="{{::block.view}}" stylesheet="/{{::block.config.stylesheet}}" api="vm.blockEditorApi" block="block" index="$index">
<umb-block-list-scoped-block-content ng-if="block.config.stylesheet" class="umb-block-list__block--content blockelement__draggable-element" view="{{block.view}}" stylesheet="/{{::block.config.stylesheet}}" api="vm.blockEditorApi" block="block" index="$index">
</umb-block-list-scoped-block-content>
<umb-block-list-block-content ng-if="!block.config.stylesheet" class="umb-block-list__block--content" view="{{::block.view}}" api="vm.blockEditorApi" block="block" index="$index">
<umb-block-list-block-content ng-if="!block.config.stylesheet" class="umb-block-list__block--content" view="{{block.view}}" api="vm.blockEditorApi" block="block" index="$index">
</umb-block-list-block-content>
<div class="umb-block-list__block--actions">
<button type="button" class="btn-reset action --settings" localize="title" title="actions_editSettings" ng-click="vm.blockEditorApi.openSettingsForBlock(block);" ng-if="block.showSettings === true">
<button type="button" class="btn-reset umb-outline action --settings" localize="title" title="actions_editSettings" ng-click="vm.blockEditorApi.openSettingsForBlock(block);" ng-if="block.showSettings === true">
<i class="icon icon-settings" aria-hidden="true"></i>
<span class="sr-only">
<localize key="general_settings">Settings</localize>
</span>
</button>
<button type="button" class="btn-reset action --copy" localize="title" title="actions_copy" ng-click="vm.blockEditorApi.requestCopyBlock(block);" ng-if="vm.showCopy">
<button type="button" class="btn-reset umb-outline action --copy" localize="title" title="actions_copy" ng-click="vm.blockEditorApi.requestCopyBlock(block);" ng-if="vm.showCopy">
<i class="icon icon-documents" aria-hidden="true"></i>
<span class="sr-only">
<localize key="general_copy">Copy</localize>
</span>
</button>
<button type="button" class="btn-reset action --delete" localize="title" title="actions_delete" ng-click="vm.blockEditorApi.requestDeleteBlock(block);">
<button type="button" class="btn-reset umb-outline action --delete" localize="title" title="actions_delete" ng-click="vm.blockEditorApi.requestDeleteBlock(block);">
<i class="icon icon-trash" aria-hidden="true"></i>
<span class="sr-only">
<localize key="general_delete">Delete</localize>
@@ -51,7 +51,7 @@
<button
type="button"
class="btn-reset umb-block-list__create-button"
class="btn-reset umb-block-list__create-button umb-outline"
ng-class="{ '--disabled': vm.availableBlockTypes.length === 0 }"
ng-click="vm.showCreateDialog(vm.blocks.length, $event)"
>
@@ -35,6 +35,7 @@
var copyAllBlocksAction;
var deleteAllBlocksAction;
var inlineEditing = false;
var vm = this;
@@ -58,6 +59,8 @@
vm.$onInit = function() {
inlineEditing = vm.model.config.useInlineEditingAsDefault;
vm.validationLimit = vm.model.config.validationLimit;
vm.listWrapperStyles = {};
@@ -136,7 +139,7 @@
if (block === null) return null;
// Lets apply fallback views, and make the view available directly on the blockModel.
block.view = (block.config.view ? "/" + block.config.view : (vm.model.config.useInlineEditingAsDefault ? "views/blockelements/inlineblock/inlineblock.editor.html" : "views/blockelements/labelblock/labelblock.editor.html"));
block.view = (block.config.view ? "/" + block.config.view : (inlineEditing ? "views/blockelements/inlineblock/inlineblock.editor.html" : "views/blockelements/labelblock/labelblock.editor.html"));
block.showSettings = block.config.settingsElementTypeAlias != null;
@@ -197,7 +200,7 @@
vm.blocks.forEach(deleteBlock);
}
function editBlock(blockModel, hideContent) {
function editBlock(blockModel, openSettings) {
// make a clone to avoid editing model directly.
var blockContentClone = angular.copy(blockModel.content);
@@ -206,10 +209,13 @@
if (blockModel.config.settingsElementTypeAlias) {
blockSettingsClone = angular.copy(blockModel.settings);
}
var hideContent = (openSettings === true && inlineEditing === true);
var blockEditorModel = {
content: blockContentClone,
hideContent: hideContent,
openSettings: openSettings === true,
settings: blockSettingsClone,
title: blockModel.label,
view: "views/common/infiniteeditors/blockeditor/blockeditor.html",
@@ -33,6 +33,7 @@
}
.umb-block-list__block--actions {
position: absolute;
z-index:999999999;// We always want to be on top of custom view, but we need to make sure we still are behind relevant Umbraco CMS UI. ToDo: Needs further testing.
top: 10px;
right: 10px;
font-size: 0;
@@ -26,16 +26,16 @@
);
function BlockListScopedBlockContentController($compile, $element, $scope) {
var vm = this;
vm.$onInit = function() {
$scope.block = vm.block;
$scope.api = vm.api;
var model = this;
model.$onInit = function() {
$scope.block = model.block;
$scope.api = model.api;
var shadowRoot = $element[0].attachShadow({mode:'open'});
shadowRoot.innerHTML = `
<style>
@import "${vm.stylesheet}"
@import "${model.stylesheet}"
</style>
<div ng-include="'${vm.view}'"></div>
<div ng-include="'${model.view}'"></div>
`;
$compile(shadowRoot)($scope);
}