twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-11-26 13:42:44 +03:00
Code Issues Packages Projects Releases Wiki Activity

Fix verticale line timeline activity (#5894)

Browse Source 
Before 

<img width="400" alt="Capture d’écran 2024-06-17 à 10 23 17"
src="https://github.com/twentyhq/twenty/assets/22936103/01408d7b-9a6c-4a21-9f08-c8cf304e2ea0">

After

<img width="400" alt="Capture d’écran 2024-06-17 à 10 05 39"
src="https://github.com/twentyhq/twenty/assets/22936103/df384726-bbf9-4828-ad47-d1c91724947d">
This commit is contained in:
Thomas Trompette 2024-06-17 11:54:04 +02:00 committed by GitHub
parent 1ba7037fdc
commit dba0b28eae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 57 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

111
packages/twenty-front/src/modules/activities/timelineActivities/components/EventRow.tsx
View File

@ -10,10 +10,23 @@ import { TimelineActivity } from '@/activities/timelineActivities/types/Timeline
import { getTimelineActivityAuthorFullName } from '@/activities/timelineActivities/utils/getTimelineActivityAuthorFullName';
import { currentWorkspaceMemberState } from '@/auth/states/currentWorkspaceMemberState';
import { ObjectMetadataItem } from '@/object-metadata/types/ObjectMetadataItem';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import { beautifyPastDateRelativeToNow } from '~/utils/date-utils';
import { isUndefinedOrNull } from '~/utils/isUndefinedOrNull';
const StyledTimelineItemContainer = styled.div`
display: flex;
gap: ${({ theme }) => theme.spacing(4)};
height: 'auto';
justify-content: space-between;
overflow: hidden;
white-space: nowrap;
`;
const StyledLeftContainer = styled.div`
display: flex;
flex-direction: column;
`;
const StyledIconContainer = styled.div`
display: flex;
align-items: center;
@ -25,62 +38,50 @@ const StyledIconContainer = styled.div`
user-select: none;
text-decoration-line: underline;
z-index: 2;
align-self: normal;
`;
const StyledItemContainer = styled.div`
display: flex;
align-items: center;
gap: ${({ theme }) => theme.spacing(1)};
flex: 1;
overflow: hidden;
`;
const StyledItemTitleDate = styled.div`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
justify-content: flex-end;
margin-left: auto;
align-self: baseline;
`;
const StyledVerticalLineContainer = styled.div`
align-items: center;
align-self: stretch;
display: flex;
gap: ${({ theme }) => theme.spacing(2)};
flex-shrink: 0;
justify-content: center;
width: 26px;
z-index: 2;
height: 100%;
`;
const StyledVerticalLine = styled.div`
align-self: stretch;
background: ${({ theme }) => theme.border.color.light};
flex-shrink: 0;
width: 2px;
`;
const StyledTimelineItemContainer = styled.div<{ isGap?: boolean }>`
display: flex;
align-items: center;
justify-content: space-between;
gap: ${({ theme }) => theme.spacing(4)};
height: ${({ isGap, theme }) =>
isGap ? (useIsMobile() ? theme.spacing(6) : theme.spacing(3)) : 'auto'};
overflow: hidden;
white-space: nowrap;
height: 100%;
`;
const StyledSummary = styled.summary`
align-items: center;
display: flex;
flex: 1;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)};
align-items: center;
`;
const StyledItemContainer = styled.div<{ isMarginBottom?: boolean }>`
align-items: flex-start;
display: flex;
flex: 1;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(1)};
overflow: hidden;
margin-bottom: ${({ isMarginBottom, theme }) =>
isMarginBottom ? theme.spacing(3) : 0};
min-height: 26px;
`;
const StyledItemTitleDate = styled.div`
align-items: flex-start;
padding-top: ${({ theme }) => theme.spacing(1)};
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
gap: ${({ theme }) => theme.spacing(1)};
justify-content: flex-end;
margin-left: auto;
`;
type EventRowProps = {
@ -118,13 +119,20 @@ export const EventRow = ({
return (
<>
<StyledTimelineItemContainer>
<StyledIconContainer>
<EventIconDynamicComponent
event={event}
linkedObjectMetadataItem={linkedObjectMetadataItem}
/>
</StyledIconContainer>
<StyledItemContainer>
<StyledLeftContainer>
<StyledIconContainer>
<EventIconDynamicComponent
event={event}
linkedObjectMetadataItem={linkedObjectMetadataItem}
/>
</StyledIconContainer>
{!isLastEvent && (
<StyledVerticalLineContainer>
<StyledVerticalLine />
</StyledVerticalLineContainer>
)}
</StyledLeftContainer>
<StyledItemContainer isMarginBottom={!isLastEvent}>
<StyledSummary>
<EventRowDynamicComponent
authorFullName={authorFullName}
@ -134,18 +142,11 @@ export const EventRow = ({
linkedObjectMetadataItem={linkedObjectMetadataItem}
/>
</StyledSummary>
<StyledItemTitleDate id={`id-${event.id}`}>
{beautifiedCreatedAt}
</StyledItemTitleDate>
</StyledItemContainer>
<StyledItemTitleDate id={`id-${event.id}`}>
{beautifiedCreatedAt}
</StyledItemTitleDate>
</StyledTimelineItemContainer>
{!isLastEvent && (
<StyledTimelineItemContainer isGap>
<StyledVerticalLineContainer>
<StyledVerticalLine />
</StyledVerticalLineContainer>
</StyledTimelineItemContainer>
)}
</>
);
};

2
packages/twenty-front/src/modules/activities/timelineActivities/rows/components/EventCard.tsx
View File

@ -15,7 +15,7 @@ const StyledCardContainer = styled.div`
gap: ${({ theme }) => theme.spacing(2)};
width: 400px;
padding: ${({ theme }) => theme.spacing(2)} 0px
${({ theme }) => theme.spacing(4)} 0px;
${({ theme }) => theme.spacing(1)} 0px;
`;
const StyledCard = styled(Card)`