From 48ceade1d119b67b8d6a7acb2f6cad67a03f4e22 Mon Sep 17 00:00:00 2001
From: Oliver-Akins <Oliver.akins1999@gmail.com>
Date: Wed, 17 Apr 2024 22:31:45 -0600
Subject: [PATCH] Implement the toggle for capacity usage. (closes #156)

---
 styles/v3/elements/checkbox.scss              | 24 +++++++++++++++++++
 styles/v3/index.scss                          |  1 +
 styles/v3/layouts/items/untyped/v2.scss       |  5 ++++
 styles/v3/themes/dark.css                     |  2 ++
 .../untyped/v2/tabs/settings.v2.untyped.hbs   | 19 +++++++++++----
 5 files changed, 47 insertions(+), 4 deletions(-)
 create mode 100644 styles/v3/elements/checkbox.scss

diff --git a/styles/v3/elements/checkbox.scss b/styles/v3/elements/checkbox.scss
new file mode 100644
index 0000000..d3bae5f
--- /dev/null
+++ b/styles/v3/elements/checkbox.scss
@@ -0,0 +1,24 @@
+.dotdungeon.style-v3 {
+	input[type="checkbox"] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		border-radius: 2px;
+		margin: 0;
+		cursor: pointer;
+
+		background: var(--elevation-8dp-bg);
+		position: relative;
+		&:checked::before {
+			content: "";
+			background: var(--checkbox-checked);
+			border-radius: 3px;
+			$margin: 4px;
+			top: $margin;
+			bottom: $margin;
+			left: $margin;
+			right: $margin;
+			position: absolute;
+		}
+	}
+}
diff --git a/styles/v3/index.scss b/styles/v3/index.scss
index 1814eac..85ec4bf 100644
--- a/styles/v3/index.scss
+++ b/styles/v3/index.scss
@@ -5,6 +5,7 @@
 /* Element-Styling */
 @use "./elements/utilities.scss";
 @use "./elements/button.scss";
+@use "./elements/checkbox.scss";
 @use "./elements/select.scss";
 @use "./elements/text-input.scss";
 @use "./elements/number-input.scss";
diff --git a/styles/v3/layouts/items/untyped/v2.scss b/styles/v3/layouts/items/untyped/v2.scss
index b3dc3a2..a93307d 100644
--- a/styles/v3/layouts/items/untyped/v2.scss
+++ b/styles/v3/layouts/items/untyped/v2.scss
@@ -60,6 +60,11 @@
 		@extend %flex-col;
 
 		.capacity {
+			&--usage, &--quantity {
+				display: flex;
+				align-items: center;
+			}
+
 			&--calculated {
 				display: flex;
 				flex-direction: row;
diff --git a/styles/v3/themes/dark.css b/styles/v3/themes/dark.css
index a5cbc65..374056f 100644
--- a/styles/v3/themes/dark.css
+++ b/styles/v3/themes/dark.css
@@ -4,4 +4,6 @@
 
 	--surface: #121212;
 	--on-surface: white;
+
+	--checkbox-checked: #00d300;
 }
diff --git a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs
index c69757f..75b1167 100644
--- a/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs
+++ b/templates/items/untyped/v2/tabs/settings.v2.untyped.hbs
@@ -5,10 +5,21 @@
 		</div>
 	{{/if}}
 	{{#if isGM}}
-		<div class="capacity-usage panel">
-			Uses Capacity?
-			<br>
-			(GM Only)
+		<div class="capacity--usage panel">
+			<label
+				for="{{meta.idp}}-{{item.uuid}}-uses-inventory-slot"
+			>
+				Uses Capacity?
+				<br>
+				(GM Only)
+			</label>
+			<div class="grow"></div>
+			<input
+				type="checkbox"
+				id="{{meta.idp}}-{{item.uuid}}-uses-inventory-slot"
+				name="system.uses_inventory_slot"
+				{{checked system.uses_inventory_slot}}
+			>
 		</div>
 		<div class="quantity-capacity panel">
 			Quantity Affects Capacity?