aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/SettingsModal.vue72
1 files changed, 55 insertions, 17 deletions
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 2e4d217..42647a5 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -9,16 +9,16 @@
<h2 class="text-center">Layout</h2>
<div class="flex gap-2">
<div class="grow">
- Sweep leaves to side
+ <div @click="onReset('LYT', 'layoutType')" :class="labelClasses">Sweep leaves to side</div>
<ul>
<li> <label> <input type="radio" v-model="sweepLeaves" :value="true"
- @change="onSettingChg('LYT', 'layoutType')"/> Yes </label> </li>
+ @change="onSettingChg('LYT', 'layoutType')"/> Yes </label> </li>
<li> <label> <input type="radio" v-model="sweepLeaves" :value="false"
- @change="onSettingChg('LYT', 'layoutType')"/> No </label> </li>
+ @change="onSettingChg('LYT', 'layoutType')"/> No </label> </li>
</ul>
</div>
<div class="grow">
- Sweep into parent
+ <div @click="onReset('LYT', 'sweepToParent')" :class="labelClasses">Sweep into parent</div>
<ul>
<li> <label> <input type="radio" :disabled="!sweepLeaves" v-model="lytOpts.sweepToParent"
value="none" @change="onSettingChg('LYT', 'sweepToParent')"/> Never </label> </li>
@@ -31,19 +31,25 @@
</div>
<div class="grid grid-cols-[minmax(0,3fr)_minmax(0,4fr)_minmax(0,2fr)] gap-1">
<!-- Row 1 -->
- <label for="minTileSizeInput">Min Tile Size</label>
+ <label for="minTileSizeInput" @click="onReset('LYT', 'minTileSz')" :class="labelClasses">
+ Min Tile Size
+ </label>
<input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz"
@input="onSettingChg('LYT', 'minTileSz', false)" @change="onSettingChg('LYT', 'minTileSz')"
name="minTileSizeInput" ref="minTileSzInput"/>
<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.minTileSz)}}</div>
<!-- Row 2 -->
- <label for="maxTileSizeInput">Max Tile Size</label>
+ <label for="maxTileSizeInput" @click="onReset('LYT', 'maxTileSz')" :class="labelClasses">
+ Max Tile Size
+ </label>
<input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz"
@input="onSettingChg('LYT', 'maxTileSz', false)" @change="onSettingChg('LYT', 'maxTileSz')"
name="maxTileSizeInput" ref="maxTileSzInput"/>
<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.maxTileSz)}}</div>
<!-- Row 3 -->
- <label for="tileSpacingInput">Tile Spacing</label>
+ <label for="tileSpacingInput" @click="onReset('LYT', 'tileSpacing')" :class="labelClasses">
+ Tile Spacing
+ </label>
<input type="range" min="0" max="20" v-model.number="lytOpts.tileSpacing"
@input="onSettingChg('LYT', 'tileSpacing', false)" @change="onSettingChg('LYT', 'tileSpacing')"
name="tileSpacingInput"/>
@@ -54,30 +60,38 @@
<h2 class="text-center">Timing</h2>
<div class="grid grid-cols-[minmax(0,3fr)_minmax(0,4fr)_minmax(0,2fr)] gap-1">
<!-- Row 1 -->
- <label for="animationTimeInput">Animation Time</label>
+ <label for="animTimeInput" @click="onReset('UI', 'transitionDuration')" :class="labelClasses">
+ Animation Time
+ </label>
<input type="range" min="0" max="3000" v-model.number="uiOpts.transitionDuration"
- @change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animationTimeInput"/>
+ @change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animTimeInput"/>
<div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
<!-- Row 2 -->
- <label for="autoModeDelayInput">Auto-mode Delay</label>
+ <label for="autoDelayInput" @click="onReset('UI', 'autoActionDelay')" :class="labelClasses">
+ Auto-mode Delay
+ </label>
<input type="range" min="0" max="3000" v-model.number="uiOpts.autoActionDelay"
- @change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoModeDelayInput"/>
+ @change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoDelayInput"/>
<div class="my-auto text-right">{{uiOpts.autoActionDelay}} ms</div>
</div>
</div>
<div class="border rounded p-1">
<h2 class="text-center">Other</h2>
<div>
- <label> <input type="checkbox" v-model="uiOpts.useReducedTree"
- @change="onSettingChg('UI', 'useReducedTree')"/> Use simplified tree </label>
+ <input type="checkbox" v-model="uiOpts.useReducedTree"
+ @change="onSettingChg('UI', 'useReducedTree')" name="useReducedTreeInput"/>
+ <label for="useReducedTreeInput" @click="onReset('UI', 'useReducedTree')"
+ :class="labelClasses" class="ml-1"> Use simplified tree </label>
</div>
<div>
- <label> <input type="checkbox" v-model="uiOpts.searchJumpMode"
- @change="onSettingChg('UI', 'searchJumpMode')"/> Skip search animation </label>
+ <input type="checkbox" v-model="uiOpts.searchJumpMode"
+ @change="onSettingChg('UI', 'searchJumpMode')" name="searchModeInput"/>
+ <label for="searchModeInput" @click="onReset('UI', 'searchJumpMode')"
+ :class="labelClasses" class="ml-1"> Skip search animation </label>
</div>
</div>
<s-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
- @click="onReset">
+ @click="onResetAll">
Reset
</s-button>
<transition name="fade">
@@ -116,6 +130,9 @@ export default defineComponent({
boxShadow: this.uiOpts.shadowNormal,
};
},
+ labelClasses(): Record<string,string> {
+ return "w-fit hover:cursor-pointer hover:text-lime-600";
+ },
},
watch: {
sweepLeaves(newVal: boolean, oldVal: boolean){
@@ -156,7 +173,28 @@ export default defineComponent({
}
}
},
- onReset(){
+ onReset(optionType: OptionType, option: string){
+ let defaultLytOpts = getDefaultLytOpts();
+ let defaultUiOpts = getDefaultUiOpts(defaultLytOpts);
+ if (optionType == 'LYT'){
+ let lytOpt = option as keyof LayoutOptions;
+ if (this.lytOpts[lytOpt] == defaultLytOpts[lytOpt]){
+ return;
+ }
+ (this.lytOpts[lytOpt] as any) = defaultLytOpts[lytOpt];
+ if (option == 'layoutType'){
+ this.sweepLeaves = this.lytOpts.layoutType == 'sweep';
+ }
+ } else {
+ let uiOpt = option as keyof UiOptions;
+ if (this.uiOpts[uiOpt] == defaultUiOpts[uiOpt]){
+ return;
+ }
+ (this.uiOpts[uiOpt] as any) = defaultUiOpts[uiOpt];
+ }
+ this.onSettingChg(optionType, option);
+ },
+ onResetAll(){
// Restore default options
let defaultLytOpts = getDefaultLytOpts();
let defaultUiOpts = getDefaultUiOpts(defaultLytOpts);
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 00:06:27 +0000