Re-arrange design controls (#129)

mcnuttandrew · Oct 2, 2024 · c97cc2f · c97cc2f
1 parent a36ff15
commit c97cc2f
Show file tree

Hide file tree

Showing 42 changed files with 894 additions and 879 deletions.
diff --git a/apps/color-buddy/build-assets/duplicate-color.svg b/apps/color-buddy/build-assets/duplicate-color.svg
diff --git a/apps/color-buddy/src/App.svelte b/apps/color-buddy/src/App.svelte
@@ -113,36 +113,32 @@
     <Config />
   </div>
 </header>
-<main class="flex h-full overflow-auto">
+<main class="flex h-full">
   <!-- left and main panel -->
   <div class="flex flex-col">
     <!-- name -->
     <Title />
     <!-- main content -->
-    <div class="flex">
+    <div class="flex h-full">
       <!-- left -->
       <LeftPanel />
       <!-- main -->
       <div
         class="h-full flex flex-col grow main-content border-b border-l border-stone-200"
       >
-        <div class="flex w-full grow overflow-y-auto overflow-x-hidden">
-          <div class="flex flex-col">
-            {#if palPresent}
-              <MainColumn {scatterSize} />
-            {:else}
-              <div
-                class="flex-grow flex justify-center items-center"
-                style={`width: ${columnWidth}px`}
-              >
-                <div class="text-2xl max-w-md text-center">
-                  No palettes present, click "New" in the upper left to create a
-                  new one, or "Browse" to pick from existing ones.
-                </div>
-              </div>
-            {/if}
+        {#if palPresent}
+          <MainColumn {scatterSize} />
+        {:else}
+          <div
+            class="flex-grow flex justify-center items-center"
+            style={`width: ${columnWidth}px`}
+          >
+            <div class="text-2xl max-w-md text-center">
+              No palettes present, click "New" in the upper left to create a new
+              one, or "Browse" to pick from existing ones.
+            </div>
           </div>
-        </div>
+        {/if}
       </div>
     </div>
   </div>
@@ -153,7 +149,7 @@
   >
     <div class="flex bg-stone-200 w-full border-b border-l border-stone-200">
       <Nav
-        className=""
+        className="mt-1"
         tabs={currentPalTabs}
         isTabSelected={(x) => $configStore.route === x}
         selectTab={(x) => {
@@ -173,7 +169,7 @@
         <div slot="menu" let:tab>
           {#if tab === "eval"}
             <div
-              class="bg-red-700 text-white rounded-full w-4 h-4 text-xs text-center flex items-center justify-center mx-1"
+              class="bg-red-700 text-white rounded-full w-5 h-5 text-xs text-center flex items-center justify-center mx-1 font-normal"
             >
               {$lintStore.currentChecks.filter(
                 (x) => x.kind === "success" && !x.passes
@@ -183,7 +179,7 @@
         </div>
       </Nav>
     </div>
-    <div class="bg-stone-100 h-full">
+    <div class=" h-full">
       {#if palPresent && $configStore.route === "examples"}
         <Examples />
       {:else if palPresent && $configStore.route === "compare"}

diff --git a/apps/color-buddy/src/components/Background.svelte b/apps/color-buddy/src/components/Background.svelte
@@ -15,7 +15,7 @@
   <div class="text-xs">Background</div>
   <Tooltip top={"20px"}>
     <div slot="content" class="flex flex-col">
-      <div class="text-sm">Current Color</div>
+      <div class="text-xs">Current color</div>
       <input
         class="mb-2 {buttonStyle}"
         value={bgHex}

diff --git a/apps/color-buddy/src/components/ColorBall.svelte b/apps/color-buddy/src/components/ColorBall.svelte
@@ -9,10 +9,7 @@
   import EvalResponse from "../linting/EvalResponse.svelte";
   import { dealWithFocusEvent } from "../lib/utils";
 
-  import ContentEditable from "../components/ContentEditable.svelte";
-  import EditColor from "../components/EditColor.svelte";
   import { typeToImg, deltaMetrics, ballSize } from "../constants";
-  import { buttonStyle } from "../lib/styles";
 
   export let isFocused: Boolean;
   export let idx: number;
@@ -64,15 +61,6 @@
     <span class="flex flex-col items-start w-24 mx-2">
       <span class="flex max-w-5">
         {color.toHex()}
-        <!-- <ContentEditable
-          onChange={(x) => {
-            const updatedColors = [...colors];
-            updatedColors[idx] = Color.colorFromString(x, colorSpace);
-            colorStore.setCurrentPalColors(updatedColors);
-          }}
-          value={color.toHex()}
-          useEditButton={true}
-        /> -->
       </span>
       {#if colorName}<span class="text-right text-xs">
           {colorName}
@@ -119,17 +107,3 @@
     dE: {Math.round(stats[idx])}
   </div>
 {/if}
-{#if isFocused && $focusStore.focusedColors.length === 1}
-  <div class="flex text-xs w-full justify-end" id="">
-    <EditColor />
-    <button
-      class={buttonStyle}
-      on:click={() => {
-        colorStore.setCurrentPalColors([...colors].filter((_, i) => i !== idx));
-        focusStore.setColors([]);
-      }}
-    >
-      Delete Color
-    </button>
-  </div>
-{/if}
diff --git a/apps/color-buddy/src/components/ColorChannelPicker.svelte b/apps/color-buddy/src/components/ColorChannelPicker.svelte
@@ -46,14 +46,14 @@
       //   { 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 },
-        { name: "v", min: 0, max: 100, step: 1 },
+        { name: "Hue", min: 0, max: 360, step: 1 },
+        { name: "Saturation", min: 0, max: 100, step: 1 },
+        { name: "Value", min: 0, max: 100, step: 1 },
       ],
       lch: [
-        { name: "L", min: 0, max: 100, step: 1 },
-        { name: "c", min: 0, max: 150, step: 1 },
-        { name: "h", min: 0, max: 360, step: 1 },
+        { name: "Lightness", min: 0, max: 100, step: 1 },
+        { name: "Chroma", min: 0, max: 150, step: 1 },
+        { name: "Hue", min: 0, max: 360, step: 1 },
       ],
       // hct: [
       //   { name: "h", min: 0, max: 360, step: 1 },
@@ -137,63 +137,55 @@
 
 <div class="flex flex-col">
   <div class="flex justify-between w-full">
-    <div class="flex flex-col items-center justify-between">
+    <div class="flex flex-col w-full">
       <div class="text-xs">Color Space</div>
       <select
         class="h-full {buttonStyle}"
         value={colorMode}
         on:change={(e) => onSpaceChange(e.currentTarget.value)}
       >
         {#each [...Object.keys(colorConfigs)] as colorMode}
-          <option value={colorMode}>{colorMode}</option>
+          <option value={colorMode}>{colorMode.toUpperCase()}</option>
         {/each}
       </select>
     </div>
     <slot />
   </div>
-  <div class="flex h-full mr-2">
-    <div class="flex flex-col">
-      <div class="flex flex-col">
-        <div class="w-full">
-          {#each colorConfigs[colorMode] as channel, idx}
-            <div class="flex items-start flex-col mb-2">
-              <div class="flex">
-                <label class="block uppercase text-sm mt-2">
-                  <div class="flex w-full justify-between items-center">
-                    <span class="whitespace-nowrap mr-2">
-                      {channel.name} ({channel.min}-{channel.max})
-                    </span>
-                    <input
-                      class="h-6 text-right w-16 border-2 {buttonStyle
-                        .split(' ')
-                        .filter((x) => !x.startsWith('mr'))
-                        .join(' ')}"
-                      type="number"
-                      value={formatter(channel.value)}
-                      min={channel.min}
-                      max={channel.max}
-                      step={channel.step}
-                      on:input={(e) => colorUpdate(e, idx)}
-                    />
-                  </div>
-                  <input
-                    class="color-slider"
-                    type="range"
-                    style={`--stops: ${sliderSteps[idx]}`}
-                    value={channel.value}
-                    min={channel.min}
-                    max={channel.max}
-                    step={channel.step}
-                    on:input={(e) => colorUpdate(e, idx)}
-                    on:input={(e) => colorUpdate(e, idx)}
-                  />
-                </label>
-              </div>
-            </div>
-          {/each}
-        </div>
+  <div class="flex flex-col h-full mr-2 w-full items-center">
+    {#each colorConfigs[colorMode] as channel, idx}
+      <div class="flex items-start flex-col mb-2">
+        <label class="block uppercase text-sm mt-2">
+          <div class="flex w-full justify-between items-center">
+            <span class="whitespace-nowrap mr-2">
+              {channel.name} ({channel.min}-{channel.max})
+            </span>
+            <input
+              class="h-6 text-right border-2 {buttonStyle
+                .split(' ')
+                .filter((x) => !x.startsWith('mr'))
+                .join(' ')}"
+              type="number"
+              value={formatter(channel.value)}
+              min={channel.min}
+              max={channel.max}
+              step={channel.step}
+              on:input={(e) => colorUpdate(e, idx)}
+            />
+          </div>
+          <input
+            class="color-slider"
+            type="range"
+            style={`--stops: ${sliderSteps[idx]}`}
+            value={channel.value}
+            min={channel.min}
+            max={channel.max}
+            step={channel.step}
+            on:input={(e) => colorUpdate(e, idx)}
+            on:input={(e) => colorUpdate(e, idx)}
+          />
+        </label>
       </div>
-    </div>
+    {/each}
   </div>
 </div>
 
@@ -215,7 +207,8 @@
     border-radius: 0.3em;
     box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
     /* min-width: 285px; */
-    min-width: 225px;
+    min-width: 285px;
+    /* min-width: 225px; */
   }
 
   .color-slider::-webkit-slider-thumb {

diff --git a/apps/color-buddy/src/components/ColorChannelWrapper.svelte b/apps/color-buddy/src/components/ColorChannelWrapper.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
   import { Color } from "color-buddy-palette";
+
   import focusStore from "../stores/focus-store";
   import colorStore from "../stores/color-store";
   import configStore from "../stores/config-store";
+
   import ColorChannelPicker from "./ColorChannelPicker.svelte";
+  import { buttonStyle } from "../lib/styles";
+
   $: focusedColors = $focusStore.focusedColors;
   $: colors = $colorStore.palettes[$colorStore.currentPal].colors;
   $: currentPal = $colorStore.palettes[$colorStore.currentPal];
@@ -29,7 +33,7 @@
   <div>
     <div class="text-xs">RGB Hex</div>
     <input
-      class="w-24"
+      class={buttonStyle}
       value={colors[focusedColors[0]].toHex()}
       on:change={(e) => {
         const updatedColors = [...colors];

diff --git a/apps/color-buddy/src/components/EditColor.svelte b/apps/color-buddy/src/components/EditColor.svelte
diff --git a/apps/color-buddy/src/components/GenerateNewNames.svelte b/apps/color-buddy/src/components/GenerateNewNames.svelte
@@ -12,7 +12,7 @@
   );
   async function GenerateNewNames() {
     if (state !== "ready") return;
-    console.log("Generating new names for New Palettes");
+    console.log("Generating new names for New palettes");
     state = "loading";
     for (const idx of paletteIndexesToRename) {
       const palette = $colorStore.palettes[idx];
@@ -39,7 +39,7 @@
 
 {#if paletteIndexesToRename.length > 0 && state === "ready"}
   <button on:click={GenerateNewNames} class={buttonStyle}>
-    Generate names for "New Palette"s
+    Generate names for "New palette"s
   </button>
 {/if}
 {#if state === "loading"}

diff --git a/apps/color-buddy/src/components/Nav.svelte b/apps/color-buddy/src/components/Nav.svelte
@@ -12,7 +12,7 @@
     {#each tabs as tab}
       <li class="">
         <button
-          class="flex duration-150 px-2 items-center hover:border-stone-700 whitespace-nowrap"
+          class="flex px-2 items-center hover:border-stone-700 whitespace-nowrap"
           class:border-black={isTabSelected(tab)}
           class:border-b-2={isTabSelected(tab)}
           class:font-bold={isTabSelected(tab)}

diff --git a/apps/color-buddy/src/content-modules/ComparePal.svelte b/apps/color-buddy/src/content-modules/ComparePal.svelte
@@ -59,29 +59,32 @@
     : $colorStore.palettes;
 </script>
 
-<div class="w-full h-full bg-stone-100">
+<div class="w-full h-full">
   <!-- main -->
-  <div class="flex flex-wrap w-full py-2 px-2 mt-8 mb-1">
-    <div class="flex flex-col mr-2">
-      <div class="text-xs">Compare Palette</div>
+  <div class="bg-stone-100 w-full py-1 px-2">
+    <div class="flex">
+      <div class="mr-2">Compare palette</div>
       <Tooltip>
         <button
-          class={`${buttonStyle} `}
+          class={`${buttonStyle
+            .split(" ")
+            .filter((x) => !x.startsWith("py"))
+            .join(" ")} `}
           slot="target"
           let:toggle
           on:click={toggle}
         >
           {#if ComparisonPal !== undefined}
             {ComparisonPal.name}
           {:else}
-            No Palette Selected
+            No palette selected
           {/if}
         </button>
         <div
           class="flex flex-col max-w-md max-h-96 overflow-y-auto"
           slot="content"
         >
-          <div class="text-sm">Premade:</div>
+          <div class="text-sm">Premade</div>
           <Nav
             className=""
             tabs={["sequential", "categorical", "diverging"]}
@@ -95,7 +98,7 @@
             }}
           />
 
-          <div class="text-sm">Your folders:</div>
+          <div class="text-sm">Your folders</div>
           <Nav
             className=""
             tabs={folders}
@@ -135,6 +138,8 @@
         </div>
       </Tooltip>
     </div>
+  </div>
+  <div class="flex flex-wrap w-full py-2 px-2 mb-1">
     {#if ComparisonPal !== undefined}
       <div class="mr-2">
         <SetColorSpace