even yet more

mcnuttandrew · Oct 1, 2024 · 6f82854 · 6f82854
1 parent 5db2339
commit 6f82854
Show file tree

Hide file tree

Showing 10 changed files with 67 additions and 52 deletions.
diff --git a/apps/color-buddy/src/App.svelte b/apps/color-buddy/src/App.svelte
@@ -42,6 +42,8 @@
   import { lint } from "./lib/api-calls";
   import { debounce } from "vega";
 
+  import { buttonStyle } from "./lib/styles";
+
   $: route = $configStore.route;
   $: evalRoute = $configStore.evalDisplayMode;
   const bindStr = "!!";
@@ -85,19 +87,25 @@
       <div class="">Color Buddy</div>
     </div>
     <div>
-      <div class="flex h-12">
+      <div class="flex h-12 items-center">
         <NewPal />
         <Manage />
-        <button
-          class={"text-white ml-2 mr-1"}
-          on:click={() => colorStore.undo()}
-        >
-          Undo
-        </button>
-        /
-        <button class={"text-white mr-2"} on:click={() => colorStore.redo()}>
-          Redo
-        </button>
+        <div>
+          <button
+            class={`${buttonStyle} ml-2 mr-1`}
+            on:click={() => colorStore.undo()}
+          >
+            Undo
+          </button>
+        </div>
+        <div>
+          <button
+            class={`${buttonStyle} mr-2`}
+            on:click={() => colorStore.redo()}
+          >
+            Redo
+          </button>
+        </div>
       </div>
     </div>
   </div>
@@ -143,7 +151,7 @@
     class="flex flex-col w-full border-b border-l border-stone-200 h-full"
     id="right-col"
   >
-    <div class="flex bg-stone-100 w-full border-b border-l border-stone-200">
+    <div class="flex bg-stone-200 w-full border-b border-l border-stone-200">
       <Nav
         className=""
         tabs={currentPalTabs}

diff --git a/apps/color-buddy/src/components/ColorBall.svelte b/apps/color-buddy/src/components/ColorBall.svelte
@@ -36,7 +36,7 @@
 </script>
 
 <div
-  class="w-full flex justify-center items-center text-sm mt-2 relative"
+  class="w-full flex justify-between items-center text-sm mt-2 relative"
   style="min-height: 40px"
 >
   <div

diff --git a/apps/color-buddy/src/components/KeyboardHooks.svelte b/apps/color-buddy/src/components/KeyboardHooks.svelte
@@ -125,6 +125,7 @@
       colorStore.setCurrentPalColors([...currentPal.colors, ...copiedData]);
     }
     if (key === "a" && metaKey) {
+      e.preventDefault();
       focusStore.setColors(currentPal.colors.map((_, idx) => idx));
     }
   }

diff --git a/apps/color-buddy/src/content-modules/LeftPanel.svelte b/apps/color-buddy/src/content-modules/LeftPanel.svelte
@@ -10,7 +10,7 @@
   import ColorBall from "../components/ColorBall.svelte";
 
   import ModifySelection from "../controls/ModifySelection.svelte";
-  import Sort from "../controls/Sort.svelte";
+
   import AddColor from "../controls/AddColor.svelte";
   import DeMetric from "../controls/DeMetric.svelte";
   import GetColorsFromString from "../controls/GetColorsFromString.svelte";
@@ -65,6 +65,7 @@
   <section class="flex flex-col flex-1 overflow-auto p-1" id="left-panel">
     <div class="flex px-4">
       <ModifySelection />
+      <DeMetric />
     </div>
     <!-- svelte-ignore a11y-click-events-have-key-events -->
     <!-- svelte-ignore a11y-no-static-element-interactions -->
@@ -93,19 +94,7 @@
         <AddColor />
       </div>
 
-      <div class="flex items-center mt-2">
-        <DeMetric />
-        <Sort />
-        <label>
-          Show Issues <input
-            class="ml-1"
-            on:change={(e) =>
-              configStore.setShowIssuesOnLeft(e.currentTarget.checked)}
-            type="checkbox"
-            checked={$configStore.showIssuesOnLeft}
-          />
-        </label>
-      </div>
+      <div class="flex items-center mt-2"></div>
       <GetColorsFromString
         onChange={(colors) => colorStore.setCurrentPalColors(colors)}
         colorSpace={currentPal.colorSpace}

diff --git a/apps/color-buddy/src/content-modules/Manage.svelte b/apps/color-buddy/src/content-modules/Manage.svelte
@@ -13,11 +13,11 @@
   import examplePalStore from "../stores/example-palette-store";
   import exampleStore from "../stores/example-store";
   import focusStore from "../stores/focus-store";
-  import { convertPalToSpace } from "../lib/utils";
+  import { convertPalToSpace, newVersionName } from "../lib/utils";
   import { suggestNameForPalette } from "../lib/api-calls";
   import Nav from "../components/Nav.svelte";
+  import { buttonStyle } from "../lib/styles";
 
-  import { newVersionName } from "../lib/utils";
   $: example = $exampleStore.examples[
     $configStore.manageBrowsePreviewIdx
   ] as any;
@@ -155,14 +155,16 @@
   }
 </script>
 
-<button
-  class={"text-white"}
-  on:click={() => {
-    modalState = "open";
-  }}
->
-  Palettes...
-</button>
+<div>
+  <button
+    class={buttonStyle}
+    on:click={() => {
+      modalState = "open";
+    }}
+  >
+    Palettes Manager
+  </button>
+</div>
 
 {#if modalState === "open"}
   <Modal

diff --git a/apps/color-buddy/src/controls/AlignSelection.svelte b/apps/color-buddy/src/controls/AlignSelection.svelte
@@ -78,7 +78,7 @@
   {#each ALIGNS as align}
     {#if align.type === "single"}
       <button
-        class={`${buttonStyle} h-full flex justify-between items-center py-1`}
+        class={`${buttonStyle} flex justify-between items-center`}
         on:click={() => {
           const newCoordinate = align.op(
             ...colors
@@ -106,8 +106,9 @@
       >
         {name}
         {#if align.icon}
-          <span class="ml-2">
+          <span class="ml-2 flex items-center">
             <svelte:component this={align.icon} />
+            <span class="ml-2">{align.name}</span>
           </span>
         {/if}
       </button>

diff --git a/apps/color-buddy/src/controls/DeMetric.svelte b/apps/color-buddy/src/controls/DeMetric.svelte
@@ -12,16 +12,19 @@
     class={`${controlButtonStyle
       .split(" ")
       .filter((x) => !x.startsWith("w-"))
-      .join(" ")} px-2 w-12`}
+      .join(" ")} px-2`}
     slot="target"
     let:toggle
     on:click={toggle}
   >
-    dE <ChevDown class="text-base ml-1" />
+    Metrics <ChevDown class="text-base ml-1" />
   </button>
   <div slot="content" class="flex flex-col">
     <button
-      class={simpleTooltipRowStyle}
+      class={simpleTooltipRowStyle
+        .split(" ")
+        .filter((x) => !x.startsWith("px"))
+        .join(" ")}
       class:font-bold={$configStore.evalDeltaDisplay === "none"}
       on:click={() => configStore.setEvalDeltaDisplay("none")}
     >
@@ -46,9 +49,19 @@
       >
         {metric}
         {#if metric === "WCAG21"}
-          <span class="font-normal">(You probably want this one)</span>
+          <span class="font-normal">(recommended)</span>
         {/if}
       </button>
     {/each}
+    <div class="w-full border-b border-stone-200 my-2"></div>
+    <label>
+      Show Issues <input
+        class="ml-1"
+        on:change={(e) =>
+          configStore.setShowIssuesOnLeft(e.currentTarget.checked)}
+        type="checkbox"
+        checked={$configStore.showIssuesOnLeft}
+      />
+    </label>
   </div>
 </Tooltip>
diff --git a/apps/color-buddy/src/controls/ModifySelection.svelte b/apps/color-buddy/src/controls/ModifySelection.svelte
@@ -7,6 +7,7 @@
   import SuggestionModificationToSelection from "../controls/SuggestionModificationToSelection.svelte";
   import focusStore from "../stores/focus-store";
   import colorStore from "../stores/color-store";
+  import Sort from "../controls/Sort.svelte";
   import { buttonStyle, controlButtonStyle } from "../lib/styles";
   $: focusedColors = $focusStore.focusedColors;
   $: focusedSet = new Set(focusedColors);
@@ -20,7 +21,6 @@
 <button
   class={`${controlButtonStyle} `}
   class:opacity-30={!buttonsActive}
-  class:opacity-50={buttonsActive}
   class:cursor-not-allowed={!buttonsActive}
   on:click|stopPropagation|preventDefault={() => {
     // move every element to the left
@@ -44,7 +44,6 @@
 <button
   class={controlButtonStyle}
   class:opacity-30={!buttonsActive}
-  class:opacity-50={buttonsActive}
   class:cursor-not-allowed={!buttonsActive}
   on:click|stopPropagation|preventDefault={() => {
     // move every element to the right
@@ -65,8 +64,8 @@
 >
   <DownArrow />
 </button>
-
-<button
+<Sort />
+<!-- <button
   class={controlButtonStyle}
   class:button-deactivated={!buttonsActive}
   on:click={() => {
@@ -77,7 +76,7 @@
   }}
 >
   <Cross />
-</button>
+</button> -->
 <!-- <button
   class={buttonStyle}
   class:button-deactivated={!buttonsActive}
@@ -91,7 +90,7 @@
 >
   Select All
 </button> -->
-<button
+<!-- <button
   class={`${buttonStyle} flex items-center`}
   class:button-deactivated={!buttonsActive}
   on:click={() =>
@@ -101,7 +100,7 @@
     ])}
 >
   <Cross /><NumTwo />
-</button>
+</button> -->
 <SuggestionModificationToSelection />
 
 <style>

diff --git a/apps/color-buddy/src/controls/NewPal.svelte b/apps/color-buddy/src/controls/NewPal.svelte
@@ -116,7 +116,7 @@
     slot="target"
     let:toggle
     on:click={toggle}
-    class={"text-white h-full mx-2"}
+    class={`mx-2 ${buttonStyle}`}
   >
     New Palette
   </button>

diff --git a/apps/color-buddy/src/controls/SetSimulation.svelte b/apps/color-buddy/src/controls/SetSimulation.svelte
@@ -37,7 +37,9 @@
       on:click={toggle}
       class={`${buttonStyle} whitespace-nowrap flex items-center w-full justify-between`}
     >
-      {titleCase($configStore.colorSim)}
+      {$configStore.colorSim === "none"
+        ? "(off)"
+        : titleCase($configStore.colorSim)}
       <DownChev class="ml-2 text-sm" />
     </button>
   </Tooltip>