Merge pull request #9 from arduino/about-box

About box

Author: murilopolese

build_resources/icon.icns

@@ -1,6 +1,8 @@
 const { app, BrowserWindow, Menu, ipcMain, dialog } = require('electron')
 const path = require('path')
 const fs = require('fs')
+const join = require('path').join
+const openAboutWindow = require('about-window').default
 
 let win = null // main window
 
@@ -98,11 +100,12 @@ function createWindow () {
 // TODO: Loading splash screen
 
 const isMac = process.platform === 'darwin'
+const isDev = !app.isPackaged
 const template = [
   ...(isMac ? [{
     label: app.name,
     submenu: [
-      { role: 'about' },
+      { role: 'about'},
       { type: 'separator' },
       { role: 'services' },
       { type: 'separator' },
@@ -154,7 +157,12 @@ const template = [
       { role: 'zoomIn' },
       { role: 'zoomOut' },
       { type: 'separator' },
-      { role: 'togglefullscreen' }
+      { role: 'togglefullscreen' },
+      ...(isDev ? [
+        { type: 'separator' },
+        { role: 'toggleDevTools' }, 
+      ]:[
+      ])
     ]
   },
   {
@@ -179,21 +187,53 @@ const template = [
         label: 'Learn More',
         click: async () => {
           const { shell } = require('electron')
-          await shell.openExternal('https://www.arduino.cc/')
+          await shell.openExternal('https://github.com/arduino/MicroPython_Lab')
         }
       },
       {
-        label: 'About',
+        label: 'Report an issue',
         click: async () => {
           const { shell } = require('electron')
-          await shell.openExternal('https://www.arduino.cc/')
+          await shell.openExternal('https://github.com/arduino/MicroPython_Lab/issues')
         }
       },
+      {
+        label:'Info about this app',
+        click: () => {
+            openAboutWindow({
+                icon_path: join(__dirname, 'ui/arduino/assets/about_image.png'),
+                css_path: join(__dirname, 'ui/arduino/about.css'),
+                copyright: '© Arduino SA 2022',
+                package_json_dir: __dirname,
+                bug_report_url: "https://github.com/arduino/MicroPython_Lab/issues",
+                bug_link_text: "report an issue",
+                homepage: "https://labs.arduino.cc",
+                use_version_info: false,
+                win_options: {
+                    parent: win,
+                    modal: true,
+                },
+                show_close_button: 'Close',
+            })
+          }
+      },
     ]
   }
 ]
 
 const menu = Menu.buildFromTemplate(template)
+
+app.setAboutPanelOptions({
+  applicationName: app.name,
+  applicationVersion: app.getVersion(),
+  copyright: app.copyright,
+  credits: '(See "Info about this app" in the Help menu)',
+  authors: ['Arduino'],
+  website: 'https://arduino.cc',
+  iconPath: path.join(__dirname, '../assets/image.png'),
+})
+
 Menu.setApplicationMenu(menu)
 
+
 app.whenReady().then(createWindow)

build_resources/icon.png

@@ -1,8 +1,9 @@
 {
 	"name": "arduino-lab-micropython-ide",
-	"productName":"Arduino Lab for Micropython",
+	"productName": "Arduino Lab for Micropython",
 	"version": "0.3.1",
-	"description": "Arduino Labs IDE for MicroPython",
+	"description": "Arduino Lab for MicroPython is a project sponsored by Arduino, based on original work by Murilo Polese.\nThis is an experimental pre-release software, please direct any questions exclusively to Github issues.",
+	
 	"main": "index.js",
 	"scripts": {
 		"post-set-shell": "npm config set script-shell bash",
@@ -37,6 +38,7 @@
 	},
 	"license": "MIT",
 	"dependencies": {
+		"about-window": "^1.15.2",
 		"mkdirp": "^1.0.3",
 		"serialport": "^10.4.0"
 	}

index.js

@@ -0,0 +1,84 @@
+body,
+html {
+  width: 100%;
+  height: 100%;
+  -webkit-user-select: none;
+  user-select: none;
+  -webkit-app-region: drag;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  color: #333;
+  background-color: #eee;
+  font-size: 12px;
+  font-family: 'Helvetica', 'Arial', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
+}
+
+.logo {
+  width: 80%;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.logo img{
+  width: 100%;
+  height: auto;
+}
+
+.title,
+.copyright,
+.description {
+  margin: 0.2em;
+}
+
+.clickable {
+  cursor: pointer;
+}
+
+.description {
+  text-align: left;
+  margin: 2em;
+  
+}
+
+.versions {
+  border-collapse: collapse;
+  margin-top: 1em;
+}
+
+.copyright,
+.versions {
+  color: #999;
+}
+
+.buttons {
+  margin-bottom: 1em;
+  text-align: center;
+}
+
+.buttons button {
+  margin-top: 1em;
+  width: 100px;
+  height: 24px;
+}
+
+.link {
+  cursor: pointer;
+  color: #80a0c2;
+}
+
+.bug-report-link {
+  position: absolute;
+  right: 1em;
+  bottom: 1em;
+}
+
+.clickable,
+.bug-report-link,
+.buttons button {
+  -webkit-app-region: no-drag;
+}

package-lock.json

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
+    <title>About This App</title>
+    <link rel="stylesheet" href="./styles/ui.css">
+  </head>
+  <body>
+    <div class="logo">
+      <img id="app-icon" alt="App icon" height="400">
+    </div>
+    <h2 class="title"></h2>
+    <h3 class="description"></h3>
+    <div class="copyright"></div>
+    <div class="buttons"></div>
+    <footer class="footer">
+      <div class="link bug-report-link"></div>
+    </footer>
+  </body>
+</html>