Skip to content

Commit

Permalink
fix: Handling filename overflow in mobile viewports (twentyhq#7364)
Browse files Browse the repository at this point in the history
Fixes twentyhq#7330
Fixes twentyhq#7516 

<div style="display: flex">
<img style="max-width:50%"
src="https://github.com/user-attachments/assets/51027a9d-8745-4cc7-9f17-4000e3615e44"/>
<img style="max-width:50%"
src="https://github.com/user-attachments/assets/827f69ba-c581-402f-9498-6b1a4dde7b69"/>
</div>

---------

Co-authored-by: sid0-0 <[email protected]>
Co-authored-by: Lucas Bordeau <[email protected]>
  • Loading branch information
3 people authored and harshit078 committed Oct 14, 2024
1 parent 9320ac4 commit f1303a5
Show file tree
Hide file tree
Showing 10 changed files with 109 additions and 102 deletions.
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
import { Card } from '@/ui/layout/card/components/Card';
import styled from '@emotion/styled';

const StyledList = styled(Card)`
& > :not(:last-child) {
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
}
width: calc(100% - 2px);
overflow: auto;
`;

export const ActivityList = ({ children }: React.PropsWithChildren) => {
return <StyledList>{children}</StyledList>;
};
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { CardContent } from '@/ui/layout/card/components/CardContent';
import styled from '@emotion/styled';
import React from 'react';

const StyledRowContent = styled(CardContent)<{
clickable?: boolean;
}>`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(12)};
padding: ${({ theme }) => theme.spacing(0, 4)};
cursor: ${({ clickable }) => (clickable === true ? 'pointer' : 'default')};
`;

export const ActivityRow = ({
children,
onClick,
disabled,
}: React.PropsWithChildren<{
onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
disabled?: boolean;
}>) => {
const handleClick = (event: React.MouseEvent<HTMLDivElement>) => {
if (disabled !== true) {
onClick?.(event);
}
};

return (
<StyledRowContent onClick={handleClick} clickable={disabled !== true}>
{children}
</StyledRowContent>
);
};
Original file line number Diff line number Diff line change
@@ -1,30 +1,15 @@
import styled from '@emotion/styled';
import { useRef } from 'react';
import { useRecoilCallback } from 'recoil';
import { Avatar, GRAY_SCALE } from 'twenty-ui';

import { ActivityRow } from '@/activities/components/ActivityRow';
import { EmailThreadNotShared } from '@/activities/emails/components/EmailThreadNotShared';
import { useEmailThread } from '@/activities/emails/hooks/useEmailThread';
import { emailThreadIdWhenEmailThreadWasClosedState } from '@/activities/emails/states/lastViewableEmailThreadIdState';
import { CardContent } from '@/ui/layout/card/components/CardContent';
import { useRightDrawer } from '@/ui/layout/right-drawer/hooks/useRightDrawer';
import { MessageChannelVisibility, TimelineThread } from '~/generated/graphql';
import { formatToHumanReadableDate } from '~/utils/date-utils';

const StyledCardContent = styled(CardContent)<{
visibility: MessageChannelVisibility;
}>`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
height: ${({ theme }) => theme.spacing(12)};
padding: ${({ theme }) => theme.spacing(0, 4)};
cursor: ${({ visibility }) =>
visibility === MessageChannelVisibility.ShareEverything
? 'pointer'
: 'default'};
`;

const StyledHeading = styled.div<{ unread: boolean }>`
display: flex;
overflow: hidden;
Expand Down Expand Up @@ -82,16 +67,10 @@ const StyledReceivedAt = styled.div`
`;

type EmailThreadPreviewProps = {
divider?: boolean;
thread: TimelineThread;
};

export const EmailThreadPreview = ({
divider,
thread,
}: EmailThreadPreviewProps) => {
const cardRef = useRef<HTMLDivElement>(null);

export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => {
const { openEmailThread } = useEmailThread();

const visibility = thread.visibility;
Expand Down Expand Up @@ -143,12 +122,12 @@ export const EmailThreadPreview = ({
],
);

const isDisabled = visibility !== MessageChannelVisibility.ShareEverything;

return (
<StyledCardContent
ref={cardRef}
<ActivityRow
onClick={(event) => handleThreadClick(event)}
divider={divider}
visibility={visibility}
disabled={isDisabled}
>
<StyledHeading unread={!thread.read}>
<StyledParticipantsContainer>
Expand Down Expand Up @@ -201,6 +180,6 @@ export const EmailThreadPreview = ({
<StyledReceivedAt>
{formatToHumanReadableDate(thread.lastMessageReceivedAt)}
</StyledReceivedAt>
</StyledCardContent>
</ActivityRow>
);
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { H1Title, H1TitleFontColor } from 'twenty-ui';

import { ActivityList } from '@/activities/components/ActivityList';
import { CustomResolverFetchMoreLoader } from '@/activities/components/CustomResolverFetchMoreLoader';
import { SkeletonLoader } from '@/activities/components/SkeletonLoader';
import { EmailThreadPreview } from '@/activities/emails/components/EmailThreadPreview';
Expand All @@ -18,7 +19,6 @@ import {
AnimatedPlaceholderEmptyTitle,
EMPTY_PLACEHOLDER_TRANSITION_PROPS,
} from '@/ui/layout/animated-placeholder/components/EmptyPlaceholderStyled';
import { Card } from '@/ui/layout/card/components/Card';
import { Section } from '@/ui/layout/section/components/Section';
import { TimelineThread, TimelineThreadsWithTotal } from '~/generated/graphql';

Expand Down Expand Up @@ -106,15 +106,11 @@ export const EmailThreads = ({
fontColor={H1TitleFontColor.Primary}
/>
{!firstQueryLoading && (
<Card>
{timelineThreads?.map((thread: TimelineThread, index: number) => (
<EmailThreadPreview
key={index}
divider={index < timelineThreads.length - 1}
thread={thread}
/>
<ActivityList>
{timelineThreads?.map((thread: TimelineThread) => (
<EmailThreadPreview key={thread.id} thread={thread} />
))}
</Card>
</ActivityList>
)}
<CustomResolverFetchMoreLoader
loading={isFetchingMore || firstQueryLoading}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import { useUploadAttachmentFile } from '@/activities/files/hooks/useUploadAttac
import { Attachment } from '@/activities/files/types/Attachment';
import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';

import { ActivityList } from '@/activities/components/ActivityList';
import { AttachmentRow } from './AttachmentRow';

type AttachmentListProps = {
Expand All @@ -22,6 +23,9 @@ const StyledContainer = styled.div`
flex-direction: column;
justify-content: center;
padding: ${({ theme }) => theme.spacing(2, 6, 6)};
width: calc(100% - ${({ theme }) => theme.spacing(12)});
height: 100%;
`;

Expand All @@ -44,21 +48,11 @@ const StyledCount = styled.span`
margin-left: ${({ theme }) => theme.spacing(2)};
`;

const StyledAttachmentContainer = styled.div`
align-items: flex-start;
align-self: stretch;
background: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.medium};
border-radius: ${({ theme }) => theme.border.radius.md};
display: flex;
flex-flow: column nowrap;
justify-content: center;
width: 100%;
`;

const StyledDropZoneContainer = styled.div`
height: 100%;
width: 100%;
overflow: auto;
`;

export const AttachmentList = ({
Expand Down Expand Up @@ -91,11 +85,11 @@ export const AttachmentList = ({
onUploadFile={onUploadFile}
/>
) : (
<StyledAttachmentContainer>
<ActivityList>
{attachments.map((attachment) => (
<AttachmentRow key={attachment.id} attachment={attachment} />
))}
</StyledAttachmentContainer>
</ActivityList>
)}
</StyledDropZoneContainer>
</StyledContainer>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import { ActivityRow } from '@/activities/components/ActivityRow';
import { AttachmentDropdown } from '@/activities/files/components/AttachmentDropdown';
import { AttachmentIcon } from '@/activities/files/components/AttachmentIcon';
import { Attachment } from '@/activities/files/types/Attachment';
Expand All @@ -13,26 +14,19 @@ import { TextInput } from '@/ui/input/components/TextInput';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useMemo, useState } from 'react';
import { IconCalendar } from 'twenty-ui';
import { IconCalendar, OverflowingTextWithTooltip } from 'twenty-ui';

import { formatToHumanReadableDate } from '~/utils/date-utils';
import { getFileAbsoluteURI } from '~/utils/file/getFileAbsoluteURI';

const StyledRow = styled.div`
align-items: center;
align-self: stretch;
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
color: ${({ theme }) => theme.font.color.primary};
display: flex;
justify-content: space-between;
padding: ${({ theme }) => theme.spacing(2)};
height: 32px;
`;

const StyledLeftContent = styled.div`
align-items: center;
display: flex;
gap: ${({ theme }) => theme.spacing(3)};
width: 100%;
overflow: auto;
flex: 1;
`;

const StyledRightContent = styled.div`
Expand All @@ -52,11 +46,19 @@ const StyledLink = styled.a`
color: ${({ theme }) => theme.font.color.primary};
display: flex;
text-decoration: none;
width: 100%;
:hover {
color: ${({ theme }) => theme.font.color.secondary};
}
`;

const StyledLinkContainer = styled.div`
overflow: auto;
width: 100%;
`;

export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
const theme = useTheme();
const [isEditing, setIsEditing] = useState(false);
Expand Down Expand Up @@ -97,7 +99,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {

return (
<FieldContext.Provider value={fieldContext as GenericFieldContextType}>
<StyledRow>
<ActivityRow disabled>
<StyledLeftContent>
<AttachmentIcon attachmentType={attachment.type} />
{isEditing ? (
Expand All @@ -109,12 +111,14 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
fullWidth
/>
) : (
<StyledLink
href={getFileAbsoluteURI(attachment.fullPath)}
target="__blank"
>
{attachment.name}
</StyledLink>
<StyledLinkContainer>
<StyledLink
href={getFileAbsoluteURI(attachment.fullPath)}
target="__blank"
>
<OverflowingTextWithTooltip text={attachment.name} />
</StyledLink>
</StyledLinkContainer>
)}
</StyledLeftContent>
<StyledRightContent>
Expand All @@ -131,7 +135,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => {
onRename={handleRename}
/>
</StyledRightContent>
</StyledRow>
</ActivityRow>
</FieldContext.Provider>
);
};
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import styled from '@emotion/styled';
import { ReactElement } from 'react';

import { ActivityList } from '@/activities/components/ActivityList';
import { Task } from '@/activities/types/Task';
import { TaskRow } from './TaskRow';

Expand All @@ -17,7 +18,9 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: center;
padding: 8px 24px;
padding: 8px ${({ theme }) => theme.spacing(6)};
width: calc(100% - ${({ theme }) => theme.spacing(12)});
`;

const StyledTitleBar = styled.div`
Expand All @@ -39,13 +42,6 @@ const StyledCount = styled.span`
margin-left: ${({ theme }) => theme.spacing(2)};
`;

const StyledTaskRows = styled.div`
background-color: ${({ theme }) => theme.background.secondary};
border: 1px solid ${({ theme }) => theme.border.color.light};
border-radius: ${({ theme }) => theme.border.radius.md};
width: 100%;
`;

export const TaskList = ({ title, tasks, button }: TaskListProps) => (
<>
{tasks && tasks.length > 0 && (
Expand All @@ -58,11 +54,11 @@ export const TaskList = ({ title, tasks, button }: TaskListProps) => (
)}
{button}
</StyledTitleBar>
<StyledTaskRows>
<ActivityList>
{tasks.map((task) => (
<TaskRow key={task.id} task={task} />
))}
</StyledTaskRows>
</ActivityList>
</StyledContainer>
)}
</>
Expand Down
Loading

0 comments on commit f1303a5

Please sign in to comment.