Confirmation tooltip on delete (#233).

plentico · Dec 29, 2022 · d3ebb5e · d3ebb5e
1 parent 48445ba
commit d3ebb5e
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 18 deletions.
diff --git a/cmd/defaults/ejected/cms/button.svelte b/cmd/defaults/ejected/cms/button.svelte
@@ -5,9 +5,10 @@
     import { env } from '../env.js';
 
     const local = env.local ?? false;
+    let status, confirmTooltip;
 
-    let status;
     const onSubmit = async () => {
+        confirmTooltip = false;
         status = "sending";
         try {
             if (local) {
@@ -31,22 +32,37 @@
     }
 </script>
 
-<button 
-    on:click|preventDefault={onSubmit}
-    type="submit"
-    disabled={status}
-    class="{status}"
->
-    {#if status == "sending"}
-        Sending...
-    {:else if status == "failed"}
-        Error saving
-    {:else if status == "sent"}
-        Changes committed
-    {:else}
-        {buttonText}
+<div class="button">
+    {#if confirmTooltip}
+        <div class="confirm">
+            <div class="carrot"></div>
+            <div>Are you sure you want to permanently remove:</div>
+            {#each commitList as commitItem}
+                <div class="remove-file">{commitItem.file}</div>
+            {/each}
+            <div class="confirm-actions">
+                <button on:click|preventDefault={onSubmit}>Yes</button>
+                <button on:click|preventDefault={() => confirmTooltip = false}>Cancel</button>
+            </div>
+        </div>
     {/if}
-</button>
+    <button 
+        on:click|preventDefault={() => action === "delete" ? confirmTooltip = true : onSubmit}
+        type="submit"
+        disabled={status}
+        class="{status}"
+    >
+        {#if status == "sending"}
+            Sending...
+        {:else if status == "failed"}
+            Error saving
+        {:else if status == "sent"}
+            Changes committed
+        {:else}
+            {buttonText}
+        {/if}
+    </button>
+</div>
 
 <style>
     button {
@@ -59,4 +75,48 @@
     button.failed {
         background-color: darkred;
     }
+    .button {
+        position: relative;
+    }
+    .confirm {
+        position: absolute;
+        inset: auto 0 50px auto;
+        background: white;
+        padding: 10px;
+        box-shadow: 0px 0px 6px rgb(0 0 0 / 30%);
+        border-radius: 5px;
+        width: 100%;
+        box-sizing: border-box;
+    }
+    .carrot {
+        position: absolute;
+        left: 46%;
+        bottom: -10px;
+        width: 0; 
+        height: 0; 
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid white;
+    }
+    .carrot:before {
+        content: "";
+        position: absolute;
+        left: -10px;
+        bottom: -1px;
+        width: 0; 
+        height: 0; 
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 10px solid gainsboro;
+        z-index: -1;
+    }
+    .remove-file {
+        color: gray;
+        margin-bottom: 8px;
+        padding: 8px 0;
+    }
+    .confirm-actions {
+        display: flex;
+        gap: 10px;
+    }
 </style>
diff --git a/cmd/defaults/ejected/cms/button_wrapper.svelte b/cmd/defaults/ejected/cms/button_wrapper.svelte
@@ -26,13 +26,13 @@
         background-color: #1c7fc7;
         color: #fff;
     }
-    .buttons > :global(button:last-child),
+    .buttons > :global(.button:last-child button),
     .buttons :global(.button-secondary button) {
         background-color: transparent;
         border: 2px solid #1c7fc7;
         color: #1c7fc7;
     }
-    .buttons > :global(button:last-child):hover,
+    .buttons > :global(.button:last-child button):hover,
     .buttons :global(.button-secondary button):hover {
         background-color: #1c7fc7;
         color: white;