diff options
Diffstat (limited to 'src/components')
| -rw-r--r-- | src/components/Qr.svelte | 22 | ||||
| -rw-r--r-- | src/components/Tip.svelte | 135 |
2 files changed, 68 insertions, 89 deletions
diff --git a/src/components/Qr.svelte b/src/components/Qr.svelte index 099d5fa5..23282589 100644 --- a/src/components/Qr.svelte +++ b/src/components/Qr.svelte @@ -1,4 +1,5 @@ <script> + import { fly, fade } from 'svelte/transition'; import screenfull from 'screenfull'; import { browser } from '$app/environment'; import { onMount, tick } from 'svelte'; @@ -7,16 +8,14 @@ export let image, text, qr, fullQr, full; let toggle = async () => { + console.log('FULL', full); full = !full; await tick(); screenfull.toggle(fullQr.firstChild); }; let opts = { - height: 300, - width: 300, type: 'canvas', - data: text, backgroundOptions: { color: 'rgba(0, 0, 0, 0)' }, @@ -33,26 +32,33 @@ } }; + 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 = Math.min(window.innerWidth, window.innerHeight); - opts.width = opts.height; + opts.height = opts.width = Math.min(window.innerWidth, window.innerHeight); const fullQrCode = new QRCodeStyling(opts); - while (qr.firstChild) qr.removeChild(qr.lastChild); + while (qr && qr.firstChild) qr.removeChild(qr.lastChild); qrCode.append(qr); - while (fullQr.firstChild) fullQr.removeChild(fullQr.lastChild); + while (fullQr && fullQr.firstChild) fullQr.removeChild(fullQr.lastChild); fullQrCode.append(fullQr); + mask = false; }; </script> -<div bind:this={qr} on:click={toggle} class:hidden={full} /> +{#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} class:hidden={full} class="relative overflow-visible" /> <div bind:this={fullQr} on:click={toggle} class:hidden={!full} /> <style> diff --git a/src/components/Tip.svelte b/src/components/Tip.svelte index 83bf0dfa..093fef46 100644 --- a/src/components/Tip.svelte +++ b/src/components/Tip.svelte @@ -1,24 +1,15 @@ <script> + import { enhance } from '$app/forms'; import { Icon } from '$comp'; import { t } from '$lib/translations'; import { f, post, s } from '$lib/utils'; import { tick } from 'svelte'; import { goto } from '$app/navigation'; - export let amountFiat, - showCustomAmount, - showMobileTip, - tipPercent, - tipAmount, - amount, - currency, - tip, - prompt, - rate, - text, - username; + export let amountFiat, showMobileTip, tipPercent, tipAmount, amount, currency, tip, username; const tipAmounts = ['None', '10%', '15%', '20%']; + let showCustomAmount; let customInput; let customTipAmount; @@ -26,42 +17,17 @@ let apply = async () => { if (customTipAmount > 0) { tipPercent = (customTipAmount / amountFiat) * 100; - update(); showMobileTip = false; showCustomAmount = false; + update(); } }; - let update = async () => { - await tick(); - let { uuid } = await post(`/invoice`, { - amount: parseInt(amount + tip), - prompt, - rate, - tip, - text, - user: { username } - }); - - goto(`/invoice/${uuid}`); - }; - const handleCustomTipAmount = (e) => { tipPercent = 0; customTipAmount = e.target.value; }; - const handleMobileClose = () => { - tipPercent = 0; - if (customInput) { - customInput.value = ''; - } - customTipAmount = 0; - tipAmount = 0; - showMobileTip = false; - showCustomAmount = false; - }; - let timeout; const handleSlide = (e) => { customTipAmount = ''; @@ -71,7 +37,7 @@ tipPercent = e.target.value; clearTimeout(timeout); - timeout = setTimeout(update, 100); + timeout = setTimeout(update, 800); }; const handleTipButtonClick = (amount) => { @@ -88,6 +54,12 @@ showMobileTip = false; update(); }; + + let submit; + let update = async () => { + await tick(); + submit.click(); + }; </script> <div @@ -95,40 +67,34 @@ ? 'bottom-0' : '-top-full'} bg-white p-6 md:p-0 rounded-t-3xl md:rounded-none left-0 md:static text-center space-y-5" > - <div class="flex justify-end items-center"> - <button class="block md:hidden bg-primary rounded-full p-2" on:click={handleMobileClose} - ><Icon icon="close" /></button - > - <button - class="hidden {showCustomAmount ? 'md:block' : ''}" - on:click={() => (showCustomAmount = false)} - ><Icon icon="close" style="hover:opacity-80" /></button - > - </div> - <h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1> - {#if !showCustomAmount} - <div> - <span class="font-semibold mr-1">{f(tipAmount, currency)}</span><span - class="text-secondary font-semibold text-sm">{`(${s(tip)} SAT)`}</span - > - <span class="block text-secondary text-sm">{Math.round(tipPercent)}%</span> - </div> + <form method="POST" use:enhance> + <input type="hidden" name="amount" value={amount} /> + <input type="hidden" name="tip" value={tip} /> + <input type="hidden" name="username" value={username} /> + <input type="hidden" name="prompt" value="true" /> - <input - id="slider" - type="range" - min="0" - max="100" - value={tipPercent} - class="px-2 py-0" - on:input={handleSlide} - on:change={() => (showMobileTip = false)} - /> - {/if} - <div> + <h1 class="hidden md:block text-4xl font-semibold">{$t('invoice.addTipq')}</h1> {#if !showCustomAmount} + <div> + <span class="font-semibold mr-1">{f(tipAmount, currency)}</span><span + class="text-secondary font-semibold text-sm">{`(${s(tip)} SAT)`}</span + > + <span class="block text-secondary text-sm">{Math.round(tipPercent)}%</span> + </div> + + <input + id="slider" + type="range" + min="0" + max="100" + value={tipPercent} + class="px-2 py-0 mb-4" + on:input={handleSlide} + on:change={() => (showMobileTip = false)} + /> {#each tipAmounts as amount} <button + type="button" class="bg-black text-white md:text-black md:bg-primary md:hover:bg-black md:hover:text-white w-16 md:w-20 py-3 m-1 rounded-2xl font-semibold {customTipAmount ? '' : Math.round(tipPercent) === parseInt(amount.slice(0, 2)) || @@ -138,8 +104,21 @@ on:click={() => handleTipButtonClick(amount)}>{amount}</button > {/each} + + <div> + <button + type="button" + class="w-full md:w-auto mt-2 bg-black md:bg-primary text-white md:text-black md:hover:bg-black md:hover:text-white font-semibold py-3 px-7 rounded-2xl" + on:click={() => (showCustomAmount = true)}>Custom amount</button + > + </div> {/if} - {#if showCustomAmount} + + <button type="submit" bind:this={submit} /> + </form> + + {#if showCustomAmount} + <form on:submit|preventDefault={apply}> <div class="relative"> <span class="absolute top-[18px] left-5 font-semibold {!customTipAmount @@ -149,28 +128,22 @@ <input bind:this={customInput} type="number" + step="0.01" on:input={(e) => handleCustomTipAmount(e)} class="pl-10" placeholder="Other" /> <button + type="submit" class="w-full mt-2 bg-black text-white font-semibold py-3 px-7 rounded-2xl {!customTipAmount ? 'opacity-50' : 'opacity-100 hover:opacity-80'}" - disabled={!customTipAmount} - on:click={apply}>Apply</button + disabled={!customTipAmount}>Apply</button > <!-- found missing translation ---> </div> - {:else} - <div> - <button - class="w-full md:w-auto mt-2 bg-black md:bg-primary text-white md:text-black md:hover:bg-black md:hover:text-white font-semibold py-3 px-7 rounded-2xl" - on:click={() => (showCustomAmount = true)}>Custom amount</button - > - </div> - {/if} - </div> + </form> + {/if} </div> <div |