From 3607233df6387a220c72d571512ac79190e794aa Mon Sep 17 00:00:00 2001 From: Lino Schmidt Date: Thu, 23 Jun 2022 01:21:29 +0200 Subject: [PATCH] Improved Top Bar design --- src/components/ui/menu.tsx | 43 ++++++++++++----- src/components/ui/renderingSide.tsx | 2 + src/index.css | 72 ++++++++++++++++++++++------- src/index.ts | 17 ++++--- 4 files changed, 99 insertions(+), 35 deletions(-) diff --git a/src/components/ui/menu.tsx b/src/components/ui/menu.tsx index 2bd5f5f..9126ea2 100644 --- 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 = () => ( + <> +
ipcRenderer.send('minimize')}> + + {/* */} + + +
+
ipcRenderer.send('closeApp')}> + + {/* */} + + +
+ +) const MainSideButtonsWin = () => (
openSide(Side.Settings)}> @@ -23,18 +40,17 @@ const MainSideButtonsLinux = () => ( ) const SettingsSideButtonsWin = () => ( - -) -const RenderingSideButtonWin = () => ( - +
openSide(Side.Main)}> + + {/* */} + + +
) const SettingsSideButtonsLinux = () => ( ) -const RenderingSideButtonLinux = () => ( - -) const BlenderLoadingSVG = () => ( @@ -52,16 +68,20 @@ const BlenderReadySVG = () => ( function WindowsMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) { return (
-

{(side == Side.Main)? "StickExporterTX" : "Settings"}

+

+ {(side == Side.Main)? "StickExporterTX" : null} + {(side == Side.Settings)? "Settings" : null} + {(side == Side.Rendering)? "Rendering" : null} +

-
+
{blenderLoading? : }

{blenderStatus}

{(side == Side.Main)? : null} {(side == Side.Settings)? : null} - {(side == Side.Rendering)? : null} + ) } @@ -78,7 +98,6 @@ function LinuxMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoad
{(side == Side.Main)? : null} {(side == Side.Settings)? : null} - {(side == Side.Rendering)? : null} ) } diff --git a/src/components/ui/renderingSide.tsx b/src/components/ui/renderingSide.tsx index 727f043..a1d63d8 100644 --- 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>; let setStatus:React.Dispatch>; @@ -15,6 +16,7 @@ function RenderingSide() {

{"Log " + logNumber + "/" + String(settingList.log.split("\"\"").length)}

{status}

+
) diff --git a/src/index.css b/src/index.css index 70d5fd0..b6179ba 100644 --- 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); } @@ -333,4 +348,29 @@ button:hover { #logList-Name: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; } \ No newline at end of file diff --git a/src/index.ts b/src/index.ts index e902a68..0ac2e89 100644 --- 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