Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use Popover component in Layer controls #754

Merged
merged 3 commits into from
Jan 10, 2025
+57 −151
Merged

Use Popover component in Layer controls #754

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
bcf5fda
use Popover component in ColorPicker/OpacityControl/ResizeControl
jamesscottbrown Jan 10, 2025
2977286
add changeet file
jamesscottbrown Jan 10, 2025
0b61385
merge
jamesscottbrown Jan 10, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/popover-layercontrols.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@ldn-viz/ui': minor
---

CHANGED: use `Popover` component in `ColorPicker`/`OpacityControl`/`ResizeControl`, rather than duplicating implementation
83 changes: 25 additions & 58 deletions packages/ui/src/lib/layerControl/ColorPicker.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,5 @@
<script lang="ts">
import { createPopover } from '@melt-ui/svelte';
import { fade } from 'svelte/transition';

import { XMark } from '@steeze-ui/heroicons';
import { Icon } from '@steeze-ui/svelte-icon';

const {
elements: { trigger, content, arrow, close },
states: { open }
} = createPopover({
forceVisible: true,
positioning: { placement: 'top' }
});
import Popover from '../popover/Popover.svelte';

export let color = 1;

Expand All @@ -29,52 +17,31 @@
'#353D42',
'#000000'
];
</script>

<div {...$trigger} use:trigger class="w-fit h-fit" title="Set layer color">
<div class="w-6 h-6 bg-white">
<div class="w-4 h-4 relative left-[4px] top-[4px]" style:background={color}></div>
</div>
</div>

{#if $open}
<div
{...$content}
use:content
transition:fade={{ duration: 100 }}
class="z-50 w-64 bg-core-grey-50 p-4 shadow"
>
<div {...$arrow} use:arrow />

<div class="text-sm flex flex-col space-y-2 text-core-grey-800">
<p class="font-bold">Color</p>
<span class="text-sm">Click to assign a color to this layer.</span>
let openStore;
</script>

<div class="flex flex-wrap gap-2">
{#each colors as colorOption}
<button
class="w-6 h-6 bg-white"
style:background={colorOption}
on:click={() => {
color = colorOption;
}}
use:close
></button>
{/each}
</div>
<Popover bind:openStore>
<svelte:fragment slot="hint">
<div class="w-6 h-6 bg-white">
<div class="w-4 h-4 relative left-[4px] top-[4px]" style:background={color}></div>
</div>

<button class="close" {...$close} use:close>
<Icon src={XMark} theme="solid" class="w-8 h-8" aria-hidden="true" />
</button>
</svelte:fragment>

<svelte:fragment slot="title">Color</svelte:fragment>

<span class="text-sm">Click to assign a color to this layer.</span>

<div class="flex flex-wrap gap-2">
{#each colors as colorOption}
<button
class="w-6 h-6 bg-white"
style:background={colorOption}
on:click={() => {
color = colorOption;
$openStore = false;
}}
/>
{/each}
</div>
{/if}

<style>
.close {
@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center;
@apply text-white transition-colors hover:bg-core-grey-100 hover:text-core-grey-800;
@apply focus-visible:ring focus-visible:ring-core-blue-600 focus-visible:ring-offset-2;
@apply bg-core-grey-800 p-0 text-sm font-medium;
}
</style>
</Popover>
58 changes: 11 additions & 47 deletions packages/ui/src/lib/layerControl/OpacityControl.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,23 @@
<script lang="ts">
import { createPopover } from '@melt-ui/svelte';
import { fade } from 'svelte/transition';

import Input from '../input/Input.svelte';

import TransparencyIcon from './TransparencyIcon.svelte';
import { XMark } from '@steeze-ui/heroicons';
import { Icon } from '@steeze-ui/svelte-icon';

const {
elements: { trigger, content, arrow, close },
states: { open }
} = createPopover({
forceVisible: true,
positioning: { placement: 'top' }
});
import Popover from '../popover/Popover.svelte';

export let opacity = 1;
</script>

<div {...$trigger} use:trigger class="w-fit h-fit" title="Set layer opacity">
<TransparencyIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
</div>

{#if $open}
<div
{...$content}
use:content
transition:fade={{ duration: 100 }}
class="z-50 w-64 bg-core-grey-50 p-4 shadow"
>
<div {...$arrow} use:arrow />
<Popover>
<svelte:fragment slot="hint">
<TransparencyIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
</svelte:fragment>

<div class="text-sm flex flex-col space-y-2 text-core-grey-800">
<p class="font-bold">Opacity</p>
<svelte:fragment slot="title">Opacity</svelte:fragment>

<div class="flex gap-4 items-center pt-2">
<div class="w-40">
<input type="range" bind:value={opacity} min="0" max="1" step="0.01" />
</div>
<div class="w-16"><Input bind:value={opacity} type="number" min="0" max="1"></Input></div>
</div>
<div class="flex gap-4 items-center pt-2">
<div class="w-32">
<input type="range" class="w-32" bind:value={opacity} min="0" max="1" step="0.01" />
</div>

<button class="close" {...$close} use:close>
<Icon src={XMark} theme="solid" class="w-8 h-8" aria-hidden="true" />
</button>
<div class="w-16"><Input bind:value={opacity} type="number" min="0" max="1"></Input></div>
</div>
{/if}

<style>
.close {
@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center;
@apply text-white transition-colors hover:bg-core-grey-100 hover:text-core-grey-800;
@apply focus-visible:ring focus-visible:ring-core-blue-600 focus-visible:ring-offset-2;
@apply bg-core-grey-800 p-0 text-sm font-medium;
}
</style>
</Popover>
56 changes: 10 additions & 46 deletions packages/ui/src/lib/layerControl/ResizeControl.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,59 +1,23 @@
<script lang="ts">
import { createPopover } from '@melt-ui/svelte';
import { fade } from 'svelte/transition';

import ResizeIcon from './ResizeIcon.svelte';
import { XMark } from '@steeze-ui/heroicons';
import { Icon } from '@steeze-ui/svelte-icon';

const {
elements: { trigger, content, arrow, close },
states: { open }
} = createPopover({
forceVisible: true,
positioning: { placement: 'top' }
});
import Popover from '../popover/Popover.svelte';

export let size = 1;

export let minSize;
export let maxSize;
</script>

<div {...$trigger} use:trigger class="w-fit h-fit" title="Adjust marker size">
<ResizeIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
</div>

{#if $open}
<div
{...$content}
use:content
transition:fade={{ duration: 100 }}
class="z-50 w-64 bg-core-grey-50 p-4 shadow"
>
<div {...$arrow} use:arrow />
<Popover>
<svelte:fragment slot="hint">
<ResizeIcon class="w-[18px] h-[18px] ml-0.5" aria-hidden="true" />
</svelte:fragment>

<div class="text-sm flex flex-col space-y-2 text-core-grey-800">
<p class="font-bold">Marker size</p>
<svelte:fragment slot="title">Marker size</svelte:fragment>

<div class="flex gap-4 items-center pt-2">
<div class="w-40">
<input type="range" bind:value={size} min={minSize} max={maxSize} step="0.01" />
</div>
</div>
<div class="flex gap-4 items-center pt-2">
<div class="w-40">
<input type="range" bind:value={size} min={minSize} max={maxSize} step="0.01" />
</div>

<button class="close" {...$close} use:close>
<Icon src={XMark} theme="solid" class="w-8 h-8" aria-hidden="true" />
</button>
</div>
{/if}

<style>
.close {
@apply absolute right-1.5 top-1.5 flex h-7 w-7 items-center justify-center;
@apply text-white transition-colors hover:bg-core-grey-100 hover:text-core-grey-800;
@apply focus-visible:ring focus-visible:ring-core-blue-600 focus-visible:ring-offset-2;
@apply bg-core-grey-800 p-0 text-sm font-medium;
}
</style>
</Popover>
6 changes: 6 additions & 0 deletions packages/ui/src/lib/popover/Popover.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,12 @@
* text size for the tooltip target
*/
export let hintSize: 'sm' | 'md' | 'lg' | undefined = undefined;

/**
* Store controlling whether popover is open.
*/
export let openStore;
$: openStore = open;
</script>

<Button variant="text" size={hintSize} class="!p-0" emphasis="secondary">
Expand Down
Loading