From e3340e14a24d0e5a2d28cf605206a67600064a07 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Felix=20H=C3=A4usler?= <hfelix@protonmail.ch>
Date: Fri, 23 Mar 2018 11:27:17 +0100
Subject: [PATCH] Added 'Mark Text' menu for Linux and Windows (#59)

* Add 'Mark Text' menu for Linux and Windows

* Add about dialog for linux and windows
---
 src/main/actions/help.js                |   3 +
 src/main/index.js                       |   2 +-
 src/main/menus/file.js                  |  21 ++++++
 src/main/menus/help.js                  |  22 ++++++
 src/main/menus/index.js                 |  26 +++----
 src/main/menus/marktext.js              |  90 ++++++++++++------------
 src/renderer/app.vue                    |   6 +-
 src/renderer/assets/images/logo.png     | Bin 0 -> 6651 bytes
 src/renderer/components/about/index.vue |  72 +++++++++++++++++++
 src/renderer/store/editor.js            |   6 ++
 src/renderer/store/index.js             |   4 +-
 src/renderer/store/version.js           |  13 ++++
 static/themes/dark.css                  |   4 ++
 static/themes/light.css                 |   4 ++
 14 files changed, 211 insertions(+), 62 deletions(-)
 create mode 100644 src/main/actions/help.js
 create mode 100644 src/renderer/assets/images/logo.png
 create mode 100644 src/renderer/components/about/index.vue
 create mode 100644 src/renderer/store/version.js

diff --git a/src/main/actions/help.js b/src/main/actions/help.js
new file mode 100644
index 00000000..88d35fd4
--- /dev/null
+++ b/src/main/actions/help.js
@@ -0,0 +1,3 @@
+export const showAboutDialog = win => {
+  win.webContents.send('AGANI::about-dialog')
+}
diff --git a/src/main/index.js b/src/main/index.js
index 0f9a36ea..98e78a1e 100644
--- a/src/main/index.js
+++ b/src/main/index.js
@@ -24,7 +24,7 @@ const onReady = () => {
   } else {
     createWindow()
   }
-  const menu = Menu.buildFromTemplate(configureMenu({ app }))
+  const menu = Menu.buildFromTemplate(configureMenu)
   Menu.setApplicationMenu(menu)
   if (process.platform === 'darwin') {
     // app.dock is only for macosx
diff --git a/src/main/menus/file.js b/src/main/menus/file.js
index 4e024660..61fe2040 100755
--- a/src/main/menus/file.js
+++ b/src/main/menus/file.js
@@ -1,7 +1,10 @@
+import { app } from 'electron'
 import * as actions from '../actions/file'
+import { userSetting } from '../actions/marktext'
 import userPreference from '../preference'
 
 const { autoSave } = userPreference.getAll()
+const notOsx = process.platform !== 'darwin'
 
 export default {
   label: 'File',
@@ -70,5 +73,23 @@ export default {
     click (menuItem, browserWindow) {
       actions.print(browserWindow)
     }
+  }, {
+    type: 'separator',
+    visible: notOsx
+  }, {
+    label: 'Preferences',
+    accelerator: 'Ctrl+,',
+    visible: notOsx,
+    click (menuItem, browserWindow) {
+      userSetting(menuItem, browserWindow)
+    }
+  }, {
+    type: 'separator',
+    visible: notOsx
+  }, {
+    label: 'Quit',
+    accelerator: 'Ctrl+Q',
+    visible: notOsx,
+    click: app.quit
   }]
 }
diff --git a/src/main/menus/help.js b/src/main/menus/help.js
index 6fc8f1e9..fa218997 100755
--- a/src/main/menus/help.js
+++ b/src/main/menus/help.js
@@ -1,4 +1,8 @@
 import { shell } from 'electron'
+import * as actions from '../actions/help'
+import { checkUpdates } from '../actions/marktext'
+
+const notOsx = process.platform !== 'darwin'
 
 export default {
   label: 'Help',
@@ -35,5 +39,23 @@ export default {
     click: function () {
       shell.openExternal('https://github.com/Jocs')
     }
+  }, {
+    type: 'separator',
+    visible: notOsx
+  }, {
+    label: 'Check for updates...',
+    visible: notOsx,
+    click (menuItem, browserWindow) {
+      checkUpdates(menuItem, browserWindow)
+    }
+  }, {
+    type: 'separator',
+    visible: notOsx
+  }, {
+    label: 'About Mark Text',
+    visible: notOsx,
+    click (menuItem, browserWindow) {
+      actions.showAboutDialog(browserWindow)
+    }
   }]
 }
diff --git a/src/main/menus/index.js b/src/main/menus/index.js
index 1dd0323f..35472bf9 100644
--- a/src/main/menus/index.js
+++ b/src/main/menus/index.js
@@ -10,18 +10,14 @@ import theme from './theme'
 
 export dockMenu from './dock'
 
-export default function configureMenu ({ app }) {
-  let template = process.platform === 'darwin' ? [marktext({ app })] : []
-
-  return [
-    ...template,
-    file,
-    edit,
-    paragraph,
-    format,
-    windowMenu,
-    theme,
-    view,
-    help
-  ]
-}
+export default [
+  ...(process.platform === 'darwin' ? [marktext] : []),
+  file,
+  edit,
+  paragraph,
+  format,
+  windowMenu,
+  theme,
+  view,
+  help
+]
diff --git a/src/main/menus/marktext.js b/src/main/menus/marktext.js
index c58bb961..623fee75 100755
--- a/src/main/menus/marktext.js
+++ b/src/main/menus/marktext.js
@@ -1,47 +1,49 @@
+import { app } from 'electron'
+import { showAboutDialog } from '../actions/help'
 import * as actions from '../actions/marktext'
 
-export default function markTextMenu ({ app }) {
-  return {
-    label: 'Mark Text',
-    submenu: [{
-      label: 'About Mark Text',
-      role: 'about'
-    }, {
-      label: 'Check for updates...',
-      click (menuItem, browserWindow) {
-        actions.checkUpdates(menuItem, browserWindow)
-      }
-    }, {
-      label: 'Preferences',
-      accelerator: 'Cmd+,',
-      click (menuItem, browserWindow) {
-        actions.userSetting(menuItem, browserWindow)
-      }
-    }, {
-      type: 'separator'
-    }, {
-      label: 'Services',
-      role: 'services',
-      submenu: []
-    }, {
-      type: 'separator'
-    }, {
-      label: 'Hide Mark Text',
-      accelerator: 'Command+H',
-      role: 'hide'
-    }, {
-      label: 'Hide Others',
-      accelerator: 'Command+Alt+H',
-      role: 'hideothers'
-    }, {
-      label: 'Show All',
-      role: 'unhide'
-    }, {
-      type: 'separator'
-    }, {
-      label: 'Quit',
-      accelerator: 'Command+Q',
-      click: app.quit
-    }]
-  }
+export default {
+  label: 'Mark Text',
+  submenu: [{
+    label: 'About Mark Text',
+    click (menuItem, browserWindow) {
+      showAboutDialog(browserWindow)
+    }
+  }, {
+    label: 'Check for updates...',
+    click (menuItem, browserWindow) {
+      actions.checkUpdates(menuItem, browserWindow)
+    }
+  }, {
+    label: 'Preferences',
+    accelerator: 'Cmd+,',
+    click (menuItem, browserWindow) {
+      actions.userSetting(menuItem, browserWindow)
+    }
+  }, {
+    type: 'separator'
+  }, {
+    label: 'Services',
+    role: 'services',
+    submenu: []
+  }, {
+    type: 'separator'
+  }, {
+    label: 'Hide Mark Text',
+    accelerator: 'Command+H',
+    role: 'hide'
+  }, {
+    label: 'Hide Others',
+    accelerator: 'Command+Alt+H',
+    role: 'hideothers'
+  }, {
+    label: 'Show All',
+    role: 'unhide'
+  }, {
+    type: 'separator'
+  }, {
+    label: 'Quit',
+    accelerator: 'Command+Q',
+    click: app.quit
+  }]
 }
diff --git a/src/renderer/app.vue b/src/renderer/app.vue
index ccf32cea..3969ab5f 100644
--- a/src/renderer/app.vue
+++ b/src/renderer/app.vue
@@ -31,6 +31,7 @@
     ></bottom-bar>
     <aidou></aidou>
     <upload-image></upload-image>
+    <about-dialog></about-dialog>
   </div>
 </template>
 
@@ -41,6 +42,7 @@
   import SourceCode from '@/components/sourceCode'
   import Aidou from '@/components/aidou/aidou'
   import UploadImage from '@/components/uploadImage'
+  import AboutDialog from '@/components/about'
   import { mapState } from 'vuex'
 
   export default {
@@ -51,7 +53,8 @@
       TitleBar,
       BottomBar,
       SourceCode,
-      UploadImage
+      UploadImage,
+      AboutDialog
     },
     data () {
       return {}
@@ -82,6 +85,7 @@
       dispatch('LISTEN_FOR_PARAGRAPH_INLINE_STYLE')
       dispatch('LISTEN_FOR_UPDATE')
       dispatch('LISTEN_FOR_INSERT_IMAGE')
+      dispatch('LISTEN_FOR_ABOUT_DIALOG')
     }
   }
 </script>
diff --git a/src/renderer/assets/images/logo.png b/src/renderer/assets/images/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..ea250930349c8d86b1fdfaec20c076bd426b9c07
GIT binary patch
literal 6651
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
FV1isL=i>kX

literal 0
HcmV?d00001

diff --git a/src/renderer/components/about/index.vue b/src/renderer/components/about/index.vue
new file mode 100644
index 00000000..fb54c4a7
--- /dev/null
+++ b/src/renderer/components/about/index.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="about-dialog" :class="theme">
+    <el-dialog
+      :visible.sync="showAboutDialog"
+      :show-close="false"
+      :modal="true"
+      custom-class="ag-dialog-table"
+      width="400px"
+    >
+      <img class="logo" src="../../assets/images/logo.png" />
+      <el-row>
+        <el-col :span="24">
+          <h3 class="text fg-color-dark">{{ name }}</h3>
+        </el-col>
+        <el-col :span="24">
+          <div class="text">{{ versionPrefix }}{{ appVersion }}</div>
+        </el-col>
+        <el-col :span="24">
+          <div class="text">Copyright © 2018 Jocs</div>
+        </el-col>
+      </el-row>
+  </div>
+</template>
+
+<script>
+  import { mapState } from 'vuex'
+  import bus from '../../bus'
+
+  export default {
+    data () {
+      return {
+        showAboutDialog: false,
+        name: 'Mark Text',
+        versionPrefix: 'v'
+      }
+    },
+    computed: {
+      ...mapState([
+        'appVersion',
+        'theme'
+      ])
+    },
+    created () {
+      bus.$on('aboutDialog', this.showDialog)
+    },
+    beforeDestroy () {
+      bus.$off('aboutDialog', this.showDialog)
+    },
+    methods: {
+      showDialog () {
+        this.showAboutDialog = true
+      }
+    }
+  }
+</script>
+
+<style>
+  .about-dialog el-row,
+  .about-dialog el-col {
+    display: block;
+  }
+
+  .about-dialog .logo {
+    display: inherit;
+    margin: 0 auto;
+  }
+
+  .about-dialog .text {
+    text-align: center;
+    min-height: 32px;
+  }
+</style>
diff --git a/src/renderer/store/editor.js b/src/renderer/store/editor.js
index 2d555135..cc2b6460 100644
--- a/src/renderer/store/editor.js
+++ b/src/renderer/store/editor.js
@@ -237,6 +237,12 @@ const actions = {
     })
   },
 
+  LISTEN_FOR_ABOUT_DIALOG ({ commit }) {
+    ipcRenderer.on('AGANI::about-dialog', e => {
+      bus.$emit('aboutDialog')
+    })
+  },
+
   LISTEN_FOR_PARAGRAPH_INLINE_STYLE ({ commit }) {
     ipcRenderer.on('AGANI::paragraph', (e, { type }) => {
       bus.$emit('paragraph', type)
diff --git a/src/renderer/store/index.js b/src/renderer/store/index.js
index c2248984..12d8a4f8 100644
--- a/src/renderer/store/index.js
+++ b/src/renderer/store/index.js
@@ -4,13 +4,15 @@ import Vuex from 'vuex'
 import editorStore from './editor'
 import aidouStore from './aidou'
 import autoUpdates from './autoUpdates'
+import version from './version'
 
 Vue.use(Vuex)
 
 const storeArray = [
   editorStore,
   aidouStore,
-  autoUpdates
+  autoUpdates,
+  version
 ]
 
 const { actions, mutations, state } = storeArray.reduce((acc, s) => {
diff --git a/src/renderer/store/version.js b/src/renderer/store/version.js
new file mode 100644
index 00000000..e046c1bc
--- /dev/null
+++ b/src/renderer/store/version.js
@@ -0,0 +1,13 @@
+import { remote } from 'electron'
+
+const state = {
+  appVersion: remote.app.getVersion()
+}
+
+const mutations = {
+}
+
+const actions = {
+}
+
+export default { state, mutations, actions }
diff --git a/static/themes/dark.css b/static/themes/dark.css
index 0c75d21d..4ff9fe5d 100755
--- a/static/themes/dark.css
+++ b/static/themes/dark.css
@@ -363,3 +363,7 @@ code {
   color: #777777;
   margin-top: 0;
 }
+
+.fg-color-dark {
+  color: #c6c6c6;
+}
diff --git a/static/themes/light.css b/static/themes/light.css
index e47712c5..84873b44 100644
--- a/static/themes/light.css
+++ b/static/themes/light.css
@@ -336,3 +336,7 @@ code {
   color: #777777;
   margin-top: 0;
 }
+
+.fg-color-dark {
+  color: #303133;
+}