Merge pull request #78 from invopop/sandbox_workspaces

workspace selector animations
invopop · Nov 15, 2024 · dbf2f13 · dbf2f13
2 parents 77b920a + 9a0de8e
commit dbf2f13
Show file tree

Hide file tree

Showing 2 changed files with 55 additions and 39 deletions.
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@invopop/popui",
   "license": "MIT",
-  "version": "0.0.40",
+  "version": "0.0.41",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",

diff --git a/svelte/lib/DrawerContextWorkspace.svelte b/svelte/lib/DrawerContextWorkspace.svelte
@@ -2,10 +2,12 @@
   import type { DrawerOption } from './types.ts'
   import DrawerContextItem from './DrawerContextItem.svelte'
   import { Icon } from '@steeze-ui/svelte-icon'
-  import { AddCircle, ChevronDown, ChevronRight, Settings, Sidebar } from '@invopop/ui-icons'
+  import { AddCircle, Settings, Sidebar } from '@invopop/ui-icons'
   import { createEventDispatcher } from 'svelte'
   import BaseCounter from './BaseCounter.svelte'
   import EmptyStateIcon from './EmptyStateIcon.svelte'
+  import { slide } from 'svelte/transition'
+  import { ChevronRight } from '@steeze-ui/heroicons'
 
   export let items: DrawerOption[] = []
   export let multiple = false
@@ -28,68 +30,82 @@
   }
 </script>
 
-<div class="w-[300px] border border-neutral-200 rounded-sm shadow-lg bg-white">
+<div class="w-[300px] border border-neutral-200 rounded-md shadow-lg bg-white">
   <div class="max-h-[60vh] overflow-y-auto rounded-sm">
     <button
-      class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-8 py-1.5 pl-1.5 pr-2 text-base font-medium text-neutral-800 w-full"
+      class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 rounded-t-sm h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
       on:click={() => {
-        liveOpen = !liveOpen
+        if (liveOpen) return
+        liveOpen = true
+        sandboxOpen = false
       }}
     >
       <div class="flex items-center space-x-1.5">
-        <Icon src={liveOpen ? ChevronDown : ChevronRight} class="h-4 w-4 text-neutral-800" />
+        <Icon
+          src={ChevronRight}
+          class="h-4 w-4 text-neutral-500 transition-all transform {liveOpen ? 'rotate-90' : ''}"
+        />
         <span>Live</span>
       </div>
       {#if liveItems.length}
         <BaseCounter content={liveItems.length} />
       {/if}
     </button>
     {#if liveOpen}
-      {#if !liveItems.length}
-        <div class="h-[182px]">
-          <EmptyStateIcon
-            icon={Sidebar}
-            title="No workspaces here"
-            description="Create a workspace to start"
-          />
-        </div>
-      {/if}
-      <ul class="p-1 pb-0.5 space-y-1">
-        {#each liveItems as item}
-          <DrawerContextItem {item} {multiple} workspace on:click />
-        {/each}
-      </ul>
+      <div transition:slide>
+        {#if !liveItems.length}
+          <div class="h-[182px]">
+            <EmptyStateIcon
+              icon={Sidebar}
+              title="No workspaces here"
+              description="Create a workspace to start"
+            />
+          </div>
+        {/if}
+        <ul class="p-1 pb-0.5 space-y-1">
+          {#each liveItems as item}
+            <DrawerContextItem {item} {multiple} workspace on:click />
+          {/each}
+        </ul>
+      </div>
     {/if}
     <button
-      class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-8 py-1.5 pl-1.5 pr-2 text-base font-medium text-neutral-800 w-full"
+      class="flex items-center justify-between bg-neutral-50 border-b border-neutral-200 h-9 py-2 pl-2.5 pr-3 text-base font-medium text-neutral-800 w-full"
       class:border-t={liveOpen}
       on:click={() => {
-        sandboxOpen = !sandboxOpen
+        if (sandboxOpen) return
+        sandboxOpen = true
+        liveOpen = false
       }}
     >
       <div class="flex items-center space-x-1.5">
-        <Icon src={sandboxOpen ? ChevronDown : ChevronRight} class="h-4 w-4 text-neutral-800" />
+        <Icon
+          src={ChevronRight}
+          class="h-4 w-4 text-neutral-500 transition-all transform {sandboxOpen ? 'rotate-90' : ''}"
+        />
         <span>Sandbox</span>
       </div>
       {#if sandboxItems.length}
         <BaseCounter content={sandboxItems.length} />
       {/if}
     </button>
     {#if sandboxOpen}
-      {#if !sandboxItems.length}
-        <div class="h-[182px]">
-          <EmptyStateIcon
-            icon={Sidebar}
-            title="No workspaces here"
-            description="Create a workspace to start"
-          />
-        </div>
-      {/if}
-      <ul class="p-1 pb-0.5 space-y-1">
-        {#each sandboxItems as item}
-          <DrawerContextItem {item} {multiple} workspace on:click />
-        {/each}
-      </ul>
+      <div transition:slide>
+        {#if !sandboxItems.length}
+          <div class="h-[182px]">
+            <EmptyStateIcon
+              icon={Sidebar}
+              title="No workspaces here"
+              description="Create a workspace to start"
+            />
+          </div>
+        {/if}
+        <ul class="p-1 pb-0.5 space-y-1">
+          {#each sandboxItems as item}
+            <DrawerContextItem {item} {multiple} workspace on:click />
+          {/each}
+        </ul>
+      </div>
     {/if}
   </div>
 
@@ -102,7 +118,7 @@
         }}
       >
         <Icon src={AddCircle} class="w-4 h-4 text-neutral-500 flex-shrink-0" />
-        <span class="text-neutral-800 tracking-tight text-base">Create workspace</span>
+        <span class="text-neutral-800 tracking-tight text-base font-medium">Create workspace</span>
       </button>
     </li>
     <li class="pl-1.5 py-1.5 pr-2 hover:bg-neutral-100 rounded-sm">
@@ -113,7 +129,7 @@
         }}
       >
         <Icon src={Settings} class="w-4 h-4 text-neutral-500" />
-        <span class="text-neutral-800 tracking-tight text-base">Settings</span>
+        <span class="text-neutral-800 tracking-tight text-base font-medium">Settings</span>
       </button>
     </li>
   </ul>