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

ability to add a scoped stylesheet for block view

Browse Source
This commit is contained in:
Niels Lyngsø
2020-04-22 15:18:25 +02:00
parent b5136b6528
commit dcce1f4a2e
11 changed files with 175 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/Umbraco.Web.UI.Client/src/views/blockelements/imageblock/imageblock.editor.html
View File

@@ -1,9 +1,8 @@
<button type="button"
class="btn-reset umb-outline blockelement-imageblock-editor blockelement__draggable-element"
focus-when="{{vm.moveFocusToBlock === block}}"
ng-click="vm.blockEditorApi.editBlock(block)"
ng-controller="Umbraco.PropertyEditors.BlockEditor.ImageBlockEditor as bc"
ng-click="api.editBlock(block)"
ng-controller="Umbraco.PropertyEditors.BlockEditor.ImageBlockEditor as vm"
ng-style="{'backgroundColor': block.settings.backgroundColor}"
>
<img src="{{bc.imageUrl}}">
<img src="{{vm.imageUrl}}">
</button>

4
src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.html
View File

@@ -1,5 +1,5 @@
<div class="blockelement-inlineblock-editor" ng-controller="Umbraco.PropertyEditors.BlockEditor.InlineBlockEditor as bc">
<button type="button" class="btn-reset umb-outline blockelement__draggable-element" ng-click="bc.openBlock(block)" focus-when="{{vm.moveFocusToBlock === block}}">
<div class="blockelement-inlineblock-editor" ng-controller="Umbraco.PropertyEditors.BlockEditor.InlineBlockEditor as vm">
<button type="button" class="btn-reset umb-outline blockelement__draggable-element" ng-click="vm.openBlock(block)">
<span class="caret"></span>
<i class="icon {{block.content.icon}}"></i>
<span>{{block.label}}</span>

2
src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.html
View File

@@ -1,4 +1,4 @@
<button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element" ng-click="vm.blockEditorApi.editBlock(block)" focus-when="{{vm.moveFocusToBlock === block}}">
<button type="button" class="btn-reset umb-outline blockelement-labelblock-editor blockelement__draggable-element" ng-click="api.editBlock(block)">
<i class="icon {{block.content.icon}}"></i>
<span>{{block.label}}</span>
</button>

3
src/Umbraco.Web.UI.Client/src/views/blockelements/textareablock/textareablock.editor.html
View File

@@ -6,9 +6,6 @@
<textarea
umb-auto-resize
ng-model="vm.firstProperty.value"
ng-keypress="vm.submitOnEnter($event)"
ng-blur="vm.onBlur()"
focus-when="{{vm.moveFocusToBlock === block}}"
>
</textarea>

36
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.block.component.js Normal file
View File

@@ -0,0 +1,36 @@
(function () {
"use strict";
/**
* @ngdoc component
* @name Umbraco.umbBlockListBlockContent
* @function
*
* @description
* The component for a style-inheriting block of the block list property editor.
*/
angular
.module("umbraco")
.component("umbBlockListBlockContent", {
template: '<div ng-include="vm.view"></div>',
controller: BlockListBlockContentController,
controllerAs: "vm",
bindings: {
view: "@",
block: "=",
api: "="
}
}
);
function BlockListBlockContentController($scope) {
var vm = this;
vm.$onInit = function() {
$scope.block = vm.block;
$scope.api = vm.api;
};
}
})();

7
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.html
View File

@@ -18,8 +18,11 @@
</button>
<div class="umb-block-list__block" ng-class="{'--open':block.isOpen}">
<div class="umb-block-list__block--content" ng-if="block.view" ng-include="block.view">
</div>
<umb-block-list-scoped-block-content ng-if="block.config.stylesheet" class="umb-block-list__block--content" view="{{block.view}}" stylesheet="/{{block.config.stylesheet}}" api="vm.blockEditorApi" block="block">
</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">
</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">

22
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js
View File

@@ -1,6 +1,15 @@
(function () {
"use strict";
/**
* @ngdoc component
* @name Umbraco.Editors.BlockList.blockListPropertyEditor
* @function
*
* @description
* The component for the block list property editor.
*/
angular
.module("umbraco")
.component("blockListPropertyEditor", {
@@ -17,7 +26,7 @@
}
});
function BlockListController($scope, $interpolate, editorService, clipboardService, localizationService, overlayService, blockEditorService, contentResource, eventsService) {
function BlockListController($scope, $interpolate, editorService, clipboardService, localizationService, overlayService, blockEditorService) {
var unsubscribe = [];
var modelObject;
@@ -51,8 +60,12 @@
vm.validationLimit = vm.model.config.validationLimit;
vm.listWrapperSyles = {'max-width': vm.model.config.maxPropertyWidth};
vm.listWrapperStyles = {};
if (vm.model.config.maxPropertyWidth) {
vm.listWrapperStyles['max-width'] = vm.model.config.maxPropertyWidth;
}
// We need to ensure that the property model value is an object, this is needed for modelObject to recive a reference and keep that updated.
if(typeof vm.model.value !== 'object' || vm.model.value === null) {// testing if we have null or undefined value or if the value is set to another type than Object.
vm.model.value = {};
@@ -123,7 +136,7 @@
if (block === null) return null;
// Lets apply fallback views, and make the view available directly on the blockModel.
block.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 : (vm.model.config.useInlineEditingAsDefault ? "views/blockelements/inlineblock/inlineblock.editor.html" : "views/blockelements/labelblock/labelblock.editor.html"));
block.showSettings = block.config.settingsElementTypeAlias != null;
@@ -185,7 +198,7 @@
}
function editBlock(blockModel, hideContent) {
// make a clone to avoid editing model directly.
var blockContentModelClone = angular.copy(blockModel.content);
var blockSettingsModelClone = null;
@@ -281,7 +294,6 @@
var singleEntriesForPaste = clipboardService.retriveEntriesOfType("elementType", vm.availableContentTypes);
singleEntriesForPaste.forEach(function (entry) {
console.log("paste Entry: ", entry)
blockPickerModel.clipboardItems.push(
{
type: "elementType",

44
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.scopedblock.component.js Normal file
View File

@@ -0,0 +1,44 @@
(function () {
"use strict";
/**
* @ngdoc component
* @name Umbraco.umbBlockListScopedBlockContent
* @function
*
* @description
* The component for a style-scoped block of the block list property editor.
*/
angular
.module("umbraco")
.component("umbBlockListScopedBlockContent", {
controller: BlockListScopedBlockContentController,
controllerAs: "vm",
bindings: {
stylesheet: "@",
view: "@",
block: "=",
api: "="
}
}
);
function BlockListScopedBlockContentController($compile, $element, $scope) {
var vm = this;
vm.$onInit = function() {
$scope.block = vm.block;
$scope.api = vm.api;
var shadowRoot = $element[0].attachShadow({mode:'open'});
shadowRoot.innerHTML = `
<style>
@import "${vm.stylesheet}"
</style>
<div ng-include="'${vm.view}'"></div>
`;
$compile(shadowRoot)($scope);
}
}
})();

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

@@ -108,12 +108,10 @@
treeAlias: "files",
entityType: "file",
isDialog: true,
filter: function (i) {
return i.name.indexOf(".html" !== -1);
},
select: function (file) {
console.log(file);
block.view = file.name;
select: function (node) {
console.log(node)
const filepath = decodeURIComponent(node.id.replace(/\+/g, " "));
block.view = filepath;
editorService.close();
},
close: function () {
@@ -142,6 +140,45 @@
};
vm.addStylesheetForBlock = function(block) {
const filePicker = {
title: "Select Stylesheet (TODO need translation)",
section: "settings",
treeAlias: "files",
entityType: "file",
isDialog: true,
select: function (node) {
const filepath = decodeURIComponent(node.id.replace(/\+/g, " "));
block.stylesheet = filepath;
editorService.close();
},
close: function () {
editorService.close();
}
};
editorService.treePicker(filePicker);
}
vm.requestRemoveStylesheetForBlock = function(block) {
localizationService.localizeMany(["general_remove", "defaultdialogs_confirmremoveusageof"]).then(function (data) {
overlayService.confirmRemove({
title: data[0],
content: localizationService.tokenReplace(data[1], [block.stylesheet]),
close: function () {
overlayService.close();
},
submit: function () {
vm.removeStylesheetForBlock(block);
overlayService.close();
}
});
});
};
vm.removeStylesheetForBlock = function(block) {
block.stylesheet = null;
};
vm.addThumbnailForBlock = function(block) {
const thumbnailPicker = {

21
src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/prevalue/blocklist.blockconfiguration.overlay.html
View File

@@ -54,6 +54,27 @@
</div>
</div>
<!-- custom stylesheet -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">
<label class="control-label" for="iconcolor"><localize key="blockEditor_labelCustomStylesheet">Custom stylesheet</localize></label>
<div class="controls">
<div class="__settings-input --hasValue" ng-if="vm.block.stylesheet !== null" >
<umb-node-preview icon="'icon-document'" name="vm.block.stylesheet"></umb-node-preview>
<div class="__control-actions">
<button type="button" class="btn-reset __control-actions-btn --remove umb-outline" ng-click="vm.requestRemoveStylesheetForBlock(vm.block)">
<i class="icon icon-wrong"></i>
</button>
</div>
</div>
<button type="button" class="btn-reset __settings-input --noValue umb-outline" ng-if="vm.block.stylesheet === null" ng-click="vm.addStylesheetForBlock(vm.block)">
<localize key="blockEditor_addCustomStylesheet">Add custom stylesheet</localize>
</button>
</div>
</div>
</div>
<!-- editor overlay size -->
<div class="control-group umb-control-group -no-border">
<div class="umb-el-wrap">