diff --git a/src/App.tsx b/src/App.tsx index 7457902..54a729d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -2,7 +2,8 @@ import { Component, Vue } from 'vue-property-decorator' import Mousetrap from 'mousetrap' import { AppModule } from '@/store/app' import { PageModule } from './store/page' -import { modKey } from './utils/helper' +import { focusInputPassword } from './utils/helper' +import { hotkeys } from '@/utils/hotkeys' @Component export default class MainApp extends Vue { @@ -16,20 +17,7 @@ export default class MainApp extends Vue { } initKeybinds() { - Mousetrap.bind(`${modKey}+t`, () => { - PageModule.openTab({ type: 'themes' }) - PageModule.openBlock({ id: 'settings' }) - }) - - Mousetrap.bind(`${modKey}+c`, () => { - PageModule.openTab({ type: 'custom' }) - PageModule.openBlock({ id: 'settings' }) - }) - - Mousetrap.bind(`${modKey}+s`, () => { - PageModule.openTab({ type: 'settings' }) - PageModule.openBlock({ id: 'settings' }) - }) + hotkeys.forEach(({ keys, callback }) => Mousetrap.bind(keys.join('+'), callback)) Mousetrap.bind('escape', () => { const isFocusPassword = document.querySelector('#password:focus') as HTMLInputElement @@ -48,29 +36,13 @@ export default class MainApp extends Vue { Mousetrap.bind('enter', () => { const isFocusPassword = document.querySelector('#password:focus') - const inputPassword = document.querySelector('#password') as HTMLInputElement if (isFocusPassword) { AppModule.login() - } else if (inputPassword) { - inputPassword.focus() + } else { + focusInputPassword() } }) - - // keyPress(event: KeyboardEvent) { - // if (PageModule.activeBlocks.length === 0) { - // PageModule.openBlock({ id: 'login' }) - // } - // } - - Mousetrap.bind(`${modKey}+h`, () => { - console.log('hide all windows') - PageModule.CLOSE_ALL_ACTIVE_BLOCK() - }) - - Mousetrap.bind(`${modKey}+R`, () => { - AppModule.randomizeSettingsTheme() - }) } render() { diff --git a/src/components/base/ShutdownButton.tsx b/src/components/base/ShutdownButton.tsx index 11aebbc..f33711c 100644 --- a/src/components/base/ShutdownButton.tsx +++ b/src/components/base/ShutdownButton.tsx @@ -1,10 +1,8 @@ import { Component, Vue } from 'vue-property-decorator' - import { PageModule } from '@/store/page' import AppIcon from '@/components/app/AppIcon.vue' import ShutdownMenu from '@/components/base/ShutdownMenu' -import Mousetrap from 'mousetrap' -import { modKey, systemActionsObject } from '@/utils/helper' +import { systemActionsObject } from '@/utils/helper' @Component({ components: { AppIcon, ShutdownMenu } @@ -14,19 +12,10 @@ export default class ShutdownBlock extends Vue { return !!PageModule.activeBlock } - mounted() { - Mousetrap.bind(`${modKey}+p`, systemActionsObject.shutdown) - } - - shutdown(event: MouseEvent) { - event.stopPropagation() - systemActionsObject.shutdown() - } - render() { const button =
-
+
diff --git a/src/utils/helper.ts b/src/utils/helper.ts index 8e500de..8028dde 100644 --- a/src/utils/helper.ts +++ b/src/utils/helper.ts @@ -135,6 +135,14 @@ export function preventDefault(event: Event, callback?: Function) { callback && callback() } +export function focusInputPassword() { + const inputPassword = document.querySelector('#password') as HTMLInputElement + + if (inputPassword) { + inputPassword.focus() + } +} + export function stopPropagation(event: Event, callback?: Function) { event.stopPropagation() callback && callback() diff --git a/src/utils/hotkeys.ts b/src/utils/hotkeys.ts new file mode 100644 index 0000000..f76ccd4 --- /dev/null +++ b/src/utils/hotkeys.ts @@ -0,0 +1,62 @@ +import { PageModule } from '@/store/page' +import { AppModule } from '@/store/app' +import { systemActionsObject, modKey } from '@/utils/helper' + +const prefixTitle = 'settings.keyboard.' +export const hotkeys = [ + { + keys: [modKey, 't'], + title: `${prefixTitle}open-themes`, + callback: () => { + PageModule.openTab({ type: 'themes' }) + PageModule.openBlock({ id: 'settings' }) + } + }, + { + keys: [modKey, 'c'], + title: `${prefixTitle}open-custom`, + callback: () => { + PageModule.openTab({ type: 'custom' }) + PageModule.openBlock({ id: 'settings' }) + } + }, + { + keys: [modKey, 's'], + title: `${prefixTitle}open-settings`, + callback: () => { + PageModule.openTab({ type: 'settings' }) + PageModule.openBlock({ id: 'settings' }) + } + }, + { + keys: [modKey, 'h'], + title: `${prefixTitle}hide-windows`, + callback: () => { + PageModule.CLOSE_ALL_ACTIVE_BLOCK() + } + }, + { + keys: [modKey, 'r'], + title: `${prefixTitle}randomize-theme`, + callback: () => { + AppModule.randomizeSettingsTheme() + } + }, + { + keys: [modKey, 'P'], + title: `${prefixTitle}poweroff`, + callback: systemActionsObject.shutdown + }, + { + keys: [modKey, 'R'], + title: `${prefixTitle}restart`, + callback: systemActionsObject.restart + }, + { + keys: [modKey, 'S'], + title: `${prefixTitle}suspend`, + callback: systemActionsObject.suspend + } +] + +export type hotkeysType = typeof hotkeys[number]