feat: ✨ updated notes drawer's transition, side prop, and button styling

icssc · Feb 10, 2024 · 2206a04 · 2206a04
1 parent 457b7f4
commit 2206a04
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 55 deletions.
diff --git a/src/lib/components/Drawer.svelte b/src/lib/components/Drawer.svelte
@@ -1,34 +1,48 @@
 <script lang="ts">
   import { createDialog, melt } from "@melt-ui/svelte";
   import { X } from "lucide-svelte";
-  import { fade, fly } from "svelte/transition";
-  // Internal helpers
+  import { fade, fly, type FlyParams } from "svelte/transition";
 
-  export let dialogTitle: string;
-  export let dialogContent: string;
+  export let side: string = "left";
+  export let dialogTitle: string = "Empty";
+  export let dialogContent: string = "Empty";
 
   const {
     elements: { trigger, overlay, content, title, description, close, portalled },
     states: { open },
   } = createDialog({
     forceVisible: true,
   });
+
+  let transition: FlyParams;
+  let position: string;
+  switch (side) {
+    case "right":
+      transition = { x: window.innerWidth, duration: 600, opacity: 1 };
+      position = "right";
+      break;
+    case "top":
+      transition = { y: -window.innerHeight, duration: 600, opacity: 1 };
+      position = "top";
+      break;
+    case "bottom":
+      transition = { y: window.innerHeight, duration: 600, opacity: 1 };
+      position = "bottom";
+      break;
+    case "left":
+    default:
+      transition = { x: -window.innerWidth, duration: 600, opacity: 1 };
+      position = "left";
+      break;
+  }
 </script>
 
 <button use:melt={$trigger} class="trigger"> View {dialogTitle} </button>
 <div use:melt={$portalled}>
   {#if $open}
-    <div use:melt={$overlay} class="overlay" transition:fade={{ duration: 150 }} />
-    <div
-      use:melt={$content}
-      class="content"
-      transition:fly={{
-        x: -350,
-        duration: 300,
-        opacity: 1,
-      }}
-    >
-      <button use:melt={$close} aria-label="Close" class="close">
+    <div use:melt={$overlay} class="overlay" transition:fade={{ duration: 300 }} />
+    <div use:melt={$content} class="content {position}" transition:fly={transition}>
+      <button use:melt={$close} aria-label="Close" class="close {position}">
         <X class="square-4" />
       </button>
       <h2 use:melt={$title} class="title">{dialogTitle}</h2>
@@ -38,21 +52,10 @@
 </div>
 
 <style lang="scss">
-  .trigger {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    padding: 0.5rem 1rem;
-    border-radius: 0.375rem;
-    background-color: var(--background);
-    font-weight: 500;
-    line-height: 1;
-    color: var(--periwinkle600);
-    box-shadow: 0 10px 15px -3px 0 4px 6px -4px;
-  }
+  @use "$lib/styles/button" as button;
 
-  .trigger:hover {
-    opacity: 0.7;
+  button {
+    @include button.button;
   }
 
   .overlay {
@@ -65,46 +68,47 @@
 
   .content {
     position: fixed;
-    left: 0;
-    top: 0;
     z-index: 50;
-    height: 100vh;
-    max-width: 500px;
-    width: 100%;
     padding: 1.5rem;
     background-color: var(--background);
     box-shadow:
       0 10px 15px -3px var(--gray200),
       0 4px 6px -4px var(--gray200);
   }
 
-  .content:focus {
-    outline: 2px solid transparent;
-    outline-offset: 2px;
+  .content.right {
+    right: 0;
+    top: 0;
+    height: 100vh;
+    max-width: 500px;
+    width: 100%;
   }
 
-  .close {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    position: absolute;
-    right: 10px;
-    top: 10px;
-    appearance: none;
-    height: 1.5rem;
-    width: 1.5rem;
-    border-radius: 9999px;
-    color: var(--periwinkle300);
+  .content.left {
+    left: 0;
+    top: 0;
+    height: 100vh;
+    max-width: 500px;
+    width: 100%;
   }
 
-  .close:hover {
-    background-color: var(--periwinkle400);
+  .content.top {
+    top: 0;
+    height: 100%;
+    max-height: 500px;
+    width: 98vw;
   }
 
-  .close:focus {
-    outline: 1px solid transparent;
+  .content.bottom {
+    bottom: 0;
+    height: 100%;
+    max-height: 500px;
+    width: 98vw;
+  }
+
+  .content:focus {
+    outline: 2px solid transparent;
     outline-offset: 2px;
-    box-shadow: 0px 0px 0px 3px var(--gray100);
   }
 
   .title {
@@ -120,4 +124,15 @@
     margin-top: 0.5rem;
     line-height: 1.5;
   }
+
+  .close.left,
+  .close.top,
+  .close.bottom {
+    float: right;
+  }
+
+  .close.top,
+  .close.bottom {
+    margin-right: 1.5rem;
+  }
 </style>
diff --git a/src/routes/(nav)/[[selectedMember]]/Table.svelte b/src/routes/(nav)/[[selectedMember]]/Table.svelte
@@ -12,8 +12,8 @@
   import { writable } from "svelte/store";
 
   import type { GetContacts } from "$api/contacts";
-  import Drawer from "$lib/components/Drawer.svelte";
   import { page } from "$app/stores";
+  import Drawer from "$lib/components/Drawer.svelte";
   import LineTableRow from "$lib/components/LineTableRow.svelte";
   import { formatDateToPST } from "$lib/util/formatDateToPST";
 
@@ -182,6 +182,7 @@
           <td>
             {#if cell.column.id === "notes"}
               <Drawer
+                side="right"
                 dialogTitle="Notes"
                 dialogContent={cell.getValue() ? String(cell.getValue()) : "No notes provided."}
               />