refactor(editors/templates/lnodetype): use menu actions (#622)

openscd · Mar 21, 2022 · 3dcd6b5 · 3dcd6b5
1 parent 42c2b29
commit 3dcd6b5
Show file tree

Hide file tree

Showing 3 changed files with 66 additions and 48 deletions.
diff --git a/src/editors/templates/lnodetype-wizard.ts b/src/editors/templates/lnodetype-wizard.ts
@@ -29,8 +29,10 @@ import {
   Replace,
   selector,
   Wizard,
+  WizardAction,
   WizardActor,
   WizardInput,
+  WizardMenuActor,
 } from '../../foundation.js';
 import { WizardSelect } from '../../wizard-select.js';
 import {
@@ -42,6 +44,18 @@ import {
   WizardOptions,
 } from './foundation.js';
 
+function remove(element: Element): WizardMenuActor {
+  return (): EditorAction[] => {
+    return [{ old: { parent: element.parentElement!, element } }];
+  };
+}
+
+function openAddDo(parent: Element): WizardMenuActor {
+  return (): WizardAction[] => {
+    return [() => dOWizard({ parent })!];
+  };
+}
+
 function updateDoAction(element: Element): WizardActor {
   return (inputs: WizardInput[]): EditorAction[] => {
     const name = getValue(inputs.find(i => i.label === 'name')!)!;
@@ -613,25 +627,19 @@ export function lNodeTypeWizard(
         label: get('save'),
         action: updateLNodeTypeAction(lnodetype),
       },
+      menuActions: [
+        {
+          label: get('remove'),
+          icon: 'delete',
+          action: remove(lnodetype),
+        },
+        {
+          label: get('scl.DO'),
+          icon: 'playlist_add',
+          action: openAddDo(lnodetype),
+        },
+      ],
       content: [
-        html`<mwc-button
-          icon="delete"
-          trailingIcon
-          label="${translate('remove')}"
-          @click=${(e: MouseEvent) => {
-            e.target!.dispatchEvent(newWizardEvent());
-            e.target!.dispatchEvent(
-              newActionEvent({
-                old: {
-                  parent: lnodetype.parentElement!,
-                  element: lnodetype,
-                  reference: lnodetype.nextSibling,
-                },
-              })
-            );
-          }}
-          fullwidth
-        ></mwc-button> `,
         html`<wizard-textfield
           label="id"
           helper="${translate('scl.id')}"
@@ -656,18 +664,6 @@ export function lNodeTypeWizard(
           required
           pattern="${patterns.lnClass}"
         ></wizard-textfield>`,
-        html` <mwc-button
-          slot="graphic"
-          icon="playlist_add"
-          trailingIcon
-          label="${translate('scl.DO')}"
-          @click=${(e: Event) => {
-            const wizard = dOWizard({
-              parent: lnodetype,
-            });
-            if (wizard) e.target!.dispatchEvent(newSubWizardEvent(wizard));
-          }}
-        ></mwc-button>`,
         html`
           <mwc-list
             style="margin-top: 0px;"

diff --git a/test/integration/editors/templates/__snapshots__/lnodetype-wizard.test.snap.js b/test/integration/editors/templates/__snapshots__/lnodetype-wizard.test.snap.js
@@ -7,14 +7,45 @@ snapshots["LNodeType wizards defines a lNodeTypeHelperWizard looks like the late
   heading="[lnodetype.wizard.title.edit]"
   open=""
 >
-  <div id="wizard-content">
-    <mwc-button
-      fullwidth=""
-      icon="delete"
-      label="[remove]"
-      trailingicon=""
+  <nav>
+    <mwc-icon-button icon="more_vert">
+    </mwc-icon-button>
+    <mwc-menu
+      class="actions-menu"
+      corner="BOTTOM_RIGHT"
+      menucorner="END"
     >
-    </mwc-button>
+      <mwc-list-item
+        aria-disabled="false"
+        graphic="icon"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="0"
+      >
+        <span>
+          [remove]
+        </span>
+        <mwc-icon slot="graphic">
+          delete
+        </mwc-icon>
+      </mwc-list-item>
+      <mwc-list-item
+        aria-disabled="false"
+        graphic="icon"
+        mwc-list-item=""
+        role="menuitem"
+        tabindex="-1"
+      >
+        <span>
+          [scl.DO]
+        </span>
+        <mwc-icon slot="graphic">
+          playlist_add
+        </mwc-icon>
+      </mwc-list-item>
+    </mwc-menu>
+  </nav>
+  <div id="wizard-content">
     <wizard-textfield
       dialoginitialfocus=""
       helper="[scl.id]"
@@ -40,13 +71,6 @@ snapshots["LNodeType wizards defines a lNodeTypeHelperWizard looks like the late
       required=""
     >
     </wizard-textfield>
-    <mwc-button
-      icon="playlist_add"
-      label="[scl.DO]"
-      slot="graphic"
-      trailingicon=""
-    >
-    </mwc-button>
     <mwc-list style="margin-top: 0px;">
       <mwc-list-item
         aria-disabled="false"

diff --git a/test/integration/editors/templates/lnodetype-wizard.test.ts b/test/integration/editors/templates/lnodetype-wizard.test.ts
@@ -58,7 +58,7 @@ describe('LNodeType wizards', () => {
         )
       );
       deleteButton = <HTMLElement>(
-        parent.wizardUI.dialog?.querySelector('mwc-button[icon="delete"]')
+        parent.wizardUI.dialog?.querySelector('mwc-menu > mwc-list-item')
       );
     });
 
@@ -505,9 +505,7 @@ describe('LNodeType wizards', () => {
       await parent.requestUpdate();
       await new Promise(resolve => setTimeout(resolve, 100)); // await animation
       (<HTMLElement>(
-        parent.wizardUI.dialog?.querySelectorAll(
-          'mwc-button[icon="playlist_add"]'
-        )[0]
+        parent.wizardUI.dialog?.querySelectorAll('mwc-menu > mwc-list-item')[1]
       )).click();
       await parent.requestUpdate();
       await new Promise(resolve => setTimeout(resolve, 100)); // await animation