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

Improved design

Browse source
This commit is contained in:
WBHarry 2026-02-08 16:42:06 +01:00
parent 6b8de21c0b
commit f3e87b1641
4 changed files with 30 additions and 51 deletions
Download patch file Download diff file Expand all files Collapse all files

4
lang/en.json
View file

@ -344,7 +344,9 @@
"openCountdowns": "Countdowns" "openCountdowns": "Countdowns"
}, },
"CompendiumBrowserSettings": { "CompendiumBrowserSettings": {
"title": "Compendium Browser Settings" "title": "Enable Compendiums",
"enableSource": "Enable Source",
"disableSource": "Disable Source"
}, },
"ContextMenu": { "ContextMenu": {
"disableEffect": "Disable Effect", "disableEffect": "Disable Effect",

17
module/applications/dialogs/CompendiumBrowserSettings.mjs
View file

@ -14,11 +14,11 @@ export default class CompendiumBrowserSettings extends HandlebarsApplicationMixi
classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'compendium-brower-settings'], classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'compendium-brower-settings'],
window: { window: {
icon: 'fa-solid fa-book', icon: 'fa-solid fa-book',
title: 'DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.title' title: 'DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.title',
resizable: true
}, },
position: { position: {
width: 500, width: 500
height: 'auto'
}, },
actions: { actions: {
toggleSource: CompendiumBrowserSettings.#toggleSource, toggleSource: CompendiumBrowserSettings.#toggleSource,
@ -80,8 +80,7 @@ export default class CompendiumBrowserSettings extends HandlebarsApplicationMixi
static #toggleSource(event, button) { static #toggleSource(event, button) {
event.stopPropagation(); event.stopPropagation();
const target = button.closest('.source-enable-container'); const { type, source } = button.dataset;
const { type, source } = target.dataset;
const currentlyExcluded = this.browserSettings.excludedSources[source] const currentlyExcluded = this.browserSettings.excludedSources[source]
? this.browserSettings.excludedSources[source].excludedDocumentTypes.includes(type) ? this.browserSettings.excludedSources[source].excludedDocumentTypes.includes(type)
: false; : false;
@ -92,10 +91,10 @@ export default class CompendiumBrowserSettings extends HandlebarsApplicationMixi
? this.browserSettings.excludedSources[source].excludedDocumentTypes.filter(x => x !== type) ? this.browserSettings.excludedSources[source].excludedDocumentTypes.filter(x => x !== type)
: [...(this.browserSettings.excludedSources[source]?.excludedDocumentTypes ?? []), type]; : [...(this.browserSettings.excludedSources[source]?.excludedDocumentTypes ?? []), type];
target.classList.toggle('locked'); const toggleIcon = button.querySelector('a > i');
target.closest('.source-container').querySelector('.checks-container').classList.toggle('collapsed'); toggleIcon.classList.toggle('fa-toggle-off');
toggleIcon.classList.toggle('fa-toggle-on');
// this.render(); button.closest('.source-container').querySelector('.checks-container').classList.toggle('collapsed');
} }
toggleTypedPack(event) { toggleTypedPack(event) {

48
styles/less/dialog/compendiumBrowserPackDialog/sheet.less
View file

@ -2,6 +2,13 @@
--text-color: light-dark(@dark-blue, @beige); --text-color: light-dark(@dark-blue, @beige);
color: var(--text-color); color: var(--text-color);
.window-content > div {
overflow: auto;
display: flex;
flex-direction: column;
height: 100%;
}
.types-container { .types-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -52,39 +59,11 @@
.source-inner-label-container { .source-inner-label-container {
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; gap: 8px;
justify-content: space-between;
gap: 4px;
.source-enable-container { i {
width: 148px; font-size: 18px;
height: 24px; // color: light-dark(@dark-blue, @golden);
padding: 2px 4px;
background-color: light-dark(@dark-blue, @golden);
border-radius: 6px;
position: relative;
display: flex;
align-items: center;
&.locked {
opacity: 0.4;
.source-enable-label {
left: 74px;
}
}
.source-enable-label {
width: 70px;
border-radius: 6px;
border: 1px solid light-dark(@dark-blue, @beige-50);
text-align: center;
background-color: light-dark(@golden, @beige);
color: black;
position: absolute;
left: 4px;
transition: left ease-in 0.4s;
}
} }
} }
} }
@ -94,6 +73,7 @@
} }
.checks-container { .checks-container {
padding-left: 24px;
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 4px; gap: 4px;
@ -104,10 +84,6 @@
height: 0px; height: 0px;
} }
&.inner {
padding-left: 24px;
}
.check-container { .check-container {
display: flex; display: flex;
align-items: center; align-items: center;

12
templates/dialogs/compendiumBrowserSettingsDialog/packs.hbs
View file

@ -9,15 +9,17 @@
<div class="source-container"> <div class="source-container">
<div class="source-inner-container"> <div class="source-inner-container">
<div class="source-inner-label-container"> <div class="source-inner-label-container">
{{!-- <input type="checkbox" class="source-input" data-source="{{@key}}" data-type="{{@../key}}" {{checked source.checked}} /> --}} <a
<label>{{source.label}}</label> data-action="toggleSource" data-source="{{@key}}" data-type="{{@../key}}"
<a class="source-enable-container {{#unless source.checked}}locked{{/unless}}" data-action="toggleSource" data-source="{{@key}}" data-type="{{@../key}}"> data-tooltip="{{#if source.checked}}{{localize "DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.enableSource"}}{{else}}{{localize "DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.enableSource"}}{{/if}}"
<div class="source-enable-label">{{localize "Active"}}</div> >
<i class="fa-solid {{#if source.checked}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
</a> </a>
<label>{{source.label}}</label>
</div> </div>
</div> </div>
<div class="checks-container inner {{#unless source.checked}}collapsed{{/unless}}"> <div class="checks-container {{#unless source.checked}}collapsed{{/unless}}">
{{#each source.packs as |pack|}} {{#each source.packs as |pack|}}
<div class="check-container"> <div class="check-container">
<input type="checkbox" class="pack-checkbox" data-type="{{pack.type}}" data-pack="{{pack.pack}}" {{checked pack.checked}} /> <input type="checkbox" class="pack-checkbox" data-type="{{pack.type}}" data-pack="{{pack.pack}}" {{checked pack.checked}} />