Add about window

2019-04-08 01:14:32 +09:00
parent 21f5c839d1
commit 77acfb47b3
8 changed files with 173 additions and 22 deletions
--- a/info.json
+++ b/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"
 }
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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"
 }
--- a/src/about/About.vue
+++ b/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>
--- a/src/about/main.js
+++ b/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')
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/background.js
+++ b/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())
+          })
+        }
+      },
    ]
  },
  {
--- a/vue.config.js
+++ b/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')(),
        ],
      },
    },