SemianiakaVY/openpencil
1
0
Fork 0
Code Issues Pull requests Actions 1 Packages Projects Releases Wiki Activity

fix(app): clarify layout spacing icons

Browse source
This commit is contained in:
Danila Poyarkov 2026-05-01 11:26:33 +03:00
parent 9a1e67bbe3
commit 438a2bf901
2 changed files with 32 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

36
src/components/properties/LayoutSection/FlexControls.vue
View file

@ -60,23 +60,37 @@ function isAlignmentActive(primary: LayoutAlign, counter: string) {
<ScrubInput
data-test-id="layout-gap-input"
class="min-w-0 flex-1"
:icon="ctx.node.layoutMode === 'VERTICAL' ? '↕' : '↔'"
:label="ctx.node.layoutMode === 'VERTICAL' ? panels.verticalGap : panels.horizontalGap"
:model-value="Math.round(ctx.node.itemSpacing)"
:min="0"
@update:model-value="ctx.updateProp('itemSpacing', $event)"
@commit="(v: number, p: number) => ctx.commitProp('itemSpacing', v, p)"
/>
>
<template #icon>
<icon-lucide-align-vertical-space-between
v-if="ctx.node.layoutMode === 'VERTICAL'"
class="size-3.5"
/>
<icon-lucide-align-horizontal-space-between v-else class="size-3.5" />
</template>
</ScrubInput>
<ScrubInput
data-test-id="layout-cross-gap-input"
class="min-w-0 flex-1"
:icon="ctx.node.layoutMode === 'VERTICAL' ? '↔' : '↕'"
:label="ctx.node.layoutMode === 'VERTICAL' ? panels.horizontalGap : panels.verticalGap"
:model-value="Math.round(ctx.node.counterAxisSpacing)"
:min="0"
@update:model-value="ctx.updateProp('counterAxisSpacing', $event)"
@commit="(v: number, p: number) => ctx.commitProp('counterAxisSpacing', v, p)"
/>
>
<template #icon>
<icon-lucide-align-horizontal-space-between
v-if="ctx.node.layoutMode === 'VERTICAL'"
class="size-3.5"
/>
<icon-lucide-align-vertical-space-between v-else class="size-3.5" />
</template>
</ScrubInput>
</template>
<template v-else>
<div
@ -86,7 +100,11 @@ function isAlignmentActive(primary: LayoutAlign, counter: string) {
class="group flex h-[26px] min-w-0 flex-1 items-center rounded border border-border bg-input focus-within:border-accent"
>
<span class="flex shrink-0 items-center justify-center self-stretch px-[5px] text-muted">
{{ ctx.node.layoutMode === 'VERTICAL' ? '↕' : '↔' }}
<icon-lucide-align-vertical-space-between
v-if="ctx.node.layoutMode === 'VERTICAL'"
class="size-3.5"
/>
<icon-lucide-align-horizontal-space-between v-else class="size-3.5" />
</span>
<span class="flex-1 truncate text-xs text-surface">{{ panels.auto }}</span>
<SelectRoot :model-value="'AUTO'" @update:model-value="setGapMode">
@ -126,12 +144,18 @@ function isAlignmentActive(primary: LayoutAlign, counter: string) {
<ScrubInput
data-test-id="layout-gap-input"
class="w-full"
:icon="ctx.node.layoutMode === 'VERTICAL' ? '↕' : '↔'"
:model-value="Math.round(ctx.node.itemSpacing)"
:min="0"
@update:model-value="ctx.updateProp('itemSpacing', $event)"
@commit="(v: number, p: number) => ctx.commitProp('itemSpacing', v, p)"
>
<template #icon>
<icon-lucide-align-vertical-space-between
v-if="ctx.node.layoutMode === 'VERTICAL'"
class="size-3.5"
/>
<icon-lucide-align-horizontal-space-between v-else class="size-3.5" />
</template>
<template #suffix>
<SelectRoot :model-value="'FIXED'" @update:model-value="setGapMode">
<SelectTrigger

4
src/components/properties/LayoutSection/PaddingControls.vue
View file

@ -27,7 +27,7 @@ const paddingSides: Array<{ prop: PaddingProp; icon: string }> = [
@commit="ctx.commitHorizontalPadding"
>
<template #icon>
<icon-lucide-panel-left-right-dashed class="size-3.5" />
<icon-lucide-separator-vertical class="size-3.5" />
</template>
</ScrubInput>
<ScrubInput
@ -38,7 +38,7 @@ const paddingSides: Array<{ prop: PaddingProp; icon: string }> = [
@commit="ctx.commitVerticalPadding"
>
<template #icon>
<icon-lucide-panel-top-bottom-dashed class="size-3.5" />
<icon-lucide-separator-horizontal class="size-3.5" />
</template>
</ScrubInput>
</div>