Merge pull request #1847 from warrickct/equal-length-pills

Equalize width open group pills

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<PillContainerProps>`
@@ -13,6 +15,49 @@ const StyledPillContainer = styled.div<PillContainerProps>`
   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<PillContainerProps>`
+  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<PillContainerProps>`
+  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 +73,11 @@ const StyledPillContainer = styled.div<PillContainerProps>`
 export const PillContainer = (props: PillContainerProps) => {
   return <StyledPillContainer {...props}>{props.children}</StyledPillContainer>;
 };
+
+export const PillTooltipWrapper = (props: PillContainerProps) => {
+  return <StyledPillContainerHoverable {...props}>{props.children}</StyledPillContainerHoverable>;
+};
+
+export const PillContainerHoverable = (props: PillContainerProps) => {
+  return <StyledPillInner {...props}>{props.children}</StyledPillInner>;
+};

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,84 @@ 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: 5;
+  opacity: 1;
+  animation: fadeIn 0.5s ease-out;
+
+  max-width: 80%;
+
+  @keyframes fadeIn {
+    from {
+      opacity: 0;
+    }
+  }
+`;
+
 const SessionJoinableRoomName = (props: JoinableRoomProps) => {
-  return <Flex padding="0 10px">{props.name}</Flex>;
+  return <StyledRoomName>{props.name}</StyledRoomName>;
 };
 
 const SessionJoinableRoomRow = (props: JoinableRoomProps) => {
+  const [hoverDelayReached, setHoverDelayReached] = useState(false);
+  const [isHovering, setIsHovering] = useState(false);
+  const [delayHandler, setDelayHandler] = useState<null | number>(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 (
-    <PillContainer
-      onClick={() => {
-        props.onClick(props.completeUrl);
-      }}
-      margin="5px"
-      padding="5px"
-    >
-      <SessionJoinableRoomAvatar {...props} />
-      <SessionJoinableRoomName {...props} />
-    </PillContainer>
+    <PillTooltipWrapper>
+      <PillContainerHoverable
+        onClick={() => {
+          props.onClick(props.completeUrl);
+        }}
+        margin="5px"
+        padding="5px"
+        onMouseEnter={handleMouseEnter}
+        onMouseLeave={handleMouseLeave}
+      >
+        <SessionJoinableRoomAvatar {...props} />
+        <SessionJoinableRoomName {...props} />
+      </PillContainerHoverable>
+
+      {showTooltip && <StyledToolTip theme={theme}>{props.name}</StyledToolTip>}
+    </PillTooltipWrapper>
   );
 };