From 3867a23c2d5f27d92db760b5772dac4553be89a2 Mon Sep 17 00:00:00 2001 From: Johannes Loher Date: Wed, 24 Feb 2021 04:52:32 +0100 Subject: [PATCH] Make item list a grid for items and spells --- src/ds4.scss | 2 +- src/module/actor/sheets/actor-sheet.ts | 6 +- src/scss/components/_items.scss | 84 ----------------- src/scss/components/_items_list.scss | 89 +++++++++++++++++++ .../actor/partials/character-inventory.hbs | 6 +- .../actor/partials/items-overview.hbs | 82 ++++++++--------- .../actor/partials/spells-overview.hbs | 33 +++---- 7 files changed, 147 insertions(+), 155 deletions(-) delete mode 100644 src/scss/components/_items.scss create mode 100644 src/scss/components/_items_list.scss diff --git a/src/ds4.scss b/src/ds4.scss index af018bb7..6b6f6b0f 100644 --- a/src/ds4.scss +++ b/src/ds4.scss @@ -16,7 +16,7 @@ @import "scss/components/forms"; @import "scss/components/basic_property"; @import "scss/components/tabs"; - @import "scss/components/items"; + @import "scss/components/items_list"; @import "scss/components/talents"; @import "scss/components/description"; @import "scss/components/character_values"; diff --git a/src/module/actor/sheets/actor-sheet.ts b/src/module/actor/sheets/actor-sheet.ts index 1534131e..de9a0e31 100644 --- a/src/module/actor/sheets/actor-sheet.ts +++ b/src/module/actor/sheets/actor-sheet.ts @@ -98,7 +98,7 @@ export class DS4ActorSheet extends ActorSheet> { // Update Inventory Item html.find(".item-edit").on("click", (ev) => { - const li = $(ev.currentTarget).parents(".item"); + const li = $(ev.currentTarget).parents(".item-row"); const id = li.data("itemId"); const item = this.actor.getOwnedItem(id); if (!item) { @@ -112,7 +112,7 @@ export class DS4ActorSheet extends ActorSheet> { // Delete Inventory Item html.find(".item-delete").on("click", (ev) => { - const li = $(ev.currentTarget).parents(".item"); + const li = $(ev.currentTarget).parents(".item-row"); this.actor.deleteOwnedItem(li.data("itemId")); li.slideUp(200, () => this.render(false)); }); @@ -155,7 +155,7 @@ export class DS4ActorSheet extends ActorSheet> { protected _onItemChange(ev: JQuery.ChangeEvent): void { ev.preventDefault(); const el: HTMLFormElement = $(ev.currentTarget).get(0); - const id = $(ev.currentTarget).parents(".item").data("itemId"); + const id = $(ev.currentTarget).parents(".item-row").data("itemId"); const item = duplicate(this.actor.getOwnedItem(id)); const property: string | undefined = $(ev.currentTarget).data("property"); diff --git a/src/scss/components/_items.scss b/src/scss/components/_items.scss deleted file mode 100644 index 6382c587..00000000 --- a/src/scss/components/_items.scss +++ /dev/null @@ -1,84 +0,0 @@ -@use "sass:color"; - -.items-list { - list-style: none; - margin: 7px 0; - padding: 0; - overflow-y: auto; - - .item-header { - font-weight: bold; - } - - .item { - height: 30px; - line-height: 24px; - padding: 3px 0; - border-bottom: 1px solid #bbb; - - .item-image { - flex: 0 0 24px; - height: 100%; - //margin-right: 5px; - @include centered-content; - } - - img { - display: block; - border: none; - } - - input { - border: 0; - padding: 0; - background-color: transparent; - } - - input[type="checkbox"] { - width: auto; - height: 100%; - margin: 0px; - } - - @include mark-invalid-or-disabled-input; - } - - .item-name { - margin: 0; - } - - .item-controls { - flex: 0 0 86px; - text-align: right; - } - - .item-num-val { - text-align: center; - width: 2.5em; - padding: 0; - } - - .item-description { - font-size: 75%; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - height: 100%; - p { - text-overflow: ellipsis; - overflow: hidden; - } - p:first-child { - margin-top: 0px; - padding-top: 0px; - } - } -} - -.items-list-title { - margin-top: 2em; - margin-bottom: 0px; - padding-left: 1em; - border-bottom: 2px groove $c-border-groove; - font-weight: bold; -} diff --git a/src/scss/components/_items_list.scss b/src/scss/components/_items_list.scss new file mode 100644 index 00000000..6c223c28 --- /dev/null +++ b/src/scss/components/_items_list.scss @@ -0,0 +1,89 @@ +@use "sass:color"; + +.items-list { + $row-height: 1.75em; + display: grid; + grid-column-gap: 0.5em; + grid-row-gap: 0.2em; + align-items: center; + &.weapon { + grid-template-columns: $row-height $row-height 3ch 3fr $row-height 1fr 3ch 5fr 4ch; + } + &.armor { + grid-template-columns: $row-height $row-height 3ch 3fr 1fr 1fr 3ch 5fr 4ch; + } + &.shield { + grid-template-columns: $row-height $row-height 3ch 3fr 3ch 5fr 4ch; + } + &.equipment { + grid-template-columns: $row-height $row-height 3ch 3fr 10ch 5fr 4ch; + } + &.loot { + grid-template-columns: $row-height 3ch 3fr 10ch 5fr 4ch; + } + &.spell { + grid-template-columns: $row-height $row-height 2fr $row-height 1fr 1fr 1fr 1fr 4ch; + } + + margin: 7px 0; + padding: 0; + overflow-y: auto; + + .item-row { + display: contents; + + &.item-header { + font-weight: bold; + display: contents; + } + + > * { + height: $row-height; + line-height: $row-height; + white-space: nowrap; + } + + .item-image { + background-repeat: no-repeat; + background-size: 100%; + background-position: center; + } + + input { + border: 0; + padding: 0; + background-color: transparent; + } + + input[type="checkbox"] { + width: 100%; + height: 100%; + margin: 0px; + } + + @include mark-invalid-or-disabled-input; + } + + .item-description { + //white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + :not(:first-child) { + display: none; + } + > * { + font-size: 0.75em; + text-overflow: ellipsis; + overflow: hidden; + margin: 0; + } + } +} + +.items-list-title { + margin-top: 1em; + margin-bottom: 0; + padding-left: 1em; + border-bottom: 2px groove $c-border-groove; + font-weight: bold; +} diff --git a/src/templates/actor/partials/character-inventory.hbs b/src/templates/actor/partials/character-inventory.hbs index b27fff63..07de73ee 100644 --- a/src/templates/actor/partials/character-inventory.hbs +++ b/src/templates/actor/partials/character-inventory.hbs @@ -1,7 +1,7 @@
{{!-- Money--}} -

{{localize 'DS4.CharacterCurrency'}}

+ {{!--

{{localize 'DS4.CharacterCurrency'}}

  1. @@ -14,8 +14,8 @@
    2. -
+ --}} {{> systems/ds4/templates/actor/partials/items-overview.hbs}} -
\ No newline at end of file + diff --git a/src/templates/actor/partials/items-overview.hbs b/src/templates/actor/partials/items-overview.hbs index e0dc4e20..704cb49d 100644 --- a/src/templates/actor/partials/items-overview.hbs +++ b/src/templates/actor/partials/items-overview.hbs @@ -22,31 +22,30 @@ {{!-- !-- Render a header row for a given data type. -!-- It is a flexbox with a child for each column head. !-- An "equipped" heading is rendered except for the case dataType==='loot'. !-- The partial assumes a variable dataType to be given in the context. !-- If the partial is called with a partial block, the partial block !-- content is inserted before the description heading. !-- @param datType: hand over the dataType to the partial as hash parameter -!-- @param partial-block: hand over custom children of the flexbox in the partial block. +!-- @param partial-block: hand over custom children in the partial block. --}} {{#*inline "itemListHeader" }} -
  • +
  • {{!-- equipped --}} {{#if (ne dataType 'loot')}} -
    {{localize 'DS4.ItemEquippedAbbr'}}
    +
    {{localize 'DS4.ItemEquippedAbbr'}}
    {{/if}} {{!-- image --}} -
    +
    {{!-- amount --}} -
    #
    +
    #
    {{!-- name --}} -
    {{localize 'DS4.ItemName'}}
    +
    {{localize 'DS4.ItemName'}}
    {{!-- item type specifics --}} {{> @partial-block }} {{!-- description --}} -
    {{localize 'DS4.Description'}}
    +
    {{localize 'DS4.Description'}}
    {{!-- control buttons placeholder --}}
    • @@ -54,36 +53,33 @@ {{!-- !-- Render a list row from a given item. -!-- It is a flexbox with a child for each item value of interest. !-- An equipped checkbox is rendered except for the case item.data.type==='loot'. !-- The partial assumes a variable item to be given in the context. !-- If the partial is called with a partial block, the partial block !-- content is inserted before the description. !-- @param item: hand over the item to the partial as hash parameter -!-- @param partial-block: hand over custom children of the flexbox in the partial block. +!-- @param partial-block: hand over custom children in the partial block. --}} {{#*inline "itemListEntry"}} -
  • +
  • {{!-- equipped --}} {{#if (ne item.data.type 'loot')}} - {{/if}} {{!-- image --}} -
    - -
    +
    {{!-- amount --}} - {{!-- name --}} - + {{!-- item type specifics --}} {{> @partial-block}} {{!-- description --}} -
    +
    {{{item.data.data.description}}}
    {{!-- control buttons --}} {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }} @@ -95,41 +91,38 @@ {{!-- WEAPONS --}}

    {{localize 'DS4.ItemTypeWeaponPlural'}}

    -{{!-- {{#if (and (ne itemsByType.weapon undefined) (gt itemsByType.weapon.length 0)) }} --}} {{#> ifHasItemOfType itemsArray=itemsByType.weapon dataType='weapon' }} -
      +
        {{#> itemListHeader dataType='weapon'}} -
        {{localize 'DS4.AttackTypeAbbr'}}
        -
        +
        {{localize 'DS4.AttackTypeAbbr'}}
        +
        {{localize 'DS4.WeaponBonusAbbr'}}
        -
        +
        {{localize 'DS4.OpponentDefenseAbbr'}}
        {{/itemListHeader}} {{#each itemsByType.weapon as |item id|}} {{#> itemListEntry item=item}} -
        - +
        -
        {{ item.data.data.weaponBonus}}
        -
        {{ item.data.data.opponentDefense}}
        +
        {{ item.data.data.weaponBonus}}
        +
        {{ item.data.data.opponentDefense}}
        {{/itemListEntry}} {{/each}}
      -{{!-- {{else}} -{{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType='weapon' }} --}} {{/ifHasItemOfType}} {{!-- ARMOR --}}

      {{localize 'DS4.ItemTypeArmorPlural'}}

      {{#> ifHasItemOfType itemsArray=itemsByType.armor dataType='armor' }} -
        +
          {{#> itemListHeader dataType='armor'}}
          {{localize 'DS4.ArmorMaterialTypeAbbr'}}
          {{localize 'DS4.ArmorTypeAbbr'}}
          -
          +
          {{localize 'DS4.ArmorValueAbbr'}}
          {{/itemListHeader}} @@ -141,7 +134,7 @@
          {{lookup ../../config.i18n.armorTypesAbbr item.data.data.armorType}}
          -
          {{ item.data.data.armorValue}}
          +
          {{ item.data.data.armorValue}}
          {{/itemListEntry}} {{/each}}
        @@ -149,32 +142,33 @@ {{!-- SHIELD --}} -

        {{localize 'DS4.ItemTypeShieldPlural'}}

        {{!-- SPECIFIC --}} +

        {{localize 'DS4.ItemTypeShieldPlural'}}

        {{#> ifHasItemOfType itemsArray=itemsByType.shield dataType='shield' }} -
          +
            {{#> itemListHeader dataType='shield' }} -
            +
            {{localize 'DS4.ArmorValueAbbr'}}
            {{/itemListHeader}} {{#each itemsByType.shield as |item id|}} {{#> itemListEntry item=item }} -
            {{item.data.data.armorValue}}
            {{!-- SPECIFIC --}} +
            {{item.data.data.armorValue}}
            {{/itemListEntry}} {{/each}}
          {{/ifHasItemOfType}} {{!-- EQUIPMENT --}} +

          {{localize 'DS4.ItemTypeEquipmentPlural'}}

          {{#> ifHasItemOfType itemsArray=itemsByType.equipment dataType='equipment' }} -
            +
              {{#> itemListHeader dataType='equipment'}} -
              {{localize 'DS4.StorageLocation'}}
              +
              {{localize 'DS4.StorageLocation'}}
              {{/itemListHeader}} {{#each itemsByType.equipment as |item id|}} {{#> itemListEntry item=item }} - {{/itemListEntry}} {{/each}} @@ -184,13 +178,13 @@ {{!-- LOOT --}}

              {{localize 'DS4.ItemTypeLootPlural'}}

              {{#> ifHasItemOfType itemsArray=itemsByType.loot dataType='loot' }} -
                +
                  {{#> itemListHeader dataType='loot'}} -
                  {{localize 'DS4.StorageLocation'}}
                  +
                  {{localize 'DS4.StorageLocation'}}
                  {{/itemListHeader}} {{#each itemsByType.loot as |item id|}} {{#> itemListEntry item=item }} - {{/itemListEntry}} {{/each}} diff --git a/src/templates/actor/partials/spells-overview.hbs b/src/templates/actor/partials/spells-overview.hbs index 8bd974ad..e10b34dd 100644 --- a/src/templates/actor/partials/spells-overview.hbs +++ b/src/templates/actor/partials/spells-overview.hbs @@ -36,15 +36,14 @@ localizationString=localizationString}}
                  -
                    -
                  1. +
                      +
                    1. {{!-- equipped --}} -
                      {{localize 'DS4.ItemEquippedAbbr'}} -
                      +
                      {{localize 'DS4.ItemEquippedAbbr'}}
                      {{!-- image --}} -
                      +
                      {{!-- name --}} -
                      {{localize 'DS4.ItemName'}}
                      +
                      {{localize 'DS4.ItemName'}}
                      {{!-- spell type --}}
                      {{localize 'DS4.SpellTypeAbbr'}}
                      {{!-- spell bonus --}} @@ -56,26 +55,22 @@ localizationString=localizationString}} {{!-- cooldown duration --}}
                      - {{!-- description --}} - {{!--
                      {{localize 'DS4.Description'}}
                      --}} {{!-- control buttons placeholder --}}
                      2. {{#each itemsByType.spell as |item id|}} -
                    2. - +
                    3. + {{!-- image --}} -
                      - -
                      +
                      {{!-- name --}} - {{!-- spell type --}} -
                      - +
                      {{!-- spell bonus --}} temporalUnit localizationString='DS4.SpellCooldownDuration' unitDatum=item.data.data.cooldownDuration config=../config}} - {{!-- description --}} - {{!--
                      {{{item.data.data.description}}}
                      --}} {{!-- control buttons --}} {{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}