Skip to content

Commit

Permalink
example order ux improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@mcnuttandrew
mcnuttandrew committed Jan 25, 2024
1 parent 90a2c13 commit 0bf0c26
Show file tree
Hide file tree
Showing 3 changed files with 130 additions and 134 deletions.
26 changes: 16 additions & 10 deletions src/example/ExampleWrapper.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
export let idx: number;
export let bg: string;
export let clickExample: (example: any, idx: number) => void;
let operations = [
{ name: "Edit", action: () => clickExample(example, idx), condition: true },
$: size = example.size || 250;
$: operations = [
{ name: "Edit", action: () => clickExample(example, idx) },
{
name: "Delete",
action: () => exampleStore.deleteExample(idx),
Expand All @@ -22,11 +22,7 @@
action: () => exampleStore.toggleHidden(idx),
condition: true,
},
{
name: "Expand",
action: () => exampleStore.setExampleSize(idx, 600),
condition: true,
},
{
name: "Focus (expand and hide others)",
action: () => {
Expand All @@ -35,10 +31,20 @@
},
condition: true,
},
{
name: "Expand",
action: () => exampleStore.setExampleSize(idx, 600),
condition: size !== 600,
},
{
name: "Reset size",
action: () => exampleStore.setExampleSize(idx, 250),
condition: size !== 250,
},
{
name: "Shrink",
action: () => exampleStore.setExampleSize(idx, 50),
condition: true,
condition: size !== 50,
},
].filter((x) => x.condition);
</script>
Expand All @@ -60,7 +66,7 @@
<button slot="target" class={buttonStyle} let:toggle on:click={toggle}>
Options ⚙
</button>
<div slot="content">
<div slot="content" class="flex flex-col items-start">
{#each operations as { name, action }}
<button class={buttonStyle} on:click={action}>{name}</button>
{/each}
Expand Down
54 changes: 3 additions & 51 deletions src/example/Examples.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -87,19 +87,6 @@
$: groupsHidden = Object.keys(sections).filter((x) => !sections[x]).length;
$: hiddenExamples = $exampleStore.examples.filter((x: any) => x.hidden);
$: numberHidden = hiddenExamples.length + groupsHidden;
$: numToShow = $exampleStore.examples.filter((x: any) => {
if (x.hidden) {
return false;
}
if (sections.svg && x?.svg) {
return true;
}
if (sections.vega && x.vega) {
return true;
}
return false;
}).length;
</script>

<div class="flex items-center bg-stone-300 px-4 py-2">
Expand Down Expand Up @@ -171,49 +158,14 @@
class="flex flex-wrap overflow-auto p-4 w-full bg-stone-100"
style={`height: calc(100% - 100px)`}
>
{#if $exampleStore.sections["swatches"]}
<Swatches />
{/if}
{#each examples as example, idx}
{#if exampleShowMap[idx]}
<ExampleWrapper {example} {idx} bg={bg.toHex()} {clickExample} />
{/if}
{/each}
{#if $exampleStore.sections["swatches"]}
<div class="mr-4 mb-2">
<div class="bg-stone-300 w-full justify-between flex p-1">
Swatches
<Tooltip>
<button
slot="target"
class={buttonStyle}
let:toggle
on:click={toggle}
>
Options
</button>
<div slot="content">
<button
class={buttonStyle}
on:click={() => {
onToggle("swatches");
}}
>
Hide
</button>
{#if numToShow > 1}
<button
class={buttonStyle}
on:click={() => {
exampleStore.onlySwatches();
}}
>
Focus
</button>
{/if}
</div>
</Tooltip>
</div>
<Swatches />
</div>
{/if}
</div>
{#if modalState !== "closed"}
<Modal
Expand Down
184 changes: 111 additions & 73 deletions src/example/Swatches.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@
import colorStore from "../stores/color-store";
import focusStore from "../stores/focus-store";
import Tooltip from "../components/Tooltip.svelte";
import exampleStore from "../stores/example-store";
import SwatchTooltipContent from "../components/SwatchTooltipContent.svelte";
import { buttonStyle } from "../lib/styles";
$: currentPal = $colorStore.palettes[$colorStore.currentPal];
$: colors = currentPal.colors;
Expand All @@ -29,85 +31,121 @@
selectionClass: "relative top-1 left-1",
},
];
$: sections = $exampleStore.sections as any;
$: numToShow = $exampleStore.examples.filter((x: any) => {
if (x.hidden) {
return false;
}
if (sections.svg && x?.svg) {
return true;
}
if (sections.vega && x.vega) {
return true;
}
return false;
}).length;
</script>

<div
class="flex flex-col p-4 flex-initial"
style={`background-color: ${bg.toHex()}; max-width: 600px`}
>
<div class="flex mb-2 justify-between items-center">
<!-- <span class="text-sm flex flex-col" class:text-white={bg.luminance() < 0.5}>
<span>Click to modify colors</span>
<span>Hold shift to select multiple</span>
</span> -->
</div>
{#each classes as { className, styleMap, selectionClass }}
<div class="flex justify-center flex-wrap">
{#each colors as color, idx}
<Tooltip top={"100px"} allowDrag={true}>
<div slot="content" class="flex flex-col" let:onClick>
<SwatchTooltipContent {color} closeTooltip={onClick} {idx} />
</div>
<div class="mr-4 mb-2">
<div class="bg-stone-300 w-full justify-between flex p-1">
Swatches
<Tooltip>
<button slot="target" class={buttonStyle} let:toggle on:click={toggle}>
Options
</button>
<div slot="content">
<button
class={buttonStyle}
on:click={() => exampleStore.toggleSection("swatches")}
>
Hide
</button>
{#if numToShow > 1}
<button
let:toggle
let:tooltipOpen
slot="target"
class={`${className} ${focusSet.has(idx) ? selectionClass : ""}`}
style={`${styleMap(color)}`}
on:click={(e) => {
const isFocused = focusSet.has(idx);
const shiftKey = e.shiftKey;
if (!tooltipOpen && !isFocused) {
if (shiftKey) {
focusStore.addColor(idx);
} else {
focusStore.setColors([idx]);
}
toggle();
} else if (!tooltipOpen && isFocused) {
if (shiftKey) {
focusStore.toggleColor(idx);
} else {
focusStore.clearColors();
}
} else if (tooltipOpen && !isFocused) {
if (shiftKey) {
focusStore.addColor(idx);
} else {
focusStore.setColors([idx]);
}
} else {
toggle();
if (shiftKey) {
focusStore.toggleColor(idx);
class={buttonStyle}
on:click={() => {
exampleStore.onlySwatches();
}}
>
Focus
</button>
{/if}
</div>
</Tooltip>
</div>
<div
class="flex flex-col p-4 flex-initial"
style={`background-color: ${bg.toHex()}; max-width: 600px`}
>
{#each classes as { className, styleMap, selectionClass }}
<div class="flex justify-center flex-wrap">
{#each colors as color, idx}
<Tooltip top={"100px"} allowDrag={true}>
<div slot="content" class="flex flex-col" let:onClick>
<SwatchTooltipContent {color} closeTooltip={onClick} {idx} />
</div>
<button
let:toggle
let:tooltipOpen
slot="target"
class={`${className} ${focusSet.has(idx) ? selectionClass : ""}`}
style={`${styleMap(color)}`}
on:click={(e) => {
const isFocused = focusSet.has(idx);
const shiftKey = e.shiftKey;
if (!tooltipOpen && !isFocused) {
if (shiftKey) {
focusStore.addColor(idx);
} else {
focusStore.setColors([idx]);
}
toggle();
} else if (!tooltipOpen && isFocused) {
if (shiftKey) {
focusStore.toggleColor(idx);
} else {
focusStore.clearColors();
}
} else if (tooltipOpen && !isFocused) {
if (shiftKey) {
focusStore.addColor(idx);
} else {
focusStore.setColors([idx]);
}
} else {
focusStore.clearColors();
toggle();
if (shiftKey) {
focusStore.toggleColor(idx);
} else {
focusStore.clearColors();
}
}
}
}}
></button>
</Tooltip>
}}
></button>
</Tooltip>
{/each}
</div>
{/each}
<div class="flex flex-wrap justify-center">
{#each colors as color, i}
<button
style={`color: ${color.toHex()}; transform: rotate(${
focusSet.has(i) ? 10 : 0
}deg)`}
class="mr-2 w-16"
on:click={(e) => {
const isMeta = e.metaKey || e.shiftKey || e.ctrlKey;
if (isMeta) {
focusStore.toggleColor(i);
} else {
focusStore.setColors(focusSet.has(i) ? [] : [i]);
}
}}
>
{color.toHex()}
</button>
{/each}
</div>
{/each}
<div class="flex flex-wrap justify-center">
{#each colors as color, i}
<button
style={`color: ${color.toHex()}; transform: rotate(${
focusSet.has(i) ? 10 : 0
}deg)`}
class="mr-2 w-16"
on:click={(e) => {
const isMeta = e.metaKey || e.shiftKey || e.ctrlKey;
if (isMeta) {
focusStore.toggleColor(i);
} else {
focusStore.setColors(focusSet.has(i) ? [] : [i]);
}
}}
>
{color.toHex()}
</button>
{/each}
</div>
</div>

0 comments on commit 0bf0c26

Please sign in to comment.