granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

reduce item gap and tweak sizing in ElementPicker

Browse source
This commit is contained in:
Justin Edmund 2026-01-04 19:53:06 -08:00
parent 816c252ba3
commit ebfe40b219
2 changed files with 42 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/lib/components/ui/element-picker/ElementPicker.svelte
View file

@ -95,10 +95,11 @@
{options} {options}
value={Array.isArray(value) ? value : value !== undefined ? [value] : []} value={Array.isArray(value) ? value : value !== undefined ? [value] : []}
onValueChange={handleMultipleChange} onValueChange={handleMultipleChange}
{size} size="medium"
{contained} {contained}
disabled={disabled} disabled={disabled}
placeholder="Select elements..." placeholder="Select elements..."
fullWidth={true}
class={className} class={className}
/> />
{:else} {:else}
@ -106,10 +107,11 @@
{options} {options}
value={typeof value === 'number' ? value : undefined} value={typeof value === 'number' ? value : undefined}
onValueChange={handleSingleChange} onValueChange={handleSingleChange}
{size} size="medium"
{contained} {contained}
disabled={disabled} disabled={disabled}
placeholder="Select element" placeholder="Select element"
fullWidth={true}
class={className} class={className}
/> />
{/if} {/if}

76
src/lib/components/ui/element-picker/ElementPickerSegmented.svelte
View file

@ -101,7 +101,7 @@
type="multiple" type="multiple"
value={stringValue as string[]} value={stringValue as string[]}
onValueChange={handleMultipleChange} onValueChange={handleMultipleChange}
class="group" class="element-group"
{disabled} {disabled}
> >
{#each elements as element} {#each elements as element}
@ -109,13 +109,13 @@
{#snippet children()} {#snippet children()}
<ToggleGroup.Item <ToggleGroup.Item
value={String(element)} value={String(element)}
class="item" class="element-item"
{disabled} {disabled}
> >
<img <img
src={getElementImage(element)} src={getElementImage(element)}
alt={getLabel(element)} alt={getLabel(element)}
class="image" class="element-image"
/> />
</ToggleGroup.Item> </ToggleGroup.Item>
{/snippet} {/snippet}
@ -127,7 +127,7 @@
type="single" type="single"
value={stringValue as string | undefined} value={stringValue as string | undefined}
onValueChange={handleSingleChange} onValueChange={handleSingleChange}
class="group" class="element-group"
{disabled} {disabled}
> >
{#each elements as element} {#each elements as element}
@ -135,13 +135,13 @@
{#snippet children()} {#snippet children()}
<ToggleGroup.Item <ToggleGroup.Item
value={String(element)} value={String(element)}
class="item" class="element-item"
{disabled} {disabled}
> >
<img <img
src={getElementImage(element)} src={getElementImage(element)}
alt={getLabel(element)} alt={getLabel(element)}
class="image" class="element-image"
/> />
</ToggleGroup.Item> </ToggleGroup.Item>
{/snippet} {/snippet}
@ -161,7 +161,7 @@
type="multiple" type="multiple"
value={stringValue as string[]} value={stringValue as string[]}
onValueChange={handleMultipleChange} onValueChange={handleMultipleChange}
class="group" class="element-group"
{disabled} {disabled}
> >
{#each elements as element} {#each elements as element}
@ -169,10 +169,10 @@
{#snippet children()} {#snippet children()}
<ToggleGroup.Item <ToggleGroup.Item
value={String(element)} value={String(element)}
class="item" class="element-item"
{disabled} {disabled}
> >
<img src={getElementImage(element)} alt={getLabel(element)} class="image" /> <img src={getElementImage(element)} alt={getLabel(element)} class="element-image" />
</ToggleGroup.Item> </ToggleGroup.Item>
{/snippet} {/snippet}
</Tooltip> </Tooltip>
@ -183,7 +183,7 @@
type="single" type="single"
value={stringValue as string | undefined} value={stringValue as string | undefined}
onValueChange={handleSingleChange} onValueChange={handleSingleChange}
class="group" class="element-group"
{disabled} {disabled}
> >
{#each elements as element} {#each elements as element}
@ -191,10 +191,10 @@
{#snippet children()} {#snippet children()}
<ToggleGroup.Item <ToggleGroup.Item
value={String(element)} value={String(element)}
class="item" class="element-item"
{disabled} {disabled}
> >
<img src={getElementImage(element)} alt={getLabel(element)} class="image" /> <img src={getElementImage(element)} alt={getLabel(element)} class="element-image" />
</ToggleGroup.Item> </ToggleGroup.Item>
{/snippet} {/snippet}
</Tooltip> </Tooltip>
@ -229,13 +229,13 @@
} }
} }
:global(.group) { :global(.element-group) {
display: flex; display: flex;
gap: $unit-half; gap: $unit-quarter;
align-items: center; align-items: center;
} }
:global(.item) { :global(.element-item) {
all: unset; all: unset;
cursor: pointer; cursor: pointer;
border-radius: $full-corner; border-radius: $full-corner;
@ -243,87 +243,87 @@
@include smooth-transition($duration-quick, background-color, opacity); @include smooth-transition($duration-quick, background-color, opacity);
} }
:global(.item:focus-visible) { :global(.element-item:focus-visible) {
@include focus-ring($blue); @include focus-ring($blue);
} }
:global(.item:disabled) { :global(.element-item:disabled) {
opacity: 0.5; opacity: 0.5;
cursor: not-allowed; cursor: not-allowed;
} }
// Element-specific hover and selected states // Element-specific hover and selected states
:global(.item[data-value='0']:hover:not(:disabled)) { :global(.element-item[data-value='0']:hover:not(:disabled)) {
background-color: var(--null-nav-hover-bg); background-color: var(--null-nav-hover-bg);
} }
:global(.item[data-value='0'][data-state='on']:not(:hover)) { :global(.element-item[data-value='0'][data-state='on']) {
background-color: var(--null-nav-selected-bg); background-color: var(--null-nav-selected-bg);
} }
:global(.item[data-value='1']:hover:not(:disabled)) { :global(.element-item[data-value='1']:hover:not(:disabled)) {
background-color: var(--wind-nav-hover-bg); background-color: var(--wind-nav-hover-bg);
} }
:global(.item[data-value='1'][data-state='on']:not(:hover)) { :global(.element-item[data-value='1'][data-state='on']) {
background-color: var(--wind-nav-selected-bg); background-color: var(--wind-nav-selected-bg);
} }
:global(.item[data-value='2']:hover:not(:disabled)) { :global(.element-item[data-value='2']:hover:not(:disabled)) {
background-color: var(--fire-nav-hover-bg); background-color: var(--fire-nav-hover-bg);
} }
:global(.item[data-value='2'][data-state='on']:not(:hover)) { :global(.element-item[data-value='2'][data-state='on']) {
background-color: var(--fire-nav-selected-bg); background-color: var(--fire-nav-selected-bg);
} }
:global(.item[data-value='3']:hover:not(:disabled)) { :global(.element-item[data-value='3']:hover:not(:disabled)) {
background-color: var(--water-nav-hover-bg); background-color: var(--water-nav-hover-bg);
} }
:global(.item[data-value='3'][data-state='on']:not(:hover)) { :global(.element-item[data-value='3'][data-state='on']) {
background-color: var(--water-nav-selected-bg); background-color: var(--water-nav-selected-bg);
} }
:global(.item[data-value='4']:hover:not(:disabled)) { :global(.element-item[data-value='4']:hover:not(:disabled)) {
background-color: var(--earth-nav-hover-bg); background-color: var(--earth-nav-hover-bg);
} }
:global(.item[data-value='4'][data-state='on']:not(:hover)) { :global(.element-item[data-value='4'][data-state='on']) {
background-color: var(--earth-nav-selected-bg); background-color: var(--earth-nav-selected-bg);
} }
:global(.item[data-value='5']:hover:not(:disabled)) { :global(.element-item[data-value='5']:hover:not(:disabled)) {
background-color: var(--dark-nav-hover-bg); background-color: var(--dark-nav-hover-bg);
} }
:global(.item[data-value='5'][data-state='on']:not(:hover)) { :global(.element-item[data-value='5'][data-state='on']) {
background-color: var(--dark-nav-selected-bg); background-color: var(--dark-nav-selected-bg);
} }
:global(.item[data-value='6']:hover:not(:disabled)) { :global(.element-item[data-value='6']:hover:not(:disabled)) {
background-color: var(--light-nav-hover-bg); background-color: var(--light-nav-hover-bg);
} }
:global(.item[data-value='6'][data-state='on']:not(:hover)) { :global(.element-item[data-value='6'][data-state='on']) {
background-color: var(--light-nav-selected-bg); background-color: var(--light-nav-selected-bg);
} }
:global(.image) { :global(.element-image) {
display: block; display: block;
} }
// Size variants // Size variants
.small { .small {
:global(.item) { :global(.element-item) {
padding: $unit-half; padding: $unit-half;
} }
:global(.image) { :global(.element-image) {
width: $unit-3x; width: calc($unit * 3.25);
height: $unit-3x; height: calc($unit * 3.25);
} }
} }
.regular { .regular {
:global(.item) { :global(.element-item) {
padding: $unit-half; padding: $unit-half;
} }
:global(.image) { :global(.element-image) {
width: $unit-4x; width: $unit-4x;
height: $unit-4x; height: $unit-4x;
} }