refactor: Update Sidebar, Canvas, and Ruler components to support dyn…

…amic content height
YaoApp · Jun 3, 2024 · a3df5ff · a3df5ff
1 parent a0753be
commit a3df5ff
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 36 deletions.
diff --git a/packages/xgen/components/edit/FlowBuilder/components/Builder/index.tsx b/packages/xgen/components/edit/FlowBuilder/components/Builder/index.tsx
@@ -47,7 +47,11 @@ const Index = (props: IProps) => {
 			removeAttribution={props.removeAttribution}
 		>
 			<div className='builder'>
-				<Sidebar height={props.height} visible={props.showSidebar} />
+				<Sidebar
+					height={props.height}
+					visible={props.showSidebar}
+					toggleSidebar={props.toggleSidebar}
+				/>
 				<Canvas {...props} />
 			</div>
 		</BuilderProvider>

diff --git a/packages/xgen/components/edit/FlowBuilder/components/Canvas/index.tsx b/packages/xgen/components/edit/FlowBuilder/components/Canvas/index.tsx
@@ -13,15 +13,13 @@ interface IProps {
 	width: number
 	height: number
 	value?: FlowValue
-	showSidebar: boolean
 	fixed: boolean
 	offsetTop: number
 
 	id: string
 	name?: string
 	__namespace?: string
 	__bind?: string
-	toggleSidebar: () => void
 }
 
 const Index = (props: IProps) => {
@@ -393,19 +391,9 @@ const Index = (props: IProps) => {
 				icon={openPresets ? 'icon-plus-circle' : undefined}
 				children={openPresets ? <Presets keywords={keywords} /> : undefined}
 			/>
-			<div style={{ width: props.width }}>
+			<div className='title-bar' style={{ width: props.width }}>
 				<div className='head'>
 					<div className='title'>
-						<a
-							onClick={props.toggleSidebar}
-							style={{ marginRight: 6 }}
-							className='flex align_center'
-						>
-							<Icon
-								name={props.showSidebar ? 'material-first_page' : 'material-last_page'}
-								size={18}
-							/>
-						</a>
 						<Icon
 							name={IconName(props.value?.flow?.icon)}
 							size={IconSize(props.value?.flow?.icon)}

diff --git a/packages/xgen/components/edit/FlowBuilder/components/Sidebar/index.tsx b/packages/xgen/components/edit/FlowBuilder/components/Sidebar/index.tsx
@@ -5,31 +5,43 @@ import { useBuilderContext } from '../Builder/Provider'
 interface IProps {
 	height?: number
 	visible?: boolean
+	toggleSidebar: () => void
 }
 
 const Index = (props: IProps) => {
 	const className = 'sidebar' + (!props.visible ? ' collapsed' : '')
 	const { setting } = useBuilderContext()
 	return (
-		<div className={className}>
-			<div className='content' style={{ maxHeight: props.height, minHeight: props.height }}>
-				{setting?.types?.map((type, index) => (
-					<div
-						key={`${type.name}|${index}`}
-						className='item'
-						draggable={true}
-						unselectable='on'
-						onDragStart={(e) => e.dataTransfer.setData('application/reactflow', type.name)}
-					>
-						<Icon
-							size={IconSize(type.icon, 14)}
-							name={IconName(type.icon)}
-							color={type.color}
-							className='mr_6'
-						/>
-						{type.label ? type.label : type.name}
-					</div>
-				))}
+		<div className='relative'>
+			<a
+				onClick={props.toggleSidebar}
+				className='toggle-sidebar'
+				style={{ top: (props.height || 300 - 32) / 2 }}
+			>
+				<Icon name={props.visible ? 'material-first_page' : 'material-last_page'} size={18} />
+			</a>
+			<div className={className}>
+				<div className='content' style={{ maxHeight: props.height, minHeight: props.height }}>
+					{setting?.types?.map((type, index) => (
+						<div
+							key={`${type.name}|${index}`}
+							className='item'
+							draggable={true}
+							unselectable='on'
+							onDragStart={(e) =>
+								e.dataTransfer.setData('application/reactflow', type.name)
+							}
+						>
+							<Icon
+								size={IconSize(type.icon, 14)}
+								name={IconName(type.icon)}
+								color={type.color}
+								className='mr_6'
+							/>
+							<span className='label'>{type.label ? type.label : type.name}</span>
+						</div>
+					))}
+				</div>
 			</div>
 		</div>
 	)

diff --git a/packages/xgen/components/edit/FlowBuilder/index.less b/packages/xgen/components/edit/FlowBuilder/index.less
@@ -71,16 +71,19 @@
 
 		.head {
 			display: flex;
-			justify-content: 'between';
+			justify-content: space-between;
 			align-items: center;
-			padding: 12px;
+			margin: 12px;
+			background: var(--color_bg);
+			border-radius: var(--radius);
 
 			.title {
 				font-size: 14px;
 				font-weight: 500;
 				width: 100%;
 				height: 38px;
 				display: flex;
+				margin-left: 12px;
 				align-items: center;
 			}
 
@@ -92,15 +95,44 @@
 			}
 		}
 
+		.title-bar {
+			transition: width 0.3s ease;
+		}
+
+		.toggle-sidebar {
+			position: absolute;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			cursor: pointer;
+			background: var(--color_bg);
+			border-top-right-radius: var(--radius);
+			border-bottom-right-radius: var(--radius);
+			height: 32px;
+			width: 24px;
+			transition: background-color 0.3s;
+			right: -24px;
+			z-index: 1;
+
+			&:hover {
+				background: var(--color_bg_menu);
+			}
+		}
+
 		.sidebar {
 			display: flex;
 			flex-direction: column;
 			width: 200px;
 			border-right: 1px solid var(--color_border_soft);
 			margin: 12px 0;
+			overflow: hidden;
+			transition: width 0.3s ease;
+
 			&.collapsed {
-				display: none;
+				width: 0;
+				border-right: none;
 			}
+
 			.content {
 				overflow-y: auto;
 				flex: 1;
@@ -131,6 +163,12 @@
 				font-weight: 500;
 				display: flex;
 				align-items: center;
+				overflow: hidden;
+
+				.label {
+					white-space: nowrap;
+					overflow: hidden;
+				}
 
 				&:hover {
 					background-color: var(--color_bg_menu);