scratch out some ui changes

mcnuttandrew · Feb 29, 2024 · a1659eb · a1659eb
1 parent 480ef85
commit a1659eb
Show file tree

Hide file tree

Showing 7 changed files with 392 additions and 352 deletions.
diff --git a/src/App.svelte b/src/App.svelte
@@ -35,13 +35,14 @@
   import { lint } from "./lib/api-calls";
   import { debounce } from "vega";
 
-  $: selectedLint = $lintStore.focusedLint;
+  $: route = $configStore.route;
+  $: evalRoute = $configStore.evalDisplayMode;
   const bindStr = "!!";
   // it appears that there is a bug in the vega debounce implementation, that causes the second argument to not fire
   let updateSearchDebounced = debounce(10, (x: [any, string]) => {
     const [pal, ignoreString] = x;
     // keep the noise down on the console
-    if (!selectedLint && pal) {
+    if ((route !== "eval" || evalRoute !== "lint-customization") && pal) {
       lintStore.setLoadState("loading");
 
       const outPal = {

diff --git a/src/content-modules/Browse.svelte b/src/content-modules/Browse.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
   import examplePalStore from "../stores/example-palette-store";
   import lintStore from "../stores/lint-store";
+  import configStore from "../stores/config-store";
 
   import { onMount } from "svelte";
 
-  import type { PaletteWrap } from "../stores/example-palette-store";
   import type { LintResult } from "../lib/ColorLint";
 
   import MiniPalPreview from "../components/MiniPalPreview.svelte";
@@ -102,6 +102,7 @@
             class={buttonStyle}
             on:click={() => {
               lintStore.setFocusedLint(lint.isCustom);
+              configStore.setEvalDisplayMode("lint-customization");
             }}
           >
             Customize

diff --git a/src/linting/Eval.svelte b/src/linting/Eval.svelte
@@ -42,7 +42,8 @@
     });
     colorStore.setCurrentPalEvalConfig(newEvalConfig);
   }
-  $: isCompact = $configStore.evalDisplayMode === "compact";
+  $: displayMode = $configStore.evalDisplayMode;
+  $: isCompact = displayMode === "compact";
 
   let innerWidth = window.innerWidth;
   $: showEvalColumn = innerWidth >= 1600;
@@ -55,8 +56,8 @@
 
 <div class="bg-stone-300 w-full flex">
   <Nav
-    tabs={["regular", "compact"]}
-    isTabSelected={(x) => x === $configStore.evalDisplayMode}
+    tabs={["regular", "compact", "lint-customization"]}
+    isTabSelected={(x) => x === displayMode}
     selectTab={(x) => {
       //@ts-ignore
       configStore.setEvalDisplayMode(x);
@@ -65,90 +66,74 @@
   <GlobalLintConfig />
 </div>
 <div class="flex h-full bg-stone-100">
-  {#if showEvalColumn}
-    <div class="bg-stone-300">
-      <EvalColorColumn />
-    </div>
-  {/if}
-  <div class="flex flex-col ml-2">
-    <div class="overflow-auto h-full max-w-lg mb-28 px-2">
-      <div class="flex items-start justify-start">
-        {#if Object.keys(currentPal.evalConfig)}
-          <div>
-            <button
-              class={`${buttonStyle} ml-0 pl-0`}
-              on:click={() => colorStore.setCurrentPalEvalConfig({})}
-            >
-              Restore Defaults
-            </button>
-          </div>
-        {/if}
-        <NewLintSuggestion />
-      </div>
-      <div class="text-sm">
-        This collection of checks validates whether or not your palette matches
-        a number of commonly held beliefs about best practices. They wont fit
-        every situation. So don't feel shamed if you ignore some of them. They
-        are just a good starting point for thinking about how to improve your
-        palette.
+  {#if displayMode === "lint-customization"}
+    <LintCustomizationModal />
+  {:else}
+    {#if showEvalColumn}
+      <div class="bg-stone-300">
+        <EvalColorColumn />
       </div>
-      {#each Object.entries(checkGroups) as checkGroup}
-        <div class="flex mt-4">
-          <div class="font-bold">{titleCase(checkGroup[0])} Checks</div>
-          <button
-            class={`${buttonStyle} `}
-            on:click={() => setGroupTo(checkGroup[1], true)}
-          >
-            ignore all
-          </button>
-          {#if checkGroup[1].some((x) => evalConfig[x.name]?.ignore)}
+    {/if}
+    <div class="flex flex-col ml-2">
+      <div class="overflow-auto h-full max-w-lg mb-28 px-2">
+        <div class="flex items-start justify-start">
+          {#if Object.keys(currentPal.evalConfig)}
+            <div>
+              <button
+                class={`${buttonStyle} ml-0 pl-0`}
+                on:click={() => colorStore.setCurrentPalEvalConfig({})}
+              >
+                Restore Defaults
+              </button>
+            </div>
+          {/if}
+          <NewLintSuggestion />
+        </div>
+        <div class="text-sm">
+          This collection of checks validates whether or not your palette
+          matches a number of commonly held beliefs about best practices. They
+          wont fit every situation. So don't feel shamed if you ignore some of
+          them. They are just a good starting point for thinking about how to
+          improve your palette.
+        </div>
+        {#each Object.entries(checkGroups) as checkGroup}
+          <div class="flex mt-4">
+            <div class="font-bold">{titleCase(checkGroup[0])} Checks</div>
             <button
               class={`${buttonStyle} `}
-              on:click={() => setGroupTo(checkGroup[1], false)}
+              on:click={() => setGroupTo(checkGroup[1], true)}
             >
-              re-enable all
+              ignore all
             </button>
-          {/if}
-        </div>
-        <div class="flex">
-          {#if isCompact}
-            {#each checkGroup[1] as check}
-              {#if check.passes}
-                <LintDisplay {check} justSummary={true} />
-              {/if}
-            {/each}
-          {/if}
-        </div>
-        {#each checkGroup[1] as check}
-          {#if !isCompact || (isCompact && !check.passes)}
-            <LintDisplay {check} />
+            {#if checkGroup[1].some((x) => evalConfig[x.name]?.ignore)}
+              <button
+                class={`${buttonStyle} `}
+                on:click={() => setGroupTo(checkGroup[1], false)}
+              >
+                re-enable all
+              </button>
+            {/if}
+          </div>
+          <div class="flex">
+            {#if isCompact}
+              {#each checkGroup[1] as check}
+                {#if check.passes}
+                  <LintDisplay {check} justSummary={true} />
+                {/if}
+              {/each}
+            {/if}
+          </div>
+          {#each checkGroup[1] as check}
+            {#if !isCompact || (isCompact && !check.passes)}
+              <LintDisplay {check} />
+            {/if}
+          {/each}
+          {#if checkGroup[1].length === 0 && $lintStore.loadState === "loading"}
+            <div class="text-sm animate-pulse italic font-bold">Loading</div>
           {/if}
         {/each}
-        {#if checkGroup[1].length === 0 && $lintStore.loadState === "loading"}
-          <div class="text-sm animate-pulse italic font-bold">Loading</div>
-        {/if}
-      {/each}
+      </div>
     </div>
-  </div>
-  {#if $lintStore.focusedLint !== false}
-    <LintCustomizationModal
-      onClose={() => {
-        setTimeout(() => {
-          const outPal = {
-            ...currentPal,
-            evalConfig: {
-              ...currentPal.evalConfig,
-              globallyIgnoredLints: $lintStore.globallyIgnoredLints,
-            },
-          };
-          loadLints()
-            .then(() => lint(outPal, false))
-            .then((res) => {
-              checks = res;
-            });
-        }, 100);
-      }}
-    />
   {/if}
 </div>
 

diff --git a/src/linting/EvalResponse.svelte b/src/linting/EvalResponse.svelte
@@ -85,7 +85,10 @@
     {#if check.isCustom}
       <button
         class={buttonStyle}
-        on:click={() => lintStore.setFocusedLint(check.isCustom)}
+        on:click={() => {
+          lintStore.setFocusedLint(check.isCustom);
+          configStore.setEvalDisplayMode("lint-customization");
+        }}
       >
         Customize
       </button>