Fixed linux Top Bar

2026-03-21 01:51:15 +01:00 · 2022-06-22 21:56:54 +02:00
parent 7b67559589
commit 790f27d7d6
2 changed files with 147 additions and 32 deletions
--- a/src/components/ui/menu.tsx
+++ b/src/components/ui/menu.tsx
@@ -1,9 +1,19 @@
 import React, {useState} from "react";
 import { openSide, Side } from "../../renderer";
 import {blender, blenderCmd} from "../blender-controller";
+import { platform, Platform } from "../platform";

-const MainSideButtons = () => (
-    <div id="settings-button" onClick={() => openSide(Side.Settings)}>
+const MainSideButtonsWin = () => (
+    <div id="settings-button-win" onClick={() => openSide(Side.Settings)}>
+        <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="M495.9 166.6C499.2 175.2 496.4 184.9 489.6 191.2L446.3 230.6C447.4 238.9 448 247.4 448 256C448 264.6 447.4 273.1 446.3 281.4L489.6 320.8C496.4 327.1 499.2 336.8 495.9 345.4C491.5 357.3 486.2 368.8 480.2 379.7L475.5 387.8C468.9 398.8 461.5 409.2 453.4 419.1C447.4 426.2 437.7 428.7 428.9 425.9L373.2 408.1C359.8 418.4 344.1 427 329.2 433.6L316.7 490.7C314.7 499.7 307.7 506.1 298.5 508.5C284.7 510.8 270.5 512 255.1 512C241.5 512 227.3 510.8 213.5 508.5C204.3 506.1 197.3 499.7 195.3 490.7L182.8 433.6C167 427 152.2 418.4 138.8 408.1L83.14 425.9C74.3 428.7 64.55 426.2 58.63 419.1C50.52 409.2 43.12 398.8 36.52 387.8L31.84 379.7C25.77 368.8 20.49 357.3 16.06 345.4C12.82 336.8 15.55 327.1 22.41 320.8L65.67 281.4C64.57 273.1 64 264.6 64 256C64 247.4 64.57 238.9 65.67 230.6L22.41 191.2C15.55 184.9 12.82 175.3 16.06 166.6C20.49 154.7 25.78 143.2 31.84 132.3L36.51 124.2C43.12 113.2 50.52 102.8 58.63 92.95C64.55 85.8 74.3 83.32 83.14 86.14L138.8 103.9C152.2 93.56 167 84.96 182.8 78.43L195.3 21.33C197.3 12.25 204.3 5.04 213.5 3.51C227.3 1.201 241.5 0 256 0C270.5 0 284.7 1.201 298.5 3.51C307.7 5.04 314.7 12.25 316.7 21.33L329.2 78.43C344.1 84.96 359.8 93.56 373.2 103.9L428.9 86.14C437.7 83.32 447.4 85.8 453.4 92.95C461.5 102.8 468.9 113.2 475.5 124.2L480.2 132.3C486.2 143.2 491.5 154.7 495.9 166.6V166.6zM256 336C300.2 336 336 300.2 336 255.1C336 211.8 300.2 175.1 256 175.1C211.8 175.1 176 211.8 176 255.1C176 300.2 211.8 336 256 336z" />
+        </svg>
+    </div>
+)
+const MainSideButtonsLinux = () => (
+    <div id="settings-button-linux" onClick={() => openSide(Side.Settings)}>
        <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
@@ -12,11 +22,18 @@ const MainSideButtons = () => (
    </div>
 )

-const SettingsSideButtons = () => (
-    <button className="back-button" onClick={() => openSide(Side.Main)}>Back</button>
+const SettingsSideButtonsWin = () => (
+    <button className="back-button-win" onClick={() => openSide(Side.Main)}>Back</button>
 )
-const RenderingSideButton = () => (
-    <button className="back-button" id="stopRender" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
+const RenderingSideButtonWin = () => (
+    <button className="back-button-win" id="stopRender-win" onClick={() => blender(blenderCmd.stopRendering)}>Stop</button>
+)
+
+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 = () => (
@@ -32,6 +49,40 @@ const BlenderReadySVG = () => (
    </svg>
 )

+function WindowsMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) {
+    return (
+        <header id="winHeader">
+            <h4>{(side == Side.Main)? "StickExporterTX" : "Settings"}</h4>
+            <div id="blender-info-win">
+                <div id="blender-icon-linux">
+                    {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}
+                </div>
+                <p>{blenderStatus}</p>
+            </div>
+            {(side == Side.Main)? <MainSideButtonsWin/> : null}
+            {(side == Side.Settings)? <SettingsSideButtonsWin/> : null}
+            {(side == Side.Rendering)? <RenderingSideButtonWin/> : null}
+        </header>
+    )
+}
+
+function LinuxMenu({side, blenderLoading, blenderStatus}:{side:Side, blenderLoading:boolean, blenderStatus:string}) {
+    return (
+        <header id="linuxHeader">
+            <h1>{(side == Side.Main)? "StickExporterTX" : "Settings"}</h1>
+            <div id="blender-info-linux">
+                <div id="blender-icon-linux">
+                    {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}
+                </div>
+                <p>{blenderStatus}</p>
+            </div>
+            {(side == Side.Main)? <MainSideButtonsLinux/> : null}
+            {(side == Side.Settings)? <SettingsSideButtonsLinux/> : null}
+            {(side == Side.Rendering)? <RenderingSideButtonLinux/> : null}
+        </header>
+    )
+}
+
 let setBlenderLoading:React.Dispatch<React.SetStateAction<boolean>>;
 let setBlenderStatus:React.Dispatch<React.SetStateAction<string>>;

@@ -43,18 +94,10 @@ function Menu({side}:{side:Side}) {
    setBlenderStatus = setBlenderStatusInner;
    
    return (
-        <header>
-            <h4 id="main-headline">{(side == Side.Main)? "StickExporterTX" : "Settings"}</h4>
-            <div id="blender-info">
-                <div id="blender-icon">
-                    {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}
-                </div>
-                <p>{blenderStatus}</p>
-            </div>
-            {(side == Side.Main)? <MainSideButtons/> : null}
-            {(side == Side.Settings)? <SettingsSideButtons/> : null}
-            {(side == Side.Rendering)? <RenderingSideButton/> : null}
-        </header>
+        <>
+            {(platform === Platform.Windows)? <WindowsMenu side={side} blenderLoading={blenderLoading} blenderStatus={blenderStatus}/> : null}
+            {(platform === Platform.Linux)? <LinuxMenu side={side} blenderLoading={blenderLoading} blenderStatus={blenderStatus}/> : null}
+        </>
    )
 }

--- a/src/index.css
+++ b/src/index.css
@@ -20,21 +20,33 @@ header {
    display: flex;
    justify-content: flex-end;
    align-items: center;
-    padding: 0px 5px;
-    padding-right: 142px;
    background-color: #0d131e;
-    height: 31px;
    color: #9DA8B9;
    margin-bottom: 25px;
+}
+#winHeader {
+    padding: 0px 5px;
+    padding-right: 142px;
+    height: 31px;
    -webkit-app-region: drag;
 }
+#linuxHeader {
+    padding: 20px 25px;
+    height: 20px;
+}
+
 header h4 {
    margin-right: auto;
    display: flex;
    width: auto;
 }
+header h1 {
+    margin-right: auto;
+    display: flex;
+    width: auto;
+}

-.back-button {
+.back-button-win {
    cursor: pointer;
    -webkit-app-region: no-drag;
    padding: 6px 10px;
@@ -45,16 +57,33 @@ header h4 {
    border-radius: 15px;
    font-size: large;
 }
+.back-button-linux {
+    cursor: pointer;
+    padding: 10px;
+    background-color: #2196F3;
+    color: white;
+    border: none;
+    border-radius: 20px;
+    display: flex;
+    font-size: large;
+}

-.back-button:hover {
+.back-button-win:hover {
    background-color: #0b6ab9;
    transform: scale(1);
 }
+.back-button-linux:hover {
+    transform: scale(1.05);
+    text-decoration: none;
+}

-#stopRender {
+#stopRender-win {
    background-color: #e1334e;
 }
-#stopRender:hover {
+#stopRender-linux {
+    background-color: #e1334e;
+}
+#stopRender-win:hover {
    background-color: red;
 }

@@ -63,7 +92,7 @@ header h4 {
    padding-right: 25px;
 }

-#settings-button {
+#settings-button-win {
    cursor: pointer;
    -webkit-app-region: no-drag;
    background-color: #2196F3;
@@ -74,37 +103,80 @@ header h4 {
    border: none;
    outline: none;
 }
-#settings-button svg {
+#settings-button-win svg {
    height: 24px;
    fill: white;
    margin-left: 3px;
    margin-top: 3px;
 }
-#settings-button:hover {
+#settings-button-win:hover {
    background-color: #0b6ab9;
    transform: scale(1);
 }

-#blender-info {
+#settings-button-linux {
+    cursor: pointer;
+    background-color: #2196F3;
+    border-radius: 50%;
+    width: 45px;
+    height: 45px;
+    align-items: center;
+    border: none;
+    outline: none;
+}
+#settings-button-linux svg {
+    height: 35px;
+    fill: white;
+    margin-left: 5px;
+    margin-top: 5px;
+}
+#settings-button-linux:hover {
+    transform: scale(1.05);
+}
+
+#blender-info-win {
    margin-right: auto;
    display: flex;
    align-items: center;
 }
-#blender-info p {
+#blender-info-win p {
    padding-left: 5px;
 }
-#blender-icon {
+
+#blender-info-linux {
+    margin-right: auto;
+}
+#blender-info-linux p {
+    margin-top: 5px;
+    margin-bottom: 0;
+}
+
+#blender-icon-win {
    width: 20px;
    height: 20px;
    align-items: center;
    margin-left: auto;
    margin-right: auto;
 }
-#blender-icon svg {
+#blender-icon-linux {
+    width: 25px;
+    height: 25px;
+    align-items: center;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+#blender-icon-win svg {
    width: 20px;
    height: 20px;
    fill: white;
 }
+#blender-icon-linux svg {
+    width: 25px;
+    height: 25px;
+    fill: white;
+}
+
 #blender-loading-icon {
    animation: rotate-icon 1.2s linear infinite;
 }