From bac994b6bfb8448883a3cfb0d0a4df50360cdc7a Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Fri, 6 Dec 2024 14:59:27 +0100
Subject: [PATCH 1/2] fix(ui): improve design of collapse button

- The `CoreColumn` displayed the collapse arrow in the wrong direction
- The `CoreSection` title wasn't vertical aligned with the button
- Remove dead CSS code
---
 .../src/components/core/layout/CoreColumn.vue | 21 +------------------
 .../components/core/layout/CoreSection.vue    |  1 +
 .../components/core/layout/CoreSidebar.vue    | 21 -------------------
 3 files changed, 2 insertions(+), 41 deletions(-)

diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
index 60d89b164..3cdadf173 100644
--- a/src/ui/src/components/core/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -17,7 +17,7 @@
 				v-if="isCollapsible"
 				v-model="isCollapsed"
 				class="collapser"
-				direction="left-right"
+				direction="top-bottom"
 			/>
 		</div>
 		<div v-if="isCollapsed && fields.title.value" class="collapsedTitle">
@@ -212,25 +212,6 @@ watch(
 	flex: 0 0 32px;
 }
 
-.CoreColumn > .header > .collapser > .collapserArrow {
-	transition: all 0.5s ease-in-out;
-	transform: rotate(0deg);
-}
-
-.CoreColumn:not(.collapsibleToRight).collapsed
-	> .header
-	> .collapser
-	> .collapserArrow {
-	transform: rotate(180deg);
-}
-
-.CoreColumn.collapsibleToRight:not(.collapsed)
-	> .header
-	> .collapser
-	> .collapserArrow {
-	transform: rotate(180deg);
-}
-
 .CoreColumn.collapsibleToRight > .header {
 	justify-content: left;
 }
diff --git a/src/ui/src/components/core/layout/CoreSection.vue b/src/ui/src/components/core/layout/CoreSection.vue
index 1d1f1b828..516ae3c8c 100644
--- a/src/ui/src/components/core/layout/CoreSection.vue
+++ b/src/ui/src/components/core/layout/CoreSection.vue
@@ -112,6 +112,7 @@ const isCollapsed = ref<boolean>(
 	margin: 16px 16px 0 16px;
 	display: grid;
 	grid-template-columns: 1fr auto;
+	align-items: center;
 }
 .CoreSection__title--collapsed {
 	margin: 16px;
diff --git a/src/ui/src/components/core/layout/CoreSidebar.vue b/src/ui/src/components/core/layout/CoreSidebar.vue
index 6dc100726..868229b8c 100644
--- a/src/ui/src/components/core/layout/CoreSidebar.vue
+++ b/src/ui/src/components/core/layout/CoreSidebar.vue
@@ -137,23 +137,6 @@ onMounted(() => {
 	margin-bottom: 16px;
 }
 
-.collapserContainer > .collapser {
-	flex: 0 0 32px;
-}
-
-.collapserContainer .collapserArrow {
-	transition: all 0.5s ease-in-out;
-	transform: rotate(0deg);
-}
-
-.CoreSidebar.collapsed .collapserArrow {
-	transform: rotate(180deg);
-}
-
-.collapserContainer > .collapser:hover {
-	background: var(--separatorColor);
-}
-
 @media only screen and (max-width: 768px) {
 	.CoreSidebar {
 		min-width: 100%;
@@ -164,9 +147,5 @@ onMounted(() => {
 	.CoreSidebar.collapsed > .collapserContainer {
 		margin-bottom: 0;
 	}
-
-	.collapserContainer > .collapser {
-		transform: rotate(90deg);
-	}
 }
 </style>

From 403e6d4fef1531d6616f77e36e89217e65648e20 Mon Sep 17 00:00:00 2001
From: Alexandre Rousseau <alexandre@rsseau.fr>
Date: Sat, 7 Dec 2024 12:16:16 +0100
Subject: [PATCH 2/2] fix(ui): adapt collapser arrow direction for columns

---
 .../core/base/BaseCollapseButton.vue          | 30 ++++++++++++++-----
 .../src/components/core/layout/CoreColumn.vue | 12 ++++++--
 2 files changed, 32 insertions(+), 10 deletions(-)

diff --git a/src/ui/src/components/core/base/BaseCollapseButton.vue b/src/ui/src/components/core/base/BaseCollapseButton.vue
index aaa712928..0516aeffc 100644
--- a/src/ui/src/components/core/base/BaseCollapseButton.vue
+++ b/src/ui/src/components/core/base/BaseCollapseButton.vue
@@ -9,21 +9,37 @@
 	</button>
 </template>
 
+<script lang="ts">
+export type Direction =
+	| "left-right"
+	| "top-bottom"
+	| "bottom-top"
+	| "right-left";
+</script>
+
 <script setup lang="ts">
 import { computed, PropType } from "vue";
 
 const props = defineProps({
-	direction: {
-		type: String as PropType<"left-right" | "top-bottom">,
-		required: true,
-	},
+	direction: { type: String as PropType<Direction>, required: true },
 });
 
 const isCollapsed = defineModel({ type: Boolean, required: true });
 
-const icon = computed(() =>
-	props.direction === "left-right" ? "chevron_left" : "keyboard_arrow_up",
-);
+const icon = computed(() => {
+	switch (props.direction) {
+		case "left-right":
+			return "chevron_left";
+		case "top-bottom":
+			return "keyboard_arrow_up";
+		case "right-left":
+			return "chevron_right";
+		case "bottom-top":
+			return "keyboard_arrow_down";
+		default:
+			return "keyboard_arrow_up";
+	}
+});
 </script>
 
 <style scoped>
diff --git a/src/ui/src/components/core/layout/CoreColumn.vue b/src/ui/src/components/core/layout/CoreColumn.vue
index 3cdadf173..2a55154c2 100644
--- a/src/ui/src/components/core/layout/CoreColumn.vue
+++ b/src/ui/src/components/core/layout/CoreColumn.vue
@@ -17,7 +17,7 @@
 				v-if="isCollapsible"
 				v-model="isCollapsed"
 				class="collapser"
-				direction="top-bottom"
+				:direction="collapseDirection"
 			/>
 		</div>
 		<div v-if="isCollapsed && fields.title.value" class="collapsedTitle">
@@ -48,7 +48,6 @@ import {
 	startCollapsed,
 	isCollapsible as isCollapsibleField,
 } from "@/renderer/sharedStyleFields";
-import BaseCollapseButton from "../base/BaseCollapseButton.vue";
 
 const description =
 	"A layout component that organizes its child components in columns. Must be inside a Column Container component.";
@@ -100,7 +99,10 @@ export default {
 <script setup lang="ts">
 import { computed, ComputedRef, inject, Ref, ref, watch } from "vue";
 import injectionKeys from "@/injectionKeys";
-import BaseContainer from "../base/BaseContainer.vue";
+import BaseContainer from "@/components/core/base/BaseContainer.vue";
+import BaseCollapseButton from "@/components/core/base/BaseCollapseButton.vue";
+import type { Direction } from "@/components/core/base/BaseCollapseButton.vue";
+
 const instancePath = inject(injectionKeys.instancePath);
 const instanceData = inject(injectionKeys.instanceData);
 const wf = inject(injectionKeys.core);
@@ -138,6 +140,10 @@ const isCollapsibleToRight = computed(
 		columnsData.value?.value?.minimumNonCollapsiblePosition,
 );
 
+const collapseDirection = computed<Direction>(() =>
+	isCollapsibleToRight.value ? "right-left" : "left-right",
+);
+
 const columnsData: ComputedRef<Ref> = computed(() => {
 	for (let i = -1; i > -1 * instancePath.length; i--) {
 		const item = instancePath.at(i);