Improve sidebar appearance when labels are long (#1238)

module/systemRegistration/handlebars.mjs

@@ -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'

styles/less/global/inventory-item.less

@@ -14,7 +14,7 @@
 }
 
 .appTheme({}, {
-    .inventory-item-header .img-portait .roll-img {
+    .inventory-item .img-portait .roll-img {
         filter: invert(1);
     }
 });
@@ -25,8 +25,7 @@
         list-style-type: none;
 
         &:not(.single-img) {
-            .inventory-item-header:hover {
+            .img-portait:has(.roll-img):hover {
-                .img-portait:has(.roll-img) {
                 .roll-img {
                     opacity: 1;
                 }
@@ -34,7 +33,6 @@
                     opacity: 0;
                 }
             }
-            }
 
             &:hover {
                 .inventory-item-header .item-label .item-name .expanded-icon {
@@ -68,18 +66,15 @@
             }
         }
 
-        .inventory-item-header {
+        .inventory-item-header,
-            display: flex;
+        &.inventory-item-compact {
-            align-items: center;
-            gap: 10px;
-            cursor: pointer;
-            border-radius: 3px;
-
             .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 {

templates/sheets/actors/adversary/sidebar.hbs

@@ -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>

templates/sheets/actors/character/sidebar.hbs

@@ -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}}

templates/sheets/actors/companion/details.hbs

@@ -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>

templates/sheets/global/partials/inventory-item-V2.hbs

@@ -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 --}}

templates/sheets/global/partials/inventory-item-compact.hbs

@@ -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>