Skip to content

Commit

Permalink
gradual improvements to the look and feel of the right panel
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcnuttandrew
mcnuttandrew committed Sep 27, 2024
1 parent 15e99b9 commit 52bc680
Show file tree
Hide file tree
Showing 8 changed files with 213 additions and 199 deletions.
4 changes: 2 additions & 2 deletions apps/color-buddy/src/App.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,7 +114,7 @@
{/if}
</div>
<div class="flex flex-col w-full" id="right-col">
<div class="flex bg-stone-100 w-full">
<div class="flex bg-stone-300 w-full">
<Nav
className=""
tabs={currentPalTabs}
Expand All @@ -125,7 +125,7 @@
}}
/>
</div>
<div class="">
<div class="bg-stone-100 h-full">
{#if palPresent && $configStore.route === "examples"}
<Examples />
{:else if palPresent && $configStore.route === "compare"}
Expand Down
9 changes: 0 additions & 9 deletions apps/color-buddy/src/constants.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,15 +6,6 @@ export const lintGroupNames: Record<string, string> = {
custom: "Custom",
};

export const typeToSymbol = {
design: "🎨",
"contrast-accessibility": "♿",
"color-accessibility": "♿",
accessibility: "♿",
usability: "🔎",
custom: "⚙️",
} as any;

export const typeToImg = {
design: "./design.png",
"contrast-accessibility": "./wcag-object.png",
Expand Down
232 changes: 116 additions & 116 deletions apps/color-buddy/src/content-modules/ComparePal.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,127 +58,125 @@
: $colorStore.palettes.filter((x) => x.folder === selectedFolder.name);
</script>

<div class="w-full border-l-8 border-stone-200 h-full">
<div class="w-full h-full bg-stone-100">
<!-- main -->
<div class="px-6">
<div class="flex flex-wrap w-full">
<div class="flex flex-col mr-2">
<div class="text-sm">Compare Palette</div>
<Tooltip>
<button
class={`${buttonStyle} `}
slot="target"
let:toggle
on:click={toggle}
>
{#if ComparisonPal !== undefined}
{ComparisonPal.name}
{:else}
No Palette Selected
{/if}
</button>
<div class="flex flex-col w-80" slot="content">
<div class="text-sm">Premade:</div>
<div class="flex">
{#each ["sequential", "categorical", "diverging"] as folder}
<button
class={buttonStyle}
on:click={() => {
configStore.setSelectedFolder({
isPreMade: true,
name: folder,
});
}}
class:underline={selectedFolder?.isPreMade &&
selectedFolder?.name === folder}
>
{folder}/
</button>
{/each}
</div>
<div class="text-sm">Your folders:</div>
<div class="flex flex-wrap">
{#each folders as folder}
<div class="flex flex-wrap w-full bg-stone-200 py-2 px-2">
<div class="flex flex-col mr-2">
<div class="text-sm">Compare Palette</div>
<Tooltip>
<button
class={`${buttonStyle} `}
slot="target"
let:toggle
on:click={toggle}
>
{#if ComparisonPal !== undefined}
{ComparisonPal.name}
{:else}
No Palette Selected
{/if}
</button>
<div class="flex flex-col w-80" slot="content">
<div class="text-sm">Premade:</div>
<div class="flex">
{#each ["sequential", "categorical", "diverging"] as folder}
<button
class={buttonStyle}
on:click={() => {
configStore.setSelectedFolder({
isPreMade: true,
name: folder,
});
}}
class:underline={selectedFolder?.isPreMade &&
selectedFolder?.name === folder}
>
{folder}/
</button>
{/each}
</div>
<div class="text-sm">Your folders:</div>
<div class="flex flex-wrap">
{#each folders as folder}
<button
class={buttonStyle}
on:click={() =>
configStore.setSelectedFolder({
isPreMade: false,
name: folder,
})}
class:underline={selectedFolder?.isPreMade === false &&
selectedFolder?.name === folder}
>
{folder}/
</button>
{/each}
</div>

<div class="flex flex-wrap mt-4">
{#each selectedPals as pal, idx (idx)}
<MiniPalPreview
{pal}
className={compareIdx === idx ? "border-2 border-black" : ""}
onClick={() =>
configStore.setComparePal(
selectedFolder.isPreMade ? pal : idx
)}
/>
{/each}
</div>
</div>
</Tooltip>
</div>
{#if ComparisonPal !== undefined}
<div class="mr-2">
<SetColorSpace
{colorSpace}
onChange={(space) => {
colorSpace = space;
}}
/>
</div>
<div class="mr-2">
<Background
onChange={(background) => {
bg = background.toHex();
configStore.setCompareBackground(background.toHex());
}}
onSpaceChange={(space) => {
// @ts-ignore
configStore.setCompareBackgroundSpace(space);
}}
bg={Color.colorFromHex(bg, colorSpace)}
colorSpace={$configStore.compareBackgroundSpace}
/>
</div>
<div class="flex flex-col">
<div class="text-sm">Diff</div>
<div class="flex">
<Tooltip positionAlongRightEdge={true}>
<div slot="content" class="flex flex-col">
{#each diffOptions as diff}
<button
class={buttonStyle}
on:click={() =>
configStore.setSelectedFolder({
isPreMade: false,
name: folder,
})}
class:underline={selectedFolder?.isPreMade === false &&
selectedFolder?.name === folder}
class={simpleTooltipRowStyle}
on:click={() => configStore.setCompareDiff(diff)}
class:font-bold={showDiff === diff}
>
{folder}/
{diffToLabel[diff]}
</button>
{/each}
</div>
<button
slot="target"
let:toggle
class={`${buttonStyle} flex items-center`}
on:click={toggle}
>
{diffToLabel[showDiff]}

<div class="flex flex-wrap mt-4">
{#each selectedPals as pal, idx (idx)}
<MiniPalPreview
{pal}
className={compareIdx === idx ? "border-2 border-black" : ""}
onClick={() =>
configStore.setComparePal(
selectedFolder.isPreMade ? pal : idx
)}
/>
{/each}
</div>
</div>
</Tooltip>
</div>
{#if ComparisonPal !== undefined}
<div class="mr-2">
<SetColorSpace
{colorSpace}
onChange={(space) => {
colorSpace = space;
}}
/>
</div>
<div class="mr-2">
<Background
onChange={(background) => {
bg = background.toHex();
configStore.setCompareBackground(background.toHex());
}}
onSpaceChange={(space) => {
// @ts-ignore
configStore.setCompareBackgroundSpace(space);
}}
bg={Color.colorFromHex(bg, colorSpace)}
colorSpace={$configStore.compareBackgroundSpace}
/>
</div>
<div>
<div class="flex flex-col">
<div class="text-sm">Diff</div>
<Tooltip positionAlongRightEdge={true}>
<div slot="content" class="flex flex-col">
{#each diffOptions as diff}
<button
class={simpleTooltipRowStyle}
on:click={() => configStore.setCompareDiff(diff)}
class:font-bold={showDiff === diff}
>
{diffToLabel[diff]}
</button>
{/each}
</div>
<button
slot="target"
let:toggle
class={`${buttonStyle} flex items-center`}
on:click={toggle}
>
{diffToLabel[showDiff]}

<ChevDown class="text-sm ml-2" />
</button>
</Tooltip>
</div>
<ChevDown class="text-sm ml-2" />
</button>
</Tooltip>
{#if compareIdx === "tempPal" && ComparisonPal}
<button
class={buttonStyle}
Expand All @@ -191,8 +189,10 @@
</button>
{/if}
</div>
{/if}
</div>
</div>
{/if}
</div>
<div class="px-6">
<div>&nbsp;</div>
{#if ComparisonPal !== undefined}
<div style={`max-width: ${scatterSize + 110}px`}>
Expand Down
1 change: 0 additions & 1 deletion apps/color-buddy/src/content-modules/LeftPanel.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@
import ModifySelection from "../controls/ModifySelection.svelte";
import EvalResponse from "../linting/EvalResponse.svelte";
import { dealWithFocusEvent } from "../lib/utils";
import { typeToSymbol } from "../constants";
import Sort from "../controls/Sort.svelte";
import AddColor from "../controls/AddColor.svelte";
import GetColorsFromString from "../controls/GetColorsFromString.svelte";
Expand Down
Loading

0 comments on commit 52bc680

Please sign in to comment.