Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2025-02-02 08:26:22 +01:00
Code Issues Projects Releases Packages Wiki Activity

web/SupportedServices: use the general popover component

Browse source
This commit is contained in:
wukko 2024-12-16 17:24:05 +06:00
parent 91327220a0
commit 5d75ee493d
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
1 changed files with 38 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
web/src/components/save/SupportedServices.svelte
View file

@ -1,18 +1,21 @@
<script lang="ts"> <script lang="ts">
import { t } from "$lib/i18n/translations"; import { t } from "$lib/i18n/translations";
import { getServerInfo } from "$lib/api/server-info";
import cachedInfo from "$lib/state/server-info"; import cachedInfo from "$lib/state/server-info";
import { getServerInfo } from "$lib/api/server-info";
import type { SvelteComponent } from "svelte";
import Skeleton from "$components/misc/Skeleton.svelte"; import Skeleton from "$components/misc/Skeleton.svelte";
import IconPlus from "@tabler/icons-svelte/IconPlus.svelte"; import IconPlus from "@tabler/icons-svelte/IconPlus.svelte";
import PopoverContainer from "$components/misc/PopoverContainer.svelte";
let services: string[] = []; let services: string[] = [];
let popover: HTMLDivElement; let popover: SvelteComponent;
$: expanded = false; $: expanded = false;
let servicesContainer: HTMLDivElement;
$: loaded = false; $: loaded = false;
$: renderPopover = false;
const loadInfo = async () => { const loadInfo = async () => {
await getServerInfo(); await getServerInfo();
@ -29,19 +32,7 @@
await loadInfo(); await loadInfo();
} }
if (expanded) { if (expanded) {
popover.focus(); servicesContainer.focus();
}
}
const showPopover = async () => {
const timeout = !renderPopover;
renderPopover = true;
// 10ms delay to let the popover render for the first time
if (timeout) {
setTimeout(popoverAction, 10);
} else {
await popoverAction();
} }
}; };
</script> </script>
@ -49,7 +40,7 @@
<div id="supported-services" class:expanded> <div id="supported-services" class:expanded>
<button <button
id="services-button" id="services-button"
on:click={showPopover} on:click={popover?.showPopover}
aria-label={$t(`save.services.title_${expanded ? "hide" : "show"}`)} aria-label={$t(`save.services.title_${expanded ? "hide" : "show"}`)}
> >
<div class="expand-icon"> <div class="expand-icon">
@ -58,11 +49,15 @@
<span class="title">{$t("save.services.title")}</span> <span class="title">{$t("save.services.title")}</span>
</button> </button>
{#if renderPopover} <PopoverContainer
<div id="services-popover"> bind:this={popover}
id="services-popover"
{expanded}
{popoverAction}
>
<div <div
id="services-container" id="services-container"
bind:this={popover} bind:this={servicesContainer}
tabindex="-1" tabindex="-1"
data-focus-ring-hidden data-focus-ring-hidden
> >
@ -83,8 +78,7 @@
<div id="services-disclaimer" class="subtext"> <div id="services-disclaimer" class="subtext">
{$t("save.services.disclaimer")} {$t("save.services.disclaimer")}
</div> </div>
</div> </PopoverContainer>
{/if}
</div> </div>
<style> <style>
@ -97,34 +91,6 @@
height: 35px; height: 35px;
} }
#services-popover {
display: flex;
flex-direction: column;
border-radius: 18px;
background: var(--button);
box-shadow:
var(--button-box-shadow),
0 0 10px 10px var(--popover-glow);
position: relative;
padding: 12px;
gap: 6px;
top: 6px;
opacity: 0;
transform: scale(0);
transform-origin: top center;
transition:
transform 0.3s cubic-bezier(0.53, 0.05, 0.23, 1.15),
opacity 0.25s cubic-bezier(0.53, 0.05, 0.23, 0.99);
}
.expanded #services-popover {
transform: scale(1);
opacity: 1;
}
#services-button { #services-button {
gap: 9px; gap: 9px;
padding: 7px 13px 7px 10px; padding: 7px 13px 7px 10px;