feat(action-icon): add hideActions property (#752)

* feat(action-icon): add noaction property * test(editors/substation/l-node-editor): update snapshot * refactor(action-icon): resolve review comments
openscd · May 17, 2022 · f89371f · f89371f
1 parent c93aea6
commit f89371f
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 1 deletion.
diff --git 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<void> {
     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
@@ -80,6 +80,7 @@ export class LNodeEditor extends LitElement {
       label="${this.header}"
       ?secondary=${this.missingIedReference}
       ?highlighted=${this.missingIedReference}
+      hideActions
       ><mwc-icon slot="icon"
         >${getLNodeIcon(this.element)}</mwc-icon
       ></action-icon

diff --git a/test/unit/editors/substation/__snapshots__/l-node-editor.test.snap.js b/test/unit/editors/substation/__snapshots__/l-node-editor.test.snap.js
@@ -3,6 +3,7 @@ export const snapshots = {};
 
 snapshots["web component rendering LNode element as reference to a LN/LN0 within IED  looks like the latest snapshot"] = 
 `<action-icon
+  hideactions=""
   label="IED1 CircuitBreaker_CB1/ XCBR 1"
   tabindex="0"
 >
@@ -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"] = 
 `<action-icon
+  hideactions=""
   highlighted=""
   label="DC XSWI 1"
   secondary=""