Merge pull request #821 from responsively-org/about-menu

Added about in help menu

desktop-app/src/main/menu.ts

@@ -4,7 +4,11 @@ import {
   shell,
   BrowserWindow,
   MenuItemConstructorOptions,
+  clipboard,
+  dialog,
 } from 'electron';
+import path from 'path';
+import { getEnvironmentInfo, getPackageJson } from './util';
 
 interface DarwinMenuItemConstructorOptions extends MenuItemConstructorOptions {
   selector?: string;
@@ -167,6 +171,54 @@ export default class MenuBuilder {
         { label: 'Bring All to Front', selector: 'arrangeInFront:' },
       ],
     };
+    const aboutClick = () => {
+      const iconPath = path.join(__dirname, '../resources/icons/64x64.png');
+      const title = 'Responsively';
+      const { description } = getPackageJson();
+      const {
+        appVersion,
+        electronVersion,
+        chromeVersion,
+        nodeVersion,
+        v8Version,
+        osInfo,
+      } = getEnvironmentInfo();
+
+      const usefulInfo = `Version: ${appVersion}\nElectron: ${electronVersion}\nChrome: ${chromeVersion}\nNode.js: ${nodeVersion}\nV8: ${v8Version}\nOS: ${osInfo}`;
+      const detail = description
+        ? `${description}\n\n${usefulInfo}`
+        : usefulInfo;
+      let buttons = ['OK', 'Copy'];
+      let cancelId = 0;
+      let defaultId = 1;
+      if (process.platform === 'linux') {
+        buttons = ['Copy', 'OK'];
+        cancelId = 1;
+        defaultId = 0;
+      }
+      dialog
+        .showMessageBox(BrowserWindow.getAllWindows()[0], {
+          type: 'none',
+          buttons,
+          title,
+          message: title,
+          detail,
+          noLink: true,
+          icon: iconPath,
+          cancelId,
+          defaultId,
+        })
+        .then(({ response }) => {
+          if (response === defaultId) {
+            clipboard.writeText(usefulInfo, 'clipboard');
+          }
+          return null;
+        })
+        .catch((err) => {
+          console.error('Error opening about', err);
+        });
+    };
+
     const subMenuHelp: MenuItemConstructorOptions = {
       label: 'Help',
       submenu: [
@@ -198,6 +250,14 @@ export default class MenuBuilder {
             );
           },
         },
+        {
+          type: 'separator',
+        },
+        {
+          label: 'About',
+          accelerator: 'F1',
+          click: aboutClick,
+        },
       ],
     };
 

desktop-app/src/main/util.ts

@@ -1,6 +1,9 @@
 /* eslint import/prefer-default-export: off */
 import { URL } from 'url';
 import path from 'path';
+import { app } from 'electron';
+import fs from 'fs-extra';
+import os from 'os';
 
 export function resolveHtmlPath(htmlFileName: string) {
   if (process.env.NODE_ENV === 'development') {
@@ -41,3 +44,37 @@ export function isValidCliArgURL(arg?: string): boolean {
   isCliArgResult = false;
   return false;
 }
+
+export const getPackageJson = () => {
+  let appPath;
+  if (process.env.NODE_ENV === 'production') appPath = app.getAppPath();
+  else appPath = process.cwd();
+
+  const pkgPath = path.join(appPath, 'package.json');
+  if (fs.existsSync(pkgPath)) {
+    const pkgContent = fs.readFileSync(pkgPath, 'utf-8');
+    return JSON.parse(pkgContent);
+  }
+  console.error(`cant find package.json in: '${appPath}'`);
+  return {};
+};
+
+export const getEnvironmentInfo = () => {
+  const pkg = getPackageJson();
+  const appVersion = pkg.version || 'Unknown';
+  const electronVersion = process.versions.electron || 'Unknown';
+  const chromeVersion = process.versions.chrome || 'Unknown';
+  const nodeVersion = process.versions.node || 'Unknown';
+  const v8Version = process.versions.v8 || 'Unknown';
+  const osInfo =
+    `${os.type()} ${os.arch()} ${os.release()}`.trim() || 'Unknown';
+
+  return {
+    appVersion,
+    electronVersion,
+    chromeVersion,
+    nodeVersion,
+    v8Version,
+    osInfo,
+  };
+};