[macOS] Electron native menubar

src/main/config.js

@@ -0,0 +1,23 @@
+const { app } = require("electron");
+
+/**
+ * Applications Configuration
+ **/
+module.exports = {
+	APP_NAME: "Thermal",
+	APP_VERSION: app.getVersion(),
+
+	THERMAL_URL_WEBSITE: "https://thermal.codecarrot.net/",
+	GITHUB_URL: "https://www.github.com/gitthermal/thermal",
+	GITHUB_URL_LICENSE:
+		"https://github.com/gitthermal/thermal/blob/master/LICENCE",
+	GITHUB_URL_ISSUES:
+		"https://github.com/gitthermal/thermal/issues/new?assignees=&labels=🐞+Bug&template=bug_report.md",
+	GITHUB_URL_RELEASE_NOTES: "https://github.com/gitthermal/thermal/releases",
+	DISCORD_INVITE_URL: "https://discord.gg/DcSNmts",
+
+	WINDOW_DEFAULT_HEIGHT: 800,
+	WINDOW_DEFAULT_WIDTH: 1200,
+
+	ICON: "../../build/icons/256x256.png"
+};

src/main/index.js

@@ -4,6 +4,9 @@ import { app, BrowserWindow } from "electron";
 import * as Sentry from "@sentry/electron";
 import packageJson from "../../package.json";
 
+const buildMenu = require("./menu");
+const CONFIG = require("./config");
+
 Sentry.init({
 	dsn: "https://[email protected]/1422446",
 	environment: process.env.NODE_ENV,
@@ -26,17 +29,27 @@ const winURL =
 		? "http://localhost:9080"
 		: `file://${__dirname}/index.html`;
 
+let windowOptions = {};
+
+if (process.platform === "darwin") {
+	// TODO: Use `titleBarStyle: "hidden"` with custom created TitleBar.vue component for macOS
+	windowOptions.titleBarStyle = "default";
+} else {
+	windowOptions.frame = false;
+}
+
 function createWindow() {
 	/**
 	 * Initial window options
 	 */
 	mainWindow = new BrowserWindow({
-		height: 563,
-		useContentSize: true,
-		width: 1000,
-		frame: false,
+		height: CONFIG.WINDOW_DEFAULT_HEIGHT,
+		width: CONFIG.WINDOW_DEFAULT_WIDTH,
+
+		// conditional data based on platform
+		...windowOptions,
+
 		webPreferences: {
-			devTools: true,
 			nodeIntegration: true
 		}
 	});
@@ -49,10 +62,15 @@ function createWindow() {
 }
 
 app.on("ready", () => {
+	if (process.platform === "darwin") {
+		buildMenu();
+	}
 	createWindow();
 });
 
 app.on("window-all-closed", () => {
+	// On OS X it is common for applications and their menu bar
+	// to stay active until the user quits explicitly with Cmd + Q
 	if (process.platform !== "darwin") {
 		app.quit();
 	}

src/main/menu.js

@@ -0,0 +1,272 @@
+const { Menu, shell, dialog, ipcMain } = require("electron");
+const CONFIG = require("./config");
+
+/**
+ * Menu template
+ */
+
+const template = [
+	{
+		label: CONFIG.APP_NAME,
+		submenu: [
+			{
+				label: `About ${CONFIG.APP_NAME}`,
+				click() {
+					showAboutDialog();
+				}
+			},
+			{
+				label: "Preferences",
+				click() {
+					console.log("Open preferences page.");
+				}
+			},
+			{ type: "separator" },
+			{
+				label: "Release Notes",
+				click() {
+					shell.openExternal(CONFIG.GITHUB_URL_RELEASE_NOTES);
+				}
+			},
+			{
+				label: "License",
+				click() {
+					shell.openExternal(CONFIG.GITHUB_URL_LICENSE);
+				}
+			},
+			{ type: "separator" },
+			{
+				label: "Check for Updates...",
+				click() {
+					showUpdatesDialog();
+				}
+			},
+			{ type: "separator" },
+			{ role: "hide" },
+			{ role: "hideOthers" },
+			{ role: "unhide" },
+			{ type: "separator" },
+			{ role: "quit" }
+		]
+	},
+	{
+		label: "File",
+		submenu: [
+			{
+				label: "Select Repository",
+				click() {
+					selectRepository();
+				}
+			},
+			{ type: "separator" },
+			{
+				label: "New Repository"
+			},
+			{ type: "separator" },
+			{
+				label: "Add Local Repository"
+			},
+			{
+				label: "Clone Repository"
+			},
+			{ type: "separator" },
+			{
+				label: "Git Commands"
+			}
+		]
+	},
+	{
+		label: "Repository",
+		submenu: [
+			{
+				label: "Push"
+			},
+			{
+				label: "Pull"
+			},
+			{ type: "separator" },
+			{
+				label: "View on GitHub"
+			},
+			{
+				label: "Open in Terminal"
+			},
+			{
+				label: "Open in Finder"
+			},
+			{
+				label: "Open in Visual Studio Code"
+			},
+			{ type: "separator" },
+			{
+				label: "Repository Settings"
+			}
+		]
+	},
+	{
+		label: "View",
+		submenu: [
+			{
+				label: "Show Changes"
+			},
+			{
+				label: "Show History"
+			},
+			{
+				label: "Show Branchs List"
+			},
+			{ type: "separator" },
+			{
+				label: "Toggle Full Screen",
+				accelerator: (() => {
+					if (process.platform === "darwin") {
+						return "Ctrl+Command+F";
+					} else {
+						return "F11";
+					}
+				})(),
+				click: function (focusedWindow) {
+					if (focusedWindow) {
+						focusedWindow.setFullScreen(!focusedWindow.isFullScreen());
+					}
+				}
+			},
+			{
+				label: "Toggle Developer Tools",
+				accelerator: (function () {
+					if (process.platform === "darwin") {
+						return "Alt+Command+I";
+					} else {
+						return "Ctrl+Shift+I";
+					}
+				})(),
+				click: function (item, focusedWindow) {
+					if (focusedWindow) {
+						focusedWindow.toggleDevTools();
+					}
+				}
+			}
+		]
+	},
+	{
+		label: "Branch",
+		submenu: [
+			{
+				label: "New branch"
+			},
+			{
+				label: "Rename"
+			},
+			{
+				label: "Delete"
+			},
+			{ type: "separator" },
+			{
+				label: "Discard All Changes"
+			},
+			{ type: "separator" },
+			{
+				label: "Compare to Branch"
+			},
+			{
+				label: "Merge Into Current Branch"
+			},
+			{
+				label: "Rebase Current Branch"
+			},
+			{ type: "separator" },
+			{
+				label: "Compare on GitHub"
+			},
+			{
+				label: "Show Pull Request"
+			}
+		]
+	},
+	{
+		label: "Window",
+		role: "window",
+		submenu: [
+			{
+				label: "Minimize",
+				accelerator: "CmdOrCtrl+M",
+				role: "minimize"
+			},
+			{
+				label: "Reload",
+				accelerator: "CmdOrCtrl+R",
+				role: "reload"
+			},
+			{
+				label: "Close",
+				accelerator: "CmdOrCtrl+W",
+				role: "close"
+			}
+		]
+	},
+	{
+		label: "Help",
+		submenu: [
+			{
+				label: "Learn More",
+				click() {
+					shell.openExternal(CONFIG.THERMAL_URL_WEBSITE);
+				}
+			},
+			{
+				label: "Show Keyboard sSortcuts"
+			},
+			{ type: "separator" },
+			{
+				label: "Report an Issue",
+				click() {
+					shell.openExternal(CONFIG.GITHUB_URL_ISSUES);
+				}
+			},
+			{
+				label: "Contact Support",
+				click() {
+					shell.openExternal(CONFIG.DISCORD_INVITE_URL);
+				}
+			}
+		]
+	}
+];
+
+/**
+ * Create menu
+ */
+function createMenu() {
+	const menu = Menu.buildFromTemplate(template);
+	return Menu.setApplicationMenu(menu);
+}
+
+/**
+ * About dialog box
+ */
+function showAboutDialog() {
+	dialog.showMessageBox({
+		type: "info",
+		title: `About ${CONFIG.APP_NAME}`,
+		message: `${CONFIG.APP_NAME} ${CONFIG.APP_VERSION}`,
+		detail: "All-in-one place to manage your Git repository."
+	});
+}
+
+function showUpdatesDialog() {
+	dialog.showMessageBox({
+		type: "info",
+		title: "Check for updates",
+		message: `${CONFIG.APP_NAME} updates`,
+		detail:
+			"You can stay up to day with updates by checking the releases page on Thermal GitHub repository."
+	});
+}
+
+function selectRepository() {
+	ipcMain.on("open-select-repository-page", (event, arg) => {
+		console.log(arg);
+	});
+}
+
+module.exports = createMenu;

src/renderer/App.vue

@@ -1,6 +1,6 @@
 <template>
 	<div id="app">
-		<menubar />
+		<menubar v-if="windowLinuxMenuBar" />
 		<router-view style="height: 100%" />
 		<t-modal v-if="activeModal">
 			<components :is="modal"></components>
@@ -63,7 +63,7 @@ import packageJson from "../../package.json";
 import DropdownList from "./components/dropdown/dropdownList";
 import DropdownItem from "./components/dropdown/dropdownItem";
 import DropdownDivider from "./components/dropdown/dropdownDivider";
-const { shell } = require("electron");
+const { remote, shell } = require("electron");
 
 Sentry.configureScope(scope => {
 	scope.setTag("appVersion", this.appVersion);
@@ -94,6 +94,13 @@ export default {
 		};
 	},
 	computed: {
+		windowLinuxMenuBar() {
+			if (remote.process.platform === "darwin") {
+				return false;
+			} else {
+				return true;
+			}
+		},
 		modal() {
 			let modalsActiveStatus = Object.values(this.$store.state.modal);
 			let ModalNames = Object.keys(this.$store.state.modal);