cosmo/daggerheart
1
0
Fork 0
mirror of https://github.com/Foundryborne/daggerheart.git synced 2026-01-17 23:49:02 +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,
actor: { name: this.actor.name, img: this.actor.img },
author: this.author,
author: game.users.get(game.user.id),
speaker: cls.getSpeaker(),
title: game.i18n.localize(this.selectedMove.name),
img: this.selectedMove.img,

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

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

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

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

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

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

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

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