aboutsummaryrefslogtreecommitdiff
path: root/src/components/SettingsModal.vue
diff options
context:
space:
mode:
Diffstat (limited to 'src/components/SettingsModal.vue')
-rw-r--r--src/components/SettingsModal.vue85
1 files changed, 44 insertions, 41 deletions
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue
index 315ddb4..73b204d 100644
--- a/src/components/SettingsModal.vue
+++ b/src/components/SettingsModal.vue
@@ -1,15 +1,34 @@
<template>
<div class="fixed left-0 top-0 w-full h-full bg-black/40" @click="onClose">
<div class="absolute left-1/2 -translate-x-1/2 top-1/2 -translate-y-1/2
- min-w-[8cm] max-h-[80%] overflow-auto p-3" :style="styles">
+ min-w-[8cm] max-w-[80%] max-h-[80%] overflow-auto" :style="styles">
<close-icon @click.stop="onClose" ref="closeIcon"
- class="block absolute top-2 right-2 w-6 h-6 hover:cursor-pointer" />
- <h1 class="text-xl font-bold mb-2">Settings</h1>
- <div class="border rounded p-1">
- <h2 class="text-center">Layout</h2>
- <div class="flex gap-2">
- <div class="grow">
- <div>Sweep leaves to side</div>
+ class="block absolute top-1 right-1 md:top-2 md:right-2 w-8 h-8 hover:cursor-pointer" />
+ <h1 class="text-xl md:text-2xl font-bold text-center py-2 border-b border-stone-400">Settings</h1>
+ <div class="border-b border-stone-400 pb-2">
+ <h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Timing</h2>
+ <div class="grid grid-cols-[130px_minmax(0,1fr)_65px] gap-1 px-2 md:px-3">
+ <!-- Row 1 -->
+ <label for="animTimeInput" @click="onReset('UI', 'transitionDuration')" :class="rLabelClasses">
+ Animation Time
+ </label>
+ <input type="range" min="0" max="1000" v-model.number="uiOpts.transitionDuration"
+ @change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animTimeInput"/>
+ <div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
+ <!-- Row 2 -->
+ <label for="autoDelayInput" @click="onReset('UI', 'autoActionDelay')" :class="rLabelClasses">
+ Auto-mode Delay
+ </label>
+ <input type="range" min="0" max="1000" v-model.number="uiOpts.autoActionDelay"
+ @change="onSettingChg('UI', 'autoActionDelay')" class="my-auto" name="autoDelayInput"/>
+ <div class="my-auto text-right">{{uiOpts.autoActionDelay}} ms</div>
+ </div>
+ </div>
+ <div class="border-b border-stone-400 pb-2">
+ <h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 md:pb-1">Layout</h2>
+ <div class="flex gap-2 justify-around px-2 pb-1">
+ <div>
+ <div>Sweep leaves left</div>
<ul>
<li> <label> <input type="radio" v-model="sweepLeaves" :value="true"
@change="onSettingChg('LYT', 'layoutType')"/> Yes </label> </li>
@@ -17,7 +36,7 @@
@change="onSettingChg('LYT', 'layoutType')"/> No </label> </li>
</ul>
</div>
- <div class="grow">
+ <div>
<div>Sweep into parent</div>
<ul>
<li> <label> <input type="radio" :disabled="!sweepLeaves" v-model="lytOpts.sweepToParent"
@@ -29,12 +48,13 @@
</ul>
</div>
</div>
- <div class="grid grid-cols-[minmax(0,3fr)_minmax(0,4fr)_minmax(0,2fr)] gap-1">
+ <div class="grid grid-cols-[100px_minmax(0,1fr)_65px] gap-1 w-fit mx-auto px-2 md:px-3">
<!-- Row 1 -->
<label for="minTileSizeInput" @click="onReset('LYT', 'minTileSz')" :class="rLabelClasses">
Min Tile Size
</label>
- <input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz"
+ <input type="range"
+ min="15" :max="uiOpts.breakpoint == 'sm' ? 150 : 200" v-model.number="lytOpts.minTileSz"
@input="onSettingChgThrottled('LYT', 'minTileSz')" @change="onSettingChg('LYT', 'minTileSz')"
name="minTileSizeInput" ref="minTileSzInput"/>
<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.minTileSz)}}</div>
@@ -42,7 +62,7 @@
<label for="maxTileSizeInput" @click="onReset('LYT', 'maxTileSz')" :class="rLabelClasses">
Max Tile Size
</label>
- <input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz"
+ <input type="range" min="15" max="400" v-model.number="lytOpts.maxTileSz"
@input="onSettingChgThrottled('LYT', 'maxTileSz')" @change="onSettingChg('LYT', 'maxTileSz')"
name="maxTileSizeInput" ref="maxTileSzInput"/>
<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.maxTileSz)}}</div>
@@ -56,32 +76,13 @@
<div class="my-auto text-right">{{pxToDisplayStr(lytOpts.tileSpacing)}}</div>
</div>
</div>
- <div class="border rounded p-1">
- <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="animTimeInput" @click="onReset('UI', 'transitionDuration')" :class="rLabelClasses">
- Animation Time
- </label>
- <input type="range" min="0" max="3000" v-model.number="uiOpts.transitionDuration"
- @change="onSettingChg('UI', 'transitionDuration')" class="my-auto" name="animTimeInput"/>
- <div class="my-auto text-right">{{uiOpts.transitionDuration}} ms</div>
- <!-- Row 2 -->
- <label for="autoDelayInput" @click="onReset('UI', 'autoActionDelay')" :class="rLabelClasses">
- Auto-mode Delay
- </label>
- <input type="range" min="0" max="3000" v-model.number="uiOpts.autoActionDelay"
- @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 class="border-b border-stone-400 pb-2 px-2 md:px-3">
+ <h2 class="font-bold md:text-xl text-center pt-1 md:pt-2 -mb-2 ">Other</h2>
<div>
- <div>Tree to use</div>
- <ul>
+ Tree to use
+ <ul class="flex justify-evenly">
<li> <label> <input type="radio" v-model="uiOpts.tree" value="trimmed"
- @change="onSettingChg('UI', 'tree')"/> Comprehensive </label> </li>
+ @change="onSettingChg('UI', 'tree')"/> Complex </label> </li>
<li> <label> <input type="radio" v-model="uiOpts.tree" value="images"
@change="onSettingChg('UI', 'tree')"/> Visual </label> </li>
<li> <label> <input type="radio" v-model="uiOpts.tree" value="picked"
@@ -97,7 +98,7 @@
@change="onSettingChg('UI', 'disableShortcuts')"/> Disable keyboard shortcuts </label>
</div>
</div>
- <s-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
+ <s-button class="mx-auto my-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}"
@click="onResetAll">
Reset
</s-button>
@@ -160,13 +161,13 @@ export default defineComponent({
let maxInput = this.$refs.maxTileSzInput as HTMLInputElement;
if (option == 'minTileSz' && Number(minInput.value) > Number(maxInput.value)){
this.lytOpts.maxTileSz = this.lytOpts.minTileSz;
- this.$emit('setting-chg', 'LYT', 'maxTileSz', {save: false});
+ this.$emit('setting-chg', 'LYT', 'maxTileSz');
} else if (option == 'maxTileSz' && Number(maxInput.value) < Number(minInput.value)){
this.lytOpts.minTileSz = this.lytOpts.maxTileSz;
- this.$emit('setting-chg', 'LYT', 'minTileSz', {save: false});
+ this.$emit('setting-chg', 'LYT', 'minTileSz');
}
}
- // Notify App
+ // Notify parent component
this.$emit('setting-chg', optionType, option,
{relayout: optionType == 'LYT', reinit: optionType == 'UI' && option == 'tree'});
// Possibly make saved-indicator appear/animate
@@ -188,6 +189,7 @@ export default defineComponent({
}
},
onReset(optionType: OptionType, option: string){
+ // Restore the setting's default
let defaultLytOpts = getDefaultLytOpts();
let defaultUiOpts = getDefaultUiOpts(defaultLytOpts);
if (optionType == 'LYT'){
@@ -206,6 +208,7 @@ export default defineComponent({
}
(this.uiOpts[uiOpt] as any) = defaultUiOpts[uiOpt];
}
+ // Notify parent component
this.onSettingChg(optionType, option);
},
onResetAll(){
@@ -215,7 +218,7 @@ export default defineComponent({
let needReinit = this.uiOpts.tree != defaultUiOpts.tree;
Object.assign(this.lytOpts, defaultLytOpts);
Object.assign(this.uiOpts, defaultUiOpts);
- // Notify App
+ // Notify parent component
this.$emit('reset', needReinit);
// Clear saved-indicator
this.saved = false;
generated by cgit v1.2.3 (git 2.39.1) at 2026-04-25 14:09:33 +0000