From 1560c83b2b4544cbd71a3c778a4ffc7b8b59c970 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Fri, 13 Aug 2021 15:36:33 +1000 Subject: [PATCH 1/3] Adding hover over tooltip for open group pills. --- ts/components/basic/PillContainer.tsx | 54 +++++++++++ .../session/SessionJoinableDefaultRooms.tsx | 93 ++++++++++++++++--- 2 files changed, 134 insertions(+), 13 deletions(-) diff --git a/ts/components/basic/PillContainer.tsx b/ts/components/basic/PillContainer.tsx index 88bb34bf5..70287f2c2 100644 --- a/ts/components/basic/PillContainer.tsx +++ b/ts/components/basic/PillContainer.tsx @@ -6,6 +6,8 @@ type PillContainerProps = { margin?: string; padding?: string; onClick?: () => void; + onMouseEnter?: () => void; + onMouseLeave?: () => void; }; const StyledPillContainer = styled.div` @@ -13,6 +15,50 @@ const StyledPillContainer = styled.div` background: none; flex-direction: 'row'; flex-grow: 1; + flex: 1 1 40%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + align-items: center; + padding: ${props => props.padding || ''}; + margin: ${props => props.margin || ''}; + border-radius: 300px; + cursor: pointer; + border: 1px solid ${props => props.theme.colors.pillDividerColor}; + transition: ${props => props.theme.common.animations.defaultDuration}; + &:hover { + background: ${props => props.theme.colors.clickableHovered}; + } +`; + +const StyledPillContainerHoverable = styled.div` + background: none; + + position: relative; + flex-direction: 'row'; + + width: 50%; + white-space: nowrap; + text-overflow: ellipsis; + align-items: center; + padding: ${props => props.padding || ''}; + margin: ${props => props.margin || ''}; +`; + + +const StyledPillInner = styled.div` + background: green; + background: none; + + display: flex; + flex-direction: 'row'; + flex-grow: 1; + flex: 1 1 40%; + + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + align-items: center; padding: ${props => props.padding || ''}; margin: ${props => props.margin || ''}; @@ -28,3 +74,11 @@ const StyledPillContainer = styled.div` export const PillContainer = (props: PillContainerProps) => { return {props.children}; }; + +export const PillTooltipWrapper = (props: PillContainerProps) => { + return {props.children}; +}; + +export const PillContainerHoverable = (props: PillContainerProps) => { + return {props.children}; +}; \ No newline at end of file diff --git a/ts/components/session/SessionJoinableDefaultRooms.tsx b/ts/components/session/SessionJoinableDefaultRooms.tsx index ee867394f..c89243c87 100644 --- a/ts/components/session/SessionJoinableDefaultRooms.tsx +++ b/ts/components/session/SessionJoinableDefaultRooms.tsx @@ -1,4 +1,4 @@ -import React, { useCallback, useEffect } from 'react'; +import React, { useCallback, useEffect, useState } from 'react'; import { useSelector } from 'react-redux'; import { joinOpenGroupV2WithUIEvents, @@ -9,9 +9,10 @@ import { updateDefaultBase64RoomData } from '../../state/ducks/defaultRooms'; import { StateType } from '../../state/reducer'; import { Avatar, AvatarSize } from '../Avatar'; import { Flex } from '../basic/Flex'; -import { PillContainer } from '../basic/PillContainer'; +import { PillContainerHoverable, PillTooltipWrapper } from '../basic/PillContainer'; import { H3 } from '../basic/Text'; import { SessionSpinner } from './SessionSpinner'; +import styled, { DefaultTheme, useTheme } from "styled-components"; // tslint:disable: no-void-expression export type JoinableRoomProps = { @@ -62,22 +63,88 @@ const SessionJoinableRoomAvatar = (props: JoinableRoomProps) => { ); }; +const StyledRoomName = styled(Flex)` + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + padding: 0 10px; +`; + +const StyledToolTip = styled.div<{ theme: DefaultTheme }>` + padding: ${props => props.theme.common.margins.sm}; + background: ${props => props.theme.colors.clickableHovered}; + font-size: ${props => props.theme.common.fonts.xs}; + border: 1px solid ${props => props.theme.colors.pillDividerColor}; + display: inline-block; + position: absolute; + white-space: normal; + + top: 100%; + left: 10%; + + border-radius: 300px; + z-index: 999; + opacity: 1; + animation: fadeIn 0.5s ease-out; + + max-width: 80%; + + @keyframes fadeIn { + from { + opacity: 0; + } + } +`; + const SessionJoinableRoomName = (props: JoinableRoomProps) => { - return {props.name}; + return {props.name}; }; const SessionJoinableRoomRow = (props: JoinableRoomProps) => { + const [hoverDelayReached, setHoverDelayReached] = useState(false); + const [isHovering, setIsHovering] = useState(false); + const [delayHandler, setDelayHandler] = useState(null); + const theme: DefaultTheme = useTheme(); + + const handleMouseEnter = () => { + setIsHovering(true); + setDelayHandler(setTimeout(() => { + setHoverDelayReached(true); + }, 750)) + } + const handleMouseLeave = () => { + setIsHovering(false); + setHoverDelayReached(false); + if (delayHandler) { + clearTimeout(delayHandler); + } + } + + const showTooltip = hoverDelayReached && isHovering; + return ( - { - props.onClick(props.completeUrl); - }} - margin="5px" - padding="5px" - > - - - + + { + props.onClick(props.completeUrl); + }} + margin="5px" + padding="5px" + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} + > + + + + + + {showTooltip && + + {props.name} + + } + + ); }; From 3606987f3240f41949033e0ba38adc3f08a6b690 Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Fri, 13 Aug 2021 15:38:19 +1000 Subject: [PATCH 2/3] running yarn ready --- ts/components/basic/PillContainer.tsx | 7 ++- .../session/SessionJoinableDefaultRooms.tsx | 52 +++++++++---------- 2 files changed, 27 insertions(+), 32 deletions(-) diff --git a/ts/components/basic/PillContainer.tsx b/ts/components/basic/PillContainer.tsx index 70287f2c2..2e8ec5442 100644 --- a/ts/components/basic/PillContainer.tsx +++ b/ts/components/basic/PillContainer.tsx @@ -33,10 +33,10 @@ const StyledPillContainer = styled.div` const StyledPillContainerHoverable = styled.div` background: none; - + position: relative; flex-direction: 'row'; - + width: 50%; white-space: nowrap; text-overflow: ellipsis; @@ -45,7 +45,6 @@ const StyledPillContainerHoverable = styled.div` margin: ${props => props.margin || ''}; `; - const StyledPillInner = styled.div` background: green; background: none; @@ -81,4 +80,4 @@ export const PillTooltipWrapper = (props: PillContainerProps) => { export const PillContainerHoverable = (props: PillContainerProps) => { return {props.children}; -}; \ No newline at end of file +}; diff --git a/ts/components/session/SessionJoinableDefaultRooms.tsx b/ts/components/session/SessionJoinableDefaultRooms.tsx index c89243c87..b7190fc6b 100644 --- a/ts/components/session/SessionJoinableDefaultRooms.tsx +++ b/ts/components/session/SessionJoinableDefaultRooms.tsx @@ -12,7 +12,7 @@ import { Flex } from '../basic/Flex'; import { PillContainerHoverable, PillTooltipWrapper } from '../basic/PillContainer'; import { H3 } from '../basic/Text'; import { SessionSpinner } from './SessionSpinner'; -import styled, { DefaultTheme, useTheme } from "styled-components"; +import styled, { DefaultTheme, useTheme } from 'styled-components'; // tslint:disable: no-void-expression export type JoinableRoomProps = { @@ -108,43 +108,39 @@ const SessionJoinableRoomRow = (props: JoinableRoomProps) => { const handleMouseEnter = () => { setIsHovering(true); - setDelayHandler(setTimeout(() => { - setHoverDelayReached(true); - }, 750)) - } + setDelayHandler( + setTimeout(() => { + setHoverDelayReached(true); + }, 750) + ); + }; const handleMouseLeave = () => { setIsHovering(false); setHoverDelayReached(false); if (delayHandler) { clearTimeout(delayHandler); } - } + }; const showTooltip = hoverDelayReached && isHovering; return ( - - { - props.onClick(props.completeUrl); - }} - margin="5px" - padding="5px" - onMouseEnter={handleMouseEnter} - onMouseLeave={handleMouseLeave} - > - - - - - - {showTooltip && - - {props.name} - - } - - + + { + props.onClick(props.completeUrl); + }} + margin="5px" + padding="5px" + onMouseEnter={handleMouseEnter} + onMouseLeave={handleMouseLeave} + > + + + + + {showTooltip && {props.name}} + ); }; From 5e019c1af432c8514499041823a8b1abe033508f Mon Sep 17 00:00:00 2001 From: Warrick Corfe-Tan Date: Mon, 16 Aug 2021 14:26:52 +1000 Subject: [PATCH 3/3] lowering z-index --- ts/components/session/SessionJoinableDefaultRooms.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/ts/components/session/SessionJoinableDefaultRooms.tsx b/ts/components/session/SessionJoinableDefaultRooms.tsx index b7190fc6b..5a542626f 100644 --- a/ts/components/session/SessionJoinableDefaultRooms.tsx +++ b/ts/components/session/SessionJoinableDefaultRooms.tsx @@ -83,7 +83,7 @@ const StyledToolTip = styled.div<{ theme: DefaultTheme }>` left: 10%; border-radius: 300px; - z-index: 999; + z-index: 5; opacity: 1; animation: fadeIn 0.5s ease-out;