File size: 1,265 Bytes
2cb745f
 
 
 
 
 
 
992a8de
2cb745f
 
 
 
 
bbbedb7
2cb745f
 
 
 
 
 
 
3abaf81
992a8de
2cb745f
 
992a8de
2cb745f
 
999407a
 
 
2cb745f
 
315e56b
2cb745f
315e56b
2cb745f
d644838
 
 
992a8de
2cb745f
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<script lang="ts">
	import { base } from "$app/paths";
	import { clickOutside } from "$lib/actions/clickOutside";
	import { afterNavigate, goto } from "$app/navigation";
	import { useSettingsStore } from "$lib/stores/settings";
	import CarbonCheckmark from "~icons/carbon/checkmark";

	import { fade, fly } from "svelte/transition";

	let previousPage: string = base;

	afterNavigate(({ from }) => {
		if (!from?.url.pathname.includes("settings")) {
			previousPage = from?.url.toString() || previousPage;
		}
	});

	const settings = useSettingsStore();
</script>

<div
	class="fixed inset-0 z-20 flex items-center justify-center bg-black/80 backdrop-blur-sm dark:bg-black/50"
	in:fade
>
	<dialog
		in:fly={{ y: 100 }}
		open
		use:clickOutside={() => {
			if (window?.getSelection()?.toString()) {
				return;
			}
			goto(previousPage);
		}}
		class="h-[95dvh] w-[90dvw] overflow-hidden rounded-2xl bg-white shadow-2xl outline-none sm:h-[80dvh] xl:w-[1200px] 2xl:h-[70dvh]"
	>
		<slot />
		{#if $settings.recentlySaved}
			<div
				class="absolute bottom-4 right-4 m-2 flex items-center gap-1.5 rounded-full border border-gray-300 bg-gray-200 px-3 py-1 text-black"
			>
				<CarbonCheckmark class="text-green-500" />
				Saved
			</div>
		{/if}
	</dialog>
</div>