Genericizing some of the styling and adding the Aspect item details (closes #128)
This commit is contained in:
parent
649381cfdd
commit
acbcb6c9b2
4 changed files with 117 additions and 26 deletions
|
|
@ -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 = {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue