feat(global): add max/min/quit buttons to example, rename hide to minimize + add maximize

Author: saucesteals

bridges/index.ts

@@ -10,8 +10,13 @@ export const electronBridge = {
   quit: (): void => {
     ipcRenderer.send("quit-app");
   },
-  hide: (): void => {
-    ipcRenderer.send("hide-app");
+
+  minimize: (): void => {
+    ipcRenderer.send("minimize-app");
+  },
+
+  maximize: (): void => {
+    ipcRenderer.send("maximize-app");
   },
 
   relaunch: (): void => {
@@ -32,7 +37,7 @@ export const electronBridge = {
 
 contextBridge.exposeInMainWorld("electron", electronBridge);
 
-export const storeBridge = createStoreBindings("config");  // "config" = the stores name
+export const storeBridge = createStoreBindings("config"); // "config" = the stores name
 
 contextBridge.exposeInMainWorld("store", {
   ...storeBridge,

src/app/ipc/main.ts

@@ -4,14 +4,18 @@ ipcMain.on("quit-app", () => {
   app.quit();
 });
 
-ipcMain.on("hide-app", () => {
+ipcMain.on("minimize-app", () => {
   if (process.platform === "darwin") {
     app.hide();
     return;
   }
   BrowserWindow.getFocusedWindow().minimize();
 });
 
+ipcMain.on("maximize-app", () => {
+  BrowserWindow.getFocusedWindow().maximize();
+});
+
 ipcMain.on("relaunch-app", () => {
   app.relaunch();
   app.exit(0);

src/render/containers/HomePage/index.tsx

@@ -20,6 +20,7 @@ const HomePage = () => {
         height={69}
         width={69}
       />
+
       <div className="font-bold mb-4">
         React + Tailwind + Electron + Redux = ♥
       </div>
@@ -63,7 +64,7 @@ const HomePage = () => {
         </button>
       </div>
 
-      <div className="flex flex-row text-pink-300 p-2">
+      <div className="text-pink-300 p-2">
         <button
           onClick={async () => {
             window.electron.openPath(await window.store.getPath());
@@ -72,6 +73,24 @@ const HomePage = () => {
           Open Store
         </button>
       </div>
+
+      <div className="flex justify-center w-72">
+        <button
+          className="mac-red mr-auto w-24 text-right"
+          onClick={window.electron.quit}
+        >
+          Exit / Quit
+        </button>
+        <button className="mac-orange w-24" onClick={window.electron.minimize}>
+          Minimize
+        </button>
+        <button
+          className="mac-green ml-auto w-24 text-left"
+          onClick={window.electron.maximize}
+        >
+          Maximize
+        </button>
+      </div>
     </div>
   );
 };

src/render/index.css

@@ -6,3 +6,15 @@
   font-family: "Open Sans";
   src: url(../../assets/fonts/OpenSans-Regular.ttf);
 }
+
+.mac-red {
+  color: #ff605c;
+}
+
+.mac-orange {
+  color: #ffbd44;
+}
+
+.mac-green {
+  color: #00ca4e;
+}

tailwind.config.js

@@ -8,4 +8,4 @@ module.exports = {
     extend: {},
   },
   plugins: [],
-}
+};