blsmedia/bot
2
0
Fork 0
Code Activity

feat(editor): 💄 UI bump

Browse Source
This commit is contained in:
Baptiste Arnaud
2022-03-31 09:49:23 +02:00
parent c7d5373127
commit 7f5d2f4173
16 changed files with 105 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
apps/builder/components/shared/Graph/Nodes/BlockNode/BlockNode.tsx
View File

@ -115,12 +115,11 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
ref={setMultipleRefs([ref, blockRef])}
data-testid="block"
p="4"
rounded="lg"
bgColor="blue.50"
backgroundImage="linear-gradient(rgb(235, 239, 244), rgb(231, 234, 241))"
rounded="xl"
bgColor="#ffffff"
borderWidth="2px"
borderColor={
isConnecting || isOpened || isPreviewing ? 'blue.400' : 'white'
isConnecting || isOpened || isPreviewing ? 'blue.400' : '#ffffff'
}
w="300px"
transition="border 300ms, box-shadow 200ms"
@ -134,7 +133,7 @@ export const BlockNode = ({ block, blockIndex }: Props) => {
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
cursor={isMouseDown ? 'grabbing' : 'pointer'}
boxShadow="0px 0px 0px 1px #e9edf3;"
shadow="md"
_hover={{ shadow: 'lg' }}
zIndex={focusedBlockId === block.id ? 10 : 1}
>

20
apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNode.tsx
View File

@ -3,7 +3,13 @@ import { ContextMenu } from 'components/shared/ContextMenu'
import { Coordinates } from 'contexts/GraphContext'
import { NodePosition, useDragDistance } from 'contexts/GraphDndContext'
import { useTypebot } from 'contexts/TypebotContext'
import { ButtonItem, Item, ItemIndices, ItemType } from 'models'
import {
ButtonItem,
ChoiceInputStep,
Item,
ItemIndices,
ItemType,
} from 'models'
import React, { useRef, useState } from 'react'
import { setMultipleRefs } from 'services/utils'
import { SourceEndpoint } from '../../Endpoints/SourceEndpoint'
@ -31,6 +37,11 @@ export const ItemNode = ({
const { typebot } = useTypebot()
const [isMouseOver, setIsMouseOver] = useState(false)
const itemRef = useRef<HTMLDivElement | null>(null)
const isConnectable = !(
typebot?.blocks[indices.blockIndex].steps[
indices.stepIndex
] as ChoiceInputStep
)?.options?.isMultipleChoice
const onDrag = (position: NodePosition) => {
if (!onMouseDown || item.type !== ItemType.BUTTON) return
onMouseDown(position, item)
@ -61,8 +72,9 @@ export const ItemNode = ({
transition="box-shadow 200ms"
borderWidth="1px"
rounded="md"
borderColor={isOpened ? 'blue.400' : 'gray.300'}
borderColor={isOpened ? 'blue.400' : 'gray.100'}
pointerEvents={isReadOnly ? 'none' : 'all'}
bgColor="white"
w="full"
>
<ItemNodeContent
@ -71,7 +83,7 @@ export const ItemNode = ({
indices={indices}
isLastItem={isLastItem}
/>
{typebot && (
{typebot && isConnectable && (
<SourceEndpoint
source={{
blockId: typebot.blocks[indices.blockIndex].id,
@ -79,7 +91,7 @@ export const ItemNode = ({
itemId: item.id,
}}
pos="absolute"
right="15px"
right="-49px"
pointerEvents="all"
/>
)}

11
apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodeContent/contents/ButtonNodeContent.tsx
View File

@ -62,7 +62,7 @@ export const ButtonNodeContent = ({
}
return (
<Flex px={4} py={2} justify="center" w="90%">
<Flex px={4} py={2} justify="center" w="90%" pos="relative">
<Editable
ref={editableRef}
flex="1"
@ -82,7 +82,12 @@ export const ButtonNodeContent = ({
</Editable>
<Fade
in={isMouseOver}
style={{ position: 'absolute', bottom: '-15px', zIndex: 3 }}
style={{
position: 'absolute',
bottom: '-15px',
zIndex: 3,
left: '90px',
}}
unmountOnExit
>
<IconButton
@ -90,7 +95,7 @@ export const ButtonNodeContent = ({
icon={<PlusIcon />}
size="xs"
shadow="md"
colorScheme="blue"
colorScheme="gray"
onClick={handlePlusClick}
/>
</Fade>

9
apps/builder/components/shared/Graph/Nodes/ItemNode/ItemNodesList.tsx
View File

@ -30,6 +30,9 @@ export const ItemNodesList = ({
(draggedItem && mouseOverBlock?.id === blockId) ?? false
const showPlaceholders = draggedItem && !isReadOnly
const isLastStep =
typebot?.blocks[blockIndex].steps[stepIndex + 1] === undefined
const [position, setPosition] = useState({
x: 0,
y: 0,
@ -148,7 +151,7 @@ export const ItemNodesList = ({
/>
</Stack>
))}
<Stack>
{isLastStep && (
<Flex
px="4"
py="2"
@ -167,10 +170,10 @@ export const ItemNodesList = ({
stepId: step.id,
}}
pos="absolute"
right="15px"
right="-49px"
/>
</Flex>
</Stack>
)}
{draggedItem && draggedItem.stepId === step.id && (
<Portal>

9
apps/builder/components/shared/Graph/Nodes/StepNode/StepNode.tsx
View File

@ -171,12 +171,13 @@ export const StepNode = ({
userSelect="none"
p="3"
borderWidth="1px"
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.300'}
borderColor={isConnecting || isOpened ? 'blue.400' : 'gray.200'}
rounded="lg"
cursor={'pointer'}
bgColor="white"
bgColor="gray.50"
align="flex-start"
w="full"
transition="border-color 0.2s"
>
<StepIcon
type={step.type}
@ -197,8 +198,8 @@ export const StepNode = ({
stepId: step.id,
}}
pos="absolute"
right="15px"
bottom="18px"
right="-34px"
bottom="10px"
/>
)}
</HStack>

2
apps/builder/components/shared/Graph/Nodes/StepNode/TextBubbleEditor/TextBubbleEditor.tsx
View File

@ -103,7 +103,7 @@ export const TextBubbleEditor = ({ initialValue, onClose }: Props) => {
flex="1"
ref={textEditorRef}
borderWidth="2px"
borderColor="blue.500"
borderColor="blue.400"
rounded="md"
onMouseDown={handleMouseDown}
pos="relative"