Implemented custom popups across the platform.

Closes #40 Squashed commits: commit 621c842f59a314ea690c83c6524073a664b6057b commit b20c26e46a83a9a782730d1c0afa6e66f1dcd684
vexy · Jan 29, 2023 · db43b4f · db43b4f
1 parent 960915c
commit db43b4f
Show file tree

Hide file tree

Showing 8 changed files with 532 additions and 444 deletions.
diff --git a/frontend/src/lib/ModalDialog.svelte b/frontend/src/lib/ModalDialog.svelte
diff --git a/frontend/src/lib/Popup.svelte b/frontend/src/lib/Popup.svelte
@@ -0,0 +1,90 @@
+<script lang="ts">
+    import { fade } from "svelte/transition";
+
+    export let show: boolean;
+</script>
+
+{#if show}
+    <overlay transition:fade>
+        <popup>
+            <h2>
+                <slot name="header" />
+            </h2>
+
+            <div>
+                <slot name="body" />
+            </div>
+
+            <button-area>
+                <slot name="actions" />
+            </button-area>
+        </popup>
+    </overlay>
+{/if}
+
+<style>
+    overlay {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 100vh;
+        width: 100vw;
+        background-image: linear-gradient(to top, rgba(190, 100, 25, 0.75), rgba(10,150,125, 0.8));
+        z-index: 1;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+
+    popup {
+        align-self: center;
+
+        margin: 10%;
+        box-shadow: 0px 0px 10px #fff;
+        border-radius: 10px;
+        background-color: #fff;
+    }
+
+    h2, div {
+        text-align: center;
+        word-wrap: break-word;
+        padding: 10px;
+        user-select: none;
+    }
+
+    h2 {
+        background-image: linear-gradient(to top, #868484 0%, #123456 100%);
+        background-clip: text;
+        margin: 10px;
+
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent; 
+        -moz-background-clip: text;
+        -moz-text-fill-color: transparent;
+    }
+
+    h2:hover {
+        color: #123456;
+        background-image: initial;
+        background-clip: initial;
+
+        -webkit-background-clip: initial;
+        -webkit-text-fill-color: initial; 
+        -moz-background-clip: initial;
+        -moz-text-fill-color: initial;
+    }
+
+    div { 
+        color: blueviolet;
+    }
+
+    button-area {
+        margin: 10px;
+        padding: 10px;
+        display: flex;
+        justify-content: space-around;
+    }
+</style>
diff --git a/frontend/src/lib/QuestionPanel.svelte b/frontend/src/lib/QuestionPanel.svelte
diff --git a/frontend/src/lib/QuestionsTable.svelte b/frontend/src/lib/QuestionsTable.svelte
@@ -1,45 +1,64 @@
 <script lang="ts">
     import { goto } from "$app/navigation";
     import Loader from '$lib/Loader.svelte';
+    import Popup from "$lib/Popup.svelte";
     import Utilities from "$lib/Utilities";
     import type { QuestionInfoOutput } from "$lib/Models";
 
     export let dataSet: QuestionInfoOutput[];
     export let isLoading: boolean = false;
+    let isShowingPopup = false;
 
     async function performReport(questionID: number) {
+        //TODO: catch any errors and show them in popups
         await Utilities.provideExtra(questionID, 2);
-        alert("Ваш избор је сачуван. Хвала !")
-        goto(`/list`);
+        isShowingPopup = true;
+        goto(`/list`, {invalidateAll: true});
+    }
+
+    function openQuestion(questionID: number) {
+        goto(`/questions/${questionID}`, {noScroll: true, keepFocus: true});
     }
 </script>
 
+<!-- page popup definition -->
+<Popup show={isShowingPopup}>
+    <div slot="header">
+        Ваш избор је сачуван. Хвала !
+    </div>
+    <div slot="actions">
+        <button class="close-button" on:click={() => {isShowingPopup = false}}>
+            Затвори
+        </button>
+    </div>
+</Popup>
+
 <questions_container>
     {#if !isLoading}
         {#each dataSet as question }
             <questionbody>
                 <code><u>#{question.id}</u></code>
                 <question-title>{question.question.title}</question-title>
                     {#if question.hasVoted }
-                        <button class="resultsbutton" on:click={() => goto(`/questions/${question.id}`)}>
+                        <button class="resultsbutton" on:click={() => openQuestion(question.id)}>
                             📈 Резултати
                         </button>
                     {:else}
                         <questionbody>
-                            <button class="votebutton" on:click={() => goto(`/questions/${question.id}`)}>
+                            <button class="votebutton" on:click={() => openQuestion(question.id)}>
                                 Детаљи ({question.totalVoters})
                             </button>
-                            <button class="reportbutton" on:click={performReport(question.id)}>
+                            <button class="reportbutton" on:click={() => performReport(question.id)}>
                                 🚩
                             </button>
                         </questionbody>
                     {/if}
             </questionbody>
         {/each}
     {:else}
-        <ll>
+        <loader-container>
             <Loader message="Учитавање..."/>
-        </ll>
+        </loader-container>
     {/if}
 </questions_container>
 
@@ -60,7 +79,7 @@
         align-items: center;
     }
 
-    ll {
+    loader-container {
         flex: 1;
         display: flex;
         justify-content: space-around;
@@ -142,4 +161,18 @@
     .resultsbutton:hover {
         font-weight: bolder;
     }
+
+    .close-button {
+        padding: 10px;
+        cursor: pointer;
+        border: none;
+        border-radius: 5px;
+        position: relative;
+        color: #fff;
+        background-color: #123;
+    }
+
+    .close-button:hover {
+        font-weight: bolder;
+    }
 </style>