Wubzy
/
FileKade
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

custom title bar

Browse Source
toast
Kit Kasune 3 years ago
parent 6600c97b2f
commit 265d5705df
4 changed files with 55 additions and 8 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 5
      index.html
  2. 16
      main.js
  3. 2
      styles/controls.css
  4. 36
      styles/styles.css

5
index.html
Unescape View File

@ -11,6 +11,11 @@
<title>FileKade</title> <title>FileKade</title>
</head> </head>
<body> <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='container'>
<div id='controls' class='controls'> <div id='controls' class='controls'>

16
main.js
Unescape View File

@ -1,10 +1,11 @@
// Modules to control application life and create native browser window // Modules to control application life and create native browser window
const {app, BrowserWindow} = require('electron') const {app, BrowserWindow} = require('electron')
const path = require('path') const path = require('path')
let mainWindow;
function createWindow () { async function createWindow () {
// Create the browser window. // Create the browser window.
const mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600,
minHeight: 400, minHeight: 400,
@ -13,12 +14,14 @@ function createWindow () {
preload: path.join(__dirname, 'scripts/startup/preload.js'), preload: path.join(__dirname, 'scripts/startup/preload.js'),
nodeIntegration: true, nodeIntegration: true,
nodeIntegrationInSubFrames: true nodeIntegrationInSubFrames: true
} },
titleBarStyle: "hidden",
//titleBarOverlay: true,
}) })
// and load the index.html of the app. // and load the index.html of the app.
mainWindow.loadFile('index.html')
mainWindow.maximize(); mainWindow.maximize();
await mainWindow.loadFile('index.html');
mainWindow.removeMenu(); mainWindow.removeMenu();
// Open the DevTools. // Open the DevTools.
@ -29,13 +32,14 @@ function createWindow () {
// initialization and is ready to create browser windows. // initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs. // Some APIs can only be used after this event occurs.
app.whenReady().then(() => { app.whenReady().then(() => {
createWindow() createWindow();
app.on('activate', function () { app.on('activate', function () {
// On macOS it's common to re-create a window in the app when the // 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. // dock icon is clicked and there are no other windows open.
if (BrowserWindow.getAllWindows().length === 0) createWindow() 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 // Quit when all windows are closed, except on macOS. There, it's common

2
styles/controls.css
Unescape View File

@ -7,6 +7,8 @@
align-content: space-around; align-content: space-around;
} }
.controls {margin-top: 30px;}
.controls div {align-self: center;} .controls div {align-self: center;}

36
styles/styles.css
Unescape View File

@ -1,3 +1,8 @@
@font-face {
font-family: 'Nunito';
src: url(../assets/Nunito-VariableFont_wght.ttf) format('truetype');
}
body { body {
background-image: linear-gradient(to right, #000000a8 0%, #000000a8 100%), url(../assets/images/neon.png); background-image: linear-gradient(to right, #000000a8 0%, #000000a8 100%), url(../assets/images/neon.png);
background-size: cover; background-size: cover;
@ -21,3 +26,34 @@ body {
100% {opacity: 100%;} 100% {opacity: 100%;}
to {transform: translateY(0);} 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;}
Write Preview
Loading…
Cancel
Save