blsmedia/bot
2
0
Fork 0
Code Activity

🚸 Move item settings button to the left

Browse Source
This commit is contained in:
Baptiste Arnaud
2023-06-17 08:08:30 +02:00
parent dcdf870308
commit d8e56050f3
1 changed files with 14 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
apps/builder/src/features/blocks/inputs/buttons/components/ButtonsItemNode.tsx
View File

@@ -34,6 +34,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
const [itemValue, setItemValue] = useState(item.content ?? 'Click to edit') const [itemValue, setItemValue] = useState(item.content ?? 'Click to edit')
const editableRef = useRef<HTMLDivElement | null>(null) const editableRef = useRef<HTMLDivElement | null>(null)
const ref = useRef<HTMLDivElement | null>(null) const ref = useRef<HTMLDivElement | null>(null)
const arrowColor = useColorModeValue('white', 'gray.800')
const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation() const handleMouseDown = (e: React.MouseEvent) => e.stopPropagation()
@@ -96,21 +97,21 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
in={isMouseOver} in={isMouseOver}
style={{ style={{
position: 'absolute', position: 'absolute',
right: '-60px', left: '-40px',
zIndex: 3, zIndex: 3,
}} }}
unmountOnExit unmountOnExit
> >
<Flex bgColor={useColorModeValue('white', 'gray.800')} rounded="md">
<IconButton <IconButton
aria-label="Open settings" aria-label="Open settings"
icon={<SettingsIcon />} icon={<SettingsIcon />}
bgColor={useColorModeValue('white', 'gray.800')}
variant="ghost" variant="ghost"
size="sm" size="sm"
shadow="md" shadow="md"
colorScheme="gray"
onClick={() => setOpenedItemId(item.id)} onClick={() => setOpenedItemId(item.id)}
/> />
</Flex>
</SlideFade> </SlideFade>
<Fade <Fade
in={isMouseOver} in={isMouseOver}
@@ -135,7 +136,7 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
</PopoverAnchor> </PopoverAnchor>
<Portal> <Portal>
<PopoverContent pos="relative" onMouseDown={handleMouseDown}> <PopoverContent pos="relative" onMouseDown={handleMouseDown}>
<PopoverArrow /> <PopoverArrow bgColor={arrowColor} />
<PopoverBody <PopoverBody
py="6" py="6"
overflowY="scroll" overflowY="scroll"
@@ -155,5 +156,5 @@ export const ButtonsItemNode = ({ item, indices, isMouseOver }: Props) => {
} }
const HitboxExtension = () => ( const HitboxExtension = () => (
<Flex h="full" w="50px" pos="absolute" top="0" right="-70px" /> <Flex h="full" w="10px" pos="absolute" top="0" left="-10px" />
) )