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

This commit is contained in:
Oliver-Akins 2024-03-24 16:54:50 -06:00
parent 649381cfdd
commit acbcb6c9b2
4 changed files with 117 additions and 26 deletions

View file

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

View file

@ -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,15 +267,17 @@
white-space: nowrap;
}
input {
@include material.elevate(2);
font-family: var(--input-font);
font-size: var(--inventory-untyped-quantity-font-size);
width: 50px;
text-align: center;
border-radius: 4px;
padding: 5px 7px;
color: inherit;
&.editable {
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;
text-align: center;
border-radius: 4px;
padding: 5px 7px;
color: inherit;
}
}
}

View file

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

View file

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