cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-18 07:59:03 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

add colapsable descriptions in chat messages

Browse source
This commit is contained in:
moliloo 2025-07-29 00:56:42 -03:00
parent 74ccd79390
commit 74f7f1f158
8 changed files with 163 additions and 83 deletions
Download patch file Download diff file Expand all files Collapse all files

2
module/applications/dialogs/deathMove.mjs
View file

@ -54,7 +54,7 @@ export default class DhpDeathMove extends HandlebarsApplicationMixin(Application
{ {
player: this.actor.name, player: this.actor.name,
actor: { name: this.actor.name, img: this.actor.img }, actor: { name: this.actor.name, img: this.actor.img },
author: this.author, author: game.users.get(game.user.id),
speaker: cls.getSpeaker(), speaker: cls.getSpeaker(),
title: game.i18n.localize(this.selectedMove.name), title: game.i18n.localize(this.selectedMove.name),
img: this.selectedMove.img, img: this.selectedMove.img,

85
styles/less/ui/chat/ability-use.less
View file

@ -15,40 +15,71 @@
object-fit: cover; object-fit: cover;
} }
.domain-card-header { details[open] {
display: flex; .fa-chevron-down {
flex-direction: column; transform: rotate(180deg);
width: 100%; transition: all 0.3s ease;
margin: 8px 8px 0; }
padding-bottom: 5px; }
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
.title { .domain-card-move {
font-size: 20px; width: 100%;
color: @golden;
font-family: @font-subtitle; .fa-chevron-down {
margin: 0; transition: all 0.3s ease;
margin-left: auto;
} }
.tags { .domain-card-header {
display: flex; display: flex;
gap: 10px; flex-direction: row;
align-items: center;
margin: 8px;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
.tag { &:hover {
background: light-dark(@dark-blue-10, @golden-10);
cursor: pointer;
transition: all 0.3s ease;
}
.domain-label {
display: flex; display: flex;
flex-direction: row; flex-direction: column;
justify-content: center; width: 100%;
align-items: center; padding-bottom: 5px;
padding: 3px 5px; width: -webkit-fill-available;
font-size: 12px; gap: 5px;
font-family: @font-body;
background: light-dark(@dark-15, @beige-15); .title {
border: 1px solid light-dark(@dark, @beige); font-size: 20px;
color: light-dark(@dark, @beige); color: @golden;
border-radius: 3px; font-family: @font-subtitle;
margin: 0;
}
.tags {
display: flex;
gap: 10px;
.tag {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 3px 5px;
font-size: 12px;
font-family: @font-body;
background: light-dark(@dark-15, @beige-15);
border: 1px solid light-dark(@dark, @beige);
color: light-dark(@dark, @beige);
border-radius: 3px;
}
}
} }
} }
} }

74
styles/less/ui/chat/action.less
View file

@ -8,40 +8,62 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
.action-section { details[open] {
display: flex; .fa-chevron-down {
flex-direction: row; transform: rotate(180deg);
width: 100%; transition: all 0.3s ease;
margin: 8px 8px 0; }
padding-bottom: 5px; }
width: -webkit-fill-available;
gap: 5px;
border-bottom: 1px solid @golden;
.action-img { .action-move {
width: 40px; width: 100%;
height: 40px;
border-radius: 3px; .fa-chevron-down {
object-fit: cover; transition: all 0.3s ease;
margin-left: auto;
} }
.action-header { .action-section {
display: flex; display: flex;
flex-direction: column; flex-direction: row;
align-items: center;
margin: 8px 8px 0;
padding-bottom: 5px;
width: -webkit-fill-available;
gap: 5px; gap: 5px;
border-bottom: 1px solid @golden;
.title { &:hover {
font-size: 20px; background: light-dark(@dark-blue-10, @golden-10);
color: @golden; cursor: pointer;
font-family: @font-subtitle; transition: all 0.3s ease;
margin: 0;
} }
.label { .action-img {
font-size: 12px; width: 40px;
color: @beige; height: 40px;
font-family: @font-body; border-radius: 3px;
margin: 0; object-fit: cover;
}
.action-header {
display: flex;
flex-direction: column;
gap: 5px;
.title {
font-size: 20px;
color: @golden;
font-family: @font-subtitle;
margin: 0;
}
.label {
font-size: 12px;
color: @beige;
font-family: @font-body;
margin: 0;
}
} }
} }
} }

19
styles/less/ui/chat/downtime.less
View file

@ -8,10 +8,23 @@
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
details[open] {
.fa-chevron-down {
transform: rotate(180deg);
transition: all 0.3s ease;
}
}
.downtime-moves-list { .downtime-moves-list {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 5px; gap: 5px;
width: 100%;
.fa-chevron-down {
transition: all 0.3s ease;
margin-left: auto;
}
.downtime-move { .downtime-move {
width: 100%; width: 100%;
@ -25,6 +38,12 @@
padding-bottom: 5px; padding-bottom: 5px;
width: -webkit-fill-available; width: -webkit-fill-available;
&:hover {
background: light-dark(@dark-blue-10, @golden-10);
cursor: pointer;
transition: all 0.3s ease;
}
.downtime-image { .downtime-image {
width: 40px; width: 40px;
height: 40px; height: 40px;

23
templates/ui/chat/ability-use.hbs
View file

@ -1,14 +1,19 @@
<div class="daggerheart chat domain-card"> <div class="daggerheart chat domain-card">
<img class="card-img" src="{{item.img}}" /> <img class="card-img" src="{{item.img}}" />
<div class="domain-card-header"> <details class="domain-card-move">
<h2 class="title">{{item.name}}</h2> <summary class="domain-card-header">
<ul class="tags"> <div class="domain-label">
{{#each item.tags as |tag|}} <h2 class="title">{{item.name}}</h2>
<li class="tag">{{tag}}</li> <ul class="tags">
{{/each}} {{#each item.tags as |tag|}}
</ul> <li class="tag">{{tag}}</li>
</div> {{/each}}
<div class="description">{{{description}}}</div> </ul>
</div>
<i class="fa-solid fa-chevron-down"></i>
</summary>
<div class="description">{{{description}}}</div>
</details>
<footer class="ability-card-footer"> <footer class="ability-card-footer">
{{#each actions as |action index|}} {{#each actions as |action index|}}
<button class="ability-use-button" data-index="{{index}}"> <button class="ability-use-button" data-index="{{index}}">

19
templates/ui/chat/action.hbs
View file

@ -1,12 +1,13 @@
<div class="daggerheart chat action"> <div class="daggerheart chat action">
<div class="action-section"> <details class="action-move">
<img class="action-img" src="{{action.img}}" /> <summary class="action-section">
<div class="action-header"> <img class="action-img" src="{{action.img}}" />
<h2 class="title">{{action.name}}</h2> <div class="action-header">
<span class="label">{{itemOrigin.name}}</span> <h2 class="title">{{action.name}}</h2>
</div> <span class="label">{{itemOrigin.name}}</span>
</div> </div>
{{#if description}} <i class="fa-solid fa-chevron-down"></i>
</summary>
<div class="description">{{{description}}}</div> <div class="description">{{{description}}}</div>
{{/if}} </details>
</div> </div>

9
templates/ui/chat/deathMove.hbs
View file

@ -1,16 +1,17 @@
<div class="daggerheart chat downtime"> <div class="daggerheart chat downtime">
<ul class="downtime-moves-list"> <ul class="downtime-moves-list">
<li class="downtime-move"> <details class="downtime-move">
<div class="downtime-label"> <summary class="downtime-label">
<img class="downtime-image" src="{{this.img}}" /> <img class="downtime-image" src="{{this.img}}" />
<div class="header-label"> <div class="header-label">
<h2 class="title">{{this.title}}</h2> <h2 class="title">{{this.title}}</h2>
<span class="label">{{localize 'DAGGERHEART.UI.Chat.deathMove.title'}}</span> <span class="label">{{localize 'DAGGERHEART.UI.Chat.deathMove.title'}}</span>
</div> </div>
</div> <i class="fa-solid fa-chevron-down"></i>
</summary>
<div class="description"> <div class="description">
{{{this.description}}} {{{this.description}}}
</div> </div>
</li> </details>
</ul> </ul>
</div> </div>

15
templates/ui/chat/downtime.hbs
View file

@ -1,21 +1,22 @@
<div class="daggerheart chat downtime"> <div class="daggerheart chat downtime">
<ul class="downtime-moves-list"> <ul class="downtime-moves-list">
{{#each moves as | move index |}} {{#each moves as | move index |}}
<li class="downtime-move"> <details class="downtime-move">
<div class="downtime-label"> <summary class="downtime-label">
<img class="downtime-image" src="{{move.img}}" /> <img class="downtime-image" src="{{move.img}}" />
<div class="header-label"> <div class="header-label">
<h2 class="title">{{move.name}}</h2> <h2 class="title">{{move.name}}</h2>
<span class="label">{{localize 'DAGGERHEART.GENERAL.Bonuses.rest.downtimeAction'}}</span> <span class="label">{{localize 'DAGGERHEART.GENERAL.Bonuses.rest.downtimeAction'}}</span>
</div> </div>
</div> <i class="fa-solid fa-chevron-down"></i>
</summary>
<div class="description"> <div class="description">
{{{move.description}}} {{{move.description}}}
</div> </div>
{{#each move.actions as | action index |}} </details>
<button class="action-use-button" data-move-index="{{@../key}}" data-action-index="{{index}}">{{localize action.name}}</button> {{#each move.actions as | action index |}}
{{/each}} <button class="action-use-button" data-move-index="{{@../key}}" data-action-index="{{index}}">{{localize action.name}}</button>
</li> {{/each}}
{{/each}} {{/each}}
</ul> </ul>
</div> </div>