Add Manage and Browse Tabs (#66)

* start manage * rework for manage * Fix type errors/catch some more ux bugs * moving some stuff around
mcnuttandrew · May 26, 2024 · c717f46 · c717f46
1 parent b5f25a4
commit c717f46
Show file tree

Hide file tree

Showing 24 changed files with 947 additions and 656 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -24,15 +24,17 @@
   import Eval from "./linting/Eval.svelte";
   import KeyboardHooks from "./components/KeyboardHooks.svelte";
   import ComparePal from "./content-modules/ComparePal.svelte";
+  import Manage from "./content-modules/Manage.svelte";
   import MainColumn from "./content-modules/MainColumn.svelte";
   import SetSimulation from "./controls/SetSimulation.svelte";
   import Zoom from "./controls/Zoom.svelte";
-  import Browse from "./content-modules/Browse.svelte";
+  import NewBrowse from "./content-modules/NewBrowse.svelte";
   import TourProvider from "./content-modules/TourProvider.svelte";
   import { buttonStyle } from "./lib/styles";
 
-  const tabs = ["examples", "compare", "eval"];
-  // const tabs = ["examples", "compare", "eval", "browse"];
+  const palettesTabs = ["manage", "browse"];
+
+  const currentPalTabs = ["examples", "compare", "eval"];
 
   import { lint } from "./lib/api-calls";
   import { debounce } from "vega";
@@ -70,10 +72,7 @@
 <main class="flex h-full">
   <LeftPanel />
   <div class="h-full flex flex-col grow main-content">
-    <div
-      class="flex w-full grow overflow-auto"
-      class:top-bar={$configStore.route === "browse"}
-    >
+    <div class="flex w-full grow overflow-auto">
       <div class="flex flex-col">
         <div class="w-full flex bg-stone-800 px-2 py-3 text-white">
           <SetSimulation />
@@ -87,32 +86,39 @@
             </button>
           </div>
         </div>
-        {#if $configStore.route !== "browse"}
-          {#if palPresent}
-            <MainColumn {scatterSize} />
-          {:else}
-            <div class="flex-grow flex justify-center items-center">
-              <div class="text-2xl max-w-md text-center">
-                No palettes present, click "New" in the upper left to create a
-                new one
-              </div>
+        {#if palPresent}
+          <MainColumn {scatterSize} />
+        {:else}
+          <div class="flex-grow flex justify-center items-center">
+            <div class="text-2xl max-w-md text-center">
+              No palettes present, click "New" in the upper left to create a new
+              one
             </div>
-          {/if}
+          </div>
         {/if}
       </div>
 
       <div class="grow" id="right-col">
         <div class="bg-stone-800">
           <div class="flex">
-            <Nav
-              className="bg-stone-800 text-white h-12 items-center"
-              {tabs}
-              isTabSelected={(x) => $configStore.route === x}
-              selectTab={(x) => {
-                // @ts-ignore
-                configStore.setRoute(x);
-              }}
-            />
+            {#each [{ tabs: palettesTabs, name: "Palettes" }, { tabs: currentPalTabs, name: "Current Palette" }] as { tabs, name }}
+              <div class="flex flex-col relative">
+                <div
+                  class="uppercase text-xs text-white absolute italic left-2"
+                >
+                  {name}
+                </div>
+                <Nav
+                  className="bg-stone-800 text-white h-12 items-center"
+                  {tabs}
+                  isTabSelected={(x) => $configStore.route === x}
+                  selectTab={(x) => {
+                    // @ts-ignore
+                    configStore.setRoute(x);
+                  }}
+                />
+              </div>
+            {/each}
           </div>
         </div>
         {#if palPresent}
@@ -122,14 +128,14 @@
             <ComparePal {scatterSize} />
           {:else if $configStore.route === "eval"}
             <Eval />
+          {:else if $configStore.route === "manage"}
+            <Manage />
+          {:else if $configStore.route === "browse"}
+            <NewBrowse />
           {/if}
         {/if}
       </div>
     </div>
-    {#if $configStore.route === "browse"}
-      <Browse />
-    {/if}
-    <!-- bottom row -->
   </div>
 </main>
 

diff --git a/src/components/ContentEditable.svelte b/src/components/ContentEditable.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
   export let onChange: (str: string) => void;
   export let value: string;
+  export let limitWidth: boolean = false;
 
   let focused = false;
 </script>
@@ -21,7 +22,15 @@
     }}
   />
 {:else}
-  <button on:click={() => (focused = true)}>
+  <button on:click={() => (focused = true)} class:wrap-title={limitWidth}>
     {value}
   </button>
 {/if}
+
+<style>
+  .wrap-title {
+    max-width: 205px;
+    white-space: break-spaces;
+    line-break: anywhere;
+  }
+</style>
diff --git a/src/components/InView.svelte b/src/components/InView.svelte
@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { onMount } from "svelte";
+
+  export let root = undefined as any;
+  export let isInViewProp = false;
+
+  let isInView = false;
+  let observer;
+  let element: HTMLElement;
+
+  $: isInView, (isInViewProp = isInView);
+
+  const onChangeVisibility = (e: any) => {
+    isInView = e[0].isIntersecting;
+  };
+
+  onMount(() => {
+    let options = {
+      root: root,
+    };
+
+    observer = new IntersectionObserver(onChangeVisibility, options);
+    observer.observe(element);
+  });
+</script>
+
+<div class="c" bind:this={element}>
+  {#if isInView}
+    <slot />
+  {/if}
+</div>
diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte
@@ -37,14 +37,38 @@
   let colorSpace = ComparisonPal?.colorSpace || "lab";
 </script>
 
-<div style={`max-width: ${scatterSize + 150}px`}>
-  <div class="flex flex-col">
+<!-- style={`max-width: ${scatterSize + 150}px`} -->
+<div>
+  <div class="flex flex-col w-full">
     {#if ComparisonPal !== undefined}
-      <div class="font-bold">
-        <span class="italic">Compare: {ComparisonPal.name}</span>
+      <div class="w-full bg-stone-200 px-6 flex flex-col">
+        <div class="font-bold">
+          <span class="italic">Compare: {ComparisonPal.name}</span>
+        </div>
+        <Tooltip>
+          <button
+            class={`${buttonStyle} pl-0`}
+            slot="target"
+            let:toggle
+            on:click={toggle}
+          >
+            Change Compared Palette
+          </button>
+          <div class="flex flex-col w-80" slot="content">
+            <div>Saved Palettes:</div>
+            <div class="flex flex-wrap">
+              {#each $colorStore.palettes as pal, idx (idx)}
+                <MiniPalPreview
+                  {pal}
+                  className={compareIdx === idx ? "border-2 border-black" : ""}
+                  onClick={() => configStore.setComparePal(idx)}
+                />
+              {/each}
+            </div>
+          </div>
+        </Tooltip>
       </div>
       <!-- keep even with the tags line -->
-      <div>&nbsp;</div>
       <div class="flex">
         <SetColorSpace
           {colorSpace}
@@ -100,30 +124,7 @@
       </div>
     {/if}
   </div>
-  <div class="flex">
-    <Tooltip>
-      <button
-        class={`${buttonStyle} pl-0`}
-        slot="target"
-        let:toggle
-        on:click={toggle}
-      >
-        Change Compared Palette
-      </button>
-      <div class="flex flex-col w-80" slot="content">
-        <div>Saved Palettes:</div>
-        <div class="flex flex-wrap">
-          {#each $colorStore.palettes as pal, idx (idx)}
-            <MiniPalPreview
-              {pal}
-              className={compareIdx === idx ? "border-2 border-black" : ""}
-              onClick={() => configStore.setComparePal(idx)}
-            />
-          {/each}
-        </div>
-      </div>
-    </Tooltip>
-  </div>
+  <div>&nbsp;</div>
   {#if ComparisonPal !== undefined}
     <div class="flex flex-col pl-2">
       <PalPreview
@@ -134,13 +135,6 @@
         }}
         allowModification={false}
       />
-
-      <!-- <GetColorsFromString
-      allowSort={false}
-      colors={ComparisonPal.colors}
-      onChange={() => {}}
-      {colorSpace}
-    /> -->
     </div>
   {/if}
 

diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
@@ -2,6 +2,7 @@
   import focusStore from "../stores/focus-store";
   import colorStore from "../stores/color-store";
   import configStore from "../stores/config-store";
+  import GetColorsFromString from "../controls/GetColorsFromString.svelte";
 
   import { Color } from "../lib/Color";
 
@@ -69,4 +70,9 @@
   {/if}
 
   <InterpolatePoints />
+  <GetColorsFromString
+    onChange={(colors) => colorStore.setCurrentPalColors(colors)}
+    colorSpace={currentPal.colorSpace}
+    colors={currentPal.colors}
+  />
 </div>
diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte
@@ -12,7 +12,13 @@
 
   import SavedPals from "./SavedPals.svelte";
 
-  $: leftPanelTabs = ["palettes", "controls", "colors"];
+  $: leftPanelTabs = ["controls", "colors"];
+
+  $: {
+    if (!new Set(["controls", "colors"]).has($configStore.leftRoute)) {
+      configStore.setLeftPanelRoute("controls");
+    }
+  }
 </script>
 
 <!-- left panel -->
@@ -60,9 +66,6 @@
     {#if $configStore.leftRoute === "controls"}
       <Controls />
     {/if}
-    {#if $configStore.leftRoute === "palettes"}
-      <SavedPals />
-    {/if}
     {#if $configStore.leftRoute === "colors"}
       <EvalColorColumn />
     {/if}

diff --git a/src/content-modules/MainColumn.svelte b/src/content-modules/MainColumn.svelte
@@ -9,7 +9,7 @@
   import ColorScatterPlot from "../scatterplot/ColorScatterPlot.svelte";
   import ExampleAlaCart from "../example/ExampleAlaCarte.svelte";
   import PalTypeConfig from "../controls/PalTypeConfig.svelte";
-  import GetColorsFromString from "../controls/GetColorsFromString.svelte";
+  import Sort from "../controls/Sort.svelte";
 
   import ModifySelection from "../controls/ModifySelection.svelte";
   import PalPreview from "../components/PalPreview.svelte";
@@ -93,6 +93,7 @@
     <AdjustOrder />
 
     <ModifySelection />
+    <Sort />
   </div>
   <div class="flex flex-col pl-2">
     <!-- overview / preview -->
@@ -102,12 +103,7 @@
       pal={currentPal}
       showTags={true}
     />
-    <GetColorsFromString
-      allowSort={true}
-      onChange={(colors) => colorStore.setCurrentPalColors(colors)}
-      colorSpace={currentPal.colorSpace}
-      colors={currentPal.colors}
-    />
+
     <ExampleAlaCart
       paletteIdx={$colorStore.currentPal}
       exampleIdx={$configStore.mainColumnSelectedExample}