cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-07-22 02:19:54 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Refactor styling of sidebar resources (#2050)
Some checks are pending
Project CI / build (24.x) (push) Waiting to run
Details

Browse source
This commit is contained in:
Carlos Fernandez 2026-07-01 07:39:16 -04:00 • committed by GitHub
parent 70388dbd73
commit 1af86d87bb
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
10 changed files with 767 additions and 1039 deletions
Download patch file Download diff file Expand all files Collapse all files

7
module/applications/sheets/actors/adversary.mjs
View file

@ -58,12 +58,13 @@ export default class AdversarySheet extends DHBaseActorSheet {
template: 'systems/daggerheart/templates/sheets/actors/adversary/features.hbs', template: 'systems/daggerheart/templates/sheets/actors/adversary/features.hbs',
scrollable: ['.feature-section'] scrollable: ['.feature-section']
}, },
notes: {
template: 'systems/daggerheart/templates/sheets/actors/adversary/notes.hbs'
},
effects: { effects: {
template: 'systems/daggerheart/templates/sheets/actors/adversary/effects.hbs', template: 'systems/daggerheart/templates/sheets/actors/adversary/effects.hbs',
scrollable: ['.effects-sections'] scrollable: ['.effects-sections']
},
notes: {
template: 'systems/daggerheart/templates/sheets/actors/adversary/notes.hbs',
scrollable: ['.editor-content']
} }
}; };

6
module/applications/sheets/actors/character.mjs
View file

@ -1057,7 +1057,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
direction: 'DOWN' direction: 'DOWN'
}); });
html.querySelectorAll('.armor-slot').forEach(element => { html.querySelectorAll('.armor .slot').forEach(element => {
element.addEventListener('click', CharacterSheet.armorSourcePipUpdate); element.addEventListener('click', CharacterSheet.armorSourcePipUpdate);
}); });
} }
@ -1072,7 +1072,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
/** Update specific armor source */ /** Update specific armor source */
static async armorSourcePipUpdate(event) { static async armorSourcePipUpdate(event) {
const target = event.target.closest('.armor-slot'); const target = event.target.closest('.slot');
const { uuid, value } = target.dataset; const { uuid, value } = target.dataset;
const document = await foundry.utils.fromUuid(uuid); const document = await foundry.utils.fromUuid(uuid);
@ -1100,7 +1100,7 @@ export default class CharacterSheet extends DHBaseActorSheet {
} }
const container = target.closest('.slot-bar'); const container = target.closest('.slot-bar');
for (const armorSlot of container.querySelectorAll('.armor-slot i')) { for (const armorSlot of container.querySelectorAll('.armor .slot i')) {
const index = Number.parseInt(armorSlot.dataset.index); const index = Number.parseInt(armorSlot.dataset.index);
if (decreasing && index >= newCurrent) { if (decreasing && index >= newCurrent) {
armorSlot.classList.remove('fa-shield'); armorSlot.classList.remove('fa-shield');

113
styles/less/global/resource-bar.less
View file

@ -9,61 +9,30 @@
} }
}); });
.status-bar { /** Pips styling, can exist standalone even without a slot-value */
display: flex;
justify-content: center;
position: relative;
width: 120px;
height: 40px;
.status-label {
position: relative;
top: 40px;
height: 22px;
width: 79px;
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
}
}
.slot-value {
position: absolute;
display: flex;
flex-direction: column;
padding: 0 5px;
font-size: 1.5rem;
align-items: center;
width: 140px;
height: 40px;
justify-content: center;
text-align: center;
z-index: 2;
color: @beige;
.slot-bar { .slot-bar {
display: flex; display: flex;
flex-wrap: wrap; gap: 4px;
gap: 5px;
padding: 5px; padding: 5px;
border: 1px solid @color-border; border: 1px solid @color-border;
border-radius: 6px; border-radius: 6px;
z-index: 1; z-index: 1;
color: @color-text-emphatic; color: @color-text-emphatic;
width: fit-content; width: fit-content;
min-height: 22px;
flex-wrap: wrap;
.slot { .slot {
transition: all 0.3s ease;
cursor: pointer;
}
.slot:not(:has(i)) {
width: 15px; width: 15px;
height: 10px; height: 10px;
border: 1px solid @color-border; border: 1px solid @color-border;
background: light-dark(@dark-blue-10, @golden-10); background: light-dark(@dark-blue-10, @golden-10);
border-radius: 3px; border-radius: 3px;
transition: all 0.3s ease;
cursor: pointer;
&.large { &.large {
width: 20px; width: 20px;
@ -74,11 +43,30 @@
} }
} }
&.armor .slot {
font-size: var(--font-size-12);
.fa-shield-halved {
color: light-dark(@dark-blue-40, @golden-40);
}
}
.empty-slot { .empty-slot {
width: 15px; width: 15px;
height: 10px; height: 10px;
} }
} }
.slot-value {
display: flex;
flex-direction: column;
padding: 0 5px;
font-size: 1.5rem;
align-items: center;
justify-content: center;
text-align: center;
z-index: 2;
color: @beige;
.slot-label { .slot-label {
display: flex; display: flex;
align-items: center; align-items: center;
@ -101,19 +89,29 @@
} }
} }
.status-bar {
display: flex;
flex-direction: column;
align-items: center;
position: relative;
.status-value { .status-value {
position: absolute; position: relative;
display: flex; display: flex;
padding: 0 5px; padding: 0 5px;
font-size: 1.5rem; font-size: 1.5rem;
align-items: center; align-items: center;
width: 140px; width: 100px;
height: 40px; height: 40px;
justify-content: center; justify-content: center;
text-align: center; text-align: center;
z-index: 2; z-index: 2;
color: @beige; color: @beige;
> * {
z-index: 1;
}
input[type='number'] { input[type='number'] {
background: transparent; background: transparent;
font-size: 1.5rem; font-size: 1.5rem;
@ -146,11 +144,11 @@
.progress-bar { .progress-bar {
position: absolute; position: absolute;
appearance: none; appearance: none;
width: 100px; width: 100%;
height: 40px; height: 100%;
border: 1px solid @color-border; border: 1px solid @color-border;
border-radius: 6px; border-radius: 6px;
z-index: 1; z-index: 0;
background: @dark-blue; background: @dark-blue;
&::-webkit-progress-bar { &::-webkit-progress-bar {
@ -175,4 +173,29 @@
border-radius: 6px; border-radius: 6px;
} }
} }
.status-label {
position: relative;
height: 22px;
width: 79px;
background: light-dark(@dark-blue, @golden);
&.pointy {
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
margin-bottom: -2px; // compensate for pointy bottom so spacing feels more "right"
}
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
}
}
}
// Overrides for sidebar usage.
aside[data-application-part="sidebar"] .resources-section .slot-bar {
display: grid;
grid-template-columns: repeat(6, min-content);
grid-auto-flow: row;
} }

103
styles/less/sheets/actors/adversary/sidebar.less
View file

@ -106,7 +106,7 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
top: -20px; top: -20px;
gap: 16px; gap: 10px;
margin-bottom: -10px; margin-bottom: -10px;
&.pip-display { &.pip-display {
@ -120,105 +120,6 @@
.resources-section { .resources-section {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin-bottom: 16px;
.status-bar {
display: flex;
justify-content: center;
position: relative;
width: 100px;
height: 40px;
.status-label {
position: relative;
top: 40px;
height: 22px;
width: 79px;
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
}
}
.status-value {
position: absolute;
display: flex;
padding: 0 6px;
font-size: 1.5rem;
align-items: center;
width: 100px;
height: 40px;
justify-content: center;
text-align: center;
z-index: 2;
color: @beige;
input[type='number'] {
background: transparent;
font-size: 1.5rem;
width: 40px;
height: 30px;
text-align: center;
border: none;
outline: 2px solid transparent;
color: @beige;
&.bar-input {
padding: 0;
color: @beige;
backdrop-filter: none;
background: transparent;
transition: all 0.3s ease;
&:hover,
&:focus {
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9.5px);
}
}
}
.bar-label {
width: 40px;
}
}
.progress-bar {
position: absolute;
appearance: none;
width: 100px;
height: 40px;
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: @dark-blue;
&::-webkit-progress-bar {
border: none;
background: @dark-blue;
border-radius: 6px;
}
&::-webkit-progress-value {
background: @gradient-hp;
border-radius: 6px;
}
&.stress-color::-webkit-progress-value {
background: @gradient-stress;
border-radius: 6px;
}
&::-moz-progress-bar {
background: @gradient-hp;
border-radius: 6px;
}
&.stress-color::-moz-progress-bar {
background: @gradient-stress;
border-radius: 6px;
}
}
}
} }
.status-section { .status-section {
@ -256,7 +157,7 @@
.status-label { .status-label {
padding: 2px 10px; padding: 2px 10px;
width: 100%; width: 100%;
border-radius: 3px; border-radius: 0 0 3px 3px;
background: light-dark(@dark-blue, @golden); background: light-dark(@dark-blue, @golden);
h4 { h4 {

181
styles/less/sheets/actors/character/sidebar.less
View file

@ -89,113 +89,13 @@
.resources-section { .resources-section {
justify-content: space-around; justify-content: space-around;
margin: 8px 2px 8px 2px; margin: 8px 2px 0 2px;
} }
} }
.resources-section { .resources-section {
display: flex; display: flex;
justify-content: space-evenly; justify-content: space-evenly;
margin-bottom: 20px;
.status-bar {
display: flex;
justify-content: center;
position: relative;
width: 120px;
height: 40px;
.status-label {
position: relative;
top: 40px;
height: 22px;
width: 79px;
clip-path: path('M0 0H79L74 16.5L39 22L4 16.5L0 0Z');
background: light-dark(@dark-blue, @golden);
h4 {
font-weight: bold;
text-align: center;
line-height: 18px;
color: light-dark(@beige, @dark-blue);
}
}
.status-value {
position: absolute;
display: flex;
padding: 0 5px;
font-size: 1.5rem;
align-items: center;
width: 140px;
height: 40px;
justify-content: center;
text-align: center;
z-index: 2;
color: @beige;
input[type='number'] {
background: transparent;
font-size: 1.5rem;
width: 40px;
height: 30px;
text-align: center;
border: none;
outline: 2px solid transparent;
color: @beige;
&.bar-input {
padding: 0;
color: @beige;
backdrop-filter: none;
background: transparent;
transition: all 0.3s ease;
&:hover,
&:focus {
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9.5px);
}
}
}
.bar-label {
width: 40px;
}
}
.progress-bar {
position: absolute;
appearance: none;
width: 100px;
height: 40px;
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: @dark-blue;
&::-webkit-progress-bar {
border: none;
background: @dark-blue;
border-radius: 6px;
}
&::-webkit-progress-value {
background: @gradient-hp;
border-radius: 6px;
}
&.stress-color::-webkit-progress-value {
background: @gradient-stress;
border-radius: 6px;
}
&::-moz-progress-bar {
background: @gradient-hp;
border-radius: 6px;
}
&.stress-color::-moz-progress-bar {
background: @gradient-stress;
border-radius: 6px;
}
}
}
} }
.status-section { .status-section {
@ -245,21 +145,21 @@
.status-bar.armor-slots { .status-bar.armor-slots {
display: flex; display: flex;
justify-content: center;
position: relative;
width: 95px; width: 95px;
height: 30px;
white-space: nowrap; white-space: nowrap;
.status-label {
height: 30px;
}
.status-label { .status-label {
padding: 2px 2px; padding: 2px 2px;
position: relative; position: relative;
top: 30px;
height: 22px; height: 22px;
width: 95px; width: 95px;
border-radius: 3px; border-radius: 3px;
background: light-dark(@dark-blue, @golden); background: light-dark(@dark-blue, @golden);
clip-path: none;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@ -291,40 +191,16 @@
} }
} }
.slot-value { .slot-value {
position: absolute;
display: flex;
padding: 0 5px;
font-size: 1.2rem; font-size: 1.2rem;
align-items: center;
width: 80px; width: 80px;
height: 30px; height: 30px;
justify-content: center;
text-align: center;
z-index: 2;
color: light-dark(@dark-blue, @beige); color: light-dark(@dark-blue, @beige);
flex-direction: column; flex-direction: column;
.slot-bar { .slot-bar {
display: flex;
flex-wrap: wrap;
gap: 4px;
padding: 5px;
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: @dark-blue; background: @dark-blue;
justify-content: center; justify-content: center;
color: @color-text-emphatic; border-bottom: none;
.armor-slot {
cursor: pointer;
transition: all 0.3s ease;
font-size: var(--font-size-12);
.fa-shield-halved {
color: light-dark(@dark-blue-40, @golden-40);
}
}
} }
.slot-label { .slot-label {
display: flex; display: flex;
@ -364,41 +240,21 @@
} }
} }
.status-value { .status-value {
position: absolute;
display: flex;
padding: 0 6px; padding: 0 6px;
font-size: 1.2rem; font-size: 1.2rem;
align-items: center;
width: 80px; width: 80px;
height: 30px; height: 30px;
justify-content: center; justify-content: center;
text-align: center;
z-index: 2;
color: light-dark(@dark-blue, @beige); color: light-dark(@dark-blue, @beige);
border: 1px solid @color-border;
border-bottom: none;
border-radius: 6px 6px 0 0;
input[type='number'] { input[type='number'] {
background: transparent;
font-size: 1.2rem; font-size: 1.2rem;
width: 30px; width: 30px;
height: 20px; height: 20px;
text-align: center;
border: none;
outline: 2px solid transparent;
color: light-dark(@dark-blue, @beige); color: light-dark(@dark-blue, @beige);
&.bar-input { &.bar-input {
padding: 0;
color: light-dark(@dark-blue, @beige); color: light-dark(@dark-blue, @beige);
backdrop-filter: none;
background: transparent;
&:hover,
&:focus {
background: @semi-transparent-dark-blue;
backdrop-filter: blur(9.5px);
}
} }
} }
@ -407,32 +263,9 @@
} }
} }
.progress-bar { .progress-bar {
position: absolute;
appearance: none;
width: 80px;
height: 30px;
border: 1px solid @color-border;
border-radius: 6px;
z-index: 1;
background: light-dark(transparent, @dark-blue); background: light-dark(transparent, @dark-blue);
border-bottom: none; border-bottom: none;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
&::-webkit-progress-bar {
border: none;
background: light-dark(transparent, @dark-blue);
}
&::-webkit-progress-value {
background: @gradient-stress;
}
&.stress-color::-webkit-progress-value {
background: @gradient-stress;
}
&::-moz-progress-bar {
background: @gradient-stress;
}
&.stress-color::-moz-progress-bar {
background: @gradient-stress;
}
} }
} }

30
styles/less/sheets/actors/party/party-members.less
View file

@ -206,42 +206,12 @@
} }
.slot-bar { .slot-bar {
display: flex;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 4px;
background-color: light-dark(@dark-blue-10, @dark-blue); background-color: light-dark(@dark-blue-10, @dark-blue);
color: @color-text-emphatic;
padding: 2px 5px; padding: 2px 5px;
border: 1px solid @color-border;
border-radius: 0 6px 6px 0; border-radius: 0 6px 6px 0;
width: fit-content; width: fit-content;
min-height: 22px;
.armor-slot {
cursor: pointer;
transition: all 0.3s ease;
font-size: var(--font-size-12);
.fa-shield-halved {
color: light-dark(@dark-blue-40, @golden-40);
}
}
.slot {
width: 16px;
height: 10px;
border: 1px solid @color-border;
background: light-dark(@dark-blue-10, @golden-10);
border-radius: 3px;
transition: all 0.3s ease;
cursor: pointer;
&.filled {
background: light-dark(@dark-blue, @golden);
}
}
} }
} }
} }

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

@ -23,9 +23,9 @@
<div class="status-bar armor-slots"> <div class="status-bar armor-slots">
{{#if useResourcePips}} {{#if useResourcePips}}
<div class='slot-value'> <div class='slot-value'>
<div class="slot-bar"> <div class="slot-bar armor">
{{#times document.system.armorScore.max}} {{#times document.system.armorScore.max}}
<a class='armor-slot' data-action='toggleArmor' data-value="{{add this 1}}"> <a class="slot" data-action="toggleArmor" data-value="{{add this 1}}">
{{#if (gte ../document.system.armorScore.value (add this 1))}} {{#if (gte ../document.system.armorScore.value (add this 1))}}
<i class="fa-solid fa-shield"></i> <i class="fa-solid fa-shield"></i>
{{else}} {{else}}
@ -44,15 +44,15 @@
</div> </div>
{{else}} {{else}}
<div class='status-value'> <div class='status-value'>
<input class="bar-input armor-marks-input" value="{{document.system.armorScore.value}}" type="number" id="{{document.uuid}}-armor-slots">
<span>/</span>
<span class="bar-label">{{document.system.armorScore.max}}</span>
</div>
<progress <progress
class='progress-bar stress-color' class='progress-bar stress-color'
value='{{document.system.armorScore.value}}' value='{{document.system.armorScore.value}}'
max='{{document.system.armorScore.max}}' max='{{document.system.armorScore.max}}'
></progress> ></progress>
<input class="bar-input armor-marks-input" value="{{document.system.armorScore.value}}" type="number" id="{{document.uuid}}-armor-slots">
<span>/</span>
<span class="bar-label">{{document.system.armorScore.max}}</span>
</div>
<a class="status-label" data-action="toggleArmorMangement" {{disabled (not @root.editable)}}> <a class="status-label" data-action="toggleArmorMangement" {{disabled (not @root.editable)}}>
<h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4> <h4>{{localize "DAGGERHEART.GENERAL.armorSlots"}}</h4>
{{#if @root.editable}}<i class="fa-solid fa-gear" inert></i>{{/if}} {{#if @root.editable}}<i class="fa-solid fa-gear" inert></i>{{/if}}

4
templates/sheets/actors/party/party-members.hbs
View file

@ -135,9 +135,9 @@
<span class="max">{{member.armorScore.max}}</span> <span class="max">{{member.armorScore.max}}</span>
</span> </span>
</div> </div>
<div class="slot-bar"> <div class="slot-bar armor">
{{#times member.armorScore.max}} {{#times member.armorScore.max}}
<a class='armor-slot' data-action='toggleArmorSlot' data-actor-id="{{member.uuid}}" data-value="{{add this 1}}"> <a class="slot" data-action="toggleArmorSlot" data-actor-id="{{member.uuid}}" data-value="{{add this 1}}">
{{#if (gte member.armorScore.value (add this 1))}} {{#if (gte member.armorScore.value (add this 1))}}
<i class="fa-solid fa-shield"></i> <i class="fa-solid fa-shield"></i>
{{else}} {{else}}

18
templates/sheets/global/partials/resource-bar.hbs
View file

@ -1,6 +1,5 @@
<div class="status-bar">
{{#if useResourcePips}} {{#if useResourcePips}}
<div class='slot-value'> <div class="slot-value">
<div class="slot-bar"> <div class="slot-bar">
{{#times resource.max}} {{#times resource.max}}
<span class='slot {{#if (gte ../resource.value (add this 1))}}filled{{/if}} {{#if ../largePips}}large{{/if}}' data-action="{{../action}}" data-value="{{add this 1}}"> <span class='slot {{#if (gte ../resource.value (add this 1))}}filled{{/if}} {{#if ../largePips}}large{{/if}}' data-action="{{../action}}" data-value="{{add this 1}}">
@ -17,19 +16,20 @@
</div> </div>
</div> </div>
{{else}} {{else}}
<div class="status-bar">
<div class='status-value'> <div class='status-value'>
<input class="bar-input" name="{{key}}" min="0" max='{{resource.max}}'
value="{{resource.value}}" type="number">
<span>/</span>
<span class="bar-label">{{resource.max}}</span>
</div>
<progress <progress
class='progress-bar' class='progress-bar'
max='{{resource.max}}' max='{{resource.max}}'
value='{{resource.value}}' value='{{resource.value}}'
></progress> ></progress>
<div class="status-label"> <input class="bar-input" name="{{key}}" min="0" max='{{resource.max}}'
value="{{resource.value}}" type="number">
<span>/</span>
<span class="bar-label">{{resource.max}}</span>
</div>
<div class="status-label pointy">
<h4>{{localize label}}</h4> <h4>{{localize label}}</h4>
</div> </div>
{{/if}}
</div> </div>
{{/if}}

4
templates/ui/tooltip/armorManagement.hbs
View file

@ -3,9 +3,9 @@
{{#each sources as |source|}} {{#each sources as |source|}}
<div class="armor-source-container"> <div class="armor-source-container">
<p class="armor-source-label">{{source.name}}</p> <p class="armor-source-label">{{source.name}}</p>
<div class="slot-bar"> <div class="slot-bar armor">
{{#times source.max}} {{#times source.max}}
<a class='armor-slot' data-value="{{add this 1}}" data-uuid="{{source.uuid}}"> <a class="slot" data-value="{{add this 1}}" data-uuid="{{source.uuid}}">
{{#if (gte ../current (add this 1))}} {{#if (gte ../current (add this 1))}}
<i class="fa-solid fa-shield" data-index="{{this}}"></i> <i class="fa-solid fa-shield" data-index="{{this}}"></i>
{{else}} {{else}}