diff --git a/src/action-icon.ts b/src/action-icon.ts index a61700c2e..6b09d2ea1 100644 --- a/src/action-icon.ts +++ b/src/action-icon.ts @@ -31,6 +31,9 @@ export class ActionIcon extends LitElement { /** highlight pane with dotted outline */ @property({ type: Boolean }) highlighted = false; + /** disables CSS adoption to action buttons */ + @property({ type: Boolean }) + hideActions = false; async firstUpdated(): Promise { this.tabIndex = 0; @@ -90,11 +93,16 @@ export class ActionIcon extends LitElement { :host(:focus-within) mwc-icon { outline-style: solid; outline-width: 4px; + } + + :host(:focus-within:not([hideActions])) ::slotted([slot='icon']), + :host(:focus-within:not([hideActions])) mwc-icon { transform: scale(0.8); transition: all 250ms linear; box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); } + ::slotted([slot='icon']:hover), mwc-icon:hover { outline-style: dashed; @@ -177,6 +185,10 @@ export class ActionIcon extends LitElement { opacity 200ms linear; } + :host([secondary]) header { + background-color: var(--mdc-theme-secondary); + } + :host(:hover) header { position: absolute; opacity: 1; @@ -190,11 +202,18 @@ export class ActionIcon extends LitElement { :host(:focus-within) header { position: absolute; opacity: 1; - transform: translate(0, -80px); box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12), 0 5px 5px -3px rgba(0, 0, 0, 0.2); transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms linear; } + + :host(:focus-within:not([hideActions])) header { + transform: translate(0, -80px); + } + + :host(:focus-within[hideActions]) header { + transform: translate(0, -40px); + } `; } diff --git a/src/editors/substation/l-node-editor.ts b/src/editors/substation/l-node-editor.ts index 3ece27f94..01dcd8b24 100644 --- a/src/editors/substation/l-node-editor.ts +++ b/src/editors/substation/l-node-editor.ts @@ -80,6 +80,7 @@ export class LNodeEditor extends LitElement { label="${this.header}" ?secondary=${this.missingIedReference} ?highlighted=${this.missingIedReference} + hideActions >${getLNodeIcon(this.element)} @@ -14,6 +15,7 @@ snapshots["web component rendering LNode element as reference to a LN/LN0 within snapshots["web component rendering LNode element as instance of a LNodeType only looks like the latest snapshot"] = `