Add about window

info.json

@@ -1,5 +1,6 @@
 {
   "appId": "dev.kpherox.thedesk-vue",
   "copyright": "Copyright © 2018 TheDesk",
+  "codeName": "Pre Theater",
   "documentURL": "https://github.com/kPherox/TheDesk-Vue#readme"
 }

package-lock.json

@@ -4047,6 +4047,17 @@
         }
       }
     },
+    "csswring": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/csswring/-/csswring-7.0.0.tgz",
+      "integrity": "sha512-yl9lWqdhVn4gD0Vf00BMKKFuLq19hpz87VTDBRYFa+xWjRdfa/+bddCsWN7mbwfXWFoL5RwDOJmKakkC/VaH7w==",
+      "dev": true,
+      "requires": {
+        "minimist": "^1.2.0",
+        "onecolor": "^3.0.5",
+        "postcss": "^7.0.0"
+      }
+    },
     "currently-unhandled": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/currently-unhandled/-/currently-unhandled-0.4.1.tgz",
@@ -9151,6 +9162,12 @@
         "wrappy": "1"
       }
     },
+    "onecolor": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/onecolor/-/onecolor-3.1.0.tgz",
+      "integrity": "sha512-YZSypViXzu3ul5LMu/m6XjJ9ol8qAy9S2VjHl5E6UlhUH1KGKWabyEJifn0Jjpw23bYDzC2ucKMPGiH5kfwSGQ==",
+      "dev": true
+    },
     "onetime": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-2.0.1.tgz",
@@ -10060,6 +10077,16 @@
         }
       }
     },
+    "postcss-nested": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.1.2.tgz",
+      "integrity": "sha512-9bQFr2TezohU3KRSu9f6sfecXmf/x6RXDedl8CHF6fyuyVW7UqgNMRdWMHZQWuFY6Xqs2NYk+Fj4Z4vSOf7PQg==",
+      "dev": true,
+      "requires": {
+        "postcss": "^7.0.14",
+        "postcss-selector-parser": "^5.0.0"
+      }
+    },
     "postcss-normalize-charset": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/postcss-normalize-charset/-/postcss-normalize-charset-4.0.1.tgz",

package.json

@@ -1,34 +1,20 @@
 {
   "name": "thedesk-vue",
-  "productName": "TheDesk Vue",
   "version": "0.1.0",
-  "description": "TheDesk is a Mastodon client for PC.",
   "private": true,
-  "license": "GPL-3.0",
-  "repository": "github:kPherox/TheDesk-Vue",
-  "bugs": {
-    "url": "https://github.com/kPherox/TheDesk-Vue/issues"
-  },
-  "homepage": "https://github.com/kPherox/TheDesk-Vue",
+  "description": "TheDesk is a Mastodon client for PC.",
   "author": {
     "name": "Cutls",
     "url": "https://kirishima.clooud/@Cutls",
     "email": "web-pro@cutls.com"
   },
-  "contributors": [
-    {
-      "name": "kPherox",
-      "url": "https://www.kr-kp.com/",
-      "email": "admin@mail.kr-kp.com"
-    }
-  ],
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "electron:build": "vue-cli-service electron:build",
-    "electron:serve": "vue-cli-service electron:serve",
     "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten",
+    "electron:serve": "vue-cli-service electron:serve",
     "postinstall": "electron-builder install-app-deps",
     "postuninstall": "electron-builder install-app-deps"
   },
@@ -42,12 +28,14 @@
     "@vue/cli-plugin-eslint": "^3.5.0",
     "@vue/cli-service": "^3.5.0",
     "babel-eslint": "^10.0.1",
+    "csswring": "^7.0.0",
     "electron": "^4.0.0",
     "electron-context-menu": "^0.11.0",
     "electron-icon-builder": "^1.0.0",
     "electron-localshortcut": "^3.1.0",
     "eslint": "^5.8.0",
     "eslint-plugin-vue": "^5.0.0",
+    "postcss-nested": "^4.1.2",
     "vue-cli-plugin-electron-builder": "^1.2.0",
     "vue-template-compiler": "^2.5.21"
   },
@@ -67,5 +55,19 @@
   },
   "browserslist": [
     "electron >= 4.0.0"
-  ]
+  ],
+  "bugs": {
+    "url": "https://github.com/kPherox/TheDesk-Vue/issues"
+  },
+  "contributors": [
+    {
+      "name": "kPherox",
+      "url": "https://www.kr-kp.com/",
+      "email": "admin@mail.kr-kp.com"
+    }
+  ],
+  "homepage": "https://github.com/kPherox/TheDesk-Vue",
+  "license": "GPL-3.0",
+  "productName": "TheDesk Vue",
+  "repository": "github:kPherox/TheDesk-Vue"
 }

src/about/About.vue

@@ -0,0 +1,77 @@
+<template>
+  <div id="about">
+    <div id="brand">
+      <div id="logo">
+        <img :alt="productName+' logo'" src="@/assets/logo.png" width="194" draggable="false">
+      </div>
+      <p id="app-name">{{ productName }}</p>
+    </div>
+    <dl class="version">
+      <template v-for="(name, idx) in versionInfo">
+        <dt :key="'title-'+idx">{{ versionName[name] }}</dt>
+        <dd :key="'desc-'+idx">{{ name !== "codeName" ? versions[name] : codeName }}</dd>
+      </template>
+    </dl>
+    <div id="copyright">
+      <small>{{ copyright }}</small>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss">
+body {
+  margin: 0;
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -webkit-app-region: drag;
+  user-select: none;
+}
+#about {
+  padding: .5em;
+  text-align: center;
+}
+#brand {
+  margin-top: 1em;
+  & > p {
+    margin-top: 0;
+  }
+}
+#app-name {
+  font-weight: bold;
+}
+dl.version {
+  margin: 0;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-auto-rows: 1.5em;
+  text-align: left;
+  -webkit-app-region: no-drag;
+  user-select: all;
+  padding: .5em;
+  dt, dd {
+    margin-left: 0;
+    line-height: 1.5em;
+  }
+}
+</style>
+
+<script>
+import { remote } from 'electron'
+const appInfo = JSON.parse(remote.getGlobal('TheDeskInfo'))
+
+export default {
+  name: 'about',
+  data() {
+    return Object.assign(appInfo, {
+      versionName: {
+        codeName: "Code Name",
+        internal: "Internal Version",
+        chrome: "Chromium",
+        electron: "Electron",
+        node: "Node.js",
+      },
+      versionInfo: [ "codeName", "internal", "chrome", "electron", "node" ]
+    })
+  },
+}
+</script>

src/about/main.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import About from './About.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(About),
+}).$mount('#app')

src/background.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import path from 'path'
+import pick from 'lodash/pick'
 import {
   app,
   protocol,
@@ -15,9 +16,15 @@ import {
 } from 'vue-cli-plugin-electron-builder/lib'
 import localShortcut from 'electron-localshortcut'
 
-import { bugs } from '../package.json'
+import { bugs, homepage } from '../package.json'
 import thedeskInfo from '../info.json'
 
+global.TheDeskInfo = JSON.stringify(Object.assign({
+  productName: app.getName(),
+  homePage: homepage,
+  versions: Object.assign(pick(process.versions, ["chrome","electron","node"]), {internal: app.getVersion()}),
+}, thedeskInfo))
+
 const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // イベントリスナや`createWindow`関数が参照するグローバル変数
@@ -66,7 +73,6 @@ async function createWindow(windowName, loadPath, windowOptions, singleton, last
     win.loadURL(`app://./${loadPath}`)
   }
 
-  localShortcut.register(win, 'F5', () => windows[windowName].reload())
   lastAction(win)
 
   windows[windowName] = win
@@ -79,7 +85,9 @@ function openMainWindow() {
     height: 600,
     autoHideMenuBar: true,
   }
-  createWindow('main', 'index.html', winOpts, true, null, !process.env.IS_TEST)
+  createWindow('main', 'index.html', winOpts, true, (win) => {
+    localShortcut.register(win, 'F5', () => windows.main.reload())
+  }, !process.env.IS_TEST)
 }
 
 // Quit when all windows are closed.
@@ -133,7 +141,29 @@ const template = [
   {
     label: app.getName(),
     submenu: [
-      { role: 'about' },
+      {
+        label: process.platform !== 'darwin' ? 'About' : `About ${app.getName()}`,
+        click: () => {
+          const winOpts = {
+            width: 296,
+            height: 432,
+            resizable: false,
+            minimizable: false,
+            maximizable: false,
+            fullscreenable: false,
+            autoHideMenuBar: true,
+            titleBarStyle: 'hiddenInset',
+          }
+          createWindow('about', 'about.html', winOpts, true, (win) => {
+            win.setMenuBarVisibility(false)
+            win.webContents.on('before-input-event', (event, input) => {
+              if (typeof windows.about !== 'undefined')
+                windows.about.webContents.setIgnoreMenuShortcuts(input.key !== "Escape")
+            })
+            localShortcut.register(win, 'Esc', () => windows.about.destroy())
+          })
+        }
+      },
     ]
   },
   {

vue.config.js

@@ -7,15 +7,21 @@ module.exports = {
     index: {
       entry: 'src/index/main.js',
       template: 'public/index.html',
-      filename: 'index.html',
       title: productName,
     },
+    about: {
+      entry: 'src/about/main.js',
+      template: 'public/index.html',
+      title: `About`,
+    },
   },
   css: {
     loaderOptions: {
       postcss: {
         plugins: [
+          require('postcss-nested')(),
           require('autoprefixer')({}),
+          require('CSSWring')(),
         ],
       },
     },