diff --git a/README.md b/README.md index 850dc4b31d8..34f5419de35 100644 --- a/README.md +++ b/README.md @@ -45,7 +45,7 @@ $ git clone https://github.com/ParabolInc/parabol.git $ cd parabol $ cp .env.example .env # Add your own vars here $ rethinkdb & redis-server & # Or if you prefer docker: $ docker-compose up -d db -$ yarn && yarn db:migrate && yarn dev +$ yarn && yarn dev ``` Build for production and start application: diff --git a/packages/client/hooks/useTooltip.ts b/packages/client/hooks/useTooltip.ts index 186970968d6..ba1162c9b36 100644 --- a/packages/client/hooks/useTooltip.ts +++ b/packages/client/hooks/useTooltip.ts @@ -43,7 +43,8 @@ const useTooltip = ( openTooltip, closeTooltip, originRef, - tooltipPortal + tooltipPortal, + portalStatus } } diff --git a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx index a577ff0c75e..3f7382ba220 100644 --- a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx +++ b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx @@ -46,6 +46,9 @@ const IconBlock = styled('div')({ justifyContent: 'center', marginRight: '4px', width: '2rem', + '&:active': { + opacity: 0.8 + }, '&:hover': { cursor: 'pointer' } @@ -119,13 +122,18 @@ const AgendaItem = (props: Props) => { updateHoveringId } = props const {id: agendaItemId, content, pinned, teamMember} = agendaItem - const {tooltipPortal, openTooltip, closeTooltip, originRef} = useTooltip( - content.length > 52 ? MenuPosition.UPPER_LEFT : MenuPosition.UPPER_CENTER - ) + const { + tooltipPortal, + openTooltip, + closeTooltip, + originRef, + portalStatus: tooltipStatus + } = useTooltip(MenuPosition.UPPER_CENTER) const {picture} = teamMember const atmosphere = useAtmosphere() const {viewerId} = atmosphere const hovering = hoveringId === agendaItemId + const closedTooltipStatus = 4 const ref = useRef(null) const { isDisabled, @@ -140,6 +148,14 @@ const AgendaItem = (props: Props) => { ref.current && ref.current.scrollIntoView({behavior: 'smooth'}) }, []) + useEffect(() => { + // if the tooltip has closed and we're not hovering in a new item, remove hover + // this is required because onMouseLeave isn't triggered if the cursor moves over the tooltip + if (tooltipStatus === closedTooltipStatus && hovering) { + updateHoveringId('') + } + }, [tooltipStatus]) + const handleIconClick = (e: React.MouseEvent) => { e.stopPropagation() UpdateAgendaItemMutation( @@ -153,18 +169,25 @@ const AgendaItem = (props: Props) => { RemoveAgendaItemMutation(atmosphere, {agendaItemId}) } - const getIcon = () => { - if (pinned && hovering) return - else if (!pinned && !hovering) return - else return - } - const handleMouseMove = () => { + // onMouseEnter isn't triggered if the cursor quickly moves over tooltip so check onMouseMove if (!hovering) { updateHoveringId(agendaItemId) } } + const handleMouseMoveIcon = () => { + if (hovering && tooltipStatus === closedTooltipStatus) { + openTooltip() + } + } + + const getIcon = () => { + if (pinned && hovering) return + else if (!pinned && !hovering) return + else return + } + return ( { <>