Bind diologs with system buttons

src/App.tsx

@@ -2,6 +2,7 @@ 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'
 
 @Component
 export default class MainApp extends Vue {
@@ -15,8 +16,6 @@ export default class MainApp extends Vue {
   }
 
   initKeybinds() {
-    const modKey = 'ctrl'
-
     Mousetrap.bind(`${modKey}+t`, () => {
       PageModule.openTab({ type: 'themes' })
       PageModule.openBlock({ id: 'settings' })
@@ -69,14 +68,6 @@ export default class MainApp extends Vue {
       PageModule.CLOSE_ALL_ACTIVE_BLOCK()
     })
 
-    Mousetrap.bind(`${modKey}+p`, () => {
-      console.log('power off')
-    })
-
-    Mousetrap.bind(`${modKey}+r`, () => {
-      console.log('restart')
-    })
-
     Mousetrap.bind(`${modKey}+R`, () => {
       AppModule.randomizeSettingsTheme()
     })

src/components/app/AppDialog.tsx

@@ -2,8 +2,8 @@ import { Component, Prop, Vue } from 'vue-property-decorator'
 import { PageModule } from '@/store/page'
 import AppIcon from '@/components/app/AppIcon.vue'
 import AppButton from './AppButton'
+import { preventDefault } from '@/utils/helper'
 
-// let showDialog = false
 @Component({
   components: { AppIcon }
 })
@@ -20,7 +20,7 @@ export default class AppDialog extends Vue {
   }
 
   generateDialog() {
-    return <div class="dialog-overlay">
+    return <div class="dialog-overlay" onClick={ preventDefault }>
       <div class="dialog-body">
         <h5 class="dialog-title"> { this.$t(this.dialog?.title + '') } </h5>
         <p class="dialog-text"> { this.$t(this.dialog?.text + '') } </p>

src/components/base/ShutdownButton.tsx

@@ -3,7 +3,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 { appWindow } from '@/models/lightdm'
+import Mousetrap from 'mousetrap'
+import { modKey, systemActionsObject } from '@/utils/helper'
 
 @Component({
   components: { AppIcon, ShutdownMenu }
@@ -13,32 +14,19 @@ export default class ShutdownBlock extends Vue {
     return !!PageModule.activeBlock
   }
 
-  shutdown(event: MouseEvent) {
+  mounted() {
-    event.stopPropagation()
+    Mousetrap.bind(`${modKey}+p`, systemActionsObject.shutdown)
-    this.openShutdownDialog()
   }
 
-  openShutdownDialog() {
+  shutdown(event: MouseEvent) {
-    PageModule.openDialog({
+    event.stopPropagation()
-      title: 'modals.shutdown.title',
+    systemActionsObject.shutdown()
-      text: 'modals.shutdown.text',
-      actions: [
-        {
-          title: 'text.yes',
-          callback: appWindow.lightdm.shutdown
-        },
-        {
-          title: 'text.no',
-          callback: PageModule.closeDialog
-        }
-      ]
-    })
   }
 
   render() {
     const button = <div class="shutdown-block">
       <ShutdownMenu />
-      <div class="shutdown-button" >
+      <div class="shutdown-button" onClick={ this.shutdown }>
         <AppIcon name="shutdown" />
       </div>
     </div>

src/components/base/ShutdownMenu.tsx

@@ -2,6 +2,7 @@ import { Component, Vue } from 'vue-property-decorator'
 
 import AppIcon from '@/components/app/AppIcon.vue'
 import { appWindow } from '@/models/lightdm'
+import { systemActionsObject } from '@/utils/helper'
 
 @Component({
   components: { AppIcon }
@@ -12,17 +13,17 @@ export default class ShutdownMenu extends Vue {
       {
         icon: 'restart',
         show: appWindow.lightdm.can_restart,
-        callback: appWindow.lightdm.restart
+        callback: systemActionsObject.restart
       },
       {
         icon: 'suspend',
         show: appWindow.lightdm.can_suspend,
-        callback: appWindow.lightdm.suspend
+        callback: systemActionsObject.suspend
       },
       {
         icon: 'hibernate',
         show: appWindow.lightdm.can_hibernate,
-        callback: appWindow.lightdm.hibernate
+        callback: systemActionsObject.hibernate
       }
     ].filter(({ show }) => show)
   }

src/utils/helper.ts

@@ -1,7 +1,11 @@
 import { AppInputThemeSlider } from '@/models/app'
+import { appWindow, Lightdm } from '@/models/lightdm'
 import { AppModule } from '@/store/app'
+import { PageModule } from '@/store/page'
 import { debounce, DebounceSettings } from 'lodash'
 
+export const modKey = 'fn'
+
 export function Debounce(time = 500, options?: DebounceSettings): MethodDecorator {
   const map = new Map<number, any>()
 
@@ -82,3 +86,34 @@ export const generateDesktopIcons = () => {
     }
   })
 }
+
+const systemActions = ['hibernate', 'restart', 'shutdown', 'suspend'] as const
+type systemActionsType = typeof systemActions[number]
+
+export const buildSystemDialog = (callbackName: systemActionsType) => {
+  return () => PageModule.openDialog({
+    title: `modals.${callbackName}.title`,
+    text: `modals.${callbackName}.text`,
+    actions: [
+      {
+        title: 'text.yes',
+        callback: appWindow.lightdm[callbackName]
+      },
+      {
+        title: 'text.no',
+        callback: PageModule.closeDialog
+      }
+    ]
+  })
+}
+
+export const systemActionsObject = systemActions.reduce((acc, action) => {
+  return {
+    ...acc,
+    [action]: buildSystemDialog(action)
+  }
+}, {} as Record<systemActionsType, () => void>)
+
+export const preventDefault = (event: Event) => {
+  event.preventDefault()
+}