smartyellow/status
1
0
Fork 0
mirror of https://github.com/smartyellow/status.git synced 2025-01-18 13:37:59 +00:00
Code Issues Packages Projects Releases Wiki Activity

Conditional animations

Browse Source
This commit is contained in:
Romein van Buren 2022-10-28 15:16:04 +02:00
parent 65065468c4
commit 721d788a5c
Signed by: romein
GPG Key ID: 0EFF8478ADDF6C49
3 changed files with 8 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
gui/dashboard/app.svelte
View File

@ -110,7 +110,7 @@
<div <div
in:receive={{ key: tile.id }} in:receive={{ key: tile.id }}
out:send={{ key: tile.id }} out:send={{ key: tile.id }}
animate:flip animate:flip={{ duration: $settings.animate ? (d => Math.sqrt(d) * 120) : 0 }}
> >
<TileRawValue {...tileProps(tile)} /> <TileRawValue {...tileProps(tile)} />
</div> </div>

3
gui/dashboard/lib.js
View File

@ -8,6 +8,7 @@ function createSettingsStore() {
cols: 4, cols: 4,
rows: 3, rows: 3,
fontSize: 1, fontSize: 1,
animate: true,
}; };
const s = writable(defaults); const s = writable(defaults);
@ -47,7 +48,7 @@ export const shuffle = crossfade({
const transform = style.transform === 'none' ? '' : style.transform; const transform = style.transform === 'none' ? '' : style.transform;
return { return {
duration: 300, duration: get(settings).animate ? 300 : 0,
easing: quintOut, easing: quintOut,
css: t => ` css: t => `
transform: ${transform} scale(${t}); transform: ${transform} scale(${t});

5
gui/dashboard/settings.svelte
View File

@ -42,6 +42,11 @@
</select> </select>
</label> </label>
<label>
Enable animations
<input type="checkbox" bind:checked={$settings.animate} />
</label>
<label> <label>
Columns Columns
<input type="number" bind:value={$settings.cols} width="10" /> <input type="number" bind:value={$settings.cols} width="10" />