Merge pull request #1847 from warrickct/equal-length-pills
Equalize width open group pills
This commit is contained in:
commit
96df64bd8c
|
@ -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>;
|
||||
};
|
||||
|
|
|
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
|
|
Loading…
Reference in New Issue