diff --git a/langs/en-ca.json b/langs/en-ca.json index 3e4c89f..a15ef76 100644 --- a/langs/en-ca.json +++ b/langs/en-ca.json @@ -79,7 +79,11 @@ "PlayerSheet": { "manage-attributes": "Manage Attributes", "current-value": "Current value", - "max-value": "Maximum value" + "max-value": "Maximum value", + "tab-names": { + "content": "Content", + "items": "Items" + } }, "QueryStatus": { "title": "Information Request Status", diff --git a/module/apps/PlayerSheet.mjs b/module/apps/PlayerSheet.mjs index a1b8069..da03055 100644 --- a/module/apps/PlayerSheet.mjs +++ b/module/apps/PlayerSheet.mjs @@ -14,6 +14,7 @@ const propertyToParts = { "system.attr.value": [`attributes`, `content`], "system.attr.max": [`attributes`, `content`], "system.content": [`content`], + "system.carryCapacity": [`items`], }; export class PlayerSheet extends HandlebarsApplicationMixin(ActorSheetV2) { @@ -44,7 +45,26 @@ export class PlayerSheet extends HandlebarsApplicationMixin(ActorSheetV2) { static PARTS = { header: { template: filePath(`templates/PlayerSheet/header.hbs`) }, attributes: { template: filePath(`templates/PlayerSheet/attributes.hbs`) }, + tabs: { template: filePath(`templates/generic/tabs.hbs`) }, content: { template: filePath(`templates/PlayerSheet/content.hbs`) }, + items: { + template: filePath(`templates/PlayerSheet/item-lists.hbs`), + scrollable: [``], + templates: [ + filePath(`templates/PlayerSheet/item.hbs`), + ], + }, + }; + + static TABS = { + primary: { + initial: `content`, + labelPrefix: `taf.Apps.PlayerSheet.tab-names`, + tabs: [ + { id: `content` }, + { id: `items` }, + ], + } }; // #endregion Options @@ -127,22 +147,38 @@ export class PlayerSheet extends HandlebarsApplicationMixin(ActorSheetV2) { // #endregion Lifecycle // #region Data Prep - async _preparePartContext(partID) { - let ctx = { + async _prepareContext() { + return { + meta: { + idp: this.id, + editable: this.isEditable, + }, actor: this.actor, system: this.actor.system, editable: this.isEditable, }; + }; + + async _preparePartContext(partID, ctx) { switch (partID) { case `attributes`: { await this._prepareAttributes(ctx); break; }; + case `tabs`: { + ctx.hideTabs = this.actor.items.size <= 0; + ctx.tabs = await this._prepareTabs(`primary`); + break; + }; case `content`: { await this._prepareContent(ctx); break; }; + case `items`: { + await this._prepareItems(ctx); + break; + }; }; return ctx; @@ -165,6 +201,7 @@ export class PlayerSheet extends HandlebarsApplicationMixin(ActorSheetV2) { async _prepareContent(ctx) { // Whether or not the prose-mirror is toggled or always-edit ctx.toggled = true; + ctx.tabActive = this.tabGroups.primary === `content` || this.actor.items.size === 0; const TextEditor = foundry.applications.ux.TextEditor.implementation; ctx.enriched = { @@ -173,6 +210,12 @@ export class PlayerSheet extends HandlebarsApplicationMixin(ActorSheetV2) { }, }; }; + + async _prepareItems(ctx) { + ctx.tabActive = this.tabGroups.primary === `items`; + }; + + async _prepareItem(item) {}; // #endregion Data Prep // #region Actions diff --git a/styles/Apps/common.css b/styles/Apps/common.css index bbf1212..d673ac7 100644 --- a/styles/Apps/common.css +++ b/styles/Apps/common.css @@ -6,4 +6,26 @@ gap: 0.5rem; overflow: auto; } + + > .window-content nav.system-tabs { + display: flex; + flex-direction: row; + justify-content: left; + align-items: center; + gap: 8px; + + button { + border: none; + text-shadow: none; + box-shadow: none; + + &.active { + outline: 1px solid var(--tab-button-active-border); + } + + &:hover { + background: var(--tab-button-hover-bg); + } + } + } } diff --git a/styles/main.css b/styles/main.css index c75456b..21045c4 100644 --- a/styles/main.css +++ b/styles/main.css @@ -1,9 +1,10 @@ @layer resets, themes, elements, components, partials, apps, exceptions; /* Resets */ +@import url("./resets/button.css") layer(resets); @import url("./resets/hr.css") layer(resets); @import url("./resets/inputs.css") layer(resets); -@import url("./resets/button.css") layer(resets); +@import url("./resets/tabs.css") layer(resets); /* Themes */ @import url("./themes/dark.css") layer(themes); diff --git a/styles/resets/tabs.css b/styles/resets/tabs.css new file mode 100644 index 0000000..aefac97 --- /dev/null +++ b/styles/resets/tabs.css @@ -0,0 +1,10 @@ +.taf > .window-content { + nav.tabs.system-tabs { + all: initial; + } + + nav.sheet-tabs.top-tabs { + margin-inline: 0; + margin-top: calc(var(--spacer-8) * -1); + } +} diff --git a/styles/themes/dark.css b/styles/themes/dark.css index 53552e0..5d833cf 100644 --- a/styles/themes/dark.css +++ b/styles/themes/dark.css @@ -4,6 +4,9 @@ --spinner-outer-colour: white; --spinner-inner-colour: #FF3D00; + --tab-button-active-border: rebeccapurple; + --tab-button-hover-bg: var(--color-cool-3); + /* Chip Variables */ --chip-color: #fff7ed; --chip-background: #2b3642; diff --git a/styles/themes/light.css b/styles/themes/light.css index 47cf1e9..cbc2edc 100644 --- a/styles/themes/light.css +++ b/styles/themes/light.css @@ -4,6 +4,9 @@ --spinner-outer-colour: black; --spinner-inner-colour: #FF3D00; + --tab-button-active: rebeccapurple; + --tab-button-hover-bg: var(--color-light-3); + /* Chip Variables */ --chip-color: #18181b; --chip-background: #fafafa; diff --git a/templates/PlayerSheet/content.hbs b/templates/PlayerSheet/content.hbs index a22f5a1..e5219f9 100644 --- a/templates/PlayerSheet/content.hbs +++ b/templates/PlayerSheet/content.hbs @@ -1,4 +1,8 @@ -
+
{{#if editable}} + Item Tab Content Here +
diff --git a/templates/PlayerSheet/item.hbs b/templates/PlayerSheet/item.hbs new file mode 100644 index 0000000..7c89b54 --- /dev/null +++ b/templates/PlayerSheet/item.hbs @@ -0,0 +1 @@ +
diff --git a/templates/generic/tabs.hbs b/templates/generic/tabs.hbs new file mode 100644 index 0000000..947f0ae --- /dev/null +++ b/templates/generic/tabs.hbs @@ -0,0 +1,17 @@ +{{#if hideTabs}} + +{{else}} + +{{/if}}