mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-01-16 05:31:07 +01:00
style countdown interface, application and ownership dialog
This commit is contained in:
parent
36c952faff
commit
f7f70f54bb
8 changed files with 71 additions and 35 deletions
|
|
@ -11,7 +11,10 @@ export default class OwnershipSelection extends HandlebarsApplicationMixin(Appli
|
||||||
|
|
||||||
static DEFAULT_OPTIONS = {
|
static DEFAULT_OPTIONS = {
|
||||||
tag: 'form',
|
tag: 'form',
|
||||||
classes: ['daggerheart', 'views', 'ownership-selection'],
|
classes: ['daggerheart', 'views', 'dialog', 'dh-style', 'ownership-selection'],
|
||||||
|
window: {
|
||||||
|
icon: 'fa-solid fa-users'
|
||||||
|
},
|
||||||
position: {
|
position: {
|
||||||
width: 600,
|
width: 600,
|
||||||
height: 'auto'
|
height: 'auto'
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,7 @@ export default class CountdownEdit extends HandlebarsApplicationMixin(Applicatio
|
||||||
}
|
}
|
||||||
|
|
||||||
static DEFAULT_OPTIONS = {
|
static DEFAULT_OPTIONS = {
|
||||||
classes: ['daggerheart', 'dh-style', 'countdown-edit'],
|
classes: ['daggerheart', 'dialog', 'dh-style', 'countdown-edit'],
|
||||||
tag: 'form',
|
tag: 'form',
|
||||||
position: { width: 600 },
|
position: { width: 600 },
|
||||||
window: { icon: 'fa-solid fa-clock-rotate-left' },
|
window: { icon: 'fa-solid fa-clock-rotate-left' },
|
||||||
|
|
@ -142,18 +142,20 @@ export default class CountdownEdit extends HandlebarsApplicationMixin(Applicatio
|
||||||
this.updateSetting({ [`countdowns.${button.dataset.countdownId}`]: data });
|
this.updateSetting({ [`countdowns.${button.dataset.countdownId}`]: data });
|
||||||
}
|
}
|
||||||
|
|
||||||
static async #removeCountdown(_, button) {
|
static async #removeCountdown(event, button) {
|
||||||
const { countdownId } = button.dataset;
|
const { countdownId } = button.dataset;
|
||||||
|
|
||||||
const confirmed = await foundry.applications.api.DialogV2.confirm({
|
if (!event.shiftKey) {
|
||||||
window: {
|
const confirmed = await foundry.applications.api.DialogV2.confirm({
|
||||||
title: game.i18n.localize('DAGGERHEART.APPLICATIONS.CountdownEdit.removeCountdownTitle')
|
window: {
|
||||||
},
|
title: game.i18n.localize('DAGGERHEART.APPLICATIONS.CountdownEdit.removeCountdownTitle')
|
||||||
content: game.i18n.format('DAGGERHEART.APPLICATIONS.CountdownEdit.removeCountdownText', {
|
},
|
||||||
name: this.data.countdowns[countdownId].name
|
content: game.i18n.format('DAGGERHEART.APPLICATIONS.CountdownEdit.removeCountdownText', {
|
||||||
})
|
name: this.data.countdowns[countdownId].name
|
||||||
});
|
})
|
||||||
if (!confirmed) return;
|
});
|
||||||
|
if (!confirmed) return;
|
||||||
|
}
|
||||||
|
|
||||||
if (this.editingCountdowns.has(countdownId)) this.editingCountdowns.delete(countdownId);
|
if (this.editingCountdowns.has(countdownId)) this.editingCountdowns.delete(countdownId);
|
||||||
this.updateSetting({ [`countdowns.-=${countdownId}`]: null });
|
this.updateSetting({ [`countdowns.-=${countdownId}`]: null });
|
||||||
|
|
|
||||||
|
|
@ -21,7 +21,7 @@ export default class DhCountdowns extends HandlebarsApplicationMixin(Application
|
||||||
static DEFAULT_OPTIONS = {
|
static DEFAULT_OPTIONS = {
|
||||||
id: 'countdowns',
|
id: 'countdowns',
|
||||||
tag: 'div',
|
tag: 'div',
|
||||||
classes: ['daggerheart', 'dh-style', 'countdowns'],
|
classes: ['daggerheart', 'dh-style', 'countdowns', 'faded-ui'],
|
||||||
window: {
|
window: {
|
||||||
icon: 'fa-solid fa-clock-rotate-left',
|
icon: 'fa-solid fa-clock-rotate-left',
|
||||||
frame: true,
|
frame: true,
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
@import '../../utils/colors.less';
|
||||||
|
@import '../../utils/fonts.less';
|
||||||
|
|
||||||
.theme-light .daggerheart.application.dh-style.countdown-edit {
|
.theme-light .daggerheart.application.dh-style.countdown-edit {
|
||||||
background-image: url('../assets/parchments/dh-parchment-light.png');
|
background-image: url('../assets/parchments/dh-parchment-light.png');
|
||||||
}
|
}
|
||||||
|
|
@ -22,6 +25,7 @@
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
||||||
.header-main-button {
|
.header-main-button {
|
||||||
|
height: 32px;
|
||||||
flex: 1;
|
flex: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -48,13 +52,10 @@
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
||||||
&.viewing {
|
|
||||||
padding: 0 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: 52px;
|
width: 52px;
|
||||||
height: 52px;
|
height: 52px;
|
||||||
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countdown-edit-text {
|
.countdown-edit-text {
|
||||||
|
|
@ -65,13 +66,16 @@
|
||||||
|
|
||||||
.countdown-edit-subtext {
|
.countdown-edit-subtext {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 8px;
|
gap: 10px;
|
||||||
|
|
||||||
.countdown-edit-sub-tag {
|
.countdown-edit-sub-tag {
|
||||||
border: 1px solid;
|
padding: 3px 5px;
|
||||||
border-radius: 4px;
|
font-size: var(--font-size-12);
|
||||||
padding: 2px 4px;
|
font: @font-body;
|
||||||
background: light-dark(@beige, @dark-blue);
|
|
||||||
|
background: light-dark(@dark-15, @beige-15);
|
||||||
|
border: 1px solid light-dark(@dark, @beige);
|
||||||
|
border-radius: 3px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -110,6 +114,7 @@
|
||||||
input,
|
input,
|
||||||
select {
|
select {
|
||||||
background: light-dark(@beige, @dark-blue);
|
background: light-dark(@beige, @dark-blue);
|
||||||
|
color: light-dark(@dark, @beige);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,3 +1,6 @@
|
||||||
|
@import '../../utils/colors.less';
|
||||||
|
@import '../../utils/fonts.less';
|
||||||
|
|
||||||
.theme-dark {
|
.theme-dark {
|
||||||
.daggerheart.dh-style.countdowns {
|
.daggerheart.dh-style.countdowns {
|
||||||
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
background-image: url(../assets/parchments/dh-parchment-dark.png);
|
||||||
|
|
@ -16,7 +19,14 @@
|
||||||
width: 300px;
|
width: 300px;
|
||||||
top: 16px;
|
top: 16px;
|
||||||
right: 64px;
|
right: 64px;
|
||||||
transition: right ease 250ms;
|
transition:
|
||||||
|
right ease 250ms,
|
||||||
|
all var(--ui-fade-duration) ease,
|
||||||
|
opacity var(--ui-fade-duration);
|
||||||
|
|
||||||
|
.window-title {
|
||||||
|
font-family: @font-body;
|
||||||
|
}
|
||||||
|
|
||||||
&.expanded {
|
&.expanded {
|
||||||
right: 364px;
|
right: 364px;
|
||||||
|
|
@ -60,6 +70,7 @@
|
||||||
img {
|
img {
|
||||||
width: 44px;
|
width: 44px;
|
||||||
height: 44px;
|
height: 44px;
|
||||||
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.countdown-content {
|
.countdown-content {
|
||||||
|
|
|
||||||
|
|
@ -6,9 +6,15 @@
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
|
|
||||||
|
.ownership-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 10px;
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
.ownership-container {
|
.ownership-container {
|
||||||
display: flex;
|
display: flex;
|
||||||
border: 2px solid light-dark(@dark-blue, @golden);
|
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
padding: 0 4px 0 0;
|
padding: 0 4px 0 0;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
@ -17,10 +23,15 @@
|
||||||
img {
|
img {
|
||||||
height: 40px;
|
height: 40px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
border-radius: 6px 0 0 6px;
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
flex: 3;
|
||||||
}
|
}
|
||||||
|
|
||||||
select {
|
select {
|
||||||
|
flex: 1;
|
||||||
margin: 4px 0;
|
margin: 4px 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -7,15 +7,17 @@
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{{#each ownership as |player id|}}
|
<ul class="ownership-list">
|
||||||
<div class="ownership-container">
|
{{#each ownership as |player id|}}
|
||||||
<img src="{{player.img}}" />
|
<li class="ownership-container">
|
||||||
<div>{{player.name}}</div>
|
<img src="{{player.img}}" />
|
||||||
<select name="{{concat "ownership." id}}" data-dtype="Number">
|
<span>{{player.name}}</span>
|
||||||
{{selectOptions @root.ownershipOptions selected=player.ownership labelAttr="label" valueAttr="value" localize=true }}
|
<select name="{{concat "ownership." id}}" data-dtype="Number">
|
||||||
</select>
|
{{selectOptions @root.ownershipOptions selected=player.ownership labelAttr="label" valueAttr="value" localize=true }}
|
||||||
</div>
|
</select>
|
||||||
{{/each}}
|
</li>
|
||||||
|
{{/each}}
|
||||||
|
</ul>
|
||||||
<footer class="flexrow">
|
<footer class="flexrow">
|
||||||
<button type="submit">{{localize "Save"}}</button>
|
<button type="submit">{{localize "Save"}}</button>
|
||||||
</footer>
|
</footer>
|
||||||
|
|
|
||||||
|
|
@ -1,6 +1,8 @@
|
||||||
<div>
|
<div>
|
||||||
<div class="edit-container">
|
<div class="edit-container">
|
||||||
<h2>{{localize "DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle"}}</h2>
|
<header class="dialog-header">
|
||||||
|
<h1>{{localize "DAGGERHEART.APPLICATIONS.CountdownEdit.editTitle"}}</h1>
|
||||||
|
</header>
|
||||||
|
|
||||||
<div class="header-tools">
|
<div class="header-tools">
|
||||||
<button class="header-main-button" data-action="addCountdown">{{localize "DAGGERHEART.APPLICATIONS.CountdownEdit.newCountdown"}}</button>
|
<button class="header-main-button" data-action="addCountdown">{{localize "DAGGERHEART.APPLICATIONS.CountdownEdit.newCountdown"}}</button>
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue