feat: better styling of item sheets

src/module/item/item-sheet.ts

@@ -8,6 +8,7 @@ import { DS4ActiveEffect } from "../active-effect";
 import { DS4 } from "../config";
 import { getGame } from "../helpers";
 import notifications from "../ui/notifications";
+import { enforce } from "../utils";
 import { isDS4ItemDataTypePhysical } from "./item-data-source";
 
 /**
@@ -17,11 +18,11 @@ export class DS4ItemSheet extends ItemSheet<ItemSheet.Options, DS4ItemSheetData>
     /** @override */
     static get defaultOptions(): ItemSheet.Options {
         return foundry.utils.mergeObject(super.defaultOptions, {
-            width: 540,
+            classes: ["sheet", "ds4-item-sheet"],
             height: 400,
-            classes: ["ds4", "sheet", "item"],
-            tabs: [{ navSelector: ".sheet-tabs", contentSelector: ".sheet-body", initial: "description" }],
-            scrollY: [".tab.description", ".tab.effects", ".tab.details"],
+            scrollY: [".ds4-sheet-body"],
+            tabs: [{ navSelector: ".ds4-sheet-tab-nav", contentSelector: ".ds4-sheet-body", initial: "description" }],
+            width: 540,
         });
     }
 
@@ -61,46 +62,65 @@ export class DS4ItemSheet extends ItemSheet<ItemSheet.Options, DS4ItemSheetData>
 
         if (!this.options.editable) return;
 
-        html.find(".effect-control").on("click", this._onManageActiveEffect.bind(this));
+        html.find(".control-effect").on("click", this.onControlEffect.bind(this));
     }
 
     /**
-     * Handle management of ActiveEffects.
-     * @param event - he originating click event
+     * Handles a click on an element of this sheet to control an embedded effect of the item corresponding to this
+     * sheet.
+     *
+     * @param event - The originating click event
      */
-    protected async _onManageActiveEffect(event: JQuery.ClickEvent): Promise<unknown> {
+    protected onControlEffect(event: JQuery.ClickEvent): void {
         event.preventDefault();
-
         if (this.item.isOwned) {
             return notifications.warn(getGame().i18n.localize("DS4.WarningManageActiveEffectOnOwnedItem"));
         }
         const a = event.currentTarget;
-        const li = $(a).parents(".effect");
-
         switch (a.dataset["action"]) {
             case "create":
-                return this.createActiveEffect();
+                return this.onCreateEffect();
             case "edit":
-                const id = li.data("effectId");
-                const effect = this.item.effects.get(id);
-                if (!effect) {
-                    throw new Error(
-                        getGame().i18n.format("DS4.ErrorItemDoesNotHaveEffect", { id, item: this.item.name }),
-                    );
-                }
-                return effect.sheet.render(true);
-            case "delete": {
-                return this.item.deleteEmbeddedDocuments("ActiveEffect", [li.data("effectId")]);
-            }
+                return this.onEditEffect(event);
+            case "delete":
+                return this.onDeleteEffect(event);
         }
     }
 
     /**
-     * Create a new ActiveEffect for the item using default data.
+     * Creates a new embedded effect.
+     *
+     * @param event - The originating click event
      */
-    protected createActiveEffect(): void {
+    protected onCreateEffect(): void {
         DS4ActiveEffect.createDefault(this.item);
     }
+
+    /**
+     * Opens the sheet of the embedded effect corresponding to the clicked element.
+     *
+     * @param event - The originating click event
+     */
+    protected onEditEffect(event: JQuery.ClickEvent): void {
+        const id = $(event.currentTarget)
+            .parents(embeddedDocumentListEntryProperties.ActiveEffect.selector)
+            .data(embeddedDocumentListEntryProperties.ActiveEffect.idDataAttribute);
+        const effect = this.item.effects.get(id);
+        enforce(effect, getGame().i18n.format("DS4.ErrorItemDoesNotHaveEffect", { id, item: this.item.name }));
+        effect.sheet.render(true);
+    }
+
+    /**
+     * Deletes the embedded item corresponding to the clicked element.
+     *
+     * @param event - The originating click event
+     */
+    protected onDeleteEffect(event: JQuery.ClickEvent): void {
+        const li = $(event.currentTarget).parents(embeddedDocumentListEntryProperties.ActiveEffect.selector);
+        const id = li.data(embeddedDocumentListEntryProperties.ActiveEffect.idDataAttribute);
+        this.item.deleteEmbeddedDocuments("ActiveEffect", [id]);
+        li.slideUp(200, () => this.render(false));
+    }
 }
 
 interface DS4ItemSheetData extends ItemSheet.Data<ItemSheet.Options> {
@@ -109,3 +129,13 @@ interface DS4ItemSheetData extends ItemSheet.Data<ItemSheet.Options> {
     actor: DS4ItemSheet["item"]["actor"];
     isPhysical: boolean;
 }
+
+/**
+ * This object contains information about specific properties embedded document list entries for each different type.
+ */
+const embeddedDocumentListEntryProperties = Object.freeze({
+    ActiveEffect: {
+        selector: ".effect",
+        idDataAttribute: "effectId",
+    },
+});