Eclypsed/Lazuli
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

New styling on connection profiles

Browse Source
This commit is contained in:
Eclypsed
2024-02-12 12:22:17 -05:00
parent a8241c6e19
commit 269d79327e
5 changed files with 25 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
src/routes/settings/connections/connectionProfile.svelte
View File

@@ -3,22 +3,27 @@
import IconButton from '$lib/components/util/iconButton.svelte'
import Toggle from '$lib/components/util/toggle.svelte'
import type { SubmitFunction } from '@sveltejs/kit'
import { fly, scale } from 'svelte/transition'
import { fly } from 'svelte/transition'
import { enhance } from '$app/forms'
export let connection: Connection
export let submitFunction: SubmitFunction
const serviceData = Services[connection.service.type]
$: serviceData = Services[connection.service.type]
let showUnlinkModal = false
let showModal = false
</script>
<section class="overflow-hidden rounded-lg" style="background-color: rgba(82, 82, 82, 0.25);" transition:fly={{ x: 50 }}>
<section class="rounded-lg" style="background-color: rgba(82, 82, 82, 0.25);" transition:fly={{ x: 50 }}>
<header class="flex h-20 items-center gap-4 p-4">
<img src={serviceData.icon} alt="{serviceData.displayName} icon" class="aspect-square h-full p-1" />
<div class="h-full aspect-square p-1 relative">
<img src={serviceData.icon} alt="{serviceData.displayName} icon" />
{#if 'profilePicture' in connection.service && typeof connection.service.profilePicture === 'string'}
<img src="{connection.service.profilePicture}" alt="" class="absolute h-5 aspect-square bottom-0 right-0 rounded-full"/>
{/if}
</div>
<div>
<div>{'username' in connection.service ? connection.service.username : 'Placeholder Account Name'}</div>
<div>{connection.service.username}</div>
<div class="text-sm text-neutral-500">
{serviceData.displayName}
{#if 'serverName' in connection.service}
@@ -26,23 +31,20 @@
{/if}
</div>
</div>
<div class="relative ml-auto h-8">
<IconButton halo={true} on:click={() => (showUnlinkModal = !showUnlinkModal)}>
<i slot="icon" class="fa-solid fa-link-slash" />
<div class="relative ml-auto h-8 flex flex-row-reverse gap-2">
<IconButton halo={true} on:click={() => showModal = !showModal}>
<i slot="icon" class="fa-solid fa-ellipsis-vertical text-xl text-neutral-500" />
</IconButton>
{#if showUnlinkModal}
{#if showModal}
<form
transition:scale={{ start: 0.5 }}
use:enhance={submitFunction}
action="?/deleteConnection"
method="post"
class="absolute right-full top-0 flex -translate-x-3 flex-col items-center justify-center gap-3 rounded-md bg-neutral-925 p-4"
class="absolute right-0 top-full flex flex-col items-center justify-center gap-3 rounded-md bg-neutral-900 p-2 text-xs"
>
<span class="whitespace-nowrap">Delete Connection</span>
<div class="flex gap-4">
<button class="w-20 rounded-md bg-red-500 px-2 py-1">Confirm</button>
<button class="w-20 rounded-md bg-neutral-600 px-2 py-1" on:click|preventDefault={() => (showUnlinkModal = false)}>Cancel</button>
</div>
<button formaction="?/deleteConnection" class="py-2 px-3 whitespace-nowrap hover:bg-neutral-800 rounded-md" on:click={() => showModal = false}>
<i class="fa-solid fa-link-slash mr-1" />
Delete Connection
</button>
<input type="hidden" value={connection.id} name="connectionId" />
</form>
{/if}
@@ -52,7 +54,7 @@
<div class="p-4 text-sm text-neutral-400">
<div class="grid grid-cols-[3rem_auto] gap-4">
<Toggle on:toggled={(event) => console.log(event.detail.toggled)} />
<span>Enable Connection</span>
<span>Place for config</span>
</div>
</div>
</section>