Improved Top Bar design

2026-03-21 01:51:15 +01:00 · 2022-06-23 01:21:29 +02:00
parent 790f27d7d6
commit 3607233df6
4 changed files with 99 additions and 35 deletions
--- a/src/components/ui/menu.tsx
+++ b/src/components/ui/menu.tsx
@@ -1,7 +1,24 @@
 import React, {useState} from "react";
 import { openSide, Side } from "../../renderer";
-import {blender, blenderCmd} from "../blender-controller";
 import { platform, Platform } from "../platform";
+import { ipcRenderer } from "electron";
+
+const WinButtons = () => (
+    <>
+        <div className="winMenuButtons" id="winMinimize" onClick={() => ipcRenderer.send('minimize')}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
+                {/* <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> */}
+                <path d="M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z"/>
+            </svg>
+        </div>
+        <div className="winMenuButtons" id="winClose" onClick={() => ipcRenderer.send('closeApp')}>
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512">
+                {/* <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> */}
+                <path d="M310.6 361.4c12.5 12.5 12.5 32.75 0 45.25C304.4 412.9 296.2 416 288 416s-16.38-3.125-22.62-9.375L160 301.3L54.63 406.6C48.38 412.9 40.19 416 32 416S15.63 412.9 9.375 406.6c-12.5-12.5-12.5-32.75 0-45.25l105.4-105.4L9.375 150.6c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0L160 210.8l105.4-105.4c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25l-105.4 105.4L310.6 361.4z"/>
+            </svg>
+        </div>
+    </>
+)

 const MainSideButtonsWin = () => (
    <div id="settings-button-win" onClick={() => openSide(Side.Settings)}>
@@ -23,18 +40,17 @@ const MainSideButtonsLinux = () => (
 )

 const SettingsSideButtonsWin = () => (
-    <button className="back-button-win" onClick={() => openSide(Side.Main)}>Back</button>
-)
-const RenderingSideButtonWin = () => (
-    <button className="back-button-win" id="stopRender-win" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
+    <div id="backButton-win" onClick={() => openSide(Side.Main)}>
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+            {/* <!--! Font Awesome Pro 6.1.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --> */}
+            <path d="M256 0C114.6 0 0 114.6 0 256c0 141.4 114.6 256 256 256s256-114.6 256-256C512 114.6 397.4 0 256 0zM310.6 345.4c12.5 12.5 12.5 32.75 0 45.25s-32.75 12.5-45.25 0l-112-112C147.1 272.4 144 264.2 144 256s3.125-16.38 9.375-22.62l112-112c12.5-12.5 32.75-12.5 45.25 0s12.5 32.75 0 45.25L221.3 256L310.6 345.4z"/>
+        </svg>
+    </div>
 )

 const SettingsSideButtonsLinux = () => (
    <button className="back-button-linux" onClick={() => openSide(Side.Main)}>Back</button>
 )
-const RenderingSideButtonLinux = () => (
-    <button className="back-button-linux" id="stopRender-linux" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
-)

 const BlenderLoadingSVG = () => (
    <svg id="blender-loading-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
@@ -52,16 +68,20 @@ const BlenderReadySVG = () => (
 function WindowsMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) {
    return (
        <header id="winHeader">
-            <h4>{(side == Side.Main)? "StickExporterTX" : "Settings"}</h4>
+            <h4>
+                {(side == Side.Main)? "StickExporterTX" : null}
+                {(side == Side.Settings)? "Settings" : null}
+                {(side == Side.Rendering)? "Rendering" : null}
+            </h4>
            <div id="blender-info-win">
-                <div id="blender-icon-linux">
+                <div id="blender-icon-win">
                    {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}
                </div>
                <p>{blenderStatus}</p>
            </div>
            {(side == Side.Main)? <MainSideButtonsWin/> : null}
            {(side == Side.Settings)? <SettingsSideButtonsWin/> : null}
-            {(side == Side.Rendering)? <RenderingSideButtonWin/> : null}
+            <WinButtons/>
        </header>
    )
 }
@@ -78,7 +98,6 @@ function LinuxMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoad
            </div>
            {(side == Side.Main)? <MainSideButtonsLinux/> : null}
            {(side == Side.Settings)? <SettingsSideButtonsLinux/> : null}
-            {(side == Side.Rendering)? <RenderingSideButtonLinux/> : null}
        </header>
    )
 }
--- a/src/components/ui/renderingSide.tsx
+++ b/src/components/ui/renderingSide.tsx
@@ -1,6 +1,7 @@
 import React, {useState} from "react";
 import { settingList } from "../settings";
 import openFolder from "../openFolder";
+import { blenderCmd, blender } from "../blender-controller";

 let setLogNumber:React.Dispatch<React.SetStateAction<string>>;
 let setStatus:React.Dispatch<React.SetStateAction<string>>;
@@ -15,6 +16,7 @@ function RenderingSide() {
        <div id="content">
            <p>{"Log " + logNumber + "/" + String(settingList.log.split("\"\"").length)}</p>
            <p>{status}</p>
+            <button id="stopRenderButton" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
            <button onClick={() => openFolder(settingList.output)}>Open Output Folder</button>
        </div>
    )
--- a/src/index.css
+++ b/src/index.css
@@ -25,8 +25,8 @@ header {
    margin-bottom: 25px;
 }
 #winHeader {
-    padding: 0px 5px;
-    padding-right: 142px;
+    padding: 0px 8px;
+    padding-right: 0px;
    height: 31px;
    -webkit-app-region: drag;
 }
@@ -77,14 +77,30 @@ header h1 {
    text-decoration: none;
 }

-#stopRender-win {
-    background-color: #e1334e;
+#backButton-win {
+    cursor: pointer;
+    -webkit-app-region: no-drag;
+    border-radius: 50%;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    outline: none;
 }
-#stopRender-linux {
-    background-color: #e1334e;
+#backButton-win svg {
+    height: 18px;
+    fill: #9DA8B9;
 }
-#stopRender-win:hover {
-    background-color: red;
+#backButton-win:hover {
+    background-color: #2d323c;
+    transform: scale(1);
+}
+
+#stopRenderButton {
+    background-color: #e1334e;
+    margin-right: 10px;
 }

 #content {
@@ -95,22 +111,21 @@ header h1 {
 #settings-button-win {
    cursor: pointer;
    -webkit-app-region: no-drag;
-    background-color: #2196F3;
    border-radius: 50%;
-    width: 30px;
-    height: 30px;
+    width: 24px;
+    height: 24px;
+    display: flex;
+    justify-content: center;
    align-items: center;
    border: none;
    outline: none;
 }
 #settings-button-win svg {
-    height: 24px;
-    fill: white;
-    margin-left: 3px;
-    margin-top: 3px;
+    height: 18px;
+    fill: #9DA8B9;
 }
 #settings-button-win:hover {
-    background-color: #0b6ab9;
+    background-color: #2d323c;
    transform: scale(1);
 }

@@ -334,3 +349,28 @@ button:hover {
    cursor: pointer;
    text-decoration: underline;
 }
+
+.winMenuButtons {
+    fill: #9DA8B9;
+    height: 100%;
+    width: 47px;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    -webkit-app-region: no-drag;
+}
+.winMenuButtons:hover {
+    background-color: #2d323c;
+}
+.winMenuButtons svg {
+    height: 17px;
+    width: 17px;
+}
+
+#winClose:hover {
+    background-color: red;
+}
+
+#winMinimize {
+    margin-left: 5px;
+}
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,10 +1,9 @@
-import {app, BrowserWindow, dialog} from 'electron';
+import {app, BrowserWindow, dialog, ipcMain} from 'electron';
 import {initialize as remoteInitialize, enable as remoteEnable} from '@electron/remote/main';
 import path from 'path';
 import { autoUpdater } from "electron-updater";
 import logger from 'electron-log';
 import { Platform, platform } from './components/platform';
-
 logger.transports.console.format = "{h}:{i}:{s} {text}";
 logger.transports.file.getFile();
 logger.transports.file.resolvePath = () => path.join(app.getPath('userData'), "logs", "start.log");
@@ -65,11 +64,7 @@ const createWindow = () => {
      nodeIntegration: true,
      contextIsolation: false,
    },
-    titleBarStyle: 'hidden',
-    titleBarOverlay: {
-      color: '#0d131e',
-      symbolColor: '#74b1be'
-    }
+    titleBarStyle: 'hidden'
  });
  
  mainWindow.setMenu(null);
@@ -79,6 +74,14 @@ const createWindow = () => {

  // load the index.html of the app.
  mainWindow.loadFile(path.join(__dirname, 'index.html'));
+  
+  ipcMain.on('closeApp', () => {
+    app.quit();
+  });
+  
+  ipcMain.on('minimize', () => {
+    mainWindow.minimize();
+  });
 };

 // This method will be called when Electron has finished