extern/heynote
1
0
Fork 0
mirror of https://github.com/heyman/heynote.git synced 2024-11-21 23:43:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

Remove loader animation. Fix correct background color according to theme while loading. Set correct color on BrowserWindow to prevent white flash.

Browse Source
This commit is contained in:
Jonatan Heyman 2023-01-18 21:36:31 +01:00
parent 80feeed26c
commit 4a56b7d331
2 changed files with 12 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
electron/main/index.ts
View File

@ -48,6 +48,7 @@ async function createWindow() {
win = new BrowserWindow({
title: 'Main window',
icon: join(process.env.PUBLIC, 'favicon.ico'),
backgroundColor: nativeTheme.shouldUseDarkColors ? '#262B37' : '#FFFFFF',
//titleBarStyle: 'customButtonsOnHover',
autoHideMenuBar: true,
webPreferences: {

32
electron/preload/index.ts
View File

@ -37,28 +37,10 @@ const safeDOM = {
},
}
/**
* https://tobiasahlin.com/spinkit
* https://connoratherton.com/loaders
* https://projects.lukehaas.me/css-loaders
* https://matejkustec.github.io/SpinThatShit
*/
function useLoading() {
const className = `loaders-css__square-spin`
const styleContent = `
@keyframes square-spin {
25% { transform: perspective(100px) rotateX(180deg) rotateY(0); }
50% { transform: perspective(100px) rotateX(180deg) rotateY(180deg); }
75% { transform: perspective(100px) rotateX(0) rotateY(180deg); }
100% { transform: perspective(100px) rotateX(0) rotateY(0); }
}
.${className} > div {
animation-fill-mode: both;
width: 50px;
height: 50px;
background: #fff;
animation: square-spin 3s 0s cubic-bezier(0.09, 0.57, 0.49, 0.9) infinite;
}
.app-loading-wrap {
position: fixed;
top: 0;
@ -68,8 +50,16 @@ function useLoading() {
display: flex;
align-items: center;
justify-content: center;
background: #282c34;
background: #fff;
z-index: 9;
}
@media (prefers-color-scheme: dark) {
.${className} > div {
background: #fff;
}
.app-loading-wrap {
background: #262B37
}
}
`
const oStyle = document.createElement('style')
@ -78,7 +68,7 @@ function useLoading() {
oStyle.id = 'app-loading-style'
oStyle.innerHTML = styleContent
oDiv.className = 'app-loading-wrap'
oDiv.innerHTML = `<div class="${className}"><div></div></div>`
oDiv.innerHTML = `<div class="${className}"></div>`
return {
appendLoading() {