kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-14 22:08:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

FloatingButton 컴포넌트 리팩토링

Browse Source
This commit is contained in:
static
2025-01-28 22:53:50 +09:00
parent b6edc2a8bc
commit d2aca276ac
6 changed files with 18 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/lib/components/atoms/buttons/FloatingButton.svelte
View File

@@ -5,26 +5,23 @@
interface Props { interface Props {
icon: Component<SvelteHTMLElements["svg"]>; icon: Component<SvelteHTMLElements["svg"]>;
offset?: ClassValue; offset: ClassValue;
onclick?: () => void; onclick?: () => void;
} }
let { icon: Icon, offset = "bottom-20", onclick }: Props = $props(); let { icon: Icon, offset, onclick }: Props = $props();
</script> </script>
<div class="pointer-events-none fixed inset-0"> <div class="pointer-events-none fixed inset-0">
<div class={["absolute w-full", offset]}> <AdaptiveDiv class="relative h-full">
<AdaptiveDiv> <button
<div class="relative"> onclick={onclick && (() => setTimeout(onclick, 100))}
<div class="absolute bottom-4 right-4"> class={[
<button "pointer-events-auto absolute bottom-4 right-4 flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400",
onclick={onclick && (() => setTimeout(onclick, 100))} offset,
class="pointer-events-auto flex h-14 w-14 items-center justify-center rounded-full bg-gray-300 shadow-lg transition active:scale-95 active:bg-gray-400" ]}
> >
<Icon class="text-xl" /> <Icon class="text-xl" />
</button> </button>
</div> </AdaptiveDiv>
</div>
</AdaptiveDiv>
</div>
</div> </div>

2
src/routes/(fullscreen)/client/pending/+page.svelte
View File

@@ -10,7 +10,7 @@
let { data } = $props(); let { data } = $props();
const fingerprint = $derived( let fingerprint = $derived(
$clientKeyStore $clientKeyStore
? generatePublicKeyFingerprint($clientKeyStore.encryptKey, $clientKeyStore.verifyKey) ? generatePublicKeyFingerprint($clientKeyStore.encryptKey, $clientKeyStore.verifyKey)
: undefined, : undefined,

2
src/routes/(fullscreen)/file/[id]/+page.svelte
View File

@@ -30,7 +30,7 @@
let isAddToCategoryBottomSheetOpen = $state(false); let isAddToCategoryBottomSheetOpen = $state(false);
const downloadStatus = $derived( let downloadStatus = $derived(
$fileDownloadStatusStore.find((statusStore) => { $fileDownloadStatusStore.find((statusStore) => {
const { id, status } = get(statusStore); const { id, status } = get(statusStore);
return id === data.id && isFileDownloading(status); return id === data.id && isFileDownloading(status);

2
src/routes/(fullscreen)/file/downloads/+page.svelte
View File

@@ -5,7 +5,7 @@
import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores"; import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores";
import File from "./File.svelte"; import File from "./File.svelte";
const downloadingFiles = $derived( let downloadingFiles = $derived(
$fileDownloadStatusStore.filter((status) => isFileDownloading(get(status).status)), $fileDownloadStatusStore.filter((status) => isFileDownloading(get(status).status)),
); );

2
src/routes/(fullscreen)/file/uploads/+page.svelte
View File

@@ -5,7 +5,7 @@
import { fileUploadStatusStore, isFileUploading } from "$lib/stores"; import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
import File from "./File.svelte"; import File from "./File.svelte";
const uploadingFiles = $derived( let uploadingFiles = $derived(
$fileUploadStatusStore.filter((status) => isFileUploading(get(status).status)), $fileUploadStatusStore.filter((status) => isFileUploading(get(status).status)),
); );

1
src/routes/(main)/directory/[[id]]/+page.svelte
View File

@@ -110,6 +110,7 @@
</div> </div>
<FloatingButton <FloatingButton
offset="bottom-24 right-4"
icon={IconAdd} icon={IconAdd}
onclick={() => { onclick={() => {
isEntryCreateBottomSheetOpen = true; isEntryCreateBottomSheetOpen = true;