Make item list a grid for items and spells
This commit is contained in:
Johannes Loher
parent
0f1418d71b
commit
3867a23c2d
7 changed files with 147 additions and 155 deletions
|
|
@ -1,7 +1,7 @@
|
|||
<div class="tab inventory" data-group="primary" data-tab="inventory">
|
||||
|
||||
{{!-- Money--}}
|
||||
<h4 class="items-list-title">{{localize 'DS4.CharacterCurrency'}}</h4>
|
||||
{{!-- <h4 class="items-list-title">{{localize 'DS4.CharacterCurrency'}}</h4>
|
||||
<ol class="items-list">
|
||||
<li class="item flexrow item-header">
|
||||
<label for="data.currency.gold" class="flex05">{{config.i18n.characterCurrency.gold}}</label>
|
||||
|
|
@ -14,8 +14,8 @@
|
|||
<input class="flex3 item-num-val item-change" type="number" min="0" step="1" name="data.currency.copper"
|
||||
id="data.currency.copper" value="{{data.currency.copper}}" data-dtype="Number" />
|
||||
</li>
|
||||
</ol>
|
||||
</ol> --}}
|
||||
|
||||
{{> systems/ds4/templates/actor/partials/items-overview.hbs}}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -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" }}
|
||||
<li class="item flexrow item-header">
|
||||
<li class="item-row item-header">
|
||||
{{!-- equipped --}}
|
||||
{{#if (ne dataType 'loot')}}
|
||||
<div class="flex05" title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
|
||||
<div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
|
||||
{{/if}}
|
||||
{{!-- image --}}
|
||||
<div class="flex05 item-image"></div>
|
||||
<div class="item-image"></div>
|
||||
{{!-- amount --}}
|
||||
<div class="flex05 item-num-val" title="{{localize 'DS4.Quantity'}}">#</div>
|
||||
<div class="item-num-val" title="{{localize 'DS4.Quantity'}}">#</div>
|
||||
{{!-- name --}}
|
||||
<div class="flex3 item-name">{{localize 'DS4.ItemName'}}</div>
|
||||
<div class="item-name">{{localize 'DS4.ItemName'}}</div>
|
||||
{{!-- item type specifics --}}
|
||||
{{> @partial-block }}
|
||||
{{!-- description --}}
|
||||
<div class="flex4">{{localize 'DS4.Description'}}</div>
|
||||
<div>{{localize 'DS4.Description'}}</div>
|
||||
{{!-- control buttons placeholder --}}
|
||||
<div></div>
|
||||
</li>
|
||||
|
|
@ -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"}}
|
||||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<li class="item-row" data-item-id="{{item._id}}">
|
||||
{{!-- equipped --}}
|
||||
{{#if (ne item.data.type 'loot')}}
|
||||
<input class="flex05 item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
|
||||
<input class="item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
|
||||
data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
|
||||
{{/if}}
|
||||
{{!-- image --}}
|
||||
<div class="flex05 item-image">
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
|
||||
</div>
|
||||
<div class="item-image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
|
||||
{{!-- amount --}}
|
||||
<input class="flex05 item-num-val item-change" type="number" min="0" step="1" value="{{item.data.data.quantity}}"
|
||||
<input class="item-num-val item-change" type="number" min="0" step="1" value="{{item.data.data.quantity}}"
|
||||
data-dtype="Number" data-property="data.quantity" title="{{localize 'DS4.Quantity'}}" />
|
||||
{{!-- name --}}
|
||||
<input class="flex3 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
|
||||
data-property="name" title="{{htmlToPlainText item.data.data.description}}" />
|
||||
<input class="item-name item-change" type="text" value="{{item.name}}" data-dtype="String" data-property="name"
|
||||
title="{{htmlToPlainText item.data.data.description}}" />
|
||||
{{!-- item type specifics --}}
|
||||
{{> @partial-block}}
|
||||
{{!-- description --}}
|
||||
<div class="flex4 item-description" title="{{htmlToPlainText item.data.data.description}}">
|
||||
<div class="item-description" title="{{htmlToPlainText item.data.data.description}}">
|
||||
{{{item.data.data.description}}}</div>
|
||||
{{!-- control buttons --}}
|
||||
{{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
|
||||
|
|
@ -95,41 +91,38 @@
|
|||
|
||||
{{!-- WEAPONS --}}
|
||||
<h4 class="items-list-title">{{localize 'DS4.ItemTypeWeaponPlural'}}</h4>
|
||||
{{!-- {{#if (and (ne itemsByType.weapon undefined) (gt itemsByType.weapon.length 0)) }} --}}
|
||||
{{#> ifHasItemOfType itemsArray=itemsByType.weapon dataType='weapon' }}
|
||||
<ol class="items-list">
|
||||
<ol class="items-list weapon">
|
||||
{{#> itemListHeader dataType='weapon'}}
|
||||
<div class="flex05 item-image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
|
||||
<div class="flex05 item-num-val" title="{{localize 'DS4.WeaponBonus'}}">
|
||||
<div class="item-image" title="{{localize 'DS4.AttackType'}}">{{localize 'DS4.AttackTypeAbbr'}}</div>
|
||||
<div class="item-num-val" title="{{localize 'DS4.WeaponBonus'}}">
|
||||
{{localize 'DS4.WeaponBonusAbbr'}}
|
||||
</div>
|
||||
<div class="flex05 item-num-val" title="{{localize 'DS4.OpponentDefense'}}">
|
||||
<div class="item-num-val" title="{{localize 'DS4.OpponentDefense'}}">
|
||||
{{localize 'DS4.OpponentDefenseAbbr'}}
|
||||
</div>
|
||||
{{/itemListHeader}}
|
||||
{{#each itemsByType.weapon as |item id|}}
|
||||
{{#> itemListEntry item=item}}
|
||||
<div class="flex05 item-image">
|
||||
<img src="{{lookup ../../config.icons.attackTypes item.data.data.attackType}}"
|
||||
title="{{lookup ../../config.i18n.attackTypes item.data.data.attackType}}" width="24" height="24" />
|
||||
<div class="item-image"
|
||||
style="background-image: url('{{lookup ../../config.icons.attackTypes item.data.data.attackType}}')"
|
||||
title="{{lookup ../../config.i18n.attackTypes item.data.data.attackType}}">
|
||||
</div>
|
||||
<div class="flex05 item-num-val">{{ item.data.data.weaponBonus}}</div>
|
||||
<div class="flex05 item-num-val">{{ item.data.data.opponentDefense}}</div>
|
||||
<div class="item-num-val">{{ item.data.data.weaponBonus}}</div>
|
||||
<div class="item-num-val">{{ item.data.data.opponentDefense}}</div>
|
||||
{{/itemListEntry}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{!-- {{else}}
|
||||
{{> systems/ds4/templates/actor/partials/overview-add-button.hbs dataType='weapon' }} --}}
|
||||
{{/ifHasItemOfType}}
|
||||
|
||||
{{!-- ARMOR --}}
|
||||
<h4 class="items-list-title">{{localize 'DS4.ItemTypeArmorPlural'}}</h4>
|
||||
{{#> ifHasItemOfType itemsArray=itemsByType.armor dataType='armor' }}
|
||||
<ol class="items-list">
|
||||
<ol class="items-list armor">
|
||||
{{#> itemListHeader dataType='armor'}}
|
||||
<div title="{{localize 'DS4.ArmorMaterialType'}}">{{localize 'DS4.ArmorMaterialTypeAbbr'}}</div>
|
||||
<div title="{{localize 'DS4.ArmorType'}}">{{localize 'DS4.ArmorTypeAbbr'}}</div>
|
||||
<div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">
|
||||
<div class="item-num-val" title="{{localize 'DS4.ArmorValue'}}">
|
||||
{{localize 'DS4.ArmorValueAbbr'}}
|
||||
</div>
|
||||
{{/itemListHeader}}
|
||||
|
|
@ -141,7 +134,7 @@
|
|||
<div title="{{lookup ../../config.i18n.armorTypes item.data.data.armorType}}">
|
||||
{{lookup ../../config.i18n.armorTypesAbbr item.data.data.armorType}}
|
||||
</div>
|
||||
<div class="flex05 item-num-val">{{ item.data.data.armorValue}}</div>
|
||||
<div class="item-num-val">{{ item.data.data.armorValue}}</div>
|
||||
{{/itemListEntry}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
|
|
@ -149,32 +142,33 @@
|
|||
|
||||
|
||||
{{!-- SHIELD --}}
|
||||
<h4 class="items-list-title">{{localize 'DS4.ItemTypeShieldPlural'}}</h4> {{!-- SPECIFIC --}}
|
||||
<h4 class="items-list-title">{{localize 'DS4.ItemTypeShieldPlural'}}</h4>
|
||||
{{#> ifHasItemOfType itemsArray=itemsByType.shield dataType='shield' }}
|
||||
<ol class="items-list">
|
||||
<ol class="items-list shield">
|
||||
{{#> itemListHeader dataType='shield' }}
|
||||
<div class="flex05 item-num-val" title="{{localize 'DS4.ArmorValue'}}">
|
||||
<div class="item-num-val" title="{{localize 'DS4.ArmorValue'}}">
|
||||
{{localize 'DS4.ArmorValueAbbr'}}
|
||||
</div>
|
||||
{{/itemListHeader}}
|
||||
{{#each itemsByType.shield as |item id|}}
|
||||
{{#> itemListEntry item=item }}
|
||||
<div class="flex05 item-num-val">{{item.data.data.armorValue}}</div> {{!-- SPECIFIC --}}
|
||||
<div class="item-num-val">{{item.data.data.armorValue}}</div>
|
||||
{{/itemListEntry}}
|
||||
{{/each}}
|
||||
</ol>
|
||||
{{/ifHasItemOfType}}
|
||||
|
||||
{{!-- EQUIPMENT --}}
|
||||
|
||||
<h4 class="items-list-title">{{localize 'DS4.ItemTypeEquipmentPlural'}}</h4>
|
||||
{{#> ifHasItemOfType itemsArray=itemsByType.equipment dataType='equipment' }}
|
||||
<ol class="items-list">
|
||||
<ol class="items-list equipment">
|
||||
{{#> itemListHeader dataType='equipment'}}
|
||||
<div class="flex2">{{localize 'DS4.StorageLocation'}}</div>
|
||||
<div>{{localize 'DS4.StorageLocation'}}</div>
|
||||
{{/itemListHeader}}
|
||||
{{#each itemsByType.equipment as |item id|}}
|
||||
{{#> itemListEntry item=item }}
|
||||
<input class="flex2 item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
|
||||
<input class="item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
|
||||
data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
|
||||
{{/itemListEntry}}
|
||||
{{/each}}
|
||||
|
|
@ -184,13 +178,13 @@
|
|||
{{!-- LOOT --}}
|
||||
<h4 class="items-list-title">{{localize 'DS4.ItemTypeLootPlural'}}</h4>
|
||||
{{#> ifHasItemOfType itemsArray=itemsByType.loot dataType='loot' }}
|
||||
<ol class="items-list">
|
||||
<ol class="items-list loot">
|
||||
{{#> itemListHeader dataType='loot'}}
|
||||
<div class="flex2">{{localize 'DS4.StorageLocation'}}</div>
|
||||
<div>{{localize 'DS4.StorageLocation'}}</div>
|
||||
{{/itemListHeader}}
|
||||
{{#each itemsByType.loot as |item id|}}
|
||||
{{#> itemListEntry item=item }}
|
||||
<input class="flex2 item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
|
||||
<input class="item-change" type="text" value="{{item.data.data.storageLocation}}" data-dtype="String"
|
||||
data-property="data.storageLocation" title="{{localize 'DS4.StorageLocation'}}">
|
||||
{{/itemListEntry}}
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -36,15 +36,14 @@ localizationString=localizationString}}
|
|||
|
||||
|
||||
<div class="tab spells" data-group="primary" data-tab="spells">
|
||||
<ol class="items-list">
|
||||
<li class="item flexrow item-header">
|
||||
<ol class="items-list spell">
|
||||
<li class="item-row item-header">
|
||||
{{!-- equipped --}}
|
||||
<div class="flex05 item-image" title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}
|
||||
</div>
|
||||
<div title="{{localize 'DS4.ItemEquipped'}}">{{localize 'DS4.ItemEquippedAbbr'}}</div>
|
||||
{{!-- image --}}
|
||||
<div class="flex05 item-image"></div>
|
||||
<div class="item-image"></div>
|
||||
{{!-- name --}}
|
||||
<div class="flex2 item-name">{{localize 'DS4.ItemName'}}</div>
|
||||
<div class="item-name">{{localize 'DS4.ItemName'}}</div>
|
||||
{{!-- spell type --}}
|
||||
<div class="item-image" title="{{localize 'DS4.SpellType'}}">{{localize 'DS4.SpellTypeAbbr'}}</div>
|
||||
{{!-- spell bonus --}}
|
||||
|
|
@ -56,26 +55,22 @@ localizationString=localizationString}}
|
|||
{{!-- cooldown duration --}}
|
||||
<div class="item-num-val" title="{{localize 'DS4.SpellCooldownDuration'}}"><i
|
||||
class="fas fa-hourglass-half"></i></div>
|
||||
{{!-- description --}}
|
||||
{{!-- <div class="flex3">{{localize 'DS4.Description'}}</div> --}}
|
||||
{{!-- control buttons placeholder --}}
|
||||
<div></div>
|
||||
</li>
|
||||
{{#each itemsByType.spell as |item id|}}
|
||||
<li class="item flexrow" data-item-id="{{item._id}}">
|
||||
<input class="flex05 item-image item-change" type="checkbox" {{checked item.data.data.equipped}}
|
||||
data-dtype="Boolean" data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
|
||||
<li class="item-row" data-item-id="{{item._id}}">
|
||||
<input class="item-change" type="checkbox" {{checked item.data.data.equipped}} data-dtype="Boolean"
|
||||
data-property="data.equipped" title="{{localize 'DS4.ItemEquipped'}}">
|
||||
{{!-- image --}}
|
||||
<div class="flex05 item-image">
|
||||
<img src="{{item.img}}" title="{{item.name}}" width="24" height="24" />
|
||||
</div>
|
||||
<div class="item-image" style="background-image: url('{{item.img}}')" title="{{item.name}}"></div>
|
||||
{{!-- name --}}
|
||||
<input class="flex2 item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
|
||||
<input class="item-name item-change" type="text" value="{{item.name}}" data-dtype="String"
|
||||
data-property="name" title="{{htmlToPlainText item.data.data.description}}" />
|
||||
{{!-- spell type --}}
|
||||
<div class="flex05 item-image">
|
||||
<img src="{{lookup ../config.icons.spellTypes item.data.data.spellType}}"
|
||||
title="{{lookup ../config.i18n.spellTypes item.data.data.spellType}}" width="24" height="24" />
|
||||
<div class="item-image"
|
||||
style="background-image: url('{{lookup ../config.icons.spellTypes item.data.data.spellType}}')"
|
||||
title="{{lookup ../config.i18n.spellTypes item.data.data.spellType}}">
|
||||
</div>
|
||||
{{!-- spell bonus --}}
|
||||
<input class="item-num-val item-change" type="text" data-dtype="String" data-property="data.bonus"
|
||||
|
|
@ -88,8 +83,6 @@ localizationString=localizationString}}
|
|||
{{!-- cooldown duration --}}
|
||||
{{> temporalUnit localizationString='DS4.SpellCooldownDuration' unitDatum=item.data.data.cooldownDuration
|
||||
config=../config}}
|
||||
{{!-- description --}}
|
||||
{{!-- <div class="flex3 item-description">{{{item.data.data.description}}}</div> --}}
|
||||
{{!-- control buttons --}}
|
||||
{{> systems/ds4/templates/actor/partials/overview-control-buttons.hbs }}
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue