Genericizing some of the styling and adding the Aspect item details (closes #128)

module/handlebars.mjs

@@ -28,6 +28,7 @@ export const partials = [
 	`actors/char-sheet/v2/partials/inventory/storage.v2.pc.hbs`,
 	`actors/char-sheet/v2/partials/inventory/items/material.v2.pc.hbs`,
 	`actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs`,
+	`actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs`,
 ];
 
 export const preAliasedPartials = {

styles/sheets/actor/char-sheet/v2/pages/inventory.scss

@@ -53,7 +53,7 @@
 				gap: 8px;
 			}
 
-			&--untyped {
+			&--untyped, &--aspect {
 				display: flex;
 				gap: 8px;
 				flex-direction: column;
@@ -186,7 +186,7 @@
 		}
 	}
 
-	.untyped {
+	.untyped, .aspect {
 		@include material.elevate(1);
 		padding: 8px;
 		border-radius: 4px;
@@ -252,7 +252,7 @@
 			}
 		}
 
-		&__usage, &__tier {
+		&__field {
 			@include material.elevate(1);
 			color: var(--inventory-untyped-card-color);
 			padding: 8px;
@@ -260,17 +260,6 @@
 			align-items: center;
 			justify-content: space-between;
 			border-radius: 4px;
-		}
-
-		&__quantity--edit {
-			@include material.elevate(1);
-			display: flex;
-			flex-direction: row;
-			align-items: center;
-			justify-content: space-between;
-			padding: 0px 8px;
-			gap: 4px;
-			border-radius: 4px;
 
 			> :first-child {
 				text-overflow: ellipsis;
@@ -278,8 +267,9 @@
 				white-space: nowrap;
 			}
 
-			input {
+			&.editable {
-				@include material.elevate(2);
+				input[type="text"], input[type="number"] {
+					@include material.elevate(1);
 					font-family: var(--input-font);
 					font-size: var(--inventory-untyped-quantity-font-size);
 					width: 50px;
@@ -289,6 +279,7 @@
 					color: inherit;
 				}
 			}
+		}
 
 		&__description {
 			@include material.elevate(1);

templates/actors/char-sheet/v2/partials/inventory/items/aspect.v2.pc.hbs

@@ -0,0 +1,99 @@
+<section class="aspect">
+	<div
+		class="aspect__header"
+		data-collapse-id="{{item.uuid}}"
+	>
+		<button
+			type="button"
+			class="equal-padding reduced-padding"
+			data-collapse-id="{{item.uuid}}"
+			tabindex="0"
+			aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}"
+		>
+			<div aria-hidden="true" class="icon icon--12">
+				{{#if (dd-set-has meta.expanded item.uuid)}}
+					{{{ icons.caret-down }}}
+				{{else}}
+					{{{ icons.caret-right }}}
+				{{/if}}
+			</div>
+		</button>
+		<h3 class="aspect__name">
+			{{item.name}}
+		</h3>
+	</div>
+	{{#if (dd-set-has meta.expanded item.uuid)}}
+		<hr>
+		<div class="aspect__content">
+			<div class="aspect__field editable">
+				<label for="{{meta.idp}}-{{item.uuid}}-used">
+					Used
+				</label>
+				<input
+					type="checkbox"
+					{{checked item.system.used}}
+					id="{{meta.idp}}-{{item.uuid}}-used"
+					value="{{item.system.used}}"
+					data-embedded-id="{{item.uuid}}"
+					data-embedded-update="system.used"
+					data-embedded-update-on="change"
+				>
+			</div>
+			<div class="aspect__field">
+				<span>Duration:</span>
+				<span>
+					{{dd-empty-state item.friendlyDuration}}
+				</span>
+			</div>
+			<div class="aspect__field">
+				<span>Tier:</span>
+				<span>{{dd-i18n (concat "dotdungeon.rarity." item.system.tier)}}</span>
+			</div>
+			<button
+				type="button"
+				aria-label="{{dd-i18n 'dotdungeon.common.send-to-chat'}}"
+				data-tooltip="{{dd-i18n 'dotdungeon.common.send-to-chat'}}"
+				data-tooltip-direction="RIGHT"
+				class="aspect__button--send-to-chat"
+			>
+				<div aria-hidden="true" class="icon icon--20">
+					{{{ icons.chat-bubble }}}
+				</div>
+			</button>
+			<p class="aspect__description">
+				{{#if item.system.description}}
+					{{item.system.description}}
+				{{else}}
+					<span class="placeholder">
+						This item hasn't been described yet...
+					</span>
+				{{/if}}
+			</p>
+			<button
+				type="button"
+				aria-label="{{dd-i18n 'dotdungeon.common.edit'}}"
+				data-tooltip="{{dd-i18n 'dotdungeon.common.edit'}}"
+				data-tooltip-direction="RIGHT"
+				class="aspect__button--edit"
+				data-embedded-edit="{{item.uuid}}"
+			>
+				<div aria-hidden="true" class="icon icon--20">
+					{{{ icons.edit }}}
+				</div>
+			</button>
+			<button
+				type="button"
+				aria-label="{{dd-i18n 'dotdungeon.common.delete'}}"
+				data-tooltip="{{dd-i18n 'dotdungeon.common.delete'}}"
+				data-tooltip-direction="RIGHT"
+				class="aspect__button--delete"
+				data-embedded-delete
+				data-embedded-id="{{item.uuid}}"
+			>
+				<div aria-hidden="true" class="icon icon--20">
+					{{{ icons.garbage-bin }}}
+				</div>
+			</button>
+		</div>
+	{{/if}}
+</section>

templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs

@@ -28,7 +28,7 @@
 	{{#if (dd-set-has meta.expanded item.uuid)}}
 		<hr>
 		<div class="untyped__content">
-			<div class="untyped__quantity--edit">
+			<div class="untyped__field editable">
 				<label for="{{meta.idp}}-{{item.uuid}}-quantity">
 					Quantity
 				</label>
@@ -42,13 +42,13 @@
 					data-embedded-update-on="blur"
 				>
 			</div>
-			<div class="untyped__usage">
+			<div class="untyped__field">
 				<span>Usage Cost:</span>
 				<span>
 					{{dd-empty-state item.system.usage}}
 				</span>
 			</div>
-			<div class="untyped__tier">
+			<div class="untyped__field">
 				<span>Tier:</span>
 				<span>{{dd-i18n (concat "dotdungeon.rarity." item.system.tier)}}</span>
 			</div>