Foundry/.dungeon
0
0
Fork 0
Code Issues 57 Pull requests Projects Releases 7 Packages Wiki Activity Actions

Implement the Inventory tab's sub-navigation (closes #97)

Browse source
This commit is contained in:
Oliver-Akins 2024-03-02 22:40:32 -07:00
parent 2065596686
commit 5f09f92790
12 changed files with 90 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

4
module/handlebars.mjs
View file

@ -21,6 +21,10 @@ export const partials = [
// The v2 PC sheet partials // The v2 PC sheet partials
`actors/char-sheet/v2/partials/stats.v2.pc.hbs`, `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 = [ export const icons = [

10
module/sheets/Actors/PC/Improved.mjs
View file

@ -12,10 +12,16 @@ export class PlayerSheetv2 extends GenericActorSheet {
tabs: [ tabs: [
{ {
group: `page`, group: `page`,
navSelector: `nav`, navSelector: `nav.page`,
contentSelector: `.page-content`, contentSelector: `.page-content`,
initial: `stats`, initial: `inventory`,
}, },
{
group: `inventory`,
navSelector: `nav.inventory`,
contentSelector: `.tab[data-tab="inventory"]`,
initial: `player`,
}
], ],
} }
); );

13
styles/mixins/_partials.scss
View file

@ -1,4 +1,5 @@
@use "../vars" as *; @use "../vars" as *;
@use "./material" as material;
@mixin input-generic { @mixin input-generic {
border-width: 2px; border-width: 2px;
@ -12,4 +13,14 @@
&:active { &:active {
transform: scale(103%); transform: scale(103%);
} }
} }
@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};
}
}

9
styles/sheets/actor/char-sheet/pages/inventory.scss Normal file
View file

@ -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;
}

3
styles/sheets/actor/char-sheet/pages/stats.scss
View file

@ -1,6 +1,5 @@
.dotdungeon .actor--pc .active.stats-panel { .dotdungeon .actor--pc-v2 .active.stats-page {
display: grid; display: grid;
height: 100%;
gap: 16px; gap: 16px;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto auto; grid-template-rows: auto auto auto;

2
styles/sheets/actor/char-sheet/themes/dark.scss
View file

@ -9,7 +9,7 @@ $on-surface: white;
$on-primary: $t; $on-primary: $t;
$on-secondary: $t; $on-secondary: $t;
.actor--pc { .actor--pc-v2 {
--sheet-bg: #{$background}; --sheet-bg: #{$background};
--nav-bg: #{$surface}; --nav-bg: #{$surface};

35
styles/sheets/actor/char-sheet/v2.scss
View file

@ -1,13 +1,11 @@
@use "./themes/dark.scss"; @use "./themes/dark.scss";
@use "../../../mixins/material" as material; @use "../../../mixins/material" as material;
@use "../../../mixins/partials" as partials;
@use "./pages/stats.scss"; @use "./pages/stats.scss";
.dotdungeon .actor--pc { .dotdungeon .actor--pc-v2 {
background-color: var(--sheet-bg); background-color: var(--sheet-bg);
position: relative;
color: white;
.e-0dp { @include material.elevate(0); } .e-0dp { @include material.elevate(0); }
.e-1dp { @include material.elevate(1); } .e-1dp { @include material.elevate(1); }
@ -20,12 +18,33 @@
.e-16dp { @include material.elevate(16); } .e-16dp { @include material.elevate(16); }
.e-24dp { @include material.elevate(24); } .e-24dp { @include material.elevate(24); }
nav { .nav-bar {
background-color: var(--nav-bg); @include material.elevate(8);
@include material.elevate(02); background: color-mix(in lab, var(--nav-bg), white 5%);
position: absolute; position: absolute;
bottom: 0; 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 { .page-content {

5
templates/actors/char-sheet/v2/partials/inventory/inventory.v2.pc.hbs Normal file
View file

@ -0,0 +1,5 @@
<div class="tab inventory-page" data-group="page" data-tab="inventory">
{{> dotdungeon.pc.v2.storage }}
{{> dotdungeon.pc.v2.player }}
{{> dotdungeon.pc.v2.transportation }}
</div>

3
templates/actors/char-sheet/v2/partials/inventory/player.v2.pc.hbs Normal file
View file

@ -0,0 +1,3 @@
<div class="tab" data-group="inventory" data-tab="player">
</div>

1
templates/actors/char-sheet/v2/partials/inventory/storage.v2.pc.hbs Normal file
View file

@ -0,0 +1 @@
<div class="tab" data-group="inventory" data-tab="storage">Storage</div>

1
templates/actors/char-sheet/v2/partials/inventory/transportation.v2.pc.hbs Normal file
View file

@ -0,0 +1 @@
<div class="tab" data-group="inventory" data-tab="transportation">Transporation</div>

27
templates/actors/char-sheet/v2/sheet.hbs
View file

@ -1,20 +1,29 @@
<form autocomplete="off" class="actor--pc"> <form autocomplete="off" class="actor--pc-v2">
{{!-- All panels here --}} {{!-- All panels here --}}
<section class="page-content"> <section class="page-content">
<div class="tab" data-group="page" data-tab="avatar">Avatar</div> <div class="tab" data-group="page" data-tab="avatar">Avatar</div>
{{> dotdungeon.pc.v2.stats }} {{> dotdungeon.pc.v2.stats }}
<div class="tab" data-group="page" data-tab="combat">Combat</div> <div class="tab" data-group="page" data-tab="combat">Combat</div>
<div class="tab" data-group="page" data-tab="inventory">Inventory</div> {{> dotdungeon.pc.v2.inventory }}
<div class="tab" data-group="page" data-tab="spells">Spells</div> <div class="tab" data-group="page" data-tab="spells">Spells</div>
<div class="tab" data-group="page" data-tab="settings">Settings</div>
</section> </section>
{{!-- Tab list here --}} {{!-- Tab list here --}}
<nav data-group="page"> <div class="nav-bar">
<button type="button" data-tab="avatar">Avatar</button> <nav class="inventory" data-group="inventory">
<button type="button" data-tab="stats">Stats / Skills</button> <button type="button" data-group="inventory" data-tab="storage">Storage</button>
<button type="button" data-tab="combat">Combat</button> <button type="button" data-group="inventory" data-tab="player">Player</button>
<button type="button" data-tab="inventory">Inventory</button> <button type="button" data-group="inventory" data-tab="transportation">Transportation</button>
<button type="button" data-tab="spells">Spells</button> </nav>
</nav> <nav class="page" data-group="page">
<button type="button" data-group="page" data-tab="avatar">Avatar</button>
<button type="button" data-group="page" data-tab="stats">Stats / Skills</button>
<button type="button" data-group="page" data-tab="combat">Combat</button>
<button type="button" data-group="page" data-tab="inventory">Inventory</button>
<button type="button" data-group="page" data-tab="spells">Spells</button>
<button type="button" data-group="page" data-tab="settings">Settings</button>
</nav>
</div>
</form> </form>