New Top Bar design

src/components/openFolder.ts

@@ -1,16 +1,17 @@
 import {spawn} from 'child_process';
 import logger from './logger';
+import { Platform, platform } from './platform';
 
 export default function openFolder(path:string) {
-    if (process.platform === 'darwin') {
+    if (platform === Platform.Mac) {
         spawn('open', [path]).on('error', (err) => {
             logger.errorMSG(err.message);
         });
-    } else if (process.platform === 'win32') {
+    } else if (platform === Platform.Windows) {
         spawn('explorer', [path]).on('error', (err) => {
             logger.errorMSG(err.message);
         });
-    } else if (process.platform === 'linux') {
+    } else if (platform === Platform.Linux) {
         spawn('xdg-open', [path]).on('error', (err) => {
             logger.errorMSG(err.message);
         });

src/components/paths.ts

@@ -1,5 +1,6 @@
 import path from 'path';
 import {app} from '@electron/remote';
+import { platformFolder, platform, Platform } from './platform';
 
 export const dataPath = app.getPath('userData');
 export const appPath = app.getAppPath().replace("app.asar", "");
@@ -7,18 +8,9 @@ export const SettingPath = path.join(dataPath, "settings.xml");
 
 export const defaultOutputPath = path.join(app.getPath('videos'), "StickExporterTX");
 
-let platformFolder = "";
-if(process.platform === "win32") {
-    platformFolder = "windows";
-} else if(process.platform === "darwin") {
-    platformFolder = "darwin";
-} else if(process.platform === "linux") {
-    platformFolder = "linux";
-}
-
 export function platformCharacter() {
     let platformCharacterTEMP = "/";
-    if (process.platform === "win32") {
+    if (platform === Platform.Windows) {
         platformCharacterTEMP = "\\";
     }
     return platformCharacterTEMP;

src/components/platform.ts

@@ -0,0 +1,15 @@
+const enum Platform {
+    Windows = 'win32',
+    Mac = 'darwin',
+    Linux = 'linux'
+}
+
+const platform = process.platform;
+
+const platformFolder = platform === Platform.Windows ? 'windows' : platform === Platform.Mac ? 'darwin' : 'linux';
+
+export {
+    platform,
+    Platform,
+    platformFolder
+}

src/components/settings.ts

@@ -16,13 +16,14 @@ const defaultSettings = {
     output: defaultOutputPath
 }
 
-let loadedSuccessfully = true;
+let loadedSuccessfully = false;
-const settingList = await fetch(SettingPath).then(function(response){
+const settingList = await fetch(SettingPath).then(function(response) {
     return response.text();
-}).then(function(data){
+}).then(function(data) {
     const parser = new DOMParser();
     const xmlDoc = parser.parseFromString(data, 'text/xml');
     
+    loadedSuccessfully = true;
     return {
         fps: parseInt(getXMLChild(xmlDoc, "fps")),
         width: parseInt(getXMLChild(xmlDoc, "width")),
@@ -31,23 +32,12 @@ const settingList = await fetch(SettingPath).then(function(response){
         log: (getXMLChild(xmlDoc, "log") === "None")? "":getXMLChild(xmlDoc, "log"),
         output: getXMLChild(xmlDoc, "output")
     }
-    
 }).catch(function(error) {
     logger.warning("Could not load settings: " + error.toString() + "\n Creating new settings file...");
-    loadedSuccessfully = false;
     return defaultSettings;
 });
 if(!loadedSuccessfully) updateSettings({});
 
-function settingListLoadDefault() {
-    updateSettings({
-        fps:defaultSettings.fps,
-        width:defaultSettings.width,
-        stickDistance:defaultSettings.stickDistance,
-        stickMode2:defaultSettings.stickMode2
-    });
-}
-
 function updateSettings(optiones:{fps?:number, width?:number, stickDistance?:number, stickMode2?:boolean, log?:string, output?:string}) {
     if(optiones.fps === undefined) {
         optiones.fps = settingList.fps;
@@ -95,6 +85,15 @@ function updateSettings(optiones:{fps?:number, width?:number, stickDistance?:num
     });
 }
 
+function settingListLoadDefault() {
+    updateSettings({
+        fps:defaultSettings.fps,
+        width:defaultSettings.width,
+        stickDistance:defaultSettings.stickDistance,
+        stickMode2:defaultSettings.stickMode2
+    });
+}
+
 export {
     updateSettings,
     settingListLoadDefault,

src/components/ui/menu.tsx

@@ -44,7 +44,7 @@ function Menu({side}:{side:Side}) {
     
     return (
         <header>
-            <h1 id="main-headline">{(side == Side.Main)? "StickExporterTX" : "Settings"}</h1>
+            <h4 id="main-headline">{(side == Side.Main)? "StickExporterTX" : "Settings"}</h4>
             <div id="blender-info">
                 <div id="blender-icon">
                     {blenderLoading? <BlenderLoadingSVG/> : <BlenderReadySVG/>}

src/index.css

@@ -20,13 +20,15 @@ header {
     display: flex;
     justify-content: flex-end;
     align-items: center;
-    padding: 20px 25px;
+    padding: 0px 5px;
+    padding-right: 142px;
     background-color: #0d131e;
-    height: 20px;
+    height: 31px;
     color: #9DA8B9;
     margin-bottom: 25px;
+    -webkit-app-region: drag;
 }
-header h1 {
+header h4 {
     margin-right: auto;
     display: flex;
     width: auto;
@@ -34,23 +36,27 @@ header h1 {
 
 .back-button {
     cursor: pointer;
-    padding: 10px;
+    -webkit-app-region: no-drag;
+    padding: 6px 10px;
+    height: 100%;
     background-color: #2196F3;
     color: white;
     border: none;
-    border-radius: 20px;
+    border-radius: 15px;
-    display: flex;
     font-size: large;
 }
 
 .back-button:hover {
-    transform: scale(1.05);
+    background-color: #0b6ab9;
-    text-decoration: none;
+    transform: scale(1);
 }
 
 #stopRender {
     background-color: #e1334e;
 }
+#stopRender:hover {
+    background-color: red;
+}
 
 #content {
     padding-left: 25px;
@@ -59,64 +65,44 @@ header h1 {
 
 #settings-button {
     cursor: pointer;
+    -webkit-app-region: no-drag;
     background-color: #2196F3;
     border-radius: 50%;
-    width: 45px;
+    width: 30px;
-    height: 45px;
+    height: 30px;
     align-items: center;
     border: none;
     outline: none;
 }
 #settings-button svg {
-    width: 35px;
+    height: 24px;
-    height: 35px;
     fill: white;
-    margin-left: 5px;
+    margin-left: 3px;
-    margin-top: 5px;
+    margin-top: 3px;
 }
 #settings-button:hover {
-    transform: scale(1.05);
+    background-color: #0b6ab9;
-}
+    transform: scale(1);
-
-#update-available {
-    cursor: pointer;
-    background-color: #21f3ad;
-    border-radius: 20%;
-    width: 45px;
-    height: 45px;
-    align-items: center;
-    border: none;
-    outline: none;
-    margin-right: 15px;
-}
-#update-available svg {
-    width: 35px;
-    height: 35px;
-    fill: white;
-    margin-left: 5px;
-    margin-top: 5px;
-}
-#update-available:hover {
-    transform: scale(1.05);
 }
 
 #blender-info {
     margin-right: auto;
+    display: flex;
+    align-items: center;
 }
 #blender-info p {
-    margin-top: 5px;
+    padding-left: 5px;
-    margin-bottom: 0;
 }
 #blender-icon {
-    width: 25px;
+    width: 20px;
-    height: 25px;
+    height: 20px;
     align-items: center;
     margin-left: auto;
     margin-right: auto;
 }
 #blender-icon svg {
-    width: 25px;
+    width: 20px;
-    height: 25px;
+    height: 20px;
     fill: white;
 }
 #blender-loading-icon {

src/index.ts

@@ -3,6 +3,7 @@ import {initialize as remoteInitialize, enable as remoteEnable} from '@electron/
 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();
@@ -63,20 +64,21 @@ const createWindow = () => {
     webPreferences: {
       nodeIntegration: true,
       contextIsolation: false,
+    },
+    titleBarStyle: 'hidden',
+    titleBarOverlay: {
+      color: '#0d131e',
+      symbolColor: '#74b1be'
     }
   });
   
-  // remove the menu bar when in production.
+  mainWindow.setMenu(null);
-  if(process.env.NODE_ENV === 'production') mainWindow.setMenu(null);
   
   remoteInitialize();
   remoteEnable(mainWindow.webContents);
 
   // load the index.html of the app.
   mainWindow.loadFile(path.join(__dirname, 'index.html'));
-
-  // Open the DevTools when in development mode.
-  if(process.env.NODE_ENV === 'development') mainWindow.webContents.openDevTools();
 };
 
 // This method will be called when Electron has finished
@@ -88,7 +90,7 @@ app.on('ready', createWindow);
 // for applications and their menu bar to stay active until the user quits
 // explicitly with Cmd + Q.
 app.on('window-all-closed', () => {
-  if (process.platform !== 'darwin') {
+  if (platform !== Platform.Mac) {
     app.quit();
   }
 });