ReVanced/revanced-website
1
0
Fork 0
mirror of https://github.com/revanced/revanced-website.git synced 2025-05-02 07:34:34 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: confirm submissions modal

Browse Source
This commit is contained in:
afn 2023-03-17 22:20:09 -04:00
parent 44ae5c73e4
commit 7ba96fac55
3 changed files with 59 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
src/lib/components/atoms/Dialogue.svelte
View File

@ -21,21 +21,23 @@
transition:fade={{ easing: quadInOut, duration: 150 }} transition:fade={{ easing: quadInOut, duration: 150 }}
> >
<div class="top"> <div class="top">
<div class="title"> {#if $$slots.title || $$slots.icon}
{#if fullscreen} <div class="title">
<button on:click={() => (modalOpen = !modalOpen)}> {#if fullscreen}
<img src="../icons/back.svg" id="back" alt="back" /> <button on:click={() => (modalOpen = !modalOpen)}>
</button> <img src="../icons/back.svg" id="back" alt="back" />
{/if} </button>
{#if $$slots.icon} {/if}
<slot name="icon" /> {#if $$slots.icon}
{/if} <slot name="icon" />
{#if $$slots.title} {/if}
<h2> {#if $$slots.title}
<slot name="title" /> <h2>
</h2> <slot name="title" />
{/if} </h2>
</div> {/if}
</div>
{/if}
{#if $$slots.description} {#if $$slots.description}
<p> <p>

2
src/lib/components/atoms/LogoOption.svelte
View File

@ -65,7 +65,7 @@
{#if hasVariants} {#if hasVariants}
<Modal bind:modalOpen> <Modal bind:modalOpen>
<svelte:fragment slot="title">Select a variant</svelte:fragment> <svelte:fragment slot="title">Select logo variants</svelte:fragment>
<div class="variants"> <div class="variants">
{#each variants as variant} {#each variants as variant}
<!-- Mega Trolley --> <!-- Mega Trolley -->

62
src/routes/poll/+page.svelte
View File

@ -18,6 +18,7 @@
let helpModal = false; let helpModal = false;
let clearModal = false; let clearModal = false;
let submitModal = false;
let selected: Selected = {}; let selected: Selected = {};
function calc_ui_selected_count(v: Selected) { function calc_ui_selected_count(v: Selected) {
let n = 0; let n = 0;
@ -141,7 +142,7 @@
function submitSelection() { function submitSelection() {
if (ui_selected_count < 1) return null; if (ui_selected_count < 1) return null;
submit = true; submitModal = true;
} }
function clearLogos() { function clearLogos() {
@ -239,19 +240,21 @@
</div> </div>
{/if} {/if}
{#if submit} <Modal bind:modalOpen={submitModal}>
<Modal modalOpen={true}> <svelte:fragment slot="title">
<svelte:fragment slot="title">Submit</svelte:fragment> {#if submit}
<svelte:fragment slot="description"> Submitting
{:else}
Confirm submission
{/if}
</svelte:fragment>
<svelte:fragment slot="description">
{#if submit}
<div> <div>
{#await submitBallot()} {#await submitBallot()}
<h6> <h6>Submitting your vote...</h6>
Submitting your vote...
</h6>
{:then _} {:then _}
<h6> <h6>Your vote has been casted.</h6>
Your vote has been casted.
</h6>
{:catch err} {:catch err}
<h6> <h6>
An error occurred. Try again later. An error occurred. Try again later.
@ -260,16 +263,35 @@
</h6> </h6>
{/await} {/await}
</div> </div>
</svelte:fragment> {:else}
</Modal> <div>
{/if} <h6>Do you want to cast your vote? You will not be able to vote again.</h6>
</div>
{/if}
</svelte:fragment>
<div class="buttons">
<Button
kind="text"
on:click={() => {
submitModal = false;
}}>Cancel</Button
>
<Button
kind="text"
on:click={() => {
submit = true;
}}>Submit</Button
>
</div>
</Modal>
</div> </div>
<div class="buttons-container"> <div class="buttons-container">
<Button on:click={previousPage} unclickable={currentPage <= 0}>Previous</Button> <Button on:click={previousPage} unclickable={currentPage <= 0}>Previous</Button>
<Button <Button
kind="primary" kind="primary"
on:click={finalPage ? submitSelection : nextPage} on:click={finalPage ? submitSelection : nextPage}
unclickable={submit || (finalPage && ui_selected_count < 1)} unclickable={finalPage && ui_selected_count < 1}
> >
{finalPage ? 'Submit' : 'Next'} {finalPage ? 'Submit' : 'Next'}
</Button> </Button>
@ -281,8 +303,8 @@
<svelte:fragment slot="description"> <svelte:fragment slot="description">
<div class="desc"> <div class="desc">
<h6> <h6>
This is an approval voting system. Voters can choose any number of logo and variants. The This is an approval voting system. Voters can choose any number of logos (and its variants
logo that is selected the most wins. Note that you can only vote once! if applicable). The logo that is selected the most wins. Note that you can only vote once.
</h6> </h6>
</div> </div>
</svelte:fragment> </svelte:fragment>
@ -299,9 +321,7 @@
<Modal bind:modalOpen={clearModal}> <Modal bind:modalOpen={clearModal}>
<svelte:fragment slot="description"> <svelte:fragment slot="description">
<div class="desc"> <div class="desc">
<h6> <h6>Deselect all logos?</h6>
Deselect all logos?
</h6>
</div> </div>
</svelte:fragment> </svelte:fragment>
<div class="buttons"> <div class="buttons">
@ -350,7 +370,7 @@
gap: 1rem; gap: 1rem;
justify-content: right; justify-content: right;
width: 100%; width: 100%;
z-index: 999; z-index: 99;
position: fixed; position: fixed;
bottom: 0; bottom: 0;
right: 0; right: 0;