From 0c8f6bc304276d07ad8f4d094395beb35d2c1ee2 Mon Sep 17 00:00:00 2001 From: Jacob Sapoznikow Date: Wed, 19 Apr 2023 04:26:56 +0000 Subject: [PATCH] Clean up some animations --- src/api/dev.ts | 2 +- src/api/invoke.ts | 6 +- src/components/Sidebar.svelte | 178 +++-------------------- src/components/sass/Sidebar.scss | 157 ++++++++++++++++++++ src/routes/[game]/instances/+page.svelte | 6 +- src/routes/[game]/mods/+page.svelte | 4 +- 6 files changed, 187 insertions(+), 166 deletions(-) create mode 100644 src/components/sass/Sidebar.scss diff --git a/src/api/dev.ts b/src/api/dev.ts index f653187..d0e4de4 100644 --- a/src/api/dev.ts +++ b/src/api/dev.ts @@ -54,7 +54,7 @@ export const createMockAPI = () => { return undefined; case "get_instances": - return DEV_Instances; + return DEV_Instances.filter((v) => v.game == (args as any | undefined)?.gameId); case "get_instance_info": const id = (args as InvokeFunction["get_instance_info"][0]).instanceId; diff --git a/src/api/invoke.ts b/src/api/invoke.ts index f6e4e30..eb9c3d8 100644 --- a/src/api/invoke.ts +++ b/src/api/invoke.ts @@ -48,6 +48,10 @@ export interface AddInstanceArgs { installPath: string; } +export interface GetInstances { + gameId: number; +} + export interface InvokeFunction { install_spacewarp: [undefined, string]; uninstall_spacewarp: [undefined, string]; @@ -56,7 +60,7 @@ export interface InvokeFunction { launch: [InstanceArgs, undefined]; - get_instances: [undefined, InstanceInfo[]]; + get_instances: [GetInstances, InstanceInfo[]]; get_instance_info: [InstanceArgs, InstanceInfo]; get_mod: [ModArgs, FullModInfo]; diff --git a/src/components/Sidebar.svelte b/src/components/Sidebar.svelte index 0933483..7f4a7af 100644 --- a/src/components/Sidebar.svelte +++ b/src/components/Sidebar.svelte @@ -1,4 +1,5 @@ -
+
@@ -35,204 +36,65 @@ - + SpaceWarp KSP 1 + + KSP 1
- - + + Instances - + - + Browse Mods - + - + Manage Mods
KSP 2 + + KSP 2
- - + + Instances - + - + Browse Mods - + - + Manage Mods
- + Settings
- - diff --git a/src/components/sass/Sidebar.scss b/src/components/sass/Sidebar.scss new file mode 100644 index 0000000..71cba93 --- /dev/null +++ b/src/components/sass/Sidebar.scss @@ -0,0 +1,157 @@ +@mixin tooltip-container { + .tooltip { + opacity: 0; + background-color: #5f6160; + color: #dcdcec; + text-align: center; + padding: 10% 40%; + border-radius: 6px; + pointer-events: none; + width: 10rem; + + position: absolute; + z-index: 1; + + left: 130%; + + transition: opacity 0.5s ease; + + &::after { + content: " "; + position: absolute; + top: 50%; + right: 100%; + margin-top: -10px; + border-width: 10px; + border-style: solid; + border-color: transparent #5f6160 transparent transparent; + } + } + + &:hover { + .tooltip { + opacity: 1; + } + } +} + +.sidebar { + width: 2rem; + height: 100%; + + user-select: none; + + padding: 0 1%; + + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: flex-start; + + background-color: #2f2f2f; + + .logo { + width: 64px; + height: 64px; + padding: 0; + margin: 0; + + object-fit: cover; + } + + .divider { + width: 90%; + margin: 0 5%; + height: 0; + border: 0; + padding: 0; + + margin-bottom: 0.5rem; + border-bottom: 1px solid #aeaebe; + } + + .link { + color: #aeaebe; + margin: 10% 0; + height: 2.75rem; + padding: 0 20%; + border: 1px solid transparent; + border-radius: 6px; + font-size: 16pt; + outline: none; + width: 100%; + + position: relative; + background-color: transparent; + + display: inline-flex; + flex-direction: row; + align-items: center; + justify-content: center; + + text-decoration: none; + + transition: color 0.5s ease, background-color 0.5s ease; + + &.active { + color: white; + background-color: #4f4f4f; + } + + .icon { + margin-right: 4%; + } + + img { + width: 100%; + } + + &:hover { + color: #dcdcec; + background-color: #4f4f4f; + } + + @include tooltip-container; + } + + .group { + width: 100%; + padding: 0 30%; + margin: 0; + + max-height: 0; + position: relative; + + transition: max-height 0.5s ease-in-out; + + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: space-evenly; + + background-color: #3f3f3f; + border-radius: 8px; + + .link { + opacity: 0; + pointer-events: none; + + transition: opacity 0.5s ease; + + &:hover, + &.active { + background-color: #5f5f5f; + } + } + + &.active { + margin: 10% 0; + max-height: 100%; + + .link { + opacity: 1; + pointer-events: unset; + } + } + } +} diff --git a/src/routes/[game]/instances/+page.svelte b/src/routes/[game]/instances/+page.svelte index 3806a0b..53425bb 100644 --- a/src/routes/[game]/instances/+page.svelte +++ b/src/routes/[game]/instances/+page.svelte @@ -2,8 +2,6 @@ import type { InstanceInfo } from "../../../api/instance"; import Instance from "../../../components/Instance.svelte"; import { invoke_proxy } from "../../../api/invoke"; - import Dropdown from "../../../components/Dropdown.svelte"; - import { gameItems } from "../../../api/browse"; import { browser } from "$app/environment"; import { onMount } from "svelte"; import { page } from "$app/stores"; @@ -22,9 +20,7 @@ $: instanceName = instanceToDelete?.name; onMount(async () => { - const data = await invoke_proxy("get_instances", undefined); - - instances = data.filter((instance) => instance.game == gameId); + instances = await invoke_proxy("get_instances", { gameId }); }); const addInstance = async () => { diff --git a/src/routes/[game]/mods/+page.svelte b/src/routes/[game]/mods/+page.svelte index 82d6ab8..def37a2 100644 --- a/src/routes/[game]/mods/+page.svelte +++ b/src/routes/[game]/mods/+page.svelte @@ -58,7 +58,9 @@ } if (initialLoad) { - instances = (await invoke_proxy("get_instances", undefined)).map((instance) => ({ + instances = (await invoke_proxy("get_instances", { + gameId, + })).map((instance) => ({ id: instance.id, text: instance.name, }));