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
`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 = [

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

@ -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`,
}
],
}
);

13
styles/mixins/_partials.scss
View file

@ -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%);
}
}
}
@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;
height: 100%;
gap: 16px;
grid-template-columns: 1fr 1fr;
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-secondary: $t;
.actor--pc {
.actor--pc-v2 {
--sheet-bg: #{$background};
--nav-bg: #{$surface};

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

@ -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 {

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 --}}
<section class="page-content">
<div class="tab" data-group="page" data-tab="avatar">Avatar</div>
{{> dotdungeon.pc.v2.stats }}
<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="settings">Settings</div>
</section>
{{!-- Tab list here --}}
<nav data-group="page">
<button type="button" data-tab="avatar">Avatar</button>
<button type="button" data-tab="stats">Stats / Skills</button>
<button type="button" data-tab="combat">Combat</button>
<button type="button" data-tab="inventory">Inventory</button>
<button type="button" data-tab="spells">Spells</button>
</nav>
<div class="nav-bar">
<nav class="inventory" data-group="inventory">
<button type="button" data-group="inventory" data-tab="storage">Storage</button>
<button type="button" data-group="inventory" data-tab="player">Player</button>
<button type="button" data-group="inventory" data-tab="transportation">Transportation</button>
</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>