From ed4e1234bda034a8f7a743f9d38b706c8750f63f Mon Sep 17 00:00:00 2001 From: sid0-0 Date: Tue, 1 Oct 2024 02:35:51 +0530 Subject: [PATCH 1/5] Handling filename overflow in mobile viewports --- .../modules/activities/files/components/AttachmentRow.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 478cacc723e4..36c64148bd0d 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -27,12 +27,14 @@ const StyledRow = styled.div` justify-content: space-between; padding: ${({ theme }) => theme.spacing(2)}; height: 32px; + gap: ${({ theme }) => theme.spacing(3)}; `; const StyledLeftContent = styled.div` align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(3)}; + flex-grow: 1; `; const StyledRightContent = styled.div` @@ -52,6 +54,9 @@ const StyledLink = styled.a` color: ${({ theme }) => theme.font.color.primary}; display: flex; text-decoration: none; + width: 0; + flex-grow: 1; + overflow: auto; :hover { color: ${({ theme }) => theme.font.color.secondary}; } @@ -102,6 +107,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { {isEditing ? ( Date: Tue, 1 Oct 2024 02:43:20 +0530 Subject: [PATCH 2/5] reverting unnecessary style --- .../src/modules/activities/files/components/AttachmentRow.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 36c64148bd0d..5cc543ff7601 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -107,7 +107,6 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { {isEditing ? ( Date: Thu, 10 Oct 2024 09:02:49 +0200 Subject: [PATCH 3/5] Fixed old overflow problem in page right container --- .../files/components/AttachmentList.tsx | 10 +++++- .../files/components/AttachmentRow.tsx | 36 ++++++++++++------- .../components/ShowPageRightContainer.tsx | 2 +- 3 files changed, 34 insertions(+), 14 deletions(-) diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx index e7706f3026a0..00261d2b5914 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentList.tsx @@ -22,6 +22,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%; `; @@ -53,12 +56,17 @@ const StyledAttachmentContainer = styled.div` display: flex; flex-flow: column nowrap; justify-content: center; - width: 100%; + + width: calc(100% - 2px); + + overflow: auto; `; const StyledDropZoneContainer = styled.div` height: 100%; width: 100%; + + overflow: auto; `; export const AttachmentList = ({ diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 5cc543ff7601..60740fbca134 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -13,7 +13,7 @@ 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'; @@ -27,14 +27,19 @@ const StyledRow = styled.div` justify-content: space-between; padding: ${({ theme }) => theme.spacing(2)}; height: 32px; - gap: ${({ theme }) => theme.spacing(3)}; + + width: calc(100% - ${({ theme }) => theme.spacing(4)}); + overflow: auto; `; const StyledLeftContent = styled.div` align-items: center; display: flex; gap: ${({ theme }) => theme.spacing(3)}; - flex-grow: 1; + + width: 100%; + overflow: auto; + flex: 1; `; const StyledRightContent = styled.div` @@ -54,14 +59,19 @@ const StyledLink = styled.a` color: ${({ theme }) => theme.font.color.primary}; display: flex; text-decoration: none; - width: 0; - flex-grow: 1; - overflow: auto; + + 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); @@ -114,12 +124,14 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { fullWidth /> ) : ( - - {attachment.name} - + + + + + )} diff --git a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx index 0df732bfe2a9..e302285f681f 100644 --- a/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx +++ b/packages/twenty-front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx @@ -28,11 +28,11 @@ import { useIsFeatureEnabled } from '@/workspace/hooks/useIsFeatureEnabled'; const StyledShowPageRightContainer = styled.div<{ isMobile: boolean }>` display: flex; - flex: 1 0 0; flex-direction: column; justify-content: start; width: 100%; height: 100%; + overflow: auto; `; const StyledTabListContainer = styled.div` From 4d8d5dc2a09d90b7ac090cc66a252b7a9a7fa210 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Thu, 10 Oct 2024 09:49:08 +0200 Subject: [PATCH 4/5] Refactored ActivityList and ActivityRow components --- .../activities/components/ActivityList.tsx | 16 +++++++++ .../activities/components/ActivityRow.tsx | 35 +++++++++++++++++++ .../emails/components/EmailThreadPreview.tsx | 35 ++++--------------- .../emails/components/EmailThreads.tsx | 14 +++----- .../files/components/AttachmentList.tsx | 20 ++--------- .../files/components/AttachmentRow.tsx | 19 ++-------- .../activities/tasks/components/TaskList.tsx | 16 ++++----- .../activities/tasks/components/TaskRow.tsx | 22 ++---------- 8 files changed, 78 insertions(+), 99 deletions(-) create mode 100644 packages/twenty-front/src/modules/activities/components/ActivityList.tsx create mode 100644 packages/twenty-front/src/modules/activities/components/ActivityRow.tsx diff --git a/packages/twenty-front/src/modules/activities/components/ActivityList.tsx b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx new file mode 100644 index 000000000000..b8b8b2f61d5f --- /dev/null +++ b/packages/twenty-front/src/modules/activities/components/ActivityList.tsx @@ -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 {children}; +}; diff --git a/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx new file mode 100644 index 000000000000..00fdbb1a68f8 --- /dev/null +++ b/packages/twenty-front/src/modules/activities/components/ActivityRow.tsx @@ -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) => void; + disabled?: boolean; +}>) => { + const handleClick = (event: React.MouseEvent) => { + if (disabled !== true) { + onClick?.(event); + } + }; + + return ( + + {children} + + ); +}; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx index bb7f8c1407f4..cfa2aa672853 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreadPreview.tsx @@ -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; @@ -82,16 +67,10 @@ const StyledReceivedAt = styled.div` `; type EmailThreadPreviewProps = { - divider?: boolean; thread: TimelineThread; }; -export const EmailThreadPreview = ({ - divider, - thread, -}: EmailThreadPreviewProps) => { - const cardRef = useRef(null); - +export const EmailThreadPreview = ({ thread }: EmailThreadPreviewProps) => { const { openEmailThread } = useEmailThread(); const visibility = thread.visibility; @@ -143,12 +122,12 @@ export const EmailThreadPreview = ({ ], ); + const isDisabled = visibility !== MessageChannelVisibility.ShareEverything; + return ( - handleThreadClick(event)} - divider={divider} - visibility={visibility} + disabled={isDisabled} > @@ -201,6 +180,6 @@ export const EmailThreadPreview = ({ {formatToHumanReadableDate(thread.lastMessageReceivedAt)} - + ); }; diff --git a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx index 17f44524fea6..8a3eef7ea33f 100644 --- a/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx +++ b/packages/twenty-front/src/modules/activities/emails/components/EmailThreads.tsx @@ -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'; @@ -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'; @@ -106,15 +106,11 @@ export const EmailThreads = ({ fontColor={H1TitleFontColor.Primary} /> {!firstQueryLoading && ( - - {timelineThreads?.map((thread: TimelineThread, index: number) => ( - + + {timelineThreads?.map((thread: TimelineThread) => ( + ))} - + )} 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: calc(100% - 2px); - - overflow: auto; -`; - const StyledDropZoneContainer = styled.div` height: 100%; width: 100%; @@ -99,11 +85,11 @@ export const AttachmentList = ({ onUploadFile={onUploadFile} /> ) : ( - + {attachments.map((attachment) => ( ))} - + )} diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx index 60740fbca134..24a54e677ac5 100644 --- a/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx +++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentRow.tsx @@ -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'; @@ -18,20 +19,6 @@ 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; - - width: calc(100% - ${({ theme }) => theme.spacing(4)}); - overflow: auto; -`; - const StyledLeftContent = styled.div` align-items: center; display: flex; @@ -112,7 +99,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { return ( - + {isEditing ? ( @@ -148,7 +135,7 @@ export const AttachmentRow = ({ attachment }: { attachment: Attachment }) => { onRename={handleRename} /> - + ); }; diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx index 10e7982ca04f..56082db0dc4c 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskList.tsx @@ -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'; @@ -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` @@ -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 && ( @@ -58,11 +54,11 @@ export const TaskList = ({ title, tasks, button }: TaskListProps) => ( )} {button} - + {tasks.map((task) => ( ))} - + )} diff --git a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx index efd4323143b0..fc68a1ee1ea9 100644 --- a/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx +++ b/packages/twenty-front/src/modules/activities/tasks/components/TaskRow.tsx @@ -8,28 +8,12 @@ import { getActivitySummary } from '@/activities/utils/getActivitySummary'; import { Checkbox, CheckboxShape } from '@/ui/input/components/Checkbox'; import { beautifyExactDate, hasDatePassed } from '~/utils/date-utils'; +import { ActivityRow } from '@/activities/components/ActivityRow'; import { Task } from '@/activities/types/Task'; import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular'; import { useFieldContext } from '@/object-record/hooks/useFieldContext'; import { useCompleteTask } from '../hooks/useCompleteTask'; -const StyledContainer = styled.div` - align-items: center; - justify-content: space-between; - border-bottom: 1px solid ${({ theme }) => theme.border.color.light}; - cursor: pointer; - display: flex; - height: ${({ theme }) => theme.spacing(12)}; - min-width: calc(100% - ${({ theme }) => theme.spacing(8)}); - max-width: calc(100% - ${({ theme }) => theme.spacing(8)}); - padding: 0 ${({ theme }) => theme.spacing(4)}; - overflow: hidden; - max-inline-size: 60px; - &:last-child { - border-bottom: 0; - } -`; - const StyledTaskBody = styled.div` color: ${({ theme }) => theme.font.color.tertiary}; display: flex; @@ -105,7 +89,7 @@ export const TaskRow = ({ task }: { task: Task }) => { }); return ( - { openActivityRightDrawer(task.id); }} @@ -150,6 +134,6 @@ export const TaskRow = ({ task }: { task: Task }) => { {task.dueAt && beautifyExactDate(task.dueAt)} - + ); }; From 996554f3a8da6c3547d8b0111ad08b96374e97e9 Mon Sep 17 00:00:00 2001 From: Lucas Bordeau Date: Thu, 10 Oct 2024 09:57:19 +0200 Subject: [PATCH 5/5] Fixed story --- .../data-model/__stories__/SettingsNewObject.stories.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx index a90160ea1301..8815ff456414 100644 --- a/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx +++ b/packages/twenty-front/src/pages/settings/data-model/__stories__/SettingsNewObject.stories.tsx @@ -28,6 +28,9 @@ export type Story = StoryObj; export const WithStandardSelected: Story = { play: async () => { const canvas = within(document.body); + + await canvas.findByText('New Object'); + const listingInput = await canvas.findByPlaceholderText('Listing'); const pluralInput = await canvas.findByPlaceholderText('Listings'); const descriptionInput = await canvas.findByPlaceholderText(