starred/windmill
1
0
Fork 0
mirror of https://github.com/windmill-labs/windmill.git synced 2026-08-25 00:01:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

merge Styling and Alignment section

Browse Source
This commit is contained in:
Ruben Fiszel
2023-05-12 12:23:14 +02:00
parent 031a4b9e02
commit a2c086b90c
3 changed files with 28 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
+25 -35
View File
@@ -10,7 +10,6 @@
import { getContext } from 'svelte'
import type { AppViewerContext } from '../../types'
import type { AppComponent } from '../component'
import PanelSection from './common/PanelSection.svelte'
import ToggleButtonGroup from '$lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte'
import ToggleButton from '$lib/components/common/toggleButton-v2/ToggleButton.svelte'
@@ -20,38 +19,29 @@
</script>
{#if component.horizontalAlignment || component.verticalAlignment}
<PanelSection title="Alignment">
<div class="flex flex-col gap-2 w-full">
{#if component.horizontalAlignment}
<div class="flex flex-row justify-between items-center">
<div class="text-xs font-semibold">Horizontal</div>
<div>
<ToggleButtonGroup
on:selected={() => (component = component)}
bind:selected={component.horizontalAlignment}
>
<ToggleButton value="left" icon={AlignStartVertical} />
<ToggleButton value="center" icon={AlignCenterVertical} />
<ToggleButton value="right" icon={AlignEndVertical} />
</ToggleButtonGroup>
</div>
</div>
{/if}
{#if component.type !== 'formcomponent' && component.verticalAlignment}
<div class="flex flex-row justify-between items-center">
<div class="text-xs font-semibold">Vertical</div>
<div>
<ToggleButtonGroup
on:selected={() => ($app = $app)}
bind:selected={component.verticalAlignment}
>
<ToggleButton value="top" icon={AlignStartHorizontal} />
<ToggleButton value="center" icon={AlignCenterHorizontal} />
<ToggleButton value="bottom" icon={AlignEndHorizontal} />
</ToggleButtonGroup>
</div>
</div>
{/if}
</div>
</PanelSection>
<div class="flex flex-wrap gap-x-4 gap-y-1 w-full justify-end items-center">
<div class="text-gray-600 text-xs">Alignment</div>
{#if component.horizontalAlignment}
<ToggleButtonGroup
noWFull
on:selected={() => (component = component)}
bind:selected={component.horizontalAlignment}
>
<ToggleButton value="left" icon={AlignStartVertical} />
<ToggleButton value="center" icon={AlignCenterVertical} />
<ToggleButton value="right" icon={AlignEndVertical} />
</ToggleButtonGroup>
{/if}
{#if component.type !== 'formcomponent' && component.verticalAlignment}
<ToggleButtonGroup
noWFull
on:selected={() => ($app = $app)}
bind:selected={component.verticalAlignment}
>
<ToggleButton value="top" icon={AlignStartHorizontal} />
<ToggleButton value="center" icon={AlignCenterHorizontal} />
<ToggleButton value="bottom" icon={AlignEndHorizontal} />
</ToggleButtonGroup>
{/if}
</div>
{/if}
frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+1 -2
View File
@@ -263,8 +263,6 @@
<div class="grow shrink" />
<AlignmentEditor bind:component={componentSettings.item.data} />
{#if Object.keys(ccomponents[component.type].customCss ?? {}).length > 0}
<PanelSection title="Styling">
<div slot="action" class="flex justify-end flex-wrap gap-1">
@@ -286,6 +284,7 @@
Rich Editor
</Button>
</div>
<AlignmentEditor bind:component={componentSettings.item.data} />
{#if viewCssOptions}
<div transition:slide|local class="w-full">
{#each Object.keys(ccomponents[component.type].customCss ?? {}) as name}
frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+2 -1
View File
@@ -12,6 +12,7 @@
import { twMerge } from 'tailwind-merge'
export let selected: any
export let noWFull: boolean = false
const dispatch = createEventDispatcher()
const selectedContent = writable(selected)
@@ -32,7 +33,7 @@
})
</script>
<TabGroup class={twMerge('h-8 flex w-full', $$props.class)}>
<TabGroup class={twMerge(`h-8 flex ${noWFull ? '' : 'w-full'}`, $$props.class)}>
<TabList class="flex bg-gray-100 rounded-md p-0.5 gap-1 h-full">
<slot />
</TabList>