From 5f09f92790810dae5b99ec630a4207db22b5dce8 Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Sat, 2 Mar 2024 22:40:32 -0700 Subject: [PATCH] Implement the Inventory tab's sub-navigation (closes #97) --- module/handlebars.mjs | 4 +++ module/sheets/Actors/PC/Improved.mjs | 10 ++++-- styles/mixins/_partials.scss | 13 ++++++- .../actor/char-sheet/pages/inventory.scss | 9 +++++ .../sheets/actor/char-sheet/pages/stats.scss | 3 +- .../sheets/actor/char-sheet/themes/dark.scss | 2 +- styles/sheets/actor/char-sheet/v2.scss | 35 ++++++++++++++----- .../v2/partials/inventory/inventory.v2.pc.hbs | 5 +++ .../v2/partials/inventory/player.v2.pc.hbs | 3 ++ .../v2/partials/inventory/storage.v2.pc.hbs | 1 + .../inventory/transportation.v2.pc.hbs | 1 + templates/actors/char-sheet/v2/sheet.hbs | 27 +++++++++----- 12 files changed, 90 insertions(+), 23 deletions(-) create mode 100644 styles/sheets/actor/char-sheet/pages/inventory.scss create mode 100644 templates/actors/char-sheet/v2/partials/inventory/inventory.v2.pc.hbs create mode 100644 templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs create mode 100644 templates/actors/char-sheet/v2/partials/inventory/storage.v2.pc.hbs create mode 100644 templates/actors/char-sheet/v2/partials/inventory/transportation.v2.pc.hbs diff --git a/module/handlebars.mjs b/module/handlebars.mjs index bd91425..74dd8da 100644 --- a/module/handlebars.mjs +++ b/module/handlebars.mjs @@ -21,6 +21,10 @@ export const partials = [ // The v2 PC sheet partials `actors/char-sheet/v2/partials/stats.v2.pc.hbs`, + `actors/char-sheet/v2/partials/inventory/inventory.v2.pc.hbs`, + `actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs`, + `actors/char-sheet/v2/partials/inventory/storage.v2.pc.hbs`, + `actors/char-sheet/v2/partials/inventory/transportation.v2.pc.hbs`, ]; export const icons = [ diff --git a/module/sheets/Actors/PC/Improved.mjs b/module/sheets/Actors/PC/Improved.mjs index d004963..7396eaf 100644 --- a/module/sheets/Actors/PC/Improved.mjs +++ b/module/sheets/Actors/PC/Improved.mjs @@ -12,10 +12,16 @@ export class PlayerSheetv2 extends GenericActorSheet { tabs: [ { group: `page`, - navSelector: `nav`, + navSelector: `nav.page`, contentSelector: `.page-content`, - initial: `stats`, + initial: `inventory`, }, + { + group: `inventory`, + navSelector: `nav.inventory`, + contentSelector: `.tab[data-tab="inventory"]`, + initial: `player`, + } ], } ); diff --git a/styles/mixins/_partials.scss b/styles/mixins/_partials.scss index bc8e5e7..8932b3e 100644 --- a/styles/mixins/_partials.scss +++ b/styles/mixins/_partials.scss @@ -1,4 +1,5 @@ @use "../vars" as *; +@use "./material" as material; @mixin input-generic { border-width: 2px; @@ -12,4 +13,14 @@ &:active { transform: scale(103%); } -} \ No newline at end of file +} + +@mixin sub-nav($parent, $group, $display) { + nav.#{$group} { + @include material.elevate(1); + display: none; + } + &:has(nav.#{$parent} .active[data-tab="#{$group}"]) nav.#{$group} { + display: #{$display}; + } +} diff --git a/styles/sheets/actor/char-sheet/pages/inventory.scss b/styles/sheets/actor/char-sheet/pages/inventory.scss new file mode 100644 index 0000000..753770c --- /dev/null +++ b/styles/sheets/actor/char-sheet/pages/inventory.scss @@ -0,0 +1,9 @@ +.dotdungeon .actor--pc-v2 .active .inventory-page { + margin-bottom: 100px; +} + +.dotdungeon .actor--pc-v2 .active .inventory-page .tab[data-tab="player"] { + display: grid; + gap: 16px; + grid-template-columns: 1fr 4fr; +} \ No newline at end of file diff --git a/styles/sheets/actor/char-sheet/pages/stats.scss b/styles/sheets/actor/char-sheet/pages/stats.scss index 772c834..a4f9dee 100644 --- a/styles/sheets/actor/char-sheet/pages/stats.scss +++ b/styles/sheets/actor/char-sheet/pages/stats.scss @@ -1,6 +1,5 @@ -.dotdungeon .actor--pc .active.stats-panel { +.dotdungeon .actor--pc-v2 .active.stats-page { display: grid; - height: 100%; gap: 16px; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; diff --git a/styles/sheets/actor/char-sheet/themes/dark.scss b/styles/sheets/actor/char-sheet/themes/dark.scss index 88484cb..1add0fd 100644 --- a/styles/sheets/actor/char-sheet/themes/dark.scss +++ b/styles/sheets/actor/char-sheet/themes/dark.scss @@ -9,7 +9,7 @@ $on-surface: white; $on-primary: $t; $on-secondary: $t; -.actor--pc { +.actor--pc-v2 { --sheet-bg: #{$background}; --nav-bg: #{$surface}; diff --git a/styles/sheets/actor/char-sheet/v2.scss b/styles/sheets/actor/char-sheet/v2.scss index b6a087e..340f929 100644 --- a/styles/sheets/actor/char-sheet/v2.scss +++ b/styles/sheets/actor/char-sheet/v2.scss @@ -1,13 +1,11 @@ @use "./themes/dark.scss"; @use "../../../mixins/material" as material; +@use "../../../mixins/partials" as partials; @use "./pages/stats.scss"; -.dotdungeon .actor--pc { +.dotdungeon .actor--pc-v2 { background-color: var(--sheet-bg); - position: relative; - - color: white; .e-0dp { @include material.elevate(0); } .e-1dp { @include material.elevate(1); } @@ -20,12 +18,33 @@ .e-16dp { @include material.elevate(16); } .e-24dp { @include material.elevate(24); } - nav { - background-color: var(--nav-bg); - @include material.elevate(02); + .nav-bar { + @include material.elevate(8); + background: color-mix(in lab, var(--nav-bg), white 5%); position: absolute; bottom: 0; - width: 100%; + width: calc(100% - 6px); + + nav { + display: flex; + flex-direction: row; + flex-wrap: wrap; + gap: 8px; + padding: 8px; + } + + @include partials.sub-nav("page", "inventory", flex); + + button { + @include material.elevate(2); + height: 36px; + box-sizing: border-box; + + &:hover { + // background: color-mix(in lab, inherit, currentColor 4%); + @include material.elevate(4); + } + } } .page-content { diff --git a/templates/actors/char-sheet/v2/partials/inventory/inventory.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/inventory.v2.pc.hbs new file mode 100644 index 0000000..9e5f86e --- /dev/null +++ b/templates/actors/char-sheet/v2/partials/inventory/inventory.v2.pc.hbs @@ -0,0 +1,5 @@ +
+ {{> dotdungeon.pc.v2.storage }} + {{> dotdungeon.pc.v2.player }} + {{> dotdungeon.pc.v2.transportation }} +
\ No newline at end of file diff --git a/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs new file mode 100644 index 0000000..1d1a80b --- /dev/null +++ b/templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs @@ -0,0 +1,3 @@ +
+ +
\ No newline at end of file diff --git a/templates/actors/char-sheet/v2/partials/inventory/storage.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/storage.v2.pc.hbs new file mode 100644 index 0000000..05b25f8 --- /dev/null +++ b/templates/actors/char-sheet/v2/partials/inventory/storage.v2.pc.hbs @@ -0,0 +1 @@ +
Storage
\ No newline at end of file diff --git a/templates/actors/char-sheet/v2/partials/inventory/transportation.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/transportation.v2.pc.hbs new file mode 100644 index 0000000..0a937f6 --- /dev/null +++ b/templates/actors/char-sheet/v2/partials/inventory/transportation.v2.pc.hbs @@ -0,0 +1 @@ +
Transporation
\ No newline at end of file diff --git a/templates/actors/char-sheet/v2/sheet.hbs b/templates/actors/char-sheet/v2/sheet.hbs index 0b2e082..d20b36b 100644 --- a/templates/actors/char-sheet/v2/sheet.hbs +++ b/templates/actors/char-sheet/v2/sheet.hbs @@ -1,20 +1,29 @@ -
+ {{!-- All panels here --}}
Avatar
{{> dotdungeon.pc.v2.stats }}
Combat
-
Inventory
+ {{> dotdungeon.pc.v2.inventory }}
Spells
+
Settings
{{!-- Tab list here --}} - +
+ + +