Begin work on the updated item sheet and get the tabs initialized (Closes #141)

module/handlebars.mjs

@@ -31,6 +31,12 @@ export const partials = [
 	`actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs`,
 	`actors/char-sheet/v2/partials/inventory/items/weapon.v2.pc.hbs`,
 	`actors/char-sheet/v2/partials/inventory/items/pet.v2.pc.hbs`,
+
+	// The v2 Untyped sheet partials
+	`items/untyped/v2/tabs/general.v2.untyped.hbs`,
+	`items/untyped/v2/tabs/details.v2.untyped.hbs`,
+	`items/untyped/v2/tabs/effects.v2.untyped.hbs`,
+	`items/untyped/v2/tabs/settings.v2.untyped.hbs`,
 ];
 
 export const preAliasedPartials = {

module/sheets/Items/UntypedItemSheet.mjs

@@ -5,17 +5,30 @@ export class UntypedItemSheet extends GenericItemSheet {
 		let opts = mergeObject(
 			super.defaultOptions,
 			{
-				template: `systems/dotdungeon/templates/items/custom.hbs`,
+				template: `systems/dotdungeon/templates/items/untyped/v2/index.hbs`,
-				width: 280,
+				width: 300,
 				height: 340,
+				tabs: [
+					{
+						group: `page`,
+						navSelector: `nav.page`,
+						contentSelector: `.page-content`,
+						initial: `general`,
+					},
+				],
 			}
 		);
-		opts.classes.push(`dotdungeon`);
+		opts.classes.push(`dotdungeon`, `style-v3`);
 		return opts;
 	};
 
 	async getData() {
 		const ctx = await super.getData();
+
+		ctx.computed = {
+			showSettingsTab: ctx.isGM || this.item.isOwned,
+		};
+
 		return ctx;
 	};
 };

styles/v3/elements/nav.scss

@@ -0,0 +1,11 @@
+@use "../mixins/material" as material;
+
+.dotdungeon.style-v3 > .window-content {
+	nav {
+		display: flex;
+		flex-direction: row;
+		overflow-x: auto;
+		gap: 8px;
+		padding: 8px;
+	}
+}

styles/v3/index.scss

@@ -1,11 +1,17 @@
+/* Themes */
+@use "./themes/material.css";
+@use "./themes/dark.css";
+
 /* Element-Styling */
 @use "./elements/button.scss";
 @use "./elements/headers.scss";
 @use "./elements/hr.scss";
 @use "./elements/icons.scss";
+@use "./elements/nav.scss";
 
 /* Sheet Layouts */
 @use "./layouts/datasheet.scss";
+@use "./layouts/items/untyped.scss";
 
 /* Sheet Options */
 .dotdungeon.style-v3 {
@@ -26,6 +32,8 @@
 
 	> .window-content {
 		padding: 0;
+		background: var(--sheet);
+		color: var(--on-sheet);
 
 		.debug-data {
 			opacity: 60%;

styles/v3/layouts/items/untyped.scss

@@ -0,0 +1,23 @@
+@use "../../mixins/material";
+
+.dotdungeon.style-v3 .item--untyped {
+	.nav-bar {
+		@include material.elevate(8);
+		position: absolute;
+		bottom: 0;
+		left: 0;
+		right: 6px;
+
+		nav {
+			display: flex;
+			flex-direction: row;
+			gap: 8px;
+			padding: 8px;
+		}
+	}
+
+	.page-content {
+		padding: 8px;
+		height: 100%;
+	}
+}

styles/v3/themes/dark.css

@@ -0,0 +1,7 @@
+.dotdungeon.style-v3 {
+	--sheet: #0a0a0a;
+	--on-sheet: white;
+
+	--surface: #121212;
+	--on-surface: white;
+}

styles/v3/themes/material.css

@@ -0,0 +1,27 @@
+/*
+These CSS variables are all used in order to try following Material design as
+best as I can.
+*/
+
+.dotdungeon.style-v3 {
+	--elevation-0dp-bg: var(--surface);
+	--elevation-0dp-text: var(--on-surface);
+	--elevation-1dp-bg: color-mix(in lab, transparent, white 5%);
+	--elevation-1dp-text: white;
+	--elevation-2dp-bg: color-mix(in lab, transparent, white 7%);
+	--elevation-2dp-text: white;
+	--elevation-3dp-bg: color-mix(in lab, transparent, white 8%);
+	--elevation-3dp-text: white;
+	--elevation-4dp-bg: color-mix(in lab, transparent, white 9%);
+	--elevation-4dp-text: white;
+	--elevation-6dp-bg: color-mix(in lab, transparent, white 11%);
+	--elevation-6dp-text: white;
+	--elevation-8dp-bg: color-mix(in lab, transparent, white 12%);
+	--elevation-8dp-text: white;
+	--elevation-12dp-bg: color-mix(in lab, transparent, white 14%);
+	--elevation-12dp-text: white;
+	--elevation-16dp-bg: color-mix(in lab, transparent, white 15%);
+	--elevation-16dp-text: white;
+	--elevation-24dp-bg: color-mix(in lab, transparent, white 16%);
+	--elevation-24dp-text: white;
+}

templates/items/untyped/v2/index.hbs

@@ -0,0 +1,21 @@
+<form class="item--untyped theme-dark">
+	<div class="page-content">
+		{{> dotdungeon.untyped.v2.general }}
+		{{> dotdungeon.untyped.v2.details }}
+		{{#if computed.showSettingsTab}}
+			{{> dotdungeon.untyped.v2.settings }}
+		{{/if}}
+		{{> dotdungeon.untyped.v2.effects }}
+	</div>
+
+	<div class="nav-bar">
+		<nav data-group="page" class="page" aria-label="">
+			<button type="button" data-group="page" data-tab="general">General</button>
+			<button type="button" data-group="page" data-tab="details">Details</button>
+			<button type="button" data-group="page" data-tab="effects">Effects</button>
+			{{#if computed.showSettingsTab}}
+				<button type="button" data-group="page" data-tab="settings">Settings</button>
+			{{/if}}
+		</nav>
+	</div>
+</form>

templates/items/untyped/v2/tabs/details.v2.untyped.hbs

@@ -0,0 +1,3 @@
+<div class="tab" data-group="page" data-tab="details">
+	Details Tab
+</div>

templates/items/untyped/v2/tabs/effects.v2.untyped.hbs

@@ -0,0 +1,3 @@
+<div class="tab" data-group="page" data-tab="effects">
+	Effects Tab
+</div>

templates/items/untyped/v2/tabs/general.v2.untyped.hbs

@@ -0,0 +1,3 @@
+<div class="tab" data-group="page" data-tab="general">
+	General Tab
+</div>

templates/items/untyped/v2/tabs/settings.v2.untyped.hbs

@@ -0,0 +1,3 @@
+<div class="tab" data-group="page" data-tab="settings">
+	Settings Tab
+</div>