mirror of
https://github.com/Foundryborne/daggerheart.git
synced 2026-03-07 14:36:13 +01:00
Improved design
This commit is contained in:
WBHarry
parent
6b8de21c0b
commit
f3e87b1641
4 changed files with 30 additions and 51 deletions
|
|
@ -344,7 +344,9 @@
|
|||
"openCountdowns": "Countdowns"
|
||||
},
|
||||
"CompendiumBrowserSettings": {
|
||||
"title": "Compendium Browser Settings"
|
||||
"title": "Enable Compendiums",
|
||||
"enableSource": "Enable Source",
|
||||
"disableSource": "Disable Source"
|
||||
},
|
||||
"ContextMenu": {
|
||||
"disableEffect": "Disable Effect",
|
||||
|
|
|
|||
|
|
@ -14,11 +14,11 @@ export default class CompendiumBrowserSettings extends HandlebarsApplicationMixi
|
|||
classes: ['daggerheart', 'dialog', 'dh-style', 'views', 'compendium-brower-settings'],
|
||||
window: {
|
||||
icon: 'fa-solid fa-book',
|
||||
title: 'DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.title'
|
||||
title: 'DAGGERHEART.APPLICATIONS.CompendiumBrowserSettings.title',
|
||||
resizable: true
|
||||
},
|
||||
position: {
|
||||
width: 500,
|
||||
height: 'auto'
|
||||
width: 500
|
||||
},
|
||||
actions: {
|
||||
toggleSource: CompendiumBrowserSettings.#toggleSource,
|
||||
|
|
@ -80,8 +80,7 @@ export default class CompendiumBrowserSettings extends HandlebarsApplicationMixi
|
|||
static #toggleSource(event, button) {
|
||||
event.stopPropagation();
|
||||
|
||||
const target = button.closest('.source-enable-container');
|
||||
const { type, source } = target.dataset;
|
||||
const { type, source } = button.dataset;
|
||||
const currentlyExcluded = this.browserSettings.excludedSources[source]
|
||||
? this.browserSettings.excludedSources[source].excludedDocumentTypes.includes(type)
|
||||
: 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 ?? []), type];
|
||||
|
||||
target.classList.toggle('locked');
|
||||
target.closest('.source-container').querySelector('.checks-container').classList.toggle('collapsed');
|
||||
|
||||
// this.render();
|
||||
const toggleIcon = button.querySelector('a > i');
|
||||
toggleIcon.classList.toggle('fa-toggle-off');
|
||||
toggleIcon.classList.toggle('fa-toggle-on');
|
||||
button.closest('.source-container').querySelector('.checks-container').classList.toggle('collapsed');
|
||||
}
|
||||
|
||||
toggleTypedPack(event) {
|
||||
|
|
|
|||
|
|
@ -2,6 +2,13 @@
|
|||
--text-color: light-dark(@dark-blue, @beige);
|
||||
color: var(--text-color);
|
||||
|
||||
.window-content > div {
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.types-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
|
@ -52,39 +59,11 @@
|
|||
.source-inner-label-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 4px;
|
||||
gap: 8px;
|
||||
|
||||
.source-enable-container {
|
||||
width: 148px;
|
||||
height: 24px;
|
||||
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;
|
||||
}
|
||||
i {
|
||||
font-size: 18px;
|
||||
// color: light-dark(@dark-blue, @golden);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -94,6 +73,7 @@
|
|||
}
|
||||
|
||||
.checks-container {
|
||||
padding-left: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 4px;
|
||||
|
|
@ -104,10 +84,6 @@
|
|||
height: 0px;
|
||||
}
|
||||
|
||||
&.inner {
|
||||
padding-left: 24px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
|
|
@ -9,15 +9,17 @@
|
|||
<div class="source-container">
|
||||
<div class="source-inner-container">
|
||||
<div class="source-inner-label-container">
|
||||
{{!-- <input type="checkbox" class="source-input" data-source="{{@key}}" data-type="{{@../key}}" {{checked source.checked}} /> --}}
|
||||
<label>{{source.label}}</label>
|
||||
<a class="source-enable-container {{#unless source.checked}}locked{{/unless}}" data-action="toggleSource" data-source="{{@key}}" data-type="{{@../key}}">
|
||||
<div class="source-enable-label">{{localize "Active"}}</div>
|
||||
<a
|
||||
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}}"
|
||||
>
|
||||
<i class="fa-solid {{#if source.checked}}fa-toggle-on{{else}}fa-toggle-off{{/if}}"></i>
|
||||
</a>
|
||||
<label>{{source.label}}</label>
|
||||
</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|}}
|
||||
<div class="check-container">
|
||||
<input type="checkbox" class="pack-checkbox" data-type="{{pack.type}}" data-pack="{{pack.pack}}" {{checked pack.checked}} />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue