refactor: Figma like alignment handler

frappe · Jun 17, 2024 · 654c39c · 654c39c
1 parent c339eaf
commit 654c39c
Show file tree

Hide file tree

Showing 5 changed files with 162 additions and 21 deletions.
diff --git a/frappe-ui b/frappe-ui
diff --git a/frontend/src/components/BackgroundHandler.vue b/frontend/src/components/BackgroundHandler.vue
@@ -94,7 +94,7 @@ const setBG = (file: { file_url: string }) => {
 	const url = window.location.origin + file.file_url;
 	blockController?.setStyle(
 		"background",
-		`url('${url}') center / ${backgroundSize.value || "cover"} no-repeat`
+		`url('${url}') center / ${backgroundSize.value || "cover"} no-repeat`,
 	);
 };
 

diff --git a/frontend/src/components/BlockFlexLayoutHandler.vue b/frontend/src/components/BlockFlexLayoutHandler.vue
@@ -6,28 +6,13 @@
 		<TabButtons
 			:modelValue="blockController.getStyle('flexDirection') || 'column'"
 			:buttons="[
-				{ label: 'Horizontal', value: 'row' },
-				{ label: 'Vertical', value: 'column' },
+				{ label: 'Horizontal', value: 'row', icon: 'arrow-right', hideLabel: true },
+				{ label: 'Vertical', value: 'column', icon: 'arrow-down', hideLabel: true },
 			]"
 			@update:modelValue="(val: string | number) => blockController.setStyle('flexDirection', val)"
 			class="w-fit self-end [&>div>button[aria-checked='false']]:dark:!bg-transparent [&>div>button[aria-checked='false']]:dark:!text-zinc-400 [&>div>button[aria-checked='true']]:dark:!bg-zinc-700 [&>div>button]:dark:!bg-zinc-700 [&>div>button]:dark:!text-zinc-100 [&>div]:dark:!bg-zinc-800"></TabButtons>
 	</div>
-	<div class="items-top relative flex justify-between" v-if="blockController.isFlex()">
-		<span class="inline-block text-[10px] font-medium uppercase text-gray-600 dark:text-zinc-400">
-			Placement
-		</span>
-		<div
-			class="grid h-16 w-16 grid-cols-3 items-center justify-items-center rounded-sm bg-gray-200 p-1 dark:bg-zinc-800">
-			<div
-				class="h-3 w-3 cursor-pointer rounded-sm bg-gray-300 hover:bg-gray-400 dark:bg-zinc-700 dark:hover:bg-zinc-600"
-				:class="{
-					'bg-gray-700 dark:!bg-zinc-500': activePlacement === option,
-				}"
-				v-for="option in placementOptions"
-				:key="option"
-				@click="setAlignment(option)"></div>
-		</div>
-	</div>
+	<PlacementControl v-if="blockController.isFlex()"></PlacementControl>
 
 	<InlineInput
 		v-if="blockController.isFlex()"
@@ -76,6 +61,7 @@ import blockController from "@/utils/blockController";
 import { TabButtons } from "frappe-ui";
 import { computed } from "vue";
 import InlineInput from "./InlineInput.vue";
+import PlacementControl from "./PlacementControl.vue";
 
 const placementOptions = [
 	"top-left",

diff --git a/frontend/src/components/BlockProperties.vue b/frontend/src/components/BlockProperties.vue
@@ -255,7 +255,7 @@ const layoutSectionProperties = [
 				label: "Type",
 				options: [
 					{
-						label: "Flex",
+						label: "Stack",
 						value: "flex",
 					},
 					{

diff --git a/frontend/src/components/PlacementControl.vue b/frontend/src/components/PlacementControl.vue
@@ -0,0 +1,155 @@
+<template>
+	<div class="items-top relative flex justify-between">
+		<span class="flex items-center text-[10px] font-medium uppercase text-gray-600 dark:text-zinc-400">
+			Placement
+		</span>
+		<div class="relative h-fit w-fit">
+			<div class="group grid grid-cols-3 rounded-sm bg-gray-200 p-1 dark:bg-zinc-800">
+				<div
+					v-for="option in placementOptions"
+					:key="option"
+					class="group/option flex h-5 w-5 cursor-pointer items-center justify-center opacity-50"
+					:class="{
+						'!justify-start':
+							(direction === 'column' && option.includes('left')) ||
+							(direction === 'row' && option.includes('top')),
+						'!justify-end':
+							(direction === 'column' && option.includes('right')) ||
+							(direction === 'row' && option.includes('bottom')),
+					}">
+					<!-- <div
+						class="mx-auto h-1 w-1 rounded-sm bg-gray-400 opacity-0 group-hover/option:hidden group-hover:opacity-100 dark:bg-zinc-700"></div> -->
+					<div
+						@click="setAlignment(option)"
+						@dblclick="setAlignment(option, true)"
+						class="hidden gap-[2px] opacity-0 hover:opacity-100 group-hover/option:flex"
+						:class="{
+							'flex-row': direction === 'row',
+							'flex-col': direction === 'column',
+							'items-center':
+								(direction === 'column' &&
+									(option === 'top-middle' || option === 'middle-middle' || option === 'bottom-middle')) ||
+								(direction === 'row' &&
+									(option === 'middle-left' || option === 'middle-middle' || option === 'middle-right')),
+							'items-end':
+								(direction === 'column' &&
+									(option === 'top-right' || option === 'middle-right' || option === 'bottom-right')) ||
+								(direction === 'row' &&
+									(option === 'bottom-left' || option === 'bottom-middle' || option === 'bottom-right')),
+						}">
+						<div
+							class="rounded-sm bg-gray-500 dark:bg-zinc-500"
+							:class="{
+								'h-2 w-1': direction === 'row',
+								'h-1 w-2': direction === 'column',
+							}"></div>
+						<div
+							class="rounded-sm bg-gray-500 dark:bg-zinc-500"
+							:class="{
+								'h-3 w-1': direction === 'row',
+								'h-1 w-3': direction === 'column',
+							}"></div>
+						<div
+							class="rounded-sm bg-gray-500 dark:bg-zinc-500"
+							:class="{
+								'h-2 w-1': direction === 'row',
+								'h-1 w-2': direction === 'column',
+							}"></div>
+					</div>
+				</div>
+			</div>
+			<div
+				class="pointer-events-none absolute top-0 flex h-full w-full cursor-pointer gap-[2px] rounded-sm p-1.5"
+				:style="{
+					'flex-direction': direction,
+					'justify-content': justifyContent,
+					'align-items': alignItems,
+				}">
+				<div
+					class="rounded-sm bg-gray-600 dark:bg-zinc-400"
+					:class="{
+						'h-1 w-2': direction === 'column',
+						'h-2 w-1': direction === 'row',
+					}"></div>
+				<div
+					class="rounded-sm bg-gray-600 dark:bg-zinc-400"
+					:class="{
+						'h-1 w-3': direction === 'column',
+						'h-3 w-1': direction === 'row',
+					}"></div>
+				<div
+					class="rounded-sm bg-gray-600 dark:bg-zinc-400"
+					:class="{
+						'h-1 w-2': direction === 'column',
+						'h-2 w-1': direction === 'row',
+					}"></div>
+			</div>
+		</div>
+	</div>
+</template>
+<script setup lang="ts">
+import blockController from "@/utils/blockController";
+import { computed } from "vue";
+
+const placementOptions = [
+	"top-left",
+	"top-middle",
+	"top-right",
+	"middle-left",
+	"middle-middle",
+	"middle-right",
+	"bottom-left",
+	"bottom-middle",
+	"bottom-right",
+];
+
+const direction = computed(() => blockController.getStyle("flexDirection") as string);
+const justifyContent = computed(() => blockController.getStyle("justifyContent") as string);
+const alignItems = computed(() => blockController.getStyle("alignItems") as string);
+
+const setAlignment = (alignment: string, spaceBetween: boolean = false) => {
+	const flexDirection = blockController.getStyle("flexDirection");
+
+	switch (alignment) {
+		case "top-right":
+			blockController.setStyle("justifyContent", flexDirection === "row" ? "flex-end" : "flex-start");
+			blockController.setStyle("alignItems", flexDirection === "row" ? "flex-start" : "flex-end");
+			break;
+		case "top-middle":
+			blockController.setStyle("justifyContent", flexDirection === "row" ? "center" : "flex-start");
+			blockController.setStyle("alignItems", flexDirection === "row" ? "flex-start" : "center");
+			break;
+		case "top-left":
+			blockController.setStyle("justifyContent", "flex-start");
+			blockController.setStyle("alignItems", "flex-start");
+			break;
+		case "middle-right":
+			blockController.setStyle("justifyContent", flexDirection === "row" ? "flex-end" : "center");
+			blockController.setStyle("alignItems", flexDirection === "row" ? "center" : "flex-end");
+			break;
+		case "middle-middle":
+			blockController.setStyle("justifyContent", "center");
+			blockController.setStyle("alignItems", "center");
+			break;
+		case "middle-left":
+			blockController.setStyle("justifyContent", flexDirection === "row" ? "flex-start" : "center");
+			blockController.setStyle("alignItems", flexDirection === "row" ? "center" : "flex-start");
+			break;
+		case "bottom-right":
+			blockController.setStyle("justifyContent", "flex-end");
+			blockController.setStyle("alignItems", "flex-end");
+			break;
+		case "bottom-middle":
+			blockController.setStyle("justifyContent", flexDirection === "row" ? "center" : "flex-end");
+			blockController.setStyle("alignItems", flexDirection === "row" ? "flex-end" : "center");
+			break;
+		case "bottom-left":
+			blockController.setStyle("justifyContent", flexDirection === "row" ? "flex-start" : "flex-end");
+			blockController.setStyle("alignItems", flexDirection === "row" ? "flex-end" : "flex-start");
+			break;
+	}
+	if (spaceBetween) {
+		blockController.setStyle("justifyContent", "space-between");
+	}
+};
+</script>
+3 −2		package.json
+1 −0		src/components/Breadcrumbs.vue
+7 −4		src/components/Checkbox.vue
+36 −0		src/components/DatePicker.story.vue
+108 −72		src/components/DatePicker.vue
+326 −0		src/components/DateRangePicker.vue
+405 −0		src/components/DateTimePicker.vue
+3 −3		src/components/FeatherIcon.vue
+1 −1		src/components/FileUploader.vue
+4 −4		src/components/ListFilter/ListFilter.vue
+2 −2		src/components/ListFilter/SearchComplete.vue
+12 −10		src/components/ListView/ListGroupHeader.vue
+3 −1		src/components/ListView/ListGroupRows.vue
+10 −8		src/components/ListView/ListGroups.vue
+1 −1		src/components/ListView/ListHeader.vue
+1 −1		src/components/ListView/ListRow.vue
+14 −2		src/components/ListView/ListView.vue
+16 −10		src/components/Popover.vue
+4 −4		src/components/Switch.vue
+17 −3		src/components/TabButtons.vue
+2 −2		src/components/TextEditor/InsertVideo.vue
+1 −1		src/components/TextEditor/TextEditor.vue
+1 −1		src/components/TextEditor/image-extension.js
+1 −1		src/components/TextEditor/mention.js
+1 −1		src/components/Tooltip/Tooltip.vue
+2 −2		src/components/toast.js
+4 −2		src/fonts/Inter/inter.css
+2 −0		src/index.js
+6 −6		src/resources/documentResource.js
+7 −7		src/resources/listResource.js
+1 −1		src/resources/plugin.js
+1 −1		src/utils/call.js
+1 −1		src/utils/confirmDialog.js
+1 −1		src/utils/debounce.ts
+1 −1		src/utils/frappeRequest.js
+1 −1		src/utils/markdown.js
+1 −1		src/utils/pageMeta.js