blsmedia/bot
2
0
Fork 0
Code Activity

feat(ui): 💄 Face lift

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-01-19 09:44:21 +01:00
parent f49b5143cf
commit 44b478550f
23 changed files with 306 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/builder/assets/icons.tsx
View File

@ -250,3 +250,12 @@ export const UserIcon = (props: IconProps) => (
<circle cx="12" cy="7" r="4"></circle>
</Icon>
)
export const ExpandIcon = (props: IconProps) => (
<Icon viewBox="0 0 24 24" {...featherIconsBaseProps} {...props}>
<polyline points="15 3 21 3 21 9"></polyline>
<polyline points="9 21 3 21 3 15"></polyline>
<line x1="21" y1="3" x2="14" y2="10"></line>
<line x1="3" y1="21" x2="10" y2="14"></line>
</Icon>
)

2
apps/builder/components/board/Board.tsx
View File

@ -16,7 +16,7 @@ export const Board = () => {
<StepTypesList />
<GraphProvider>
<Graph flex="1" />
<BoardMenuButton pos="absolute" right="20px" top="20px" />
<BoardMenuButton pos="absolute" right="40px" top="20px" />
{rightPanel === RightPanel.PREVIEW && <PreviewDrawer />}
</GraphProvider>
</DndContext>

2
apps/builder/components/board/BoardMenuButton.tsx
View File

@ -35,6 +35,8 @@ export const BoardMenuButton = (props: MenuButtonProps) => {
<Menu>
<MenuButton
as={IconButton}
variant="outline"
colorScheme="blue"
icon={<MoreVerticalIcon transform={'rotate(90deg)'} />}
isLoading={isDownloading}
{...props}

36
apps/builder/components/board/StepTypesList/StepCard.tsx
View File

@ -1,4 +1,4 @@
import { Button, ButtonProps, Flex, HStack } from '@chakra-ui/react'
import { Flex, HStack, StackProps, Text } from '@chakra-ui/react'
import { StepType, DraggableStepType } from 'models'
import { useDnd } from 'contexts/DndContext'
import React, { useEffect, useState } from 'react'
@ -23,22 +23,31 @@ export const StepCard = ({
return (
<Flex pos="relative">
<Button
as={HStack}
<HStack
borderWidth="1px"
rounded="lg"
flex="1"
cursor={'grab'}
opacity={isMouseDown ? '0.4' : '1'}
onMouseDown={handleMouseDown}
bgColor="white"
shadow="sm"
px="4"
py="2"
_hover={{ shadow: 'md' }}
transition="box-shadow 200ms"
>
{!isMouseDown && (
{!isMouseDown ? (
<>
<StepIcon type={type} />
<StepTypeLabel type={type} />
</>
) : (
<Text color="white" userSelect="none">
Placeholder
</Text>
)}
</Button>
</HStack>
</Flex>
)
}
@ -46,23 +55,24 @@ export const StepCard = ({
export const StepCardOverlay = ({
type,
...props
}: Omit<ButtonProps, 'type'> & { type: StepType }) => {
}: StackProps & { type: StepType }) => {
return (
<Button
as={HStack}
<HStack
borderWidth="1px"
rounded="lg"
cursor={'grab'}
cursor={'grabbing'}
w="147px"
pos="fixed"
top="0"
left="0"
transition="none"
pointerEvents="none"
px="4"
py="2"
bgColor="white"
shadow="xl"
zIndex={2}
{...props}
>
<StepIcon type={type} />
<StepTypeLabel type={type} />
</Button>
</HStack>
)
}

116
apps/builder/components/board/StepTypesList/StepTypesList.tsx
View File

@ -4,6 +4,7 @@ import {
Text,
SimpleGrid,
useEventListener,
Portal,
} from '@chakra-ui/react'
import {
BubbleStepType,
@ -38,10 +39,11 @@ export const StepTypesList = () => {
const handleMouseDown = (e: React.MouseEvent, type: DraggableStepType) => {
const element = e.currentTarget as HTMLDivElement
const rect = element.getBoundingClientRect()
const relativeX = e.clientX - rect.left
const relativeY = e.clientY - rect.top
setPosition({ x: e.clientX - relativeX, y: e.clientY - relativeY })
setRelativeCoordinates({ x: relativeX, y: relativeY })
setPosition({ x: rect.left, y: rect.top })
const x = e.clientX - rect.left
const y = e.clientY - rect.top
setRelativeCoordinates({ x, y })
console.log({ x: rect.left, y: rect.top })
setDraggedStepType(type)
}
@ -60,60 +62,76 @@ export const StepTypesList = () => {
w="320px"
pos="absolute"
left="10px"
top="20px"
h="calc(100vh - 100px)"
top="10px"
h="calc(100vh - 80px)"
rounded="lg"
shadow="lg"
shadow="xl"
borderWidth="1px"
zIndex="10"
zIndex="2"
py="4"
px="2"
bgColor="white"
bgColor="gray.50"
spacing={6}
userSelect="none"
>
<Input placeholder="Search..." />
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Bubbles
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(BubbleStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
<Input placeholder="Search..." bgColor="white" />
<Stack>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Bubbles
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(BubbleStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
</Stack>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Inputs
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(InputStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
<Stack>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Inputs
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(InputStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
</Stack>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Logic
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(LogicStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
<Stack>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Logic
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(LogicStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
</Stack>
<Stack>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Integrations
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(IntegrationStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
</Stack>
<Text fontSize="sm" fontWeight="semibold" color="gray.600">
Integrations
</Text>
<SimpleGrid columns={2} spacing="2">
{Object.values(IntegrationStepType).map((type) => (
<StepCard key={type} type={type} onMouseDown={handleMouseDown} />
))}
</SimpleGrid>
{draggedStepType && (
<StepCardOverlay
type={draggedStepType}
onMouseUp={handleMouseUp}
style={{
transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
}}
/>
<Portal>
<StepCardOverlay
type={draggedStepType}
onMouseUp={handleMouseUp}
pos="fixed"
top="0"
left="0"
style={{
transform: `translate(${position.x}px, ${position.y}px) rotate(-2deg)`,
}}
/>
</Portal>
)}
</Stack>
)

21
apps/builder/components/board/graph/BlockNode/BlockNode.tsx
View File

@ -25,7 +25,6 @@ export const BlockNode = ({ block }: Props) => {
const { setMouseOverBlockId } = useDnd()
const { draggedStep, draggedStepType } = useDnd()
const [isMouseDown, setIsMouseDown] = useState(false)
const [titleValue, setTitleValue] = useState(block.title)
const [isConnecting, setIsConnecting] = useState(false)
const isPreviewing = useMemo(
() =>
@ -41,7 +40,7 @@ export const BlockNode = ({ block }: Props) => {
)
}, [block.id, connectingIds])
const handleTitleChange = (title: string) => setTitleValue(title)
const handleTitleSubmit = (title: string) => updateBlock(block.id, { title })
const handleMouseDown = () => {
setIsMouseDown(true)
@ -49,6 +48,7 @@ export const BlockNode = ({ block }: Props) => {
const handleMouseUp = () => {
setIsMouseDown(false)
}
useEventListener('mouseup', handleMouseUp)
const handleMouseMove = (event: MouseEvent) => {
if (!isMouseDown) return
@ -85,24 +85,31 @@ export const BlockNode = ({ block }: Props) => {
p="4"
rounded="lg"
bgColor="blue.50"
backgroundImage="linear-gradient(rgb(235, 239, 244), rgb(231, 234, 241))"
borderWidth="2px"
borderColor={
isConnecting || isOpened || isPreviewing ? 'blue.400' : 'gray.400'
isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
}
minW="300px"
transition="border 300ms"
transition="border 300ms, box-shadow 200ms"
pos="absolute"
style={{
transform: `translate(${block.graphCoordinates.x}px, ${block.graphCoordinates.y}px)`,
}}
onMouseDown={handleMouseDown}
onMouseUp={handleMouseUp}
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
cursor={isMouseDown ? 'grabbing' : 'pointer'}
boxShadow="0px 0px 0px 1px #e9edf3;"
_hover={{ shadow: 'lg' }}
>
<Editable value={titleValue} onChange={handleTitleChange}>
<Editable
defaultValue={block.title}
onSubmit={handleTitleSubmit}
fontWeight="semibold"
>
<EditablePreview
_hover={{ bgColor: 'blue.100' }}
_hover={{ bgColor: 'gray.300' }}
px="1"
userSelect={'none'}
/>

21
apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNode.tsx
View File

@ -99,15 +99,17 @@ export const ChoiceItemNode = ({
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
justifyContent="center"
shadow="sm"
_hover={{ shadow: 'md' }}
transition="box-shadow 200ms"
borderWidth="1px"
rounded="md"
px="4"
py="2"
borderColor={isOpened ? 'blue.400' : 'gray.300'}
>
<Editable
ref={ref}
px="4"
py="2"
rounded="md"
bgColor="green.200"
borderWidth="2px"
borderColor={isOpened ? 'blue.400' : 'gray.400'}
defaultValue={item.content ?? 'Click to edit'}
flex="1"
startWithEditView={!isDefined(item.content)}
@ -115,7 +117,10 @@ export const ChoiceItemNode = ({
onMouseDown={handleMouseDown}
onMouseMove={handleMouseMove}
>
<EditablePreview />
<EditablePreview
w="full"
color={item.content !== 'Click to edit' ? 'inherit' : 'gray.500'}
/>
<EditableInput />
</Editable>
{typebot && isSingleChoiceInput(typebot.steps.byId[item.stepId]) && (
@ -138,6 +143,8 @@ export const ChoiceItemNode = ({
aria-label="Add item"
icon={<PlusIcon />}
size="xs"
shadow="md"
colorScheme="blue"
onClick={handlePlusClick}
/>
</Fade>

7
apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemNodeOverlay.tsx
View File

@ -15,11 +15,12 @@ export const ChoiceItemNodeOverlay = ({
px="4"
py="2"
rounded="md"
bgColor="green.200"
borderWidth="2px"
borderColor={'gray.400'}
bgColor="white"
borderWidth="1px"
borderColor={'gray.300'}
w="212px"
pointerEvents="none"
shadow="lg"
{...props}
>
{item.content ?? 'Click to edit'}

31
apps/builder/components/board/graph/BlockNode/StepNode/ChoiceInputStepNode/ChoiceItemsList.tsx
View File

@ -44,14 +44,17 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
}
useEventListener('mousemove', handleStepMove)
const handleMouseUp = (e: React.MouseEvent<HTMLDivElement>) => {
if (expandedPlaceholderIndex === undefined || !draggedChoiceItem) return
e.stopPropagation()
const handleMouseUp = (e: MouseEvent) => {
if (!draggedChoiceItem) return
if (expandedPlaceholderIndex !== -1) {
e.stopPropagation()
createChoiceItem(draggedChoiceItem, expandedPlaceholderIndex)
}
setMouseOverBlockId(undefined)
setExpandedPlaceholderIndex(undefined)
setDraggedChoiceItem(undefined)
createChoiceItem(draggedChoiceItem, expandedPlaceholderIndex)
}
useEventListener('mouseup', handleMouseUp, undefined, { capture: true })
const handleStepMouseDown = (
{ absolute, relative }: { absolute: Coordinates; relative: Coordinates },
@ -76,15 +79,10 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
const stopPropagating = (e: React.MouseEvent) => e.stopPropagation()
return (
<Stack
flex={1}
spacing={1}
onMouseUpCapture={handleMouseUp}
onClick={stopPropagating}
>
<Stack flex={1} spacing={1} onClick={stopPropagating}>
<Flex
h={expandedPlaceholderIndex === 0 ? '50px' : '2px'}
bgColor={'gray.400'}
bgColor={'gray.300'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
@ -107,7 +105,7 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
? '50px'
: '2px'
}
bgColor={'gray.400'}
bgColor={'gray.300'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
@ -118,13 +116,15 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
<Flex
px="4"
py="2"
bgColor="gray.200"
borderWidth="2px"
borderWidth="1px"
borderColor="gray.300"
bgColor="gray.50"
rounded="md"
pos="relative"
align="center"
cursor="not-allowed"
>
<Text>Default</Text>
<Text color="gray.500">Default</Text>
<SourceEndpoint
source={{
blockId: step.blockId,
@ -140,7 +140,6 @@ export const ChoiceItemsList = ({ step }: ChoiceItemsListProps) => {
<Portal>
<ChoiceItemNodeOverlay
item={draggedChoiceItem}
onMouseUp={handleMouseUp}
pos="fixed"
top="0"
left="0"

34
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsModal.tsx Normal file
View File

@ -0,0 +1,34 @@
import {
Modal,
ModalOverlay,
ModalContent,
ModalHeader,
ModalCloseButton,
ModalBody,
ModalFooter,
ModalBodyProps,
} from '@chakra-ui/react'
import React from 'react'
type Props = {
isOpen: boolean
onClose: () => void
}
export const SettingsModal = ({
isOpen,
onClose,
...props
}: Props & ModalBodyProps) => {
return (
<Modal isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader />
<ModalCloseButton />
<ModalBody {...props}>{props.children}</ModalBody>
<ModalFooter />
</ModalContent>
</Modal>
)
}

31
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/SettingsPopoverContent.tsx
View File

@ -4,7 +4,11 @@ import {
PopoverBody,
useEventListener,
Portal,
Stack,
IconButton,
Flex,
} from '@chakra-ui/react'
import { ExpandIcon } from 'assets/icons'
import { useTypebot } from 'contexts/TypebotContext/TypebotContext'
import {
InputStep,
@ -30,9 +34,10 @@ import { SetVariableSettingsBody } from './bodies/SetVariableSettingsBody'
type Props = {
step: Step
onExpandClick: () => void
}
export const SettingsPopoverContent = ({ step }: Props) => {
export const SettingsPopoverContent = ({ step, onExpandClick }: Props) => {
const ref = useRef<HTMLDivElement | null>(null)
const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
@ -44,15 +49,33 @@ export const SettingsPopoverContent = ({ step }: Props) => {
<Portal>
<PopoverContent onMouseDown={handleMouseDown}>
<PopoverArrow />
<PopoverBody p="6" overflowY="scroll" maxH="400px" ref={ref}>
<SettingsPopoverBodyContent step={step} />
<PopoverBody
px="6"
pb="6"
pt="4"
overflowY="scroll"
maxH="400px"
ref={ref}
shadow="lg"
>
<Stack>
<Flex justifyContent="flex-end">
<IconButton
aria-label="expand"
icon={<ExpandIcon />}
size="xs"
onClick={onExpandClick}
/>
</Flex>
<StepSettings step={step} />
</Stack>
</PopoverBody>
</PopoverContent>
</Portal>
)
}
const SettingsPopoverBodyContent = ({ step }: Props) => {
export const StepSettings = ({ step }: { step: Step }) => {
const { updateStep } = useTypebot()
const handleOptionsChange = (options: StepOptions) =>
updateStep(step.id, { options } as Partial<InputStep>)

19
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/ConditionSettingsBody/ComparisonsList.tsx
View File

@ -107,22 +107,20 @@ export const ComparisonsList = ({
>
<Stack
key={comparisonId}
bgColor="blue.50"
p="4"
rounded="md"
flex="1"
borderWidth="1px"
>
<VariableSearchInput
initialVariableId={comparisons.byId[comparisonId].variableId}
onSelectVariable={handleVariableSelected(comparisonId)}
bgColor="white"
placeholder="Search for a variable"
/>
<DropdownList<ComparisonOperators>
currentItem={comparisons.byId[comparisonId].comparisonOperator}
onItemSelect={handleComparisonOperatorSelected(comparisonId)}
items={Object.values(ComparisonOperators)}
bgColor="white"
/>
{comparisons.byId[comparisonId].comparisonOperator !==
ComparisonOperators.IS_SET && (
@ -130,7 +128,6 @@ export const ComparisonsList = ({
delay={100}
initialValue={comparisons.byId[comparisonId].value ?? ''}
onChange={handleValueChange(comparisonId)}
bgColor="white"
placeholder="Type a value..."
/>
)}
@ -141,16 +138,22 @@ export const ComparisonsList = ({
aria-label="Remove comparison"
onClick={deleteComparison(comparisonId)}
pos="absolute"
left="-10px"
top="-10px"
left="-15px"
top="-15px"
size="sm"
shadow="md"
/>
</Fade>
</Flex>
</>
))}
<Button leftIcon={<PlusIcon />} onClick={createComparison} flexShrink={0}>
Add
<Button
leftIcon={<PlusIcon />}
onClick={createComparison}
flexShrink={0}
colorScheme="blue"
>
Add a comparison
</Button>
</Stack>
)

17
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/ExtractCellList.tsx
View File

@ -87,16 +87,22 @@ export const ExtractCellList = ({
aria-label="Remove cell"
onClick={deleteCell(cellId)}
pos="absolute"
left="-10px"
top="-10px"
left="-15px"
top="-15px"
size="sm"
shadow="md"
/>
</Fade>
</Flex>
</>
))}
<Button leftIcon={<PlusIcon />} onClick={createCell} flexShrink={0}>
Add
<Button
leftIcon={<PlusIcon />}
onClick={createCell}
flexShrink={0}
colorScheme="blue"
>
Add a value
</Button>
</Stack>
)
@ -118,12 +124,11 @@ export const CellWithVariableIdStack = ({
onCellChange({ ...cell, variableId: variable.id })
}
return (
<Stack bgColor="blue.50" p="4" rounded="md" flex="1">
<Stack p="4" rounded="md" flex="1" borderWidth="1px">
<DropdownList<string>
currentItem={cell.column}
onItemSelect={handleColumnSelect}
items={columns}
bgColor="white"
placeholder="Select a column"
/>
<VariableSearchInput

17
apps/builder/components/board/graph/BlockNode/StepNode/SettingsPopoverContent/bodies/GoogleSheetsSettingsBody/UpdateCellList.tsx
View File

@ -87,16 +87,22 @@ export const UpdateCellList = ({
aria-label="Remove cell"
onClick={deleteCell(cellId)}
pos="absolute"
left="-10px"
top="-10px"
left="-15px"
top="-15px"
size="sm"
shadow="md"
/>
</Fade>
</Flex>
</>
))}
<Button leftIcon={<PlusIcon />} onClick={createCell} flexShrink={0}>
Add
<Button
leftIcon={<PlusIcon />}
onClick={createCell}
flexShrink={0}
colorScheme="blue"
>
Add a value
</Button>
</Stack>
)
@ -118,12 +124,11 @@ export const CellWithValueStack = ({
onCellChange({ ...cell, value })
}
return (
<Stack bgColor="blue.50" p="4" rounded="md" flex="1">
<Stack p="4" rounded="md" flex="1" borderWidth="1px">
<DropdownList<string>
currentItem={cell.column}
onItemSelect={handleColumnSelect}
items={columns}
bgColor="white"
placeholder="Select a column"
/>
<InputWithVariable

18
apps/builder/components/board/graph/BlockNode/StepNode/SourceEndpoint.tsx
View File

@ -1,4 +1,4 @@
import { Box, BoxProps } from '@chakra-ui/react'
import { Box, BoxProps, Flex } from '@chakra-ui/react'
import { ConnectingSourceIds, useGraph } from 'contexts/GraphContext'
import React, { MouseEvent, useEffect, useRef } from 'react'
@ -28,14 +28,20 @@ export const SourceEndpoint = ({
}, [ref])
return (
<Box
<Flex
ref={ref}
boxSize="15px"
boxSize="18px"
rounded="full"
bgColor="gray.500"
onMouseDown={handleMouseDown}
cursor="pointer"
cursor="copy"
borderWidth="1px"
borderColor="gray.400"
bgColor="white"
justify="center"
align="center"
{...props}
/>
>
<Box bgColor="gray.400" rounded="full" boxSize="7px" />
</Flex>
)
}

21
apps/builder/components/board/graph/BlockNode/StepNode/StepNode.tsx
View File

@ -4,6 +4,7 @@ import {
HStack,
Popover,
PopoverTrigger,
useDisclosure,
useEventListener,
} from '@chakra-ui/react'
import React, { useEffect, useMemo, useState } from 'react'
@ -28,6 +29,8 @@ import { SourceEndpoint } from './SourceEndpoint'
import { hasDefaultConnector } from 'services/typebots'
import { TargetEndpoint } from './TargetEndpoint'
import { useRouter } from 'next/router'
import { SettingsModal } from './SettingsPopoverContent/SettingsModal'
import { StepSettings } from './SettingsPopoverContent/SettingsPopoverContent'
export const StepNode = ({
step,
@ -54,6 +57,11 @@ export const StepNode = ({
const [isEditing, setIsEditing] = useState<boolean>(
isTextBubbleStep(step) && step.content.plainText === ''
)
const {
isOpen: isModalOpen,
onOpen: onModalOpen,
onClose: onModalClose,
} = useDisclosure()
useEffect(() => {
setIsConnecting(
@ -190,8 +198,8 @@ export const StepNode = ({
flex="1"
userSelect="none"
p="3"
borderWidth="2px"
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.400'}
borderWidth="1px"
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.300'}
rounded="lg"
cursor={'pointer'}
bgColor="white"
@ -213,7 +221,7 @@ export const StepNode = ({
}}
pos="absolute"
right="15px"
top="19px"
top="18px"
/>
)}
</HStack>
@ -237,7 +245,12 @@ export const StepNode = ({
)}
</Flex>
</PopoverTrigger>
{hasPopover(step) && <SettingsPopoverContent step={step} />}
{hasPopover(step) && (
<SettingsPopoverContent step={step} onExpandClick={onModalOpen} />
)}
<SettingsModal isOpen={isModalOpen} onClose={onModalClose}>
<StepSettings step={step} />
</SettingsModal>
</Popover>
)}
</ContextMenu>

1
apps/builder/components/board/graph/BlockNode/StepNode/StepNodeOverlay.tsx
View File

@ -16,6 +16,7 @@ export const StepNodeOverlay = ({
cursor={'grab'}
w="264px"
pointerEvents="none"
shadow="lg"
{...props}
>
<StepIcon type={step.type} />

4
apps/builder/components/board/graph/BlockNode/StepsList.tsx
View File

@ -102,7 +102,7 @@ export const StepsList = ({
? '50px'
: '2px'
}
bgColor={'gray.400'}
bgColor={'gray.300'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}
@ -125,7 +125,7 @@ export const StepsList = ({
? '50px'
: '2px'
}
bgColor={'gray.400'}
bgColor={'gray.300'}
visibility={showSortPlaceholders ? 'visible' : 'hidden'}
rounded="lg"
transition={showSortPlaceholders ? 'height 200ms' : 'none'}

4
apps/builder/components/board/graph/Edges/DrawingEdge.tsx
View File

@ -103,9 +103,9 @@ export const DrawingEdge = () => {
return (
<path
d={path}
stroke="#718096"
stroke="#1a5fff"
strokeWidth="2px"
markerEnd="url(#arrow)"
markerEnd="url(#blue-arrow)"
fill="none"
/>
)

2
apps/builder/components/board/graph/Edges/Edge.tsx
View File

@ -126,7 +126,7 @@ export const Edge = ({
d={path}
stroke={isPreviewing ? '#1a5fff' : '#718096'}
strokeWidth="2px"
markerEnd="url(#arrow)"
markerEnd={isPreviewing ? 'url(#blue-arrow)' : 'url(#arrow)'}
fill="none"
/>
)

15
apps/builder/components/board/graph/Edges/Edges.tsx
View File

@ -74,6 +74,21 @@ export const Edges = () => {
fill="#718096"
/>
</marker>
<marker
id={'blue-arrow'}
refX="8"
refY="4"
orient="auto"
viewBox="0 0 20 20"
markerUnits="userSpaceOnUse"
markerWidth="20"
markerHeight="20"
>
<path
d="M7.07138888,5.50174526 L2.43017246,7.82235347 C1.60067988,8.23709976 0.592024983,7.90088146 0.177278692,7.07138888 C0.0606951226,6.83822174 0,6.58111307 0,6.32042429 L0,1.67920787 C0,0.751806973 0.751806973,0 1.67920787,0 C1.93989666,0 2.19700532,0.0606951226 2.43017246,0.177278692 L7,3 C7.82949258,3.41474629 8.23709976,3.92128809 7.82235347,4.75078067 C7.6598671,5.07575341 7.39636161,5.33925889 7.07138888,5.50174526 Z"
fill="#1a5fff"
/>
</marker>
</chakra.svg>
)
}

12
apps/builder/libs/chakra.ts
View File

@ -6,6 +6,18 @@ const fonts = {
}
const colors = {
gray: {
50: '#F9FAFB',
100: '#F3F4F6',
200: '#E5E7EB',
300: '#D1D5DB',
400: '#9CA3AF',
500: '#6B7280',
600: '#4B5563',
700: '#374151',
800: '#1F2937',
900: '#111827',
},
blue: {
50: '#e0edff',
100: '#b0caff',

2
apps/builder/services/graph.ts
View File

@ -291,7 +291,7 @@ export const getEndpointTopOffset = (
const endpointRef = endpoints.byId[id]?.ref
if (!endpointRef) return 0
return (
7 +
8 +
(endpointRef.current?.getBoundingClientRect().top ?? 0) -
graphPosition.y -
headerHeight