From a2c086b90c16901a1967f39508a8a1cc5b4cc2fc Mon Sep 17 00:00:00 2001
From: Ruben Fiszel <ruben@rubenfiszel.com>
Date: Fri, 12 May 2023 12:23:14 +0200
Subject: [PATCH] merge Styling and Alignment section

---
 .../settingsPanel/AlignmentEditor.svelte      | 60 ++++++++-----------
 .../settingsPanel/ComponentPanel.svelte       |  3 +-
 .../toggleButton-v2/ToggleButtonGroup.svelte  |  3 +-
 3 files changed, 28 insertions(+), 38 deletions(-)

diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
index 46ec93c186..2eda7ea269 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/AlignmentEditor.svelte
@@ -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}
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index e6d0dcdd43..e03d5f31bb 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -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}
diff --git a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
index 334332410e..5b5f6f75f3 100644
--- a/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
+++ b/frontend/src/lib/components/common/toggleButton-v2/ToggleButtonGroup.svelte
@@ -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>