Add dialog component

src/App.tsx

@@ -34,11 +34,14 @@ export default class MainApp extends Vue {
 
     Mousetrap.bind('escape', () => {
       const isFocusPassword = document.querySelector('#password:focus') as HTMLInputElement
+      const isShowModal = !!PageModule.dialog
 
-      if (isFocusPassword) {
-        isFocusPassword.blur()
+      if (isShowModal) {
+        PageModule.closeDialog()
       } else if (PageModule.menu.view) {
         PageModule.ASSIGN_MENU({ view: false })
+      } else if (isFocusPassword) {
+        isFocusPassword.blur()
       } else if (PageModule.activeBlock) {
         PageModule.closeBlock()
       }

src/components/app/AppButton.tsx

@@ -38,17 +38,18 @@ export default class AppButton extends Vue implements AppButtonPropsInterface {
   @Prop({ type: String }) target!: string
   @Prop({ type: Boolean }) loading!: boolean
   @Prop({ type: Boolean }) nuxt!: boolean
+  @Prop({ type: String, default: 'transparent' }) color!: string
   @Prop({ type: Boolean }) disabled!: boolean
   @Prop({ type: String, default: 'button' }) tag!: string
   @Prop({ type: [Object, String] }) to!: Route | string
   @Prop({ type: [Object, String] }) href!: Route | string
 
   get classes() {
-    const classes: any = { [prefix]: true }
+    const classes: Record<string, boolean> = { [prefix]: true, [`${prefix}--${this.color}`]: true }
     const propertyList: Array<keyof AppButtonPropsInterface> = ['fab', 'block']
 
     propertyList.forEach(property => {
-      classes[`${prefix}--${property}`] = this[property]
+      classes[`${prefix}--${property}`] = !!this[property]
     })
 
     return {
@@ -106,6 +107,7 @@ export default class AppButton extends Vue implements AppButtonPropsInterface {
 
     if (tag === 'button') {
       data.attrs!.type = this.type
+      data.attrs!.autofocus = true
       data.attrs!.disabled = this.disabled
     }
 

src/components/app/AppDialog.tsx

@@ -0,0 +1,45 @@
+import { Component, Prop, Vue } from 'vue-property-decorator'
+import { PageModule } from '@/store/page'
+import AppIcon from '@/components/app/AppIcon.vue'
+import AppButton from './AppButton'
+
+// let showDialog = false
+@Component({
+  components: { AppIcon }
+})
+export default class AppDialog extends Vue {
+  @Prop({ type: Boolean, default: false }) value!: boolean
+  @Prop({ default: '' }) label!: string
+
+  get dialog() {
+    return PageModule.dialog
+  }
+
+  get showDialog() {
+    return !!this.dialog
+  }
+
+  generateDialog() {
+    return <div class="dialog-overlay">
+      <div class="dialog-body">
+        <h5 class="dialog-title"> { this.$t(this.dialog?.title + '') } </h5>
+        <p class="dialog-text"> { this.$t(this.dialog?.text + '') } </p>
+        { this.generateButtons() }
+      </div>
+    </div>
+  }
+
+  generateButtons() {
+    const buttons = this.dialog?.actions.map(({ title, callback }) => {
+      return <AppButton onClick={ callback }> { this.$t(title + '') } </AppButton>
+    })
+
+    return <div class="dialog-buttons"> { buttons } </div>
+  }
+
+  render() {
+    return <transition name="fade">
+      { this.showDialog && this.generateDialog() }
+    </transition>
+  }
+}

src/components/base/ShutdownButton.tsx

@@ -15,13 +15,30 @@ export default class ShutdownBlock extends Vue {
 
   shutdown(event: MouseEvent) {
     event.stopPropagation()
-    appWindow.lightdm.suspend()
+    this.openShutdownDialog()
+  }
+
+  openShutdownDialog() {
+    PageModule.openDialog({
+      title: 'modals.shutdown.title',
+      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" onClick={ this.shutdown }>
+      <div class="shutdown-button" >
         <AppIcon name="shutdown" />
       </div>
     </div>

src/models/page.ts

@@ -49,3 +49,15 @@ export interface AppMenuPosition {
   top?: number;
   bottom?: number;
 }
+
+export interface DialogButtonInterface {
+  title: string;
+  callback: () => void;
+
+}
+
+export interface DialogInterface {
+  title: string;
+  text: string;
+  actions: DialogButtonInterface[];
+}

src/style/components/button.styl

@@ -8,9 +8,14 @@
   color black
   align-items center
   justify-content center
-  transition: .3s background
+  transition: .2s background, .2s border, .2s color
   &:hover
     background var(--color-active)
+  &:focus
+    border: 1px solid var(--color-active)
+    background: none
+    outline: none
+    color white
 
 .app-button--block
   display: flex;

src/style/components/dialog.styl

@@ -0,0 +1,30 @@
+.dialog-overlay
+  width 100%
+  height 100%
+  position absolute
+  display flex
+  align-items center
+  justify-content center
+  background rgba(0, 0, 0, .8)
+
+.dialog-body
+  padding: 24px 36px
+  border-radius: 12px
+  background rgba(0, 0, 0, .8)
+
+.dialog-title
+  text-align center
+  margin 0
+  font-size 3.25rem
+
+.dialog-text
+  text-align center
+  margin-bottom 12px
+  font-size 1.5rem
+
+.dialog-buttons
+  display flex
+  gap 12px
+  .app-button
+    min-width 100px
+    flex 1

src/style/components/index.styl

@@ -1,5 +1,6 @@
 @import './menu.styl'
 @import './login.styl'
+@import './dialog.styl'
 @import './slider.styl'
 @import './button.styl'
 @import './palette.styl'

src/views/Home.tsx

@@ -112,6 +112,8 @@ export default class HomePage extends Vue {
 
       { !this.isViewThemeOnly && <ShutdownButton /> }
       { this.showGithubButton && <GithubButton /> }
+
+      <AppDialog />
       <AppMenu />
     </div>
   }