fix: 🐛 Minor changes and improved accessibility
This commit is contained in:
@ -51,7 +51,7 @@ export const TypebotButton = ({
|
||||
if (draggedTypebotDebounced) return
|
||||
router.push(
|
||||
isMobile
|
||||
? `/typebots/${typebot.id}/results/responses`
|
||||
? `/typebots/${typebot.id}/results`
|
||||
: `/typebots/${typebot.id}/edit`
|
||||
)
|
||||
}
|
||||
|
@ -27,6 +27,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
|
||||
blocksCoordinates,
|
||||
graphPosition,
|
||||
isReadOnly,
|
||||
setPreviewingEdge,
|
||||
} = useGraph()
|
||||
const [isMouseOver, setIsMouseOver] = useState(false)
|
||||
const { isOpen, onOpen, onClose } = useDisclosure()
|
||||
@ -92,8 +93,13 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
|
||||
|
||||
const handleMouseLeave = () => setIsMouseOver(false)
|
||||
|
||||
const handleEdgeClick = (e: React.MouseEvent) => {
|
||||
const handleEdgeClick = () => {
|
||||
setPreviewingEdge(edge)
|
||||
}
|
||||
|
||||
const handleContextMenuTrigger = (e: React.MouseEvent) => {
|
||||
if (isReadOnly) return
|
||||
e.preventDefault()
|
||||
setEdgeMenuPosition({ x: e.clientX, y: e.clientY })
|
||||
onOpen()
|
||||
}
|
||||
@ -113,6 +119,7 @@ export const Edge = ({ edge }: { edge: EdgeProps }) => {
|
||||
onMouseEnter={handleMouseEnter}
|
||||
onMouseLeave={handleMouseLeave}
|
||||
onClick={handleEdgeClick}
|
||||
onContextMenu={handleContextMenuTrigger}
|
||||
/>
|
||||
<path
|
||||
data-testid="edge"
|
||||
|
@ -36,6 +36,7 @@ export const Graph = ({
|
||||
setGraphPosition: setGlobalGraphPosition,
|
||||
setOpenedStepId,
|
||||
updateBlockCoordinates,
|
||||
setPreviewingEdge,
|
||||
} = useGraph()
|
||||
const [graphPosition, setGraphPosition] = useState(graphPositionDefaultValue)
|
||||
const [debouncedGraphPosition] = useDebounce(graphPosition, 200)
|
||||
@ -98,7 +99,10 @@ export const Graph = ({
|
||||
if (isRightClick) e.stopPropagation()
|
||||
}
|
||||
|
||||
const handleClick = () => setOpenedStepId(undefined)
|
||||
const handleClick = () => {
|
||||
setOpenedStepId(undefined)
|
||||
setPreviewingEdge(undefined)
|
||||
}
|
||||
|
||||
useEventListener('wheel', handleMouseWheel, graphContainerRef.current)
|
||||
useEventListener('mousedown', handleCaptureMouseDown, undefined, {
|
||||
|
@ -56,7 +56,7 @@ export const ButtonNodeContent = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<Flex px={4} py={2} justify="center" w="full">
|
||||
<Flex px={4} py={2} justify="center" w="90%">
|
||||
<Editable
|
||||
ref={editableRef}
|
||||
flex="1"
|
||||
|
@ -13,6 +13,7 @@ export const TextBubbleContent = ({ step }: Props) => {
|
||||
if (!typebot) return <></>
|
||||
return (
|
||||
<Flex
|
||||
isTruncated
|
||||
flexDir={'column'}
|
||||
opacity={step.content.html === '' ? '0.5' : '1'}
|
||||
className="slate-html-container"
|
||||
|
@ -54,7 +54,7 @@ export const TypebotHeader = () => {
|
||||
bgColor="white"
|
||||
flexShrink={0}
|
||||
>
|
||||
<HStack>
|
||||
<HStack display={['none', 'flex']}>
|
||||
<Button
|
||||
as={NextChakraLink}
|
||||
href={`/typebots/${typebot?.id}/edit`}
|
||||
@ -126,6 +126,7 @@ export const TypebotHeader = () => {
|
||||
)}
|
||||
<Tooltip label="Undo">
|
||||
<IconButton
|
||||
display={['none', 'flex']}
|
||||
icon={<UndoIcon />}
|
||||
size="sm"
|
||||
aria-label="Undo"
|
||||
@ -136,6 +137,7 @@ export const TypebotHeader = () => {
|
||||
|
||||
<Tooltip label="Redo">
|
||||
<IconButton
|
||||
display={['none', 'flex']}
|
||||
icon={<RedoIcon />}
|
||||
size="sm"
|
||||
aria-label="Redo"
|
||||
@ -154,7 +156,7 @@ export const TypebotHeader = () => {
|
||||
)}
|
||||
</HStack>
|
||||
|
||||
<HStack right="40px" pos="absolute">
|
||||
<HStack right="40px" pos="absolute" display={['none', 'flex']}>
|
||||
<CollaborationMenuButton />
|
||||
{router.pathname.includes('/edit') && isNotDefined(rightPanel) && (
|
||||
<Button onClick={handlePreviewClick}>Preview</Button>
|
||||
|
@ -43,6 +43,7 @@ export const ResultsContent = () => {
|
||||
w="full"
|
||||
justifyContent="center"
|
||||
h="60px"
|
||||
display={['none', 'flex']}
|
||||
>
|
||||
<HStack maxW="1200px" w="full">
|
||||
<Button
|
||||
@ -70,7 +71,7 @@ export const ResultsContent = () => {
|
||||
</Button>
|
||||
</HStack>
|
||||
</Flex>
|
||||
<Flex pt="60px" w="full" justify="center">
|
||||
<Flex pt={['10px', '60px']} w="full" justify="center">
|
||||
{publishedTypebot &&
|
||||
(isAnalytics ? (
|
||||
<AnalyticsContent stats={stats} />
|
||||
|
@ -145,7 +145,7 @@ export const SubmissionsContent = ({
|
||||
}
|
||||
|
||||
return (
|
||||
<Stack maxW="1200px" w="full" pb="28">
|
||||
<Stack maxW="1200px" w="full" pb="28" px={['4', '0']}>
|
||||
{totalHiddenResults && (
|
||||
<UnlockProPlanInfo
|
||||
buttonLabel={`Unlock ${totalHiddenResults} results`}
|
||||
|
@ -15,6 +15,7 @@ export const SEO = ({
|
||||
}: SEOProps) => (
|
||||
<Head>
|
||||
<title>{title ?? typebotName}</title>
|
||||
<meta name="robots" content="noindex" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
|
Reference in New Issue
Block a user