aboutsummaryrefslogtreecommitdiffstats
path: root/src/components
diff options
context:
space:
mode:
authorAdam Soltys <[email protected]>2022-11-03 14:00:14 -0700
committerAdam Soltys <[email protected]>2022-11-03 14:00:18 -0700
commitd608c466c30019c4cc7d038f2308ac0e5b204841 (patch)
tree1b9e230702431fd4cde777c4b242703b067dc12e /src/components
parentaa1f1cf0832c70c66b84cfe5e1bb2912a704fea3 (diff)
downloadcoinos-ui-d608c466c30019c4cc7d038f2308ac0e5b204841.tar.gz
coinos-ui-d608c466c30019c4cc7d038f2308ac0e5b204841.zip
invoice requests
Diffstat (limited to 'src/components')
-rw-r--r--src/components/Qr.svelte73
1 files changed, 5 insertions, 68 deletions
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte
index e07906a5..952a905f 100644
--- a/src/components/Qr.svelte
+++ b/src/components/Qr.svelte
@@ -1,72 +1,9 @@
<script>
- import { fade } from 'svelte/transition';
import screenfull from 'screenfull';
- import { browser } from '$app/environment';
- import { onMount, tick } from 'svelte';
- import { copy } from '$lib/utils';
-
- export let image, text, qr, fullQr, full;
-
- let toggle = async () => {
- full = !full;
- await tick();
- screenfull.toggle(fullQr.firstChild);
- };
-
- let opts = {
- type: 'canvas',
- backgroundOptions: {
- color: 'rgba(0, 0, 0, 0)'
- },
- imageOptions: {
- hideBackgroundDots: false
- }
- };
-
- let mask = false;
- $: update(text);
- let update = async (text, fullscreen) => {
- mask = true;
- if (!(browser && text)) return;
- let { default: QRCodeStyling } = await import('qr-code-styling');
-
- opts.data = text;
- opts.height = opts.width = 300;
- const qrCode = new QRCodeStyling(opts);
-
- opts.height = opts.width = Math.min(window.innerWidth, window.innerHeight);
- const fullQrCode = new QRCodeStyling(opts);
-
- while (qr && qr.firstChild) qr.removeChild(qr.lastChild);
- qrCode.append(qr);
-
- while (fullQr && fullQr.firstChild) fullQr.removeChild(fullQr.lastChild);
- fullQrCode.append(fullQr);
- mask = false;
- };
+ export let src;
+ let qr;
</script>
-{#if mask}
- <div class="absolute bg-white w-[300px] h-[300px] t-0 l-0 z-10" out:fade />
-{/if}
-
-<div
- bind:this={qr}
- on:click={toggle}
- on:keydown={toggle}
- class:hidden={full}
- class="relative overflow-visible"
-/>
-<div bind:this={fullQr} on:click={toggle} on:keydown={toggle} class:hidden={!full} />
-
-<style>
- div {
- @apply w-[300px]
- h-[300px]
- rounded-3xl
- justify-center
- items-center
- cursor-pointer
- mx-auto;
- }
-</style>
+<div class="w-80 mx-auto my-5 cursor-pointer" bind:this={qr} on:click={() => screenfull.toggle(qr)} on:keydown={() => screenfull.toggle(qr)}>
+ <img {src} class="mx-auto" />
+</div>