remove the tooltip control

mcnuttandrew · Feb 16, 2024 · 0c25314 · 0c25314
1 parent 25a7092
commit 0c25314
Show file tree

Hide file tree

Showing 12 changed files with 163 additions and 331 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,6 @@ First time you start it up you should also run `yarn prep data`
 # General Todos
 
 - [ ] Its really annoying to have to update schema, types, docs whenever a lang change is made. Can this be automated?
-- [ ] Color Space selections should persist
 - [ ] Make name discrim hueristc fix more resilient, see switching to basic colors
 - [ ] Search palettes-by-lint screen
 - [ ] Drag to re-order points?
@@ -47,6 +46,7 @@ First time you start it up you should also run `yarn prep data`
 - [ ] Allow no palettes
 - [ ] allows renaming of non-current palettes
 - [ ] Parameterize the scatter column completely, allow edits to the compare stuff
+- [x] Color Space selections should persist
 - [x] Dont allow saves to examples when there's an error
 - [x] Switch the examples to be tabs or single
 - [x] Consider moving the names and color chunks into the left hand column for space

diff --git a/src/components/ColorChannelPicker.svelte b/src/components/ColorChannelPicker.svelte
@@ -1,4 +1,6 @@
 <script lang="ts">
+  import configStore from "../stores/config-store";
+
   import { Color, colorPickerConfig } from "../lib/Color";
   import ColorIO from "colorjs.io";
   export let color: Color;
@@ -21,11 +23,11 @@
         { name: "Green", min: 0, max: 255, step: 1 },
         { name: "Blue", min: 0, max: 255, step: 1 },
       ],
-      srgb: [
-        { name: "Red", min: 0, max: 1, step: 0.01 },
-        { name: "Green", min: 0, max: 1, step: 0.01 },
-        { name: "Blue", min: 0, max: 1, step: 0.01 },
-      ],
+      // srgb: [
+      //   { name: "Red", min: 0, max: 1, step: 0.01 },
+      //   { name: "Green", min: 0, max: 1, step: 0.01 },
+      //   { name: "Blue", min: 0, max: 1, step: 0.01 },
+      // ],
       hsl: [
         { name: "Hue", min: 0, max: 360, step: 1 },
         { name: "Saturation", min: 0, max: 100, step: 1 },
@@ -36,11 +38,11 @@
         { name: "a", min: -125, max: 125, step: 1 },
         { name: "b", min: -125, max: 125, step: 1 },
       ],
-      oklab: [
-        { name: "L", min: 0, max: 1, step: 0.01 },
-        { name: "a", min: -0.4, max: 0.4, step: 0.01 },
-        { name: "b", min: -0.4, max: 0.4, step: 0.01 },
-      ],
+      // oklab: [
+      //   { name: "L", min: 0, max: 1, step: 0.01 },
+      //   { name: "a", min: -0.4, max: 0.4, step: 0.01 },
+      //   { name: "b", min: -0.4, max: 0.4, step: 0.01 },
+      // ],
       hsv: [
         { name: "h", min: 0, max: 360, step: 1 },
         { name: "s", min: 0, max: 100, step: 1 },
@@ -51,11 +53,11 @@
         { name: "c", min: 0, max: 150, step: 1 },
         { name: "h", min: 0, max: 360, step: 1 },
       ],
-      jzazbz: [
-        { name: "jz", min: 0, max: 1, step: 0.01 },
-        { name: "az", min: -0.5, max: 0.5, step: 0.01 },
-        { name: "bz", min: -0.5, max: 0.5, step: 0.01 },
-      ],
+      // jzazbz: [
+      //   { name: "jz", min: 0, max: 1, step: 0.01 },
+      //   { name: "az", min: -0.5, max: 0.5, step: 0.01 },
+      //   { name: "bz", min: -0.5, max: 0.5, step: 0.01 },
+      // ],
     } as Record<string, Channel[]>);
   const colorModeMap: any = { rgb: "srgb" };
   function toColorIO() {
@@ -66,6 +68,7 @@
     }
   }
   $: color &&
+    colorMode &&
     toColorIO()
       .to(colorModeMap[colorMode] || colorMode)
       .coords.forEach((val, idx) => {
@@ -123,7 +126,7 @@
     ret.push(steps);
     return ret;
   }
-  $: sliderSteps = color && (buildSliderSteps() as any);
+  $: sliderSteps = color && colorMode && (buildSliderSteps() as any);
 
   function colorUpdate(e: any, idx: number) {
     let values = [...colorConfigs[colorMode].map((x) => x.value)] as number[];
@@ -143,7 +146,13 @@
 </script>
 
 <div class="flex flex-col">
-  <select bind:value={colorMode}>
+  <select
+    value={colorMode}
+    on:change={(e) => {
+      // @ts-ignore
+      configStore.setChannelPickerSpace(e.currentTarget.value);
+    }}
+  >
     {#each [...Object.keys(colorConfigs)] as colorMode}
       <option value={colorMode}>{colorMode}</option>
     {/each}
@@ -161,7 +170,7 @@
                       {channel.name} ({channel.min}-{channel.max})
                     </span>
                     <input
-                      class="h-4 text-right w-16 text-sm"
+                      class="h-6 text-right w-16"
                       type="number"
                       value={formatter(channel.value)}
                       min={channel.min}
@@ -208,7 +217,7 @@
     height: 2.2em;
     border-radius: 0.3em;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
-    min-width: 265px;
+    min-width: 285px;
   }
 
   .color-slider::-webkit-slider-thumb {

diff --git a/src/components/PalPreview.svelte b/src/components/PalPreview.svelte
@@ -1,14 +1,12 @@
 <script lang="ts">
   import focusStore from "../stores/focus-store";
   import type { Palette } from "../types";
-  import Tooltip from "./Tooltip.svelte";
-  import SwatchTooltipContent from "./SwatchTooltipContent.svelte";
-  import { toggleElement } from "../lib/utils";
   export let pal: Palette;
   export let allowModification: boolean = false;
   export let highlightSelected: boolean = false;
 
-  $: focusColors = $focusStore.focusedColors;
+  import { dealWithFocusEvent } from "../lib/utils";
+
   $: focusSet = new Set($focusStore.focusedColors);
 </script>
 
@@ -21,32 +19,17 @@
 >
   {#each pal.colors as color, idx}
     {#if allowModification}
-      <Tooltip allowDrag={true}>
-        <div slot="content" class="flex flex-col" let:onClick>
-          <SwatchTooltipContent {color} closeTooltip={onClick} {idx} />
-        </div>
-        <button
-          slot="target"
-          let:tooltipOpen
-          let:toggle
-          on:click|stopPropagation|preventDefault={(e) => {
-            const isMeta = e.metaKey || e.ctrlKey || e.shiftKey;
-            let newColors = [...focusColors];
-            if (isMeta) {
-              newColors = toggleElement(focusColors, idx);
-            } else {
-              newColors = tooltipOpen ? [] : [idx];
-            }
-
-            focusStore.setColors(newColors);
-            toggle();
-          }}
-          class={"w-6 h-6 mx-2 rounded-full transition-all"}
-          class:w-8={highlightSelected && focusSet.has(idx)}
-          class:h-8={highlightSelected && focusSet.has(idx)}
-          style="background-color: {color.toDisplay()}"
-        ></button>
-      </Tooltip>
+      <button
+        on:click|stopPropagation|preventDefault={(e) =>
+          focusStore.setColors(
+            dealWithFocusEvent(e, idx, $focusStore.focusedColors)
+          )}
+        class={"w-6 h-6 mx-2 rounded-full transition-all"}
+        class:w-8={highlightSelected && focusSet.has(idx)}
+        class:h-8={highlightSelected && focusSet.has(idx)}
+        class:mb-5={highlightSelected && !focusSet.has(idx)}
+        style="background-color: {color.toDisplay()}"
+      ></button>
     {:else}
       <div
         class={"w-6 h-6 mx-1 rounded-full transition-all"}

diff --git a/src/components/SwatchTooltipContent.svelte b/src/components/SwatchTooltipContent.svelte
diff --git a/src/content-modules/Controls.svelte b/src/content-modules/Controls.svelte
@@ -1,6 +1,10 @@
 <script lang="ts">
   import focusStore from "../stores/focus-store";
   import colorStore from "../stores/color-store";
+  import configStore from "../stores/config-store";
+
+  import { Color } from "../lib/Color";
+
   import AlignSelection from "../controls/AlignSelection.svelte";
   import SuggestionModificationToSelection from "../controls/SuggestionModificationToSelection.svelte";
   import InterpolatePoints from "../controls/InterpolatePoints.svelte";
@@ -22,9 +26,21 @@
   <AdjustColor />
   {#if focusedColors.length === 1}
     <div class="w-full border-t-2 border-black my-2"></div>
+    <input
+      class="w-full"
+      value={colors[focusedColors[0]].toHex()}
+      on:change={(e) => {
+        const updatedColors = [...colors];
+        updatedColors[focusedColors[0]] = Color.colorFromString(
+          e.currentTarget.value,
+          colorSpace
+        );
+        colorStore.setCurrentPalColors(updatedColors);
+      }}
+    />
     <ColorChannelPicker
       color={colors[focusedColors[0]].toColorSpace(colorSpace)}
-      colorMode={colorSpace}
+      colorMode={$configStore.channelPickerSpace}
       onColorChange={(color) => {
         const updatedColors = [...colors];
         updatedColors[focusedColors[0]] = color.toColorSpace(colorSpace);

diff --git a/src/content-modules/LeftPanel.svelte b/src/content-modules/LeftPanel.svelte
@@ -15,13 +15,13 @@
   let innerWidth = window.innerWidth;
 
   $: leftPanelTabs =
-    innerWidth < 1500
+    innerWidth < 1600
       ? ["palettes", "controls", "colors"]
       : ["palettes", "controls"];
 </script>
 
 <!-- left panel -->
-<div class="bg-stone-200 w-72 container flex flex-col h-full flex-none">
+<div class="bg-stone-200 w-80 container flex flex-col h-full flex-none">
   <div class="text-4xl font-bold bg-stone-800 text-white px-2 py-1">
     Color Buddy 𑁍
   </div>

diff --git a/src/example/Example.svelte b/src/example/Example.svelte
@@ -3,8 +3,6 @@
   import colorStore from "../stores/color-store";
   import configStore from "../stores/config-store";
   import { Color } from "../lib/Color";
-  import Tooltip from "../components/Tooltip.svelte";
-  import SwatchTooltipContent from "../components/SwatchTooltipContent.svelte";
   import focusStore from "../stores/focus-store";
   import { idxToKey } from "../lib/charts";
   import simulate_cvd from "../lib/blindness";
@@ -101,25 +99,6 @@
   <div bind:this={container} class="example-container">
     {@html insertColorsToExample(example, mappedColors, bg.toHex(), size)}
   </div>
-  {#if color && focusedColor !== false}
-    <Tooltip
-      top={"-20px"}
-      allowDrag={true}
-      initiallyOpen={true}
-      onClose={() => {
-        focusStore.clearColors();
-        focusedColor = false;
-      }}
-    >
-      <div slot="content" class="flex flex-col" let:onClick>
-        <SwatchTooltipContent
-          {color}
-          closeTooltip={onClick}
-          idx={focusedColor}
-        />
-      </div>
-    </Tooltip>
-  {/if}
 </div>
 
 <style>