cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-11 19:25:21 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

Improve sidebar appearance when labels are long (#1238)

Browse source
This commit is contained in:
Carlos Fernandez 2025-11-06 10:02:22 -05:00 • committed by GitHub
parent 659670c403
commit ce3e2a804c
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
7 changed files with 185 additions and 104 deletions
Download patch file Download diff file Expand all files Collapse all files

1
module/systemRegistration/handlebars.mjs
View file

@ -1,5 +1,6 @@
export const preloadHandlebarsTemplates = async function () {
foundry.applications.handlebars.loadTemplates({
'daggerheart.inventory-item-compact': 'systems/daggerheart/templates/sheets/global/partials/inventory-item-compact.hbs',
'daggerheart.inventory-items':
'systems/daggerheart/templates/sheets/global/partials/inventory-fieldset-items-V2.hbs',
'daggerheart.inventory-item': 'systems/daggerheart/templates/sheets/global/partials/inventory-item-V2.hbs'

157
styles/less/global/inventory-item.less
View file

@ -14,7 +14,7 @@
}
.appTheme({}, {
.inventory-item-header .img-portait .roll-img {
.inventory-item .img-portait .roll-img {
filter: invert(1);
}
});
@ -25,14 +25,12 @@
list-style-type: none;
&:not(.single-img) {
.inventory-item-header:hover {
.img-portait:has(.roll-img) {
.roll-img {
opacity: 1;
}
.item-img {
opacity: 0;
}
.img-portait:has(.roll-img):hover {
.roll-img {
opacity: 1;
}
.item-img {
opacity: 0;
}
}
@ -68,18 +66,15 @@
}
}
.inventory-item-header {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
border-radius: 3px;
.inventory-item-header,
&.inventory-item-compact {
.img-portait {
flex: 0 0 40px;
height: 40px;
cursor: pointer;
position: relative;
&:has(.roll-img) {
cursor: pointer;
}
.item-img,
.roll-img {
@ -102,53 +97,6 @@
}
}
.item-label {
flex: 1;
align-self: center;
.item-name {
font-size: var(--font-size-14);
.expanded-icon {
display: none;
}
}
.item-tags,
.item-labels {
display: flex;
gap: 10px;
.tag,
.label {
display: flex;
flex-direction: row;
align-items: center;
font-size: var(--font-size-12);
flex-wrap: wrap;
justify-content: start;
}
.tag {
padding: 3px 5px;
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
border-radius: 3px;
}
.label {
gap: 4px;
color: light-dark(@dark-80, @beige-80);
}
}
}
.item-resource {
flex: 0 0 60px;
display: flex;
align-items: center;
gap: 4px;
}
.controls {
flex: 0 0 auto;
display: flex;
@ -167,6 +115,52 @@
}
}
.inventory-item-header {
align-items: center;
border-radius: 3px;
cursor: pointer;
display: flex;
gap: 10px;
.item-label {
flex: 1;
align-self: center;
.item-name {
font-size: var(--font-size-14);
.expanded-icon {
display: none;
}
}
.item-tags {
display: flex;
gap: 10px;
.tag {
align-items: center;
background: light-dark(@dark-15, @beige-15);
border-radius: 3px;
border: 1px solid light-dark(@dark, @beige);
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: var(--font-size-12);
justify-content: start;
padding: 3px 5px;
}
}
}
.item-resource {
flex: 0 0 60px;
display: flex;
align-items: center;
gap: 4px;
}
}
.inventory-item-content {
> *:not(:last-child) {
margin-bottom: 5px;
@ -251,6 +245,41 @@
}
}
}
&.inventory-item-compact {
display: grid;
grid-template:
"img name controls" auto
"img labels labels" 1fr
/ 40px 1fr min-content;
column-gap: 8px;
> .img-portait {
grid-area: img;
}
> .item-name {
align-self: end;
line-height: 1;
padding-bottom: 1px;
}
> .controls {
grid-area: controls;
align-self: start;
padding-top: 0.3125rem;
gap: 4px;
margin-bottom: -1px;
}
> .item-labels {
align-self: start;
color: light-dark(@dark-80, @beige-80);
display: flex;
flex-direction: row;
flex-wrap: wrap;
font-size: var(--font-size-12);
gap: 4px;
grid-area: labels;
}
}
}
.card-item {

6
templates/sheets/actors/adversary/sidebar.hbs
View file

@ -78,13 +78,9 @@
<side-line-div></side-line-div>
</div>
<ul class="items-sidebar-list">
{{> 'daggerheart.inventory-item'
{{> 'daggerheart.inventory-item-compact'
item=document.system.attack
type='action'
hideTags=true
hideDescription=true
hideResources=true
noExtensible=true
noCompendiumEdit=true
}}
</ul>

18
templates/sheets/actors/character/sidebar.hbs
View file

@ -116,24 +116,16 @@
</div>
<ul class="items-sidebar-list">
{{#if document.system.usedUnarmed}}
{{> 'daggerheart.inventory-item'
{{> 'daggerheart.inventory-item-compact'
item=document.system.usedUnarmed
type='action'
hideTags=true
hideDescription=true
hideResources=true
noExtensible=true
}}
{{/if}}
{{#each document.items as |item|}}
{{#if item.system.equipped}}
{{> 'daggerheart.inventory-item'
{{> 'daggerheart.inventory-item-compact'
item=item
type=item.type
hideTags=true
hideDescription=true
hideResources=true
noExtensible=true
}}
{{/if}}
{{/each}}
@ -147,13 +139,9 @@
</div>
<ul class="items-sidebar-list">
{{#each document.system.domainCards.loadout as |card|}}
{{> 'daggerheart.inventory-item'
{{> 'daggerheart.inventory-item-compact'
item=card
type='domainCard'
hideTags=true
hideDescription=true
hideResources=true
noExtensible=true
}}
{{/each}}

8
templates/sheets/actors/companion/details.hbs
View file

@ -8,11 +8,9 @@
</div>
{{#if document.system.partner}}
<ul class="items-list">
{{> 'daggerheart.inventory-item'
{{> 'daggerheart.inventory-item-compact'
item=document.system.partner
type='companion'
hideTags=true
hideDescription=true
isActor=true
hideTooltip=true
}}
@ -28,11 +26,9 @@
<side-line-div></side-line-div>
</div>
<ul class="items-list">
{{> 'daggerheart.inventory-item'
{{> 'daggerheart.inventory-item-compact'
item=document.system.attack
type='action'
hideTags=true
hideDescription=true
hideTooltip=true
}}
</ul>

14
templates/sheets/global/partials/inventory-item-V2.hbs
View file

@ -48,20 +48,6 @@ Parameters:
</div>
{{/each}}
</div>
{{else if (not ../hideLabels)}}
<div class="item-labels">
<div class="label">
{{#each this._getLabels as |label|}}
{{ifThen label.value label.value label}}
{{#each label.icons as |icon|}}
<i class="fa-solid {{icon}}"></i>
{{/each}}
{{#if (not @last)}}
<span>-</span>
{{/if}}
{{/each}}
</div>
</div>
{{/if}}
{{/with}}
{{!--Tags End --}}

85
templates/sheets/global/partials/inventory-item-compact.hbs Normal file
View file

@ -0,0 +1,85 @@
<li class="inventory-item inventory-item-compact" data-item-id="{{item.id}}" {{#if (or (eq type 'action' ) (eq type 'attack' ))}}
data-action-id="{{item.id}}" {{/if}} data-item-uuid="{{item.uuid}}" data-type="{{type}}" data-no-compendium-edit="{{noCompendiumEdit}}" draggable="true">
{{!-- Image --}}
<div class="img-portait" data-action='{{ifThen (or (hasProperty item "use") (eq type "attack")) "useItem" (ifThen
(hasProperty item "toChat" ) "toChat" "editDoc" ) }}' {{#unless hideTooltip}} {{#if (eq type 'attack' )}}
data-tooltip="#attack#{{item.actor.uuid}}" {{else}} data-tooltip="#item#{{item.uuid}}" {{/if}} {{/unless}}>
<img src="{{item.img}}" class="item-img {{#if isActor}}actor-img{{/if}}" />
{{#if (or item.system.actionsList.size item.system.actionsList.length item.actionType)}}
{{#if @root.isNPC}}
<img class="roll-img d20" src="systems/daggerheart/assets/icons/dice/default/d20.svg" alt="d20">
{{else}}
<img class="roll-img duality" src="systems/daggerheart/assets/icons/dice/duality/DualityBW.svg" alt="2d12">
{{/if}}
{{/if}}
</div>
{{!-- Item Name --}}
<span class="item-name">{{localize item.name}}</span>
{{!-- Tags Start --}}
{{#with item}}
<div class="item-labels">
<div class="label">
{{#each this._getLabels as |label|}}
{{ifThen label.value label.value label}}
{{#each label.icons as |icon|}}
<i class="fa-solid {{icon}}"></i>
{{/each}}
{{#if (not @last)}}
<span>-</span>
{{/if}}
{{/each}}
</div>
</div>
{{/with}}
{{!--Tags End --}}
{{!-- Controls --}}
{{#unless hideControls}}
<div class="controls">
{{#if isActor}}
<a data-action="editDoc" data-tooltip="DAGGERHEART.UI.Tooltip.openActorWorld">
<i class="fa-solid fa-fw fa-globe"></i>
</a>
{{#if (eq type 'adversary')}}
<a data-action='deleteAdversary' data-category="{{categoryAdversary}}" data-tooltip="CONTROLS.CommonDelete">
<i class='fas fa-fw fa-trash'></i>
</a>
{{/if}}
{{else}}
{{#if (eq type 'weapon')}}
<a class="{{#unless item.system.equipped}}unequipped{{/unless}}" data-action="toggleEquipItem"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.system.equipped 'unequip' 'equip' }}">
<i class="fa-solid fa-fw fa-hands"></i>
</a>
{{else if (eq type 'armor')}}
<a class="{{#unless item.system.equipped}}unequipped{{/unless}}" data-action="toggleEquipItem"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.system.equipped 'unequip' 'equip' }}">
<i class="fa-solid fa-fw fa-shield"></i>
</a>
{{else if (eq type 'domainCard')}}
<a data-action="toggleVault"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.system.inVault 'sendToLoadout' 'sendToVault' }}">
<i class="fa-solid fa-fw {{ifThen item.system.inVault 'fa-arrow-up' 'fa-arrow-down'}}"></i>
</a>
{{else if (eq type 'effect')}}
<a data-action="toggleEffect"
data-tooltip="DAGGERHEART.UI.Tooltip.{{ifThen item.disabled 'enableEffect' 'disableEffect' }}">
<i class="fa-solid fa-fw {{ifThen item.disabled 'fa-toggle-off' 'fa-toggle-on'}}"></i>
</a>
{{/if}}
{{#if (hasProperty item "toChat")}}
<a data-action="toChat" data-tooltip="DAGGERHEART.UI.Tooltip.sendToChat">
<i class="fa-regular fa-fw fa-message"></i>
</a>
{{/if}}
{{#unless hideContextMenu}}
<a data-action="triggerContextMenu" data-tooltip="DAGGERHEART.UI.Tooltip.moreOptions">
<i class="fa-solid fa-ellipsis-vertical"></i>
</a>
{{/unless}}
{{/if}}
</div>
{{/unless}}
</li>