diff options
| author | Terry Truong <terry06890@gmail.com> | 2022-06-23 20:29:40 +1000 |
|---|---|---|
| committer | Terry Truong <terry06890@gmail.com> | 2022-06-23 21:38:59 +1000 |
| commit | 278cae75c2fea34e0290b693d9c6fb7da5cf026b (patch) | |
| tree | e7815a7b571533c7ce42f79b2ddaad792dd06731 /src/components | |
| parent | f0ecf2a11368aedca55a8c2df2549fd335efc7e5 (diff) | |
Make default settings screen-size dependent
Also, only save settings when the user has made a change.
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/SettingsModal.vue | 26 | ||||
| -rw-r--r-- | src/components/Tile.vue | 1 |
2 files changed, 21 insertions, 6 deletions
diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index e95dc34..c4f896d 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -10,15 +10,26 @@ export default defineComponent({ lytOpts: {type: Object as PropType<LayoutOptions>, required: true}, uiOpts: {type: Object, required: true}, }, + data(){ + return { + optChgd: false, + }; + }, methods: { onCloseClick(evt: Event){ if (evt.target == this.$el || (this.$refs.closeIcon as typeof CloseIcon).$el.contains(evt.target)){ - this.saveSettings(); + if (this.optChgd){ + this.saveSettings(); + } this.$emit('close'); } }, + onOptChg(){ + this.optChgd = true; + }, onLytOptChg(){ this.$emit('layout-setting-chg'); + this.onOptChg(); }, onMinTileSzChg(){ let minInput = this.$refs.minTileSzInput as HTMLInputElement; @@ -38,6 +49,7 @@ export default defineComponent({ }, onTreeChg(){ this.$emit('tree-chg'); + this.onOptChg(); }, saveSettings(){ const savedLytOpts = ['tileSpacing', 'minTileSz', 'maxTileSz', 'layoutType', 'sweepMode', 'sweepToParent', ]; @@ -52,6 +64,7 @@ export default defineComponent({ }, onReset(){ localStorage.clear(); + this.optChgd = false; this.$emit('reset'); console.log('Settings reset'); }, @@ -71,21 +84,21 @@ export default defineComponent({ <hr class="border-stone-400"/> <div> <label>Tile Spacing <input type="range" min="0" max="20" class="mx-2 w-[3cm]" - v-model.number="lytOpts.tileSpacing" @input="onLytOptChg"/></label> + v-model.number="lytOpts.tileSpacing" @change="onLytOptChg"/></label> </div> <hr class="border-stone-400"/> <div> <label> <span class="inline-block w-[3cm]">Min Tile Size</span> <input type="range" min="0" max="400" v-model.number="lytOpts.minTileSz" class="w-[3cm]" - @input="onMinTileSzChg" ref="minTileSzInput"/> + @change="onMinTileSzChg" ref="minTileSzInput"/> </label> </div> <div> <label> <span class="inline-block w-[3cm]">Max Tile Size</span> <input type="range" min="0" max="400" v-model.number="lytOpts.maxTileSz" class="w-[3cm]" - @input="onMaxTileSzChg" ref="maxTileSzInput"/> + @change="onMaxTileSzChg" ref="maxTileSzInput"/> </label> </div> <hr class="border-stone-400"/> @@ -149,11 +162,12 @@ export default defineComponent({ <hr class="border-stone-400"/> <div> <label>Animation Duration <input type="range" min="0" max="3000" class="mx-2 w-[3cm]" - v-model.number="uiOpts.tileChgDuration"/></label> + v-model.number="uiOpts.tileChgDuration" @change="onOptChg"/></label> </div> <hr class="border-stone-400"/> <div> - <label> <input type="checkbox" v-model="uiOpts.jumpToSearchedNode"/> Jump to search result</label> + <label> <input type="checkbox" v-model="uiOpts.jumpToSearchedNode" @change="onOptChg"/> + Jump to search result</label> </div> <hr class="border-stone-400"/> <div> diff --git a/src/components/Tile.vue b/src/components/Tile.vue index 7b412b2..3054d46 100644 --- a/src/components/Tile.vue +++ b/src/components/Tile.vue @@ -242,6 +242,7 @@ export default defineComponent({ fontSize: this.uiOpts.nonleafHeaderFontSz + 'px', textAlign: 'center', color: this.uiOpts.nonleafHeaderColor, + paddingLeft: '5px', // For ellipsis overflow: 'hidden', textOverflow: 'ellipsis', |