diff --git a/src/Umbraco.Web.UI.Client/src/less/belle.less b/src/Umbraco.Web.UI.Client/src/less/belle.less index 695b456fd6..f264038e93 100644 --- a/src/Umbraco.Web.UI.Client/src/less/belle.less +++ b/src/Umbraco.Web.UI.Client/src/less/belle.less @@ -226,6 +226,7 @@ // Block Elements @import "../views/blockelements/labelblock/labelblock.editor.less"; +@import "../views/blockelements/inlineblock/inlineblock.editor.less"; @import "../views/blockelements/textareablock/textareablock.editor.less"; @import "../views/blockelements/imageblock/imageblock.editor.less"; diff --git a/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.controller.js b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.controller.js new file mode 100644 index 0000000000..c7cac47d85 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.controller.js @@ -0,0 +1,20 @@ +(function () { + 'use strict'; + + function InlineBlockEditor($scope) { + + const bc = this; + + bc.isOpen = false; + bc.caretIconType = "icon-navigation-right"; + + bc.openBlock = function() { + bc.isOpen = !bc.isOpen; + bc.caretIconType = bc.isOpen ? "icon-navigation-down" : "icon-navigation-right"; + } + + } + + angular.module("umbraco").controller("Umbraco.PropertyEditors.BlockEditor.InlineBlockEditor", InlineBlockEditor); + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.html new file mode 100644 index 0000000000..78e23b17f3 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.html @@ -0,0 +1,10 @@ +
+ +
+ +
+
diff --git a/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less new file mode 100644 index 0000000000..dc014c5daf --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/blockelements/inlineblock/inlineblock.editor.less @@ -0,0 +1,67 @@ +.blockelement-inlineblock-editor { + + margin-bottom: 2px; + margin-top: 2px; + border: 1px solid @gray-9; + border-radius: @baseBorderRadius; + transition: border-color 120ms; + + &:not(.--open):hover { + border-color: @gray-8; + } + + > button { + width: 100%; + min-height: 48px; + + cursor: pointer; + color: @ui-action-discreet-type; + + text-align: left; + padding-left: 10px; + padding-bottom: 2px; + + user-select: none; + + .caret { + transform: rotate(-90deg); + transition: transform 80ms ease-out; + } + i { + font-size: 22px; + display: inline-block; + vertical-align: middle; + } + span { + display: inline-block; + vertical-align: middle; + } + + &:hover { + color: @ui-action-discreet-type-hover; + border-color: @gray-8; + } + } + + &.--open { + border-color: @gray-8; + box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.05); + > button { + > .caret { + transform: rotate(0deg); + } + } + } +} +.blockelement-inlineblock-editor__inner { + border-top: 1px solid @gray-8; + + .umb-group-panel { + background-color: transparent; + box-shadow: none; + margin-bottom: 0; + } + .umb-group-panel__header { + display:none; + } +} diff --git a/src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.html index f0678c76e9..bd8f9558fd 100644 --- a/src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.html @@ -1,4 +1,4 @@ diff --git a/src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.less index 610773528b..5ce53aece4 100644 --- a/src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.less +++ b/src/Umbraco.Web.UI.Client/src/views/blockelements/labelblock/labelblock.editor.less @@ -5,6 +5,7 @@ border: 1px solid @gray-9; border-radius: @baseBorderRadius; + cursor: pointer; color: @ui-action-discreet-type; text-align: left; diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.component.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.component.html new file mode 100644 index 0000000000..09724f6619 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.component.html @@ -0,0 +1,38 @@ +
+ +
+ +
+
{{ group.label }}
+
+ +
+ + +
+ + +
+ + +
+ +
+ + + + + + +
diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.component.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.component.js new file mode 100644 index 0000000000..6ba59f0703 --- /dev/null +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.component.js @@ -0,0 +1,23 @@ +(function () { + 'use strict'; + + angular + .module('umbraco.directives') + .component('umbElementEditor', { + templateUrl: 'views/common/infiniteeditors/elementeditor/elementeditor.component.html', + controller: ElementEditorComponentController, + controllerAs: 'vm', + bindings: { + content: '=' + } + }); + + function ElementEditorComponentController() { + + const vm = this; + + // TODO: we might not need this.. + + } + +})(); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.controller.js b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.controller.js index d421418297..ebabe86617 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.controller.js +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.controller.js @@ -7,6 +7,8 @@ angular.module("umbraco") vm.content = $scope.model.block.content; + vm.title = $scope.model.block.label; + vm.saveAndClose = function() { if ($scope.model && $scope.model.submit) { $scope.model.submit($scope.model); diff --git a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.html b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.html index 71aab124e6..2df5dcd923 100644 --- a/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.html +++ b/src/Umbraco.Web.UI.Client/src/views/common/infiniteeditors/elementeditor/elementeditor.html @@ -4,55 +4,24 @@ + +
-
-
- -
- -
-
{{ group.label }}
-
- -
- - -
- - -
- - -
- -
- - - - - - -
+
-
diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js index 5fc17fcafd..f3f8c2e5fe 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.js @@ -43,9 +43,10 @@ icon: "icon-document", label: "Text" }, - label: "{{pageTitle | truncate:true:36}}", + labelTemplate: "{{pageTitle | truncate:true:36}}", labelInterpolate: $interpolate("{{pageTitle | truncate:true:36}}"), editor: "views/blockelements/labelblock/labelblock.editor.html", + overlaySize: 'medium', content: { variants: [ { @@ -94,6 +95,7 @@ }, label: "Label", editor: "views/blockelements/textareablock/textareablock.editor.html", + overlaySize: 'medium', content: { variants: [ { @@ -142,6 +144,7 @@ }, label: "Label", editor: "views/blockelements/imageblock/imageblock.editor.html", + overlaySize: 'medium', content: { variants: [ { @@ -191,6 +194,7 @@ }, label: "Label", editor: "views/blockelements/imageblock/imageblock.editor.html", + overlaySize: 'medium', content: { variants: [ { @@ -234,6 +238,52 @@ // TODO: get icon, properties etc. from available types? vm.blocks = [ + { + elementType: { + alias: 'contentTypeAlias', + icon: "icon-document", + label: "Text" + }, + label: "{{pageTitle | truncate:true:36}}", + labelInterpolate: $interpolate("{{pageTitle | truncate:true:36}}"), + key: 1, + editor: "views/blockelements/inlineblock/inlineblock.editor.html", + overlaySize: 'medium', + content: { + variants: [ + { + language: { + isDefault: true + } + } + ], + tabs: [ + { + id: 1234, + label: "Group 1", + properties: [ + { + label: "Page Title", + description: "The title of the page", + view: "textbox", + config: {maxChars: 500}, + hideLabel: false, + validation: {mandatory: true, mandatoryMessage: "", pattern: null, patternMessage: ""}, + readonly: false, + id: 441, + dataTypeKey: "0cc0eba1-9960-42c9-bf9b-60e150b429ae", + value: "The purpose of lorem ipsum is to create a natural looking block of text (sentence, paragraph, page, etc.) that doesn't distract from the layout. A practice not without controversy, laying out pages with meaningless filler text can be very useful when the focus is meant to be on design, not content.", + alias: "pageTitle", + editor: "Umbraco.TextBox", + isSensitive: false, + culture: null, + segment: null + } + ] + } + ] + } + }, { elementType: { alias: 'contentTypeAlias', @@ -244,6 +294,7 @@ labelInterpolate: $interpolate("{{pageTitle | truncate:true:36}}"), key: 1, editor: "views/blockelements/labelblock/labelblock.editor.html", + overlaySize: 'medium', content: { variants: [ { @@ -289,6 +340,7 @@ labelInterpolate: $interpolate("{{pageTitle | truncate:true:36}}"), key: 2, editor: "views/blockelements/labelblock/labelblock.editor.html", + overlaySize: 'medium', content: { variants: [ { @@ -335,6 +387,7 @@ labelInterpolate: $interpolate("{{pageTitle | truncate:true:36}}"), key: 3, editor: "views/blockelements/labelblock/labelblock.editor.html", + overlaySize: 'medium', content: { variants: [ { @@ -438,10 +491,12 @@ } } - - vm.getBlockLabel = function(block) { - var name = ""; + function getBlockLabel(block) { + + console.log("getBlockLabel", block) + + // TODO: we should do something about this for performance. var props = new Object(); @@ -473,7 +528,7 @@ var elementEditor = { block: blockModel, view: "views/common/infiniteeditors/elementeditor/elementeditor.html", - size: "large", + size: blockModel.overlaySize, submit: function(model) { blockModel.content = model.block.content; editorService.close(); @@ -551,7 +606,7 @@ vm.sortableOptions = { axis: "y", cursor: "grabbing", - handle: '.umb-block-list__block', + handle: '.blockelement__draggable-element', cancel: 'input,textarea,select,option', classes: '.blockelement--dragging', distance: 5, @@ -596,6 +651,15 @@ } }; + // TODO: We need to investigate if we can do a specific watch on each block, so we dont re-render all blocks. + $scope.$watch('vm.blocks', onBlocksUpdated, true); + function onBlocksUpdated(newVal, oldVal){ + console.log("onBlocksUpdated"); + for(const block of vm.blocks) { + block.label = getBlockLabel(block); + } + } + } diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less index a26dda4202..78f4138897 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklist.component.less @@ -15,7 +15,6 @@ .umb-block-list__block { position: relative; width: 100%; - cursor: grab; .umb-block-list__block--head { opacity: 0; @@ -107,6 +106,10 @@ label.umb-block-list__block--head { border-radius: @baseBorderRadius; } +.blockelement__draggable-element { + cursor: grab; +} + .umb-block-list__block--create-button { position: absolute; @@ -114,10 +117,10 @@ label.umb-block-list__block--head { z-index:1; opacity: 0; outline: none; - height: 20px; - margin-top: -10px; - padding-top: 10px; - margin-bottom: -10px; + height: 12px; + margin-top: -6px; + padding-top: 6px; + margin-bottom: -6px; transition: opacity 240ms; &::before { @@ -125,7 +128,7 @@ label.umb-block-list__block--head { position: absolute; background-color: @ui-outline; border-radius: 2px; - top:9px; + top:5px; right: 0; left: 0; height: 2px; @@ -141,6 +144,7 @@ label.umb-block-list__block--head { margin-left: auto; margin-right: auto; margin-top: -16px; + margin-bottom: -16px; width: 28px; height: 25px; padding-bottom: 3px;