From 6a355e63c0cfc9a8bdf33ce6da7240eba7c4a31a Mon Sep 17 00:00:00 2001 From: Oliver-Akins Date: Thu, 21 Mar 2024 21:18:51 -0600 Subject: [PATCH] Get most of the Untyped item implemented and functioning --- langs/en-ca.2.json | 22 +++- module/sheets/GenericActorSheet.mjs | 3 +- module/utils/localizer.mjs | 2 + .../actor/char-sheet/v2/pages/inventory.scss | 102 +++++++++++++----- .../actor/char-sheet/v2/themes/dark.scss | 13 ++- styles/sheets/actor/char-sheet/v2/v2.scss | 4 + .../inventory/items/untyped.v2.pc.hbs | 71 ++++++++++-- 7 files changed, 180 insertions(+), 37 deletions(-) diff --git a/langs/en-ca.2.json b/langs/en-ca.2.json index a6015ed..3253116 100644 --- a/langs/en-ca.2.json +++ b/langs/en-ca.2.json @@ -48,12 +48,32 @@ "actor": { "v2": { "stat-not-chosen": "Select a dice to see the {name} skills", - "skill-roll-locked": "@dotdungeon.trainingLevel.locked" + "skill-roll-locked": "@dotdungeon.trainingLevel.locked", + "toggle-item-information": "Toggle the item's extra information visibility" + } + }, + "item": { + "untyped": { + "quantity": "Quantity", + "usage": "Usage Cost", + "rarity": "Tier", + "no-description": "This item hasn't been described yet..." } } }, + "rarity": { + "simple": "Simple", + "greater": "Greater", + "rare": "Rare", + "legendary": "Legendary" + }, "default": { "name": "(Unnamed @TYPES.{document}.{type})" + }, + "common": { + "send-to-chat": "Send to Chat", + "edit": "Edit", + "delete": "Delete" } }, "TYPES": { diff --git a/module/sheets/GenericActorSheet.mjs b/module/sheets/GenericActorSheet.mjs index 8d11ed9..9436760 100644 --- a/module/sheets/GenericActorSheet.mjs +++ b/module/sheets/GenericActorSheet.mjs @@ -118,8 +118,9 @@ export class GenericActorSheet extends ActorSheet { }; async openEmbeddedSheet($event) { - const data = $event.target.dataset; + const data = $event.currentTarget.dataset; let item = await fromUuid(data.embeddedEdit); + console.log(data) item?.sheet.render(true); }; diff --git a/module/utils/localizer.mjs b/module/utils/localizer.mjs index 0d1d800..fc73b76 100644 --- a/module/utils/localizer.mjs +++ b/module/utils/localizer.mjs @@ -1,6 +1,8 @@ import { localizerConfig } from "../config.mjs"; export function localizer(key, args = {}, depth = 0) { + if (key instanceof Handlebars.SafeString) key = key.toString(); + /** @type {string} */ let localized = game.i18n.format(key, args); const subkeys = localized.matchAll(localizerConfig.subKeyPattern); diff --git a/styles/sheets/actor/char-sheet/v2/pages/inventory.scss b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss index b3002b0..c753e57 100644 --- a/styles/sheets/actor/char-sheet/v2/pages/inventory.scss +++ b/styles/sheets/actor/char-sheet/v2/pages/inventory.scss @@ -94,18 +94,16 @@ } } - .item-list { - .material-list { - display: grid; - grid-template-columns: 1fr 1fr; - gap: 8px; - } + .material-list { + display: grid; + grid-template-columns: 1fr 1fr; + gap: 8px; + } - .untyped-list { - display: flex; - gap: 8px; - flex-direction: column; - } + .untyped-list { + display: flex; + gap: 8px; + flex-direction: column; } .material { @@ -140,6 +138,10 @@ @include material.elevate(4); color: var(--inventory-material-hover-color); } + + &:focus-visible { + box-shadow: 0 0 10px var(--color-shadow-highlight); + } } &__input { @@ -173,8 +175,15 @@ gap: 8px; align-items: center; + &:hover { + cursor: pointer; + } + button { color: var(--inventory-material-color); + &:focus-visible { + box-shadow: 0 0 10px var(--color-shadow-highlight); + } } } &__name { @@ -185,45 +194,86 @@ &__content { display: grid; - grid-template-columns: repeat(3, minmax(0, 1fr)) min-content; - grid-template-rows: repeat(3, min-content) auto; + grid-template-columns: repeat(3, minmax(0, 1fr)) 2.25rem; + grid-template-rows: repeat(3, 2.25rem) auto; gap: 8px; - padding: 4px; + } + + &__button { + @include material.elevate(2); + padding: 0px; + + &:hover { + @include material.elevate(4); + } + &:focus-visible { + box-shadow: 0 0 10px var(--color-shadow-highlight); + } + + &--send-to-chat { + @extend .untyped__button; + color: var(--inventory-untyped-send-to-chat-color); + } + &--edit { + @extend .untyped__button; + color: var(--inventory-untyped-edit-color); + } + &--delete { + @extend .untyped__button; + color: var(--inventory-untyped-delete-color); + background: var(--inventory-untyped-delete-bg); + &:hover { + background: var(--inventory-untyped-delete-bg-hover); + } + } } &__usage, &__tier { @include material.elevate(1); + color: var(--inventory-untyped-card-color); padding: 8px; display: flex; - align-items: center - } - - button { - @include material.elevate(2); - &:hover { - @include material.elevate(4); - } + align-items: center; + justify-content: space-between; + border-radius: 4px; } &__quantity--edit { @include material.elevate(1); - display: grid; - grid-template-columns: minmax(0, 1fr) 40px; - max-width: 100%; + display: flex; + flex-direction: row; align-items: center; - padding: 8px; + justify-content: space-between; + padding: 0px 8px; + gap: 4px; + border-radius: 4px; + > :first-child { text-overflow: ellipsis; overflow: hidden; 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; + } } &__description { @include material.elevate(1); + color: var(--inventory-untyped-description-color); margin: 0; grid-row: span 3; grid-column: span 3; + padding: 8px; + border-radius: 4px; } } } \ No newline at end of file diff --git a/styles/sheets/actor/char-sheet/v2/themes/dark.scss b/styles/sheets/actor/char-sheet/v2/themes/dark.scss index 5291ba9..38c3b5f 100644 --- a/styles/sheets/actor/char-sheet/v2/themes/dark.scss +++ b/styles/sheets/actor/char-sheet/v2/themes/dark.scss @@ -4,10 +4,12 @@ $background: #0a0a0a; $surface: #121212; $primary: #005300; $secondary: #6c056c; +$danger: red; $on-background: $t; $on-surface: white; $on-primary: $t; $on-secondary: $t; +$on-danger: black; $title-font: 'Pixelify Sans', sans-serif; $body-font: sans-serif; @@ -56,5 +58,14 @@ $body-font: sans-serif; --inventory-material-focus-color: white; /* Untyped (custom) inventory item details */ - --inventory-untyped-color: white; + --inventory-untyped-description-color: white; + --inventory-untyped-card-color: white; + --inventory-untyped-send-to-chat-color: white; + --inventory-untyped-edit-color: white; + --inventory-untyped-delete-color: white; + --inventory-untyped-delete-bg: color-mix(in lab, #{$danger} 30%, #{$surface}); + --inventory-untyped-delete-bg-hover: color-mix(in lab, #{$danger} 37%, #{$surface});; + --inventory-untyped-quantity-font-size: 14px; + --inventory-untyped-quantity-color: white; + --inventory-untyped-quantity-input-color: white; } diff --git a/styles/sheets/actor/char-sheet/v2/v2.scss b/styles/sheets/actor/char-sheet/v2/v2.scss index a043453..1b4b0c0 100644 --- a/styles/sheets/actor/char-sheet/v2/v2.scss +++ b/styles/sheets/actor/char-sheet/v2/v2.scss @@ -62,6 +62,10 @@ } } + span.placeholder { + opacity: 60%; + } + .page-content { padding: 16px; padding-bottom: 69px; diff --git a/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs b/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs index c13a698..25712e5 100644 --- a/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs +++ b/templates/actors/char-sheet/v2/partials/inventory/items/untyped.v2.pc.hbs @@ -7,7 +7,8 @@ type="button" class="equal-padding reduced-padding" data-collapse-id="{{item.uuid}}" - aria-label="Toggle the extra information's visibility" + tabindex="0" + aria-label="{{dd-i18n 'dotdungeon.sheet.actor.v2.toggle-item-information' item}}" >