206 lines
10 KiB
Handlebars
206 lines
10 KiB
Handlebars
|
<form class="flex-col">
|
||
|
|
<header id="JTCSsettingsHeader" class="flex-row flex0 padding-small">
|
||
|
|
<button class="secondary active" type="button" data-action="scrollTo" data-target="JTCScolorSchemeData">Custom Colors</button>
|
||
|
|
<button class="secondary" type="button" data-action="scrollTo" data-target="JTCSsheetSettings">Sheet Img Controls</button>
|
||
|
|
<button class="secondary" type="button" data-action="scrollTo" data-target="JTCSsheetFadeData">Fade Settings</button>
|
||
|
|
<button class="secondary" type="button" data-action="scrollTo" data-target="JTCSDefaults">Defaults</button>
|
||
|
|
</header>
|
||
|
|
<div class="form-content overflow-scroll-y overflow-auto-x flow padding-large">
|
||
|
|
<div class="form-group-stacked flow padding-large">
|
||
|
|
<!-- for the color-scheme information-->
|
||
|
|
<div class="form-group-stacked flow" id="JTCScolorSchemeData">
|
||
|
|
{{#with colorSchemeData}}
|
||
|
|
<h2>{{this.name}}</h2>
|
||
|
|
<p class="notes">{{{this.hint}}}</p>
|
||
|
|
<div class="form-group-stacked gap-medium">
|
||
|
|
{{#each this.colors}}
|
||
|
|
<div class="outer-wrapper">
|
||
|
|
{{> (dynamicPartial "color-picker")
|
||
|
|
this
|
||
|
|
value=(lookup ../colors @key)
|
||
|
|
parentObjectName="colorSchemeData"
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
{{/each}}
|
||
|
|
</div>
|
||
|
|
{{/with}}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<!-- for the tile indicators and matching highlight colors-->
|
||
|
|
<div class="form-group-stacked flow" id="JTCSindicatorColorData">
|
||
|
|
{{#with indicatorColorData}}
|
||
|
|
<h3>{{this.name}}</h3>
|
||
|
|
<p class="notes">{{{this.hint}}}</p>
|
||
|
|
<div class="form-group-stacked gap-medium">
|
||
|
|
{{#each this.colors}}
|
||
|
|
<div class="outer-wrapper">
|
||
|
|
{{> (dynamicPartial "color-picker")
|
||
|
|
this
|
||
|
|
value=(lookup ../colors @key)
|
||
|
|
parentObjectName="indicatorColorData"
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
{{/each}}
|
||
|
|
</div>
|
||
|
|
{{/with}}
|
||
|
|
</div>
|
||
|
|
<p class="notes">Warning: The actions below are destructive or risky. Please proceed carefully. </p>
|
||
|
|
<!-- button for turning off auto-contrast setting-->
|
||
|
|
{{#with colorSchemeData}}
|
||
|
|
<div class="form-group-stacked flow">
|
||
|
|
<h3>Reset to Default Theme</h3>
|
||
|
|
<p class="notes">
|
||
|
|
Reset your colors to one of the default themes, in a dark or light scheme.
|
||
|
|
</p>
|
||
|
|
<button class="theme" type="button" data-action="setDarkTheme"><i class="fas fa-moon"></i> Dark Theme</button>
|
||
|
|
<button class="theme" type="button" data-action="setLightTheme"> <i class="fas fa-sun"></i> Light Theme</button>
|
||
|
|
</div>
|
||
|
|
<div class="form-group-stacked flow">
|
||
|
|
<h3>Toggle Auto-Contrast</h3>
|
||
|
|
{{#if (eq this.autoContrast true)}}
|
||
|
|
<p class="notes">
|
||
|
|
This will make it so your chosen accent and gallery tile colors aren't automatically adjusted to contrast with your background color; however you risk choosing colors that make text illegible.
|
||
|
|
</p>
|
||
|
|
<button class="blank-button danger" type="button" data-action="toggleAutoContrastOff"><i class="fas fa-adjust"></i> Turn Off Auto-Contrast</button>
|
||
|
|
{{else}}
|
||
|
|
<p class="notes">This will cause your chosen accent and gallery tile colors to automatically adjust in brightness to contrast with your chosen background color.</p>
|
||
|
|
<button class="blank-button" type="button" data-action="toggleAutoContrastOn"><i class="fas fa-adjust"></i> Turn On Auto-Contrast</button>
|
||
|
|
{{/if}}
|
||
|
|
</div>
|
||
|
|
{{/with}}
|
||
|
|
</div>
|
||
|
|
<!-- settings for which sheets should have the image controls -->
|
||
|
|
<div class="form-group-stacked flow" id="JTCSsheetSettings">
|
||
|
|
{{#with sheetSettings}}
|
||
|
|
<h2>{{this.name}}</h2>
|
||
|
|
<p class="notes">{{{this.hint}}}</p>
|
||
|
|
{{> (dynamicPartial "fieldset-button-group")
|
||
|
|
type="checkbox"
|
||
|
|
variant="visible-tick"
|
||
|
|
choices=this.modularChoices
|
||
|
|
propertyString="sheetSettings.modularChoices"
|
||
|
|
extraClass="flex-wrap"
|
||
|
|
}}
|
||
|
|
{{/with}}
|
||
|
|
</div>
|
||
|
|
<div class="form-group-stacked flow">
|
||
|
|
<!-- for fading the journal sheet -->
|
||
|
|
<div class="form-group-stacked flow" id="JTCSsheetFadeData">
|
||
|
|
{{#with fadeSheetImagesData}}
|
||
|
|
<h2>{{this.name}}</h2>
|
||
|
|
<p class="notes">{{{this.hint}}}</p>
|
||
|
|
{{> (dynamicPartial "fieldset-button-group")
|
||
|
|
type="radio"
|
||
|
|
choices=this.choices
|
||
|
|
chosen=this.chosen
|
||
|
|
variant="visible-tick"
|
||
|
|
propertyString="fadeSheetImagesData.chosen"
|
||
|
|
}}
|
||
|
|
{{/with}}
|
||
|
|
</div>
|
||
|
|
<div class="form-group-stacked flow" id="JTCSsheetFadeOpacity">
|
||
|
|
{{#with sheetFadeOpacityData}}
|
||
|
|
<h3>{{name}}</h3>
|
||
|
|
<p class="notes">
|
||
|
|
{{{hint}}}
|
||
|
|
</p>
|
||
|
|
<div class="form-group">
|
||
|
|
{{rangePicker
|
||
|
|
value=this.value
|
||
|
|
name="sheetFadeOpacityData.value"
|
||
|
|
min=20
|
||
|
|
max=100
|
||
|
|
step=10
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
{{/with}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div class="form-group-stacked flow" id="JTCSDefaults">
|
||
|
|
<div class="form-group-stacked flow" id="JTCSArtSceneAndJournal">
|
||
|
|
{{#with dedicatedDisplayData}}
|
||
|
|
<h2>{{this.name}}</h2>
|
||
|
|
<p class="notes">{{{this.hint}}}</p>
|
||
|
|
<div class="form-group flex-column flow flex-justify-space-evenly">
|
||
|
|
{{#with this.journal}}
|
||
|
|
<h3>{{this.name}}</h3>
|
||
|
|
<p class="notes">{{{this.hint}}}</p>
|
||
|
|
<div class="input-span has-floating-label">
|
||
|
|
<label for="artJournal" class="floating-label">Art Journal</label>
|
||
|
|
<select id="artJournal" name="dedicatedDisplayData.journal.value">
|
||
|
|
<option value="">--</option>
|
||
|
|
{{!-- {{#with this.journal}} --}}
|
||
|
|
{{selectOptions this.artJournalData.options selected=this.value}}
|
||
|
|
{{!-- {{/with}} --}}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
{{/with}}
|
||
|
|
{{> (dynamicPartial "checkbox")
|
||
|
|
propertyString=(getPropertyString @root "dedicatedDisplayData.journal" "autoActivate")
|
||
|
|
variant="visible-tick"
|
||
|
|
key="autoActivate"
|
||
|
|
checked=@root.dedicatedDisplayData.journal.autoActivate
|
||
|
|
}}
|
||
|
|
{{> (dynamicPartial "checkbox")
|
||
|
|
propertyString=(getPropertyString @root "dedicatedDisplayData.journal" "autoView")
|
||
|
|
variant="visible-tick"
|
||
|
|
key="autoView"
|
||
|
|
checked=@root.dedicatedDisplayData.journal.autoView
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
<div class="form-group flex-column flow flex-justify-space-evenly">
|
||
|
|
{{#with this.scene}}
|
||
|
|
<h3>{{this.name}}</h3>
|
||
|
|
<p class="notes">{{{this.hint}}}</p>
|
||
|
|
<div class="input-span has-floating-label">
|
||
|
|
<label for="artScene" class="floating-label">Art Scene</label>
|
||
|
|
<select name="dedicatedDisplayData.scene.value">
|
||
|
|
<option value="">--</option>
|
||
|
|
{{!-- {{#with this.scene}} --}}
|
||
|
|
{{selectOptions this.artSceneData.options selected=this.value}}
|
||
|
|
{{!-- {{/with}} --}}
|
||
|
|
</select>
|
||
|
|
</div>
|
||
|
|
{{/with}}
|
||
|
|
{{> (dynamicPartial "checkbox")
|
||
|
|
propertyString=(getPropertyString @root "dedicatedDisplayData.scene" "autoActivate")
|
||
|
|
variant="visible-tick"
|
||
|
|
key="autoActivate"
|
||
|
|
checked=@root.dedicatedDisplayData.scene.autoActivate
|
||
|
|
}}
|
||
|
|
{{> (dynamicPartial "checkbox")
|
||
|
|
propertyString=(getPropertyString @root "dedicatedDisplayData.scene" "autoView")
|
||
|
|
variant="visible-tick"
|
||
|
|
key="autoView"
|
||
|
|
checked=@root.dedicatedDisplayData.scene.autoView
|
||
|
|
}}
|
||
|
|
</div>
|
||
|
|
{{/with}}
|
||
|
|
</div>
|
||
|
|
<div class="form-group-stacked flow" id="JTCSdefaultImages">
|
||
|
|
{{#with defaultTileImages}}
|
||
|
|
<h3>{{this.name}}</h3>
|
||
|
|
<p class="notes">{{{this.hint}}}</p>
|
||
|
|
{{#each this.paths}}
|
||
|
|
<div class="flex-row file-picker-group has-floating-label">
|
||
|
|
<label class="floating-label" for="{{@key}}">{{camelCaseToCapitalString @key}}</label>
|
||
|
|
<input type="text" id="{{@key}}" name="{{concat "defaultTileImages.paths." @key}}" value="{{this}}" >
|
||
|
|
{{filePicker type="image" target=(concat "defaultTileImages.paths." @key)}}
|
||
|
|
</div>
|
||
|
|
{{/each}}
|
||
|
|
{{/with}}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<footer class="sheet-footer [ flex-row flex-justify-center ]
|
||
|
|
padding-inline-medium padding-block-small">
|
||
|
|
<button type="submit" name="submit" class="primary">
|
||
|
|
<i class="far fa-save"></i>
|
||
|
|
Save Changes and Close
|
||
|
|
</button>
|
||
|
|
<button type="button" name="apply" class="secondary" data-action="applyChanges">
|
||
|
|
Apply Changes
|
||
|
|
</button>
|
||
|
|
|
||
|
|
</footer>
|
||
|
|
</form>
|