Skip to content

Commit

Permalink
some slight adjustment of control placements (#113)
Browse files Browse the repository at this point in the history
* some slight adjustment of control placements

* move the right panel controls back over the right panel
  • Loading branch information
mcnuttandrew authored Sep 15, 2024
1 parent 672e357 commit 726f627
Show file tree
Hide file tree
Showing 12 changed files with 66 additions and 41 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ Prompt: "Make the colors more pastel."
Output: {"background": "#FFFFFF", "colors": ["#9E9E9E", "#F8BBD0", "#D3EC8A", "#D3D3FF"]}
Present your names a single JSON object. It should have a type like {"background: string; colors: string[]}.
It should have EXACTLY the same number of colors as the input.
Unless specified otherwise, it should have EXACTLY the same number of colors as the input.
Do not offer any other response.
Palette: ${JSON.stringify(pal.inputColors)}
Expand Down
5 changes: 4 additions & 1 deletion apps/color-buddy/src/App.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,10 @@
<LeftPanel />
<div class="h-full flex flex-col grow main-content">
<div class="bg-stone-800 flex justify-between items-center">
<div class="flex">
<div
class="flex"
style={`margin-left: ${scatterSize + zWidth + padding}px`}
>
{#each [{ tabs: palettesTabs, name: "Palettes" }, { tabs: currentPalTabs, name: "Current Palette" }] as { tabs, name }}
<div class="flex flex-col relative">
<div class="uppercase text-xs text-white absolute italic left-2">
Expand Down
7 changes: 6 additions & 1 deletion apps/color-buddy/src/content-modules/ComparePal.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,8 @@
colorSpace={$configStore.compareBackgroundSpace}
/>
</div>
<div>&nbsp;</div>

<ColorScatterPlot
scatterPlotMode="looking"
Pal={{
Expand Down Expand Up @@ -194,7 +196,10 @@
{/if}
<div>&nbsp;</div>
{#if ComparisonPal !== undefined}
<div class="flex flex-col pl-2">
<div
class="flex flex-col pl-2"
style={`max-width: ${scatterSize + 110}px;`}
>
<PalPreview
highlightSelected={false}
pal={{
Expand Down
20 changes: 13 additions & 7 deletions apps/color-buddy/src/content-modules/Controls.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -23,9 +23,15 @@
</script>

<div class="px-2">
<GetColorsFromString
onChange={(colors) => colorStore.setCurrentPalColors(colors)}
colorSpace={currentPal.colorSpace}
colors={currentPal.colors}
/>
<div class="w-full border-t-2 border-black my-2"></div>

<AddColor />
<SuggestionModificationToSelection />
<AdjustColor />

{#if focusedColors.length === 1}
<div class="w-full border-t-2 border-black my-2"></div>
<input
Expand Down Expand Up @@ -60,8 +66,10 @@
colorStore.setCurrentPalColors(updatedColors);
}}
/>
<div class="w-full border-t-2 border-black my-2"></div>
<ColorTagger />
{/if}
<AdjustColor />

<DistributePoints />
<AlignSelection />
Expand All @@ -70,9 +78,7 @@
{/if}

<InterpolatePoints />
<GetColorsFromString
onChange={(colors) => colorStore.setCurrentPalColors(colors)}
colorSpace={currentPal.colorSpace}
colors={currentPal.colors}
/>
<div class="w-full border-t-2 border-black my-2"></div>

<SuggestionModificationToSelection />
</div>
27 changes: 17 additions & 10 deletions apps/color-buddy/src/content-modules/MainColumn.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,15 @@
colorSpace={$configStore.channelPickerSpaceBackground}
/>
</div>
<div>
<button
class={`${buttonStyle} pl-0`}
on:click={() => configStore.setScatterplotMode("putting")}
>
Add color {#if $configStore.scatterplotMode === "putting"}(move mouse on
chart){/if}
</button>
</div>
<ColorScatterPlot
scatterPlotMode={$configStore.scatterplotMode}
colorSpace={currentPal.colorSpace}
Expand All @@ -88,19 +97,17 @@
id="scatterplot-controls"
style={`max-width: ${scatterSize + 110}px;`}
>
<button
class={`${buttonStyle} pl-0`}
on:click={() => configStore.setScatterplotMode("putting")}
>
Add color {#if $configStore.scatterplotMode === "putting"}(move mouse on
chart){/if}
</button>
<AdjustOrder />

<ModifySelection />
</div>
<div
class="flex flex-wrap"
id="scatterplot-controls"
style={`max-width: ${scatterSize + 110}px;`}
>
<AdjustOrder />
<Sort />
</div>
<div class="flex flex-col pl-2">
<div class="flex flex-col pl-2" style={`max-width: ${scatterSize + 110}px;`}>
<!-- overview / preview -->
<PalPreview
allowModification={true}
Expand Down
6 changes: 3 additions & 3 deletions apps/color-buddy/src/controls/AddColor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -42,9 +42,9 @@
</script>

<div class="flex w-full justify-between">
<div class="font-bold">Add Color</div>
<div class="italic text-sm">Add Color</div>
</div>
<section>
<section class="mb-4">
<div class="flex w-full justify-between items-center">
<AutocompleteOrSearch
setValue={(x) => {
Expand All @@ -57,7 +57,7 @@
}}
optionsAreColors={true}
searchOptions={Object.keys(colorCentersFromStoneHeer)}
placeholder="e.g. purple or red"
placeholder="e.g. UW purple or Utah red"
runSearch={(x) => {
getColorForSearch(x);
}}
Expand Down
4 changes: 3 additions & 1 deletion apps/color-buddy/src/controls/AdjustColor.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,9 @@

{#if focusedColors.length >= 1}
<div class="w-full border-t-2 border-black my-2"></div>
<div class="font-bold">Adjust selected colors</div>
<div class="text-sm italic">
Adjust selected color{focusedColors.length > 1 ? "s" : ""}
</div>
<div>
{#each actions as action}
<button
Expand Down
2 changes: 1 addition & 1 deletion apps/color-buddy/src/controls/ColorTagger.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
);
</script>

<div class="font-bold">Tags</div>
<div class="text-sm italic">Tags</div>

<div class="flex">
{#each currentColor.tags as tag}
Expand Down
3 changes: 1 addition & 2 deletions apps/color-buddy/src/controls/GetColorsFromString.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -32,10 +32,9 @@
$: includeQuotes = $configStore.includeQuotes;
</script>

<div class="w-full border-t-2 border-black my-2"></div>
<div class="mt-2">
<div class="flex justify-between w-full text-sm">
<label for="current-colors">Current Colors</label>
<label for="current-colors" class="italic">Current Colors</label>
<div class="flex items-center">
<label for="include-quotes" class="mr-2">Include quotes</label>
<input
Expand Down
6 changes: 6 additions & 0 deletions apps/color-buddy/src/controls/ModifySelection.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,12 @@
>
Deselect
</button>
<button
class={buttonStyle}
on:click={() => focusStore.setColors(currentPal.colors.map((_, idx) => idx))}
>
Select All
</button>
<button
class={buttonStyle}
class:button-deactivated={!buttonsActive}
Expand Down
4 changes: 1 addition & 3 deletions apps/color-buddy/src/controls/Rotate.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -100,9 +100,7 @@
</script>

<div class="w-full border-t-2 border-black my-2"></div>
<div class="flex justify-between w-full">
<div class="font-bold">Rotate</div>
</div>
<div class="text-sm italic">Rotate</div>
<div class="flex flex-col">
<div class="w-full flex justify-between">
<input min={0} max={360} step={1} type="range" bind:value={angle} />
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -85,9 +85,11 @@
</script>

<div>
<div class="flex flex-col w-72">
<div class="flex flex-col w-full">
<label for="pal-prompt" class="italic text-sm">
<div>Change these points with AI</div>
<div>
Change {selectedColors.length ? "selected" : "all"} points with AI
</div>
</label>
{#if requestState === "loaded"}
{#each suggestedColorSets as suggestedColors, idx}
Expand Down Expand Up @@ -119,7 +121,10 @@
</div>
{/each}
{:else}
<form on:submit|preventDefault={makeRequest} class="flex flex-col pr-2">
<form
on:submit|preventDefault={makeRequest}
class="flex flex-col pr-2 w-full"
>
<textarea
bind:value={palPrompt}
on:keypress={(e) => {
Expand All @@ -130,8 +135,8 @@
}
}}
id="pal-prompt"
class="indent-2 text-sm leading-6 border-2"
placeholder="e.g. 'Make them groovier'"
class="indent-2 text-sm leading-6 border-2 w-full"
placeholder="e.g. 'Make them groovier' or 'Add two more colors'"
/>
<button
class={buttonStyle}
Expand All @@ -140,12 +145,6 @@
{requestState === "loading" ? "loading..." : "Submit"}
</button>
</form>
{#if !selectedColors.length}
<span class="italic text-sm">
(Current scope is all colors, you can select a group of colors to
limit the scope)
</span>
{/if}
{/if}
{#if requestState === "failed"}
<div class="text-red-500">No suggestions found, please try again</div>
Expand Down

0 comments on commit 726f627

Please sign in to comment.