From 75e2004abce77b384afad1a9c19742366bd4b5b6 Mon Sep 17 00:00:00 2001 From: nickoferrall Date: Sun, 24 May 2020 13:18:59 +0100 Subject: [PATCH 1/5] getting tooltip status and updating hover --- packages/client/hooks/useTooltip.ts | 3 ++- .../components/AgendaItem/AgendaItem.tsx | 23 ++++++++++++++++--- 2 files changed, 22 insertions(+), 4 deletions(-) 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..0e306682625 100644 --- a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx +++ b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx @@ -21,6 +21,8 @@ import pinIcon from '../../../../styles/theme/images/icons/pin.svg' import unpinIcon from '../../../../styles/theme/images/icons/unpin.svg' const AgendaItemStyles = styled('div')({ + display: 'flex', + alignSelf: 'center', position: 'relative', // show the DeleteIconButton on hover '&:hover > button': { @@ -43,9 +45,13 @@ const DeleteIconButton = styled(IconButton)<{disabled?: boolean}>(({disabled}) = const IconBlock = styled('div')({ display: 'flex', alignItems: 'center', + alignSelf: 'center', justifyContent: 'center', marginRight: '4px', width: '2rem', + '&:active': { + opacity: 0.5 + }, '&:hover': { cursor: 'pointer' } @@ -119,9 +125,13 @@ 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 @@ -140,6 +150,13 @@ const AgendaItem = (props: Props) => { ref.current && ref.current.scrollIntoView({behavior: 'smooth'}) }, []) + useEffect(() => { + const closedTooltipStatus = 4 + if (tooltipStatus === closedTooltipStatus) { + updateHoveringId('') + } + }, [tooltipStatus]) + const handleIconClick = (e: React.MouseEvent) => { e.stopPropagation() UpdateAgendaItemMutation( From 7d0f34ef7ca9b4542287cae9db381b31037ed882 Mon Sep 17 00:00:00 2001 From: nickoferrall Date: Sun, 24 May 2020 15:23:05 +0100 Subject: [PATCH 2/5] updated icon hover functionality --- .../components/AgendaItem/AgendaItem.tsx | 17 ++++++++++++----- 1 file changed, 12 insertions(+), 5 deletions(-) diff --git a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx index 0e306682625..ded20fe04af 100644 --- a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx +++ b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx @@ -21,8 +21,6 @@ import pinIcon from '../../../../styles/theme/images/icons/pin.svg' import unpinIcon from '../../../../styles/theme/images/icons/unpin.svg' const AgendaItemStyles = styled('div')({ - display: 'flex', - alignSelf: 'center', position: 'relative', // show the DeleteIconButton on hover '&:hover > button': { @@ -136,6 +134,7 @@ const AgendaItem = (props: Props) => { const atmosphere = useAtmosphere() const {viewerId} = atmosphere const hovering = hoveringId === agendaItemId + const closedTooltipStatus = 4 const ref = useRef(null) const { isDisabled, @@ -151,8 +150,9 @@ const AgendaItem = (props: Props) => { }, []) useEffect(() => { - const closedTooltipStatus = 4 - if (tooltipStatus === closedTooltipStatus) { + // 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]) @@ -177,11 +177,18 @@ const AgendaItem = (props: Props) => { } const handleMouseMove = () => { + // onMouseEnter isn't triggered if the cursor quickly moves over tooltip so check onMouseMove if (!hovering) { updateHoveringId(agendaItemId) } } + const handleIconMove = () => { + if (hovering && tooltipStatus === closedTooltipStatus) { + openTooltip() + } + } + return ( { <> From 69d099c2a606375b7a85180fe50cb6dcb187b131 Mon Sep 17 00:00:00 2001 From: nickoferrall Date: Sun, 24 May 2020 15:55:17 +0100 Subject: [PATCH 3/5] added comments --- README.md | 2 +- .../components/AgendaItem/AgendaItem.tsx | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) 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/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx index ded20fe04af..495af2572e4 100644 --- a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx +++ b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx @@ -48,7 +48,7 @@ const IconBlock = styled('div')({ marginRight: '4px', width: '2rem', '&:active': { - opacity: 0.5 + opacity: 0.8 }, '&:hover': { cursor: 'pointer' @@ -170,12 +170,6 @@ 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) { @@ -189,6 +183,12 @@ const AgendaItem = (props: Props) => { } } + const getIcon = () => { + if (pinned && hovering) return + else if (!pinned && !hovering) return + else return + } + return ( Date: Sun, 24 May 2020 15:56:21 +0100 Subject: [PATCH 4/5] updated func name --- .../teamDashboard/components/AgendaItem/AgendaItem.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx index 495af2572e4..68bce5765f8 100644 --- a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx +++ b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx @@ -177,7 +177,7 @@ const AgendaItem = (props: Props) => { } } - const handleIconMove = () => { + const handleMouseMoveIcon = () => { if (hovering && tooltipStatus === closedTooltipStatus) { openTooltip() } @@ -197,7 +197,7 @@ const AgendaItem = (props: Props) => { <> From 0502f18298ef59fb30b4ff26d1d62337e0fbf0f5 Mon Sep 17 00:00:00 2001 From: nickoferrall Date: Sun, 24 May 2020 16:01:40 +0100 Subject: [PATCH 5/5] removed unused css --- .../modules/teamDashboard/components/AgendaItem/AgendaItem.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx index 68bce5765f8..3f7382ba220 100644 --- a/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx +++ b/packages/client/modules/teamDashboard/components/AgendaItem/AgendaItem.tsx @@ -43,7 +43,6 @@ const DeleteIconButton = styled(IconButton)<{disabled?: boolean}>(({disabled}) = const IconBlock = styled('div')({ display: 'flex', alignItems: 'center', - alignSelf: 'center', justifyContent: 'center', marginRight: '4px', width: '2rem',