admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Added tooltip on overflowing texts (#771)

Browse Source 
* Ok

* Fixes

* Fix according to PR

* Fix lint

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Lucas Bordeau
2023-07-20 06:23:42 +02:00
committed by GitHub
parent 60b50387a7
commit 7670ae5638
13 changed files with 176 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
front/src/modules/ui/layout/show-page/components/ShowPageSummaryCard.tsx
View File

@ -9,6 +9,8 @@ import {
beautifyPastDateRelativeToNow,
} from '~/utils/date-utils';
import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
type OwnProps = {
id?: string;
logoOrAvatar?: string;
@ -31,6 +33,7 @@ const StyledInfoContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(1)};
width: 100%;
`;
const StyledDate = styled.div`
@ -42,6 +45,8 @@ const StyledTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.xl};
font-weight: ${({ theme }) => theme.font.weight.semiBold};
max-width: 100%;
`;
const StyledTooltip = styled(Tooltip)`
@ -50,6 +55,8 @@ const StyledTooltip = styled(Tooltip)`
color: ${({ theme }) => theme.font.color.primary};
font-size: ${({ theme }) => theme.font.size.sm};
font-weight: ${({ theme }) => theme.font.weight.regular};
padding: ${({ theme }) => theme.spacing(2)};
`;
@ -74,7 +81,9 @@ export function ShowPageSummaryCard({
placeholder={title}
/>
<StyledInfoContainer>
<StyledTitle>{title}</StyledTitle>
<StyledTitle>
<OverflowingTextWithTooltip text={title} />
</StyledTitle>
<StyledDate id={dateElementId}>
Added {beautifiedCreatedAt} ago
</StyledDate>

41
front/src/modules/ui/layout/top-bar/components/TopBar.tsx
View File

@ -6,6 +6,8 @@ import { IconButton } from '@/ui/button/components/IconButton';
import { IconChevronLeft, IconPlus } from '@/ui/icon/index';
import NavCollapseButton from '@/ui/navbar/components/NavCollapseButton';
import { OverflowingTextWithTooltip } from '../../../tooltip/OverflowingTextWithTooltip';
export const TOP_BAR_MIN_HEIGHT = 40;
const TopBarContainer = styled.div`
@ -14,18 +16,25 @@ const TopBarContainer = styled.div`
color: ${({ theme }) => theme.font.color.primary};
display: flex;
flex-direction: row;
font-size: 14px;
font-size: ${({ theme }) => theme.font.size.lg};
justify-content: space-between;
min-height: ${TOP_BAR_MIN_HEIGHT}px;
padding: ${({ theme }) => theme.spacing(2)};
padding-right: ${({ theme }) => theme.spacing(3)};
`;
const StyledLeftContainer = styled.div`
align-items: center;
display: flex;
flex-direction: row;
width: 100%;
`;
const TitleContainer = styled.div`
display: flex;
font-family: 'Inter';
font-size: 14px;
margin-left: 4px;
width: 100%;
font-size: ${({ theme }) => theme.font.size.md};
margin-left: ${({ theme }) => theme.spacing(1)};
max-width: 50%;
`;
const BackIconButton = styled(IconButton)`
@ -51,15 +60,19 @@ export function TopBar({
return (
<>
<TopBarContainer>
<NavCollapseButton hideIfOpen={true} />
{hasBackButton && (
<BackIconButton
icon={<IconChevronLeft size={16} />}
onClick={navigateBack}
/>
)}
{icon}
<TitleContainer data-testid="top-bar-title">{title}</TitleContainer>
<StyledLeftContainer>
<NavCollapseButton hideIfOpen={true} />
{hasBackButton && (
<BackIconButton
icon={<IconChevronLeft size={16} />}
onClick={navigateBack}
/>
)}
{icon}
<TitleContainer data-testid="top-bar-title">
<OverflowingTextWithTooltip text={title} />
</TitleContainer>
</StyledLeftContainer>
{onAddButtonClick && (
<IconButton
icon={<IconPlus size={16} />}