From 790f27d7d68805e5b74c8c615757eee2532efe6b Mon Sep 17 00:00:00 2001
From: Lino Schmidt <linoschmidt@lino3d.de>
Date: Wed, 22 Jun 2022 21:56:54 +0200
Subject: [PATCH] Fixed linux Top Bar

---
 src/components/ui/menu.tsx |  79 ++++++++++++++++++++++-------
 src/index.css              | 100 +++++++++++++++++++++++++++++++------
 2 files changed, 147 insertions(+), 32 deletions(-)

diff --git a/src/components/ui/menu.tsx b/src/components/ui/menu.tsx
index 8838c90..2bd5f5f 100644
--- 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}
+        </>
     )
 }
 
diff --git a/src/index.css b/src/index.css
index 94d62be..70d5fd0 100644
--- 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;
 }