diff options
| -rw-r--r-- | src/App.vue | 18 | ||||
| -rw-r--r-- | src/components/SettingsModal.vue | 8 | ||||
| -rw-r--r-- | src/lib.ts | 6 | ||||
| -rw-r--r-- | src/util.ts | 2 |
4 files changed, 22 insertions, 12 deletions
diff --git a/src/App.vue b/src/App.vue index 0961c7a..4744904 100644 --- a/src/App.vue +++ b/src/App.vue @@ -185,6 +185,7 @@ export default defineComponent({ return { color: this.uiOpts.textColor, backgroundColor: this.uiOpts.altColorDark, + aspectRatio: '1/1', }; }, tutPaneContainerStyles(): Record<string,string> { @@ -783,17 +784,18 @@ export default defineComponent({ } }, onKeyUp(evt: KeyboardEvent): void { + if (this.uiOpts.disableShortcuts){ + return; + } if (evt.key == 'Escape'){ this.resetMode(); } else if (evt.key == 'f' && evt.ctrlKey){ - // If no non-search modal is open, open/focus search bar - if (this.infoModalNodeName == null && !this.helpOpen && !this.settingsOpen){ - evt.preventDefault(); - if (!this.searchOpen){ - this.onSearchIconClick(); - } else { - (this.$refs.searchModal as InstanceType<typeof SearchModal>).focusInput(); - } + evt.preventDefault(); + // Open/focus search bar + if (!this.searchOpen){ + this.onSearchIconClick(); + } else { + (this.$refs.searchModal as InstanceType<typeof SearchModal>).focusInput(); } } else if (evt.key == 'F' && evt.ctrlKey){ // If search bar is open, switch search mode diff --git a/src/components/SettingsModal.vue b/src/components/SettingsModal.vue index 6512aa4..20259e9 100644 --- a/src/components/SettingsModal.vue +++ b/src/components/SettingsModal.vue @@ -85,6 +85,10 @@ <label> <input type="checkbox" v-model="uiOpts.searchJumpMode" @change="onSettingChg('UI', 'searchJumpMode')"/> Skip search animation </label> </div> + <div v-if="!onTouchDevice"> + <label> <input type="checkbox" v-model="uiOpts.disableShortcuts" + @change="onSettingChg('UI', 'disableShortcuts')"/> Disable keyboard shortcuts </label> + </div> </div> <s-button class="mx-auto mt-2" :style="{color: uiOpts.textColor, backgroundColor: uiOpts.bgColor}" @click="onResetAll"> @@ -105,6 +109,7 @@ import SButton from './SButton.vue'; import CloseIcon from './icon/CloseIcon.vue'; import {UiOptions, OptionType, getDefaultLytOpts, getDefaultUiOpts} from '../lib'; import {LayoutOptions} from '../layout'; +import {onTouchDevice} from '../util'; export default defineComponent({ props: { @@ -113,10 +118,11 @@ export default defineComponent({ }, data(){ return { - saved: false, // Set to true after a setting is saved sweepLeaves: this.lytOpts.layoutType == 'sweep', // For making only two of 'layoutType's values available for user selection + saved: false, // Set to true after a setting is saved settingChgTimeout: 0, // Use to throttle some setting-change handling + onTouchDevice: onTouchDevice(), }; }, computed: { @@ -4,7 +4,7 @@ import {TolNode} from './tol'; import {LayoutOptions} from './layout'; -import {getBreakpoint, getScrollBarWidth, isTouchDevice} from './util'; +import {getBreakpoint, getScrollBarWidth, onTouchDevice} from './util'; // For server requests const SERVER_URL = 'http://localhost:8000/cgi-bin/data.py' @@ -109,6 +109,7 @@ export type UiOptions = { tutorialSkip: boolean, disabledActions: Set<Action>, useDblClick: boolean, + disableShortcuts: boolean, }; // Option defaults export function getDefaultLytOpts(): LayoutOptions { @@ -168,7 +169,8 @@ export function getDefaultUiOpts(lytOpts: LayoutOptions): UiOptions { searchJumpMode: false, tutorialSkip: false, disabledActions: new Set() as Set<Action>, - useDblClick: isTouchDevice(), + useDblClick: onTouchDevice(), + disableShortcuts: false, }; } // Used in Settings.vue, and when saving to localStorage diff --git a/src/util.ts b/src/util.ts index 3feb419..034879e 100644 --- a/src/util.ts +++ b/src/util.ts @@ -32,7 +32,7 @@ export function getScrollBarWidth(){ return scrollBarWidth; } // Detects a touch device -export function isTouchDevice(){ +export function onTouchDevice(){ return window.matchMedia('(pointer: coarse)').matches; } |