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

@@ -0,0 +1,3 @@
+export const showAboutDialog = win => {
+  win.webContents.send('AGANI::about-dialog')
+}

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

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
   }]
 }

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)
+    }
   }]
 }

src/main/menus/index.js

@@ -10,18 +10,14 @@ import theme from './theme'
 
 export dockMenu from './dock'
 
-export default function configureMenu ({ app }) {
+export default [
-  let template = process.platform === 'darwin' ? [marktext({ app })] : []
+  ...(process.platform === 'darwin' ? [marktext] : []),
-
+  file,
-  return [
+  edit,
-    ...template,
+  paragraph,
-    file,
+  format,
-    edit,
+  windowMenu,
-    paragraph,
+  theme,
-    format,
+  view,
-    windowMenu,
+  help
-    theme,
+]
-    view,
-    help
-  ]
-}

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 }) {
+export default {
-  return {
+  label: 'Mark Text',
-    label: 'Mark Text',
+  submenu: [{
-    submenu: [{
+    label: 'About Mark Text',
-      label: 'About Mark Text',
+    click (menuItem, browserWindow) {
-      role: 'about'
+      showAboutDialog(browserWindow)
-    }, {
+    }
-      label: 'Check for updates...',
+  }, {
-      click (menuItem, browserWindow) {
+    label: 'Check for updates...',
-        actions.checkUpdates(menuItem, browserWindow)
+    click (menuItem, browserWindow) {
-      }
+      actions.checkUpdates(menuItem, browserWindow)
-    }, {
+    }
-      label: 'Preferences',
+  }, {
-      accelerator: 'Cmd+,',
+    label: 'Preferences',
-      click (menuItem, browserWindow) {
+    accelerator: 'Cmd+,',
-        actions.userSetting(menuItem, browserWindow)
+    click (menuItem, browserWindow) {
-      }
+      actions.userSetting(menuItem, browserWindow)
-    }, {
+    }
-      type: 'separator'
+  }, {
-    }, {
+    type: 'separator'
-      label: 'Services',
+  }, {
-      role: 'services',
+    label: 'Services',
-      submenu: []
+    role: 'services',
-    }, {
+    submenu: []
-      type: 'separator'
+  }, {
-    }, {
+    type: 'separator'
-      label: 'Hide Mark Text',
+  }, {
-      accelerator: 'Command+H',
+    label: 'Hide Mark Text',
-      role: 'hide'
+    accelerator: 'Command+H',
-    }, {
+    role: 'hide'
-      label: 'Hide Others',
+  }, {
-      accelerator: 'Command+Alt+H',
+    label: 'Hide Others',
-      role: 'hideothers'
+    accelerator: 'Command+Alt+H',
-    }, {
+    role: 'hideothers'
-      label: 'Show All',
+  }, {
-      role: 'unhide'
+    label: 'Show All',
-    }, {
+    role: 'unhide'
-      type: 'separator'
+  }, {
-    }, {
+    type: 'separator'
-      label: 'Quit',
+  }, {
-      accelerator: 'Command+Q',
+    label: 'Quit',
-      click: app.quit
+    accelerator: 'Command+Q',
-    }]
+    click: app.quit
-  }
+  }]
 }

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>

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>

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)

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) => {

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 }

static/themes/dark.css

@@ -363,3 +363,7 @@ code {
   color: #777777;
   margin-top: 0;
 }
+
+.fg-color-dark {
+  color: #c6c6c6;
+}

static/themes/light.css

@@ -336,3 +336,7 @@ code {
   color: #777777;
   margin-top: 0;
 }
+
+.fg-color-dark {
+  color: #303133;
+}