romein/rolens
1
0
Fork 0
mirror of https://github.com/garraflavatra/rolens.git synced 2025-01-18 04:57:59 +00:00
Code Issues Releases Activity

Add startup animation

Browse Source
This commit is contained in:
Romein van Buren 2023-12-23 12:05:46 +01:00
parent d90d5bcf63
commit fca08479e8
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
4 changed files with 6 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
frontend/index.html
View File

@ -7,14 +7,6 @@
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>
<div id="app-loading">
<div class="ring">
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="dialogoutlets"></div> <div id="dialogoutlets"></div>
<script src="./src/main.js" type="module"></script> <script src="./src/main.js" type="module"></script>
</body> </body>

9
frontend/src/app.svelte
View File

@ -1,12 +1,15 @@
<script> <script>
import { tick } from 'svelte';
import { fly } from 'svelte/transition';
import BlankState from '$components/blankstate.svelte'; import BlankState from '$components/blankstate.svelte';
import Connection from '$organisms/connection/index.svelte';
import ContextMenu from '$components/contextmenu.svelte'; import ContextMenu from '$components/contextmenu.svelte';
import contextMenu from '$lib/stores/contextmenu.js'; import contextMenu from '$lib/stores/contextmenu.js';
import hostTree from '$lib/stores/hosttree.js'; import hostTree from '$lib/stores/hosttree.js';
import applicationInited from '$lib/stores/inited.js'; import applicationInited from '$lib/stores/inited.js';
import windowTitle from '$lib/stores/windowtitle.js'; import windowTitle from '$lib/stores/windowtitle.js';
import Connection from '$organisms/connection/index.svelte';
import { tick } from 'svelte';
let showWelcomeScreen = undefined; let showWelcomeScreen = undefined;
@ -31,7 +34,7 @@
<div class="titlebar">{$windowTitle}</div> <div class="titlebar">{$windowTitle}</div>
{#if $applicationInited && (showWelcomeScreen !== undefined)} {#if $applicationInited && (showWelcomeScreen !== undefined)}
<main class:empty={showWelcomeScreen}> <main class:empty={showWelcomeScreen} in:fly={{ y: 10 }}>
{#if showWelcomeScreen} {#if showWelcomeScreen}
<BlankState label="Welcome to Rolens!" image="/logo.png" pale={false} big={true}> <BlankState label="Welcome to Rolens!" image="/logo.png" pale={false} big={true}>
<button class="button" on:click={createFirstHost}>Add your first host</button> <button class="button" on:click={createFirstHost}>Add your first host</button>

2
frontend/src/main.js
View File

@ -1,4 +1,3 @@
import './styles/loading.css';
import './styles/reset.css'; import './styles/reset.css';
import './styles/style.css'; import './styles/style.css';
@ -9,7 +8,6 @@ window.addEventListener('unhandledrejection', event => {
LogError('Unhandled JS rejection: ' + event.reason); LogError('Unhandled JS rejection: ' + event.reason);
}); });
// @ts-ignore Argument IS correct.
const app = new App({ target: document.getElementById('app') }); const app = new App({ target: document.getElementById('app') });
export default app; export default app;

50
frontend/src/styles/loading.css
View File

@ -1,50 +0,0 @@
#app-loading {
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
display: flex;
}
/* Source of the following CSS: https://loading.io/css/ (modified) */
#app-loading .ring {
display: inline-block;
position: relative;
width: 136px;
height: 136px;
margin: auto;
}
#app-loading .ring div {
box-sizing: border-box;
display: block;
position: absolute;
width: 120px;
height: 120px;
margin: 8px;
border: 8px solid;
border-radius: 50%;
animation: loading-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
border-color: #f1dac8 transparent transparent transparent;
}
#app-loading .ring div:nth-child(1) {
animation-delay: -0.45s;
}
#app-loading .ring div:nth-child(2) {
animation-delay: -0.3s;
}
#app-loading .ring div:nth-child(3) {
animation-delay: -0.15s;
}
@keyframes loading-ring {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}