custom title bar

4 years ago · 265d5705df
parent 6600c97b2f
commit 265d5705df
4 changed files with 55 additions and 8 deletions
--- a/index.html
+++ b/index.html
@ -11,6 +11,11 @@
        <title>FileKade</title>
    </head>
    <body>
+        <div id="title-container">
+            <div id="title-sub-container">
+                <p id="title" class="nosel">FileKade - Alpha</p>
+            </div>
+        </div>

        <div id='container'>
            <div id='controls' class='controls'>
--- a/main.js
+++ b/main.js
@ -1,10 +1,11 @@
 // Modules to control application life and create native browser window
 const {app, BrowserWindow} = require('electron')
 const path = require('path')
+let mainWindow;

-function createWindow () {
+async function createWindow () {
    // Create the browser window.
-    const mainWindow = new BrowserWindow({
+    mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        minHeight: 400,
@ -13,12 +14,14 @@ function createWindow () {
            preload: path.join(__dirname, 'scripts/startup/preload.js'),
            nodeIntegration: true,
            nodeIntegrationInSubFrames: true
-        }
+        },
+        titleBarStyle: "hidden",
+        //titleBarOverlay: true,
    })

    // and load the index.html of the app.
-    mainWindow.loadFile('index.html')
    mainWindow.maximize();
+    await mainWindow.loadFile('index.html');
    mainWindow.removeMenu();

    // Open the DevTools.
@ -29,13 +32,14 @@ function createWindow () {
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
 app.whenReady().then(() => {
-    createWindow()
+    createWindow();

    app.on('activate', function () {
        // On macOS it's common to re-create a window in the app when the
        // dock icon is clicked and there are no other windows open.
        if (BrowserWindow.getAllWindows().length === 0) createWindow()
-    })
+    });
+    require('./scripts/keybinds/process/handleIpc')(mainWindow, app);
 })

 // Quit when all windows are closed, except on macOS. There, it's common
@ -46,4 +50,4 @@ app.on('window-all-closed', function () {
 })

 // In this file you can include the rest of your app's specific main process
-// code. You can also put them in separate files and require them here.
+// code. You can also put them in separate files and require them here.
--- a/styles/controls.css
+++ b/styles/controls.css
@ -7,6 +7,8 @@
    align-content: space-around;
 }

+.controls {margin-top: 30px;}
+
 .controls div {align-self: center;}


--- a/styles/styles.css
+++ b/styles/styles.css
@ -1,3 +1,8 @@
+@font-face {
+    font-family: 'Nunito';
+    src: url(../assets/Nunito-VariableFont_wght.ttf) format('truetype');
+}
+
 body {
    background-image: linear-gradient(to right, #000000a8 0%, #000000a8 100%), url(../assets/images/neon.png);
    background-size: cover;
@ -20,4 +25,35 @@ body {
    90% {opacity: 100%;}
    100% {opacity: 100%;}
    to {transform: translateY(0);}
-}
+}
+
+#title {
+    font-family: 'Nunito', sans-serif;
+    margin: 0 0;
+    z-index: 1;
+    animation:  shine 5s linear infinite;
+    background: linear-gradient(to right, #5d60ca 20%, #171717 35%, #171717 35%, #5d60ca 50%, #5d60ca 50%, #af2188 75%, #5d60ca 90%);
+    background-size: 200% auto;
+    color: #5d60ca;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -webkit-user-select: none;
+}
+
+#title-sub-container {
+    padding: 0 0;
+    margin: 0 0;
+}
+
+#title-container {
+    position: fixed;
+    top: -5px;
+    left: 0;
+    padding: 7px 7px 2px 7px;
+    width: 100vw;
+    overflow: hidden;
+    background-color: #0000006d;
+    z-index: 1;
+}
+
+.nosel {-webkit-user-select: none;}