converted powers dialog to applicationv2

src/module/powers/basePowers.js

@@ -59,15 +59,22 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application
       width: 600,
       height: 'auto',
     },
-    classes: ['sheet', 'mbSwadeForm', 'mbSwadePowerEffectsForm'],
+    classes: ['standard-form', 'mbSwade', 'mbSwadeForm', 'mbSwadePowerEffectsForm'],
     window: {
       icon: 'fa-solid fa-hand-sparkles',
-      title: 'mbSwade.powerEffectsForm.title',
+      title: 'Apply Effect',
     },
   };
 
   static PARTS = {
-    body: { template: templates['powerDialog.html'] },
+    header: {
+      template: templates['dialogHeader.html'],
+      classes: ['mbSwade', 'mbSwadeDialogHeader', 'flexrow'],
+    },
+    body: {
+      template: templates['powerDialog.html'],
+      classes: ['mbSwadePowerEffectsBody'],
+    },
     footer: {
       template: 'templates/generic/form-footer.hbs',
       classes: ['sheet-footer', 'flexrow'],
@@ -111,6 +118,8 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application
     }
     const data = {
       name: this.powerEffect.name,
+      headerTitle: `${this.powerEffect.name} Effect`,
+      headerSubtitle: `Apply the effects from ${this.powerEffect.name}`,
       icon: this.powerEffect.icon,
       basePowerPoints: this.powerEffect.basePowerPoints,
       modifiers,
@@ -123,6 +132,10 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application
       targets: [],
       buttons: this.powerEffect.menuButtons,
     };
+    for (let button of data.buttons) {
+      button.action = button.value;
+      button.type = button.value === 'cancel' ? 'cancel' : 'submit';
+    }
     if (this.powerEffect.isTargeted) {
       if (this.powerEffect.oneTarget) {
         data.targets = [this.powerEffect.targets?.[0]?.name ?? '<em>No Target Selected!</em>'];
@@ -141,9 +154,10 @@ export class PowerFormApplication extends HandlebarsApplicationMixin(Application
   }
 
   static async #onSubmit(event, form, formData) {
-    formData.submit = event?.submitter?.value ?? 'cancel';
+    log(this.formData);
-    if (formData.submit !== 'cancel') {
+    formData.object.submit = event?.submitter?.dataset?.action ?? 'cancel';
-      this.powerEffect.formData = formData;
+    if (formData.object.submit !== 'cancel') {
+      this.powerEffect.formData = formData.object;
       this.powerEffect.applyEffect();
     }
   }

src/module/preloadTemplates.js

@@ -1,4 +1,4 @@
-const _templatePaths = ['powerDialog.html', 'summonCosts.html'];
+const _templatePaths = ['dialogHeader.html', 'powerDialog.html', 'summonCosts.html'];
 
 export async function preloadTemplates() {
   return loadTemplates(_templatePaths.map((f) => `modules/swade-mb-helpers/templates/${f}`));

src/styles/swade-mb-helpers.scss

@@ -10,3 +10,23 @@ table.mbForm {
     padding-right: 0.25em;
   }
 }
+
+.mbSwade.mbSwadeDialogHeader {
+  align-items: flex-start;
+
+  img.mbSwadeIcon {
+    margin-right: 1em;
+  }
+
+  .mbSwadeTitle {
+    h2:has(+ p) {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.mbSwade.mbSwadeForm {
+  .mbSwadePowerEffectsBody {
+    margin-bottom: 0.5em;
+  }
+}

src/templates/dialogHeader.html

@@ -0,0 +1,7 @@
+<header>
+  <img src="{{icon}}" height="64" width="64" class="flex0 mbSwadeIcon" title="{{name}} Effect" alt=" " />
+  <div class="flexcol mbSwadeTitle">
+    <h2>{{headerTitle}}</h2>
+    {{#if headerSubtitle}}<p>{{headerSubtitle}}</p>{{/if}}
+  </div>
+</header>

src/templates/powerDialog.html

@@ -1,11 +1,4 @@
-<div class="standard-form"><!-- vim: set ft=handlebars.html: -->
+<section><!-- vim: set ft=handlebars.html: -->
-  <header class="flexrow">
-    <img src="{{icon}}" height="64" width="64" class="flex0" title="{{name}} Effect" alt=" " />
-    <section class="flexcol">
-      <h2>{{name}} Effect</h2>
-      <p>Apply the affects of {{name}}.</p>
-    </section>
-  </header>
   {{#if extraDescription }}
   <div>
     {{{extraDescription}}}
@@ -51,4 +44,4 @@
     {{/if}}
   </div>
   {{/each}}
-</div>
+</section>