improve compare ux

mcnuttandrew · Jan 18, 2024 · 81aa7ea · 81aa7ea
1 parent a0b40db
commit 81aa7ea
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 39 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -100,7 +100,7 @@
         >
           <ul class="inline-flex">
             {#each tabs as tab}
-              <li>
+              <li class="py-3">
                 <button
                   class="h-6 px-2 transition-colors duration-150 border border-slate-500 focus:shadow-outline uppercase italic"
                   class:bg-slate-500={$configStore.route === tab}

diff --git a/src/components/ColorScatterPlot.svelte b/src/components/ColorScatterPlot.svelte
@@ -348,6 +348,7 @@
                 on:mousedown|preventDefault={(e) => startDrag(true, i)(e)}
                 on:touchstart|preventDefault={startDrag(true, i)}
                 on:touchend|preventDefault={() => onFocusedColorsChange([i])}
+                on:mouseenter={() => hoverPoint(color)}
                 pointer-events={!focusSet.has(i) ? "all" : "none"}
                 r={10 + (focusSet.has(i) ? 5 : 0)}
                 stroke={focusedColors.length === 1 &&
@@ -384,10 +385,11 @@
             />
           {/each}
           <!-- simple tooltip -->
-          {#if scatterPlotMode === "looking" && hoveredPoint}
+          {#if hoveredPoint}
             <g
-              transform={`translate(${xScale(hoveredPoint.toChannels()[1])},
-                ${yScale(hoveredPoint.toChannels()[2])})`}
+              transform={`translate(${x(hoveredPoint) + 5}, ${
+                y(hoveredPoint) - 5
+              })`}
             >
               <text fill={textColor}>{hoveredPoint.toDisplay()}</text>
             </g>

diff --git a/src/content-modules/ComparePal.svelte b/src/content-modules/ComparePal.svelte
@@ -6,17 +6,14 @@
   import ColorScatterPlot from "../components/ColorScatterPlot.svelte";
   import Background from "./Background.svelte";
   import { buttonStyle } from "../lib/styles";
+  import Tooltip from "../components/Tooltip.svelte";
 
   import SetColorSpace from "./contextual-tools/SetColorSpace.svelte";
 
-  $: ComparisonPal = $colorStore.palettes.find(
-    (x) => x.name === $configStore.comparePal
-  );
+  $: compareName = $configStore.comparePal;
+  $: ComparisonPal = $colorStore.palettes.find((x) => x.name === compareName);
   $: {
-    if (
-      ComparisonPal === undefined &&
-      $colorStore.currentPal.name === $configStore.comparePal
-    ) {
+    if (!ComparisonPal && $colorStore.currentPal.name === compareName) {
       ComparisonPal = $colorStore.currentPal;
     }
   }
@@ -26,34 +23,6 @@
 </script>
 
 <div class="flex flex-col" style={`background: ${bg}`}>
-  <div class="flex">
-    {#each [$colorStore.currentPal, ...$colorStore.palettes] as pal, idx}
-      <button
-        class={buttonStyle}
-        on:click={() => {
-          configStore.setComparePal(pal.name);
-        }}
-      >
-        {#if idx === 0}THE CURRENT PALETTE:
-        {/if}
-        {pal.name}
-      </button>
-    {/each}
-  </div>
-  <!-- <select value={$configStore.comparePal}>
-    {#each [$colorStore.currentPal, ...$colorStore.palettes] as pal, idx}
-      <option
-        value={pal.name}
-        on:click={() => {
-          configStore.setComparePal(pal.name);
-        }}
-      >
-        {#if idx === 0}THE CURRENT PALETTE:
-        {/if}
-        {pal.name}
-      </option>
-    {/each}
-  </select> -->
   {#if ComparisonPal !== undefined}
     <ColorScatterPlot
       scatterPlotMode="looking"
@@ -67,9 +36,33 @@
       startDragging={() => {}}
       stopDragging={() => {}}
     />
+  {:else}
+    <div class="empty-pal-holder flex justify-center items-center">
+      Select a palette to compare to. You can do this by clicking the button
+      below
+    </div>
   {/if}
 </div>
 <div class="flex">
+  <Tooltip>
+    <button class={buttonStyle} slot="target" let:toggle on:click={toggle}>
+      Select comparison. Currently: {compareName || "none"}
+    </button>
+    <div class="flex flex-wrap w-80" slot="content">
+      {#each [$colorStore.currentPal, ...$colorStore.palettes] as pal, idx}
+        <button
+          class={buttonStyle}
+          on:click={() => {
+            configStore.setComparePal(pal.name);
+          }}
+        >
+          {#if idx === 0}THE CURRENT PALETTE:
+          {/if}
+          {pal.name}
+        </button>
+      {/each}
+    </div>
+  </Tooltip>
   <Background
     onChange={(background) => {
       bg = background.toHex();
@@ -84,3 +77,10 @@
     }}
   />
 </div>
+
+<style>
+  .empty-pal-holder {
+    height: 450px;
+    width: 450px;
+  }
+</style>