feat: add setting to disable hotkeys (#889)

This commit is contained in:
Nolan Lawson 2019-01-13 14:02:15 -08:00 committed by GitHub
parent 4a6f7b74a4
commit 8f84ae5a51
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 47 additions and 6 deletions

View File

@ -1,6 +1,4 @@
<div class="{inDialog ? 'in-dialog' : ''}"> <div class="{inDialog ? 'in-dialog' : ''}">
<h1>Hotkeys</h1>
<ul> <ul>
<li><kbd>s</kbd> to search</li> <li><kbd>s</kbd> to search</li>
<li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li> <li><kbd>1</kbd> - <kbd>6</kbd> to switch columns</li>
@ -22,9 +20,6 @@
</ul> </ul>
</div> </div>
<style> <style>
.in-dialog h1 {
color: var(--muted-modal-text);
}
li { li {
list-style-type: none; list-style-type: none;
} }

View File

@ -5,10 +5,17 @@
muted="true" muted="true"
className="shortcut-help-modal-dialog"> className="shortcut-help-modal-dialog">
<h1>Hotkeys</h1>
<ShortcutHelpInfo inDialog={true} /> <ShortcutHelpInfo inDialog={true} />
<Shortcut scope='modal' key='h|?' on:pressed='close()'/> <Shortcut scope='modal' key='h|?' on:pressed='close()'/>
</ModalDialog> </ModalDialog>
<style>
h1 {
color: var(--muted-modal-text);
}
</style>
<script> <script>
import ModalDialog from './ModalDialog.html' import ModalDialog from './ModalDialog.html'
import ShortcutHelpInfo from '../../ShortcutHelpInfo.html' import ShortcutHelpInfo from '../../ShortcutHelpInfo.html'

View File

@ -1,11 +1,44 @@
<SettingsLayout page='settings/hotkeys' label="Hotkeys"> <SettingsLayout page='settings/hotkeys' label="Hotkeys">
<h1>Hotkeys</h1>
<h2 class="sr-only">Preferences</h2>
<form class="ui-settings" aria-label="Hotkey settings">
<div class="setting-group">
<input type="checkbox" id="choice-disable-hotkeys"
bind:checked="$disableHotkeys" on:change="onChange()">
<label for="choice-disable-hotkeys">Disable hotkeys</label>
</div>
</form>
<h2 class="sr-only">Guide</h2>
<ShortcutHelpInfo /> <ShortcutHelpInfo />
</SettingsLayout> </SettingsLayout>
<style>
.ui-settings {
background: var(--form-bg);
border: 1px solid var(--main-border);
border-radius: 4px;
padding: 20px;
line-height: 2em;
margin-bottom: 20px;
}
.setting-group {
padding: 5px 0;
}
</style>
<script> <script>
import SettingsLayout from '../../_components/settings/SettingsLayout.html' import SettingsLayout from '../../_components/settings/SettingsLayout.html'
import ShortcutHelpInfo from '../../_components/ShortcutHelpInfo.html' import ShortcutHelpInfo from '../../_components/ShortcutHelpInfo.html'
import { store } from '../../_store/store'
export default { export default {
store: () => store,
methods: {
onChange () {
this.store.save()
}
},
components: { components: {
SettingsLayout, SettingsLayout,
ShortcutHelpInfo ShortcutHelpInfo

View File

@ -11,6 +11,7 @@ const persistedState = {
currentRegisteredInstanceName: undefined, currentRegisteredInstanceName: undefined,
currentRegisteredInstance: undefined, currentRegisteredInstance: undefined,
disableCustomScrollbars: false, disableCustomScrollbars: false,
disableHotkeys: false,
disableLongAriaLabels: false, disableLongAriaLabels: false,
disableTapOnStatus: false, disableTapOnStatus: false,
largeInlineMedia: false, largeInlineMedia: false,

View File

@ -1,3 +1,5 @@
import { store } from '../_store/store'
// A map of scopeKey to KeyMap // A map of scopeKey to KeyMap
let scopeKeyMaps let scopeKeyMaps
@ -119,6 +121,9 @@ function handleEvent (scopeKey, keyMap, key, event) {
} }
function onKeyDown (event) { function onKeyDown (event) {
if (store.get().disableHotkeys) {
return
}
if (!acceptShortcutEvent(event)) { if (!acceptShortcutEvent(event)) {
return return
} }