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 9de525e3ef..8b37001ae8 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 @@ -40,7 +40,15 @@ var vm = this; vm.loading = true; - vm.moveFocusToBlock = null; + vm.currentBlockInFocus = null; + vm.setBlockFocus = function(block) { + console.log("setBlockFocus", block.label) + if(vm.currentBlockInFocus !== null) { + vm.currentBlockInFocus.focus = false; + } + vm.currentBlockInFocus = block; + block.focus = true; + } vm.showCopy = clipboardService.isSupported(); var layout = [];// The layout object specific to this Block Editor, will be a direct reference from Property Model. @@ -174,7 +182,7 @@ vm.blocks.splice(index, 0, blockModel); // lets move focus to this new block. - vm.moveFocusToBlock = blockModel; + vm.setBlockFocus(blockModel); return true; @@ -206,6 +214,8 @@ function editBlock(blockModel, openSettings) { + blockModel.active = true; + // make a clone to avoid editing model directly. var blockContentClone = Utilities.copy(blockModel.content); var blockSettingsClone = null; @@ -228,9 +238,10 @@ blockModel.retriveValuesFrom(blockEditorModel.content, blockEditorModel.settings) - editorService.close(); + blockEditorModel.close(); }, close: function() { + blockModel.active = false; editorService.close(); } }; @@ -280,13 +291,18 @@ } if(!(mouseEvent.ctrlKey || mouseEvent.metaKey)) { - blockPickerModel.close(); + editorService.close(); if (added && vm.model.config.useInlineEditingAsDefault !== true && vm.blocks.length > createIndex) { editBlock(vm.blocks[createIndex]); } } }, close: function() { + // if opned by a inline creator button(index less than length), we want to move the focus away, to hide line-creator. + if (createIndex < vm.blocks.length) { + vm.setBlockFocus(vm.blocks[Math.max(createIndex-1, 0)]); + } + editorService.close(); } }; @@ -382,7 +398,7 @@ // insert block model at the decired location in blocks. vm.blocks.splice(index, 0, blockModel); - vm.moveFocusToBlock = blockModel; + vm.currentBlockInFocus = blockModel; return true; 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 6d15e5abef..d3bfc110c1 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 @@ -42,6 +42,7 @@ padding-left: 5px; padding-right: 5px; .action { + position: relative; display: inline-block; color: @ui-action-discreet-type; font-size: 18px; @@ -137,6 +138,7 @@ } } .umb-block-list__create-button { + position: relative; display: flex; width: 100%; align-items: center; diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html index d61d343a64..3ad7d58409 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/inlineblock/inlineblock.editor.html @@ -1,5 +1,5 @@
- diff --git a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less index 974662b416..d01e53ef9c 100644 --- a/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less +++ b/src/Umbraco.Web.UI.Client/src/views/propertyeditors/blocklist/blocklistentryeditors/labelblock/labelblock.editor.less @@ -1,5 +1,6 @@ .blockelement-labelblock-editor { + position: relative; display: block; margin-bottom: 4px; margin-top: 4px; @@ -34,4 +35,10 @@ color: @ui-action-discreet-type-hover; border-color: @gray-8; } + + &.--active { + color: @ui-active-type; + border-color: @ui-active; + background-color: @ui-active; + } }