use a common variable on the block model for isOpen, to be able to make Actions show when open.

This commit is contained in:
Niels Lyngsø
2020-04-01 13:44:20 +02:00
parent f92f729dec
commit 8513e2b332
5 changed files with 13 additions and 14 deletions
@@ -1,16 +1,12 @@
(function () {
'use strict';
function InlineBlockEditor($scope) {
function InlineBlockEditor() {
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";
bc.openBlock = function(block) {
block.isOpen = !block.isOpen;
}
}
@@ -1,10 +1,10 @@
<div class="blockelement-inlineblock-editor" ng-class="{'--open': bc.isOpen}" ng-controller="Umbraco.PropertyEditors.BlockEditor.InlineBlockEditor as bc">
<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}}">
<span class="caret"></span>
<i class="icon {{block.content.icon}}"></i>
<span>{{block.label}}</span>
</button>
<div class="blockelement-inlineblock-editor__inner" ng-if="bc.isOpen === true">
<div class="blockelement-inlineblock-editor__inner" ng-if="block.isOpen === true">
<umb-element-editor-content model="block.content"></umb-element-editor-content>
</div>
</div>
@@ -6,7 +6,7 @@
border-radius: @baseBorderRadius;
transition: border-color 120ms;
&:not(.--open):hover {
.umb-block-list__block:not(.--open) &:hover {
border-color: @gray-8;
}
@@ -43,7 +43,7 @@
}
}
&.--open {
.umb-block-list__block.--open & {
border-color: @gray-8;
box-shadow: 0 0 2px 0px rgba(0, 0, 0, 0.05);
> button {
@@ -55,7 +55,7 @@
}
.blockelement-inlineblock-editor__inner {
border-top: 1px solid @gray-8;
background-color: @gray-11;
background-color: @gray-12;
.umb-group-panel {
background-color: transparent;
@@ -14,7 +14,7 @@
>
</button>
<div class="umb-block-list__block">
<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>
@@ -21,7 +21,10 @@
transition: opacity 120ms;
}
&:hover, &:focus, &:focus-within {
&:hover,
&:focus,
&:focus-within,
&.--open {
> .umb-block-list__block--actions {
opacity: 1;