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

Scroll behavior part 2 (#1304)

Browse Source 
* Fix layout issues introduced by scroll behavior

* Complete scrollbar work
This commit is contained in:
Charles Bochet
2023-08-25 12:38:45 +02:00
committed by GitHub
parent 0d210244db
commit de569f4c06
11 changed files with 162 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
front/src/modules/activities/timeline/components/Timeline.tsx
View File

@ -1,12 +1,10 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
import { ActivityForDrawer } from '@/activities/types/ActivityForDrawer';
import { ActivityTargetableEntity } from '@/activities/types/ActivityTargetableEntity';
import { IconCircleDot } from '@/ui/icon';
import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
import {
ActivityType,
@ -14,7 +12,7 @@ import {
useGetActivitiesByTargetsQuery,
} from '~/generated/graphql';
import { TimelineActivity } from './TimelineActivity';
import { TimelineItemsContainer } from './TimelineItemsContainer';
const StyledMainContainer = styled.div`
align-items: flex-start;
@ -22,26 +20,12 @@ const StyledMainContainer = styled.div`
border-top: ${({ theme }) =>
useIsMobile() ? `1px solid ${theme.border.color.medium}` : 'none'};
display: flex;
flex: 1 0 0;
flex-direction: column;
height: 100%;
justify-content: center;
`;
const StyledTimelineContainer = styled.div`
align-items: center;
align-self: stretch;
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(1)};
justify-content: flex-start;
overflow-y: ${() => (useIsMobile() ? 'none' : 'auto')};
padding: ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(4)};
`;
const StyledTimelineEmptyContainer = styled.div`
align-items: center;
align-self: stretch;
@ -85,17 +69,7 @@ const StyledTopActionBar = styled.div`
top: 0px;
`;
const StyledStartIcon = styled.div`
align-self: flex-start;
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
height: 20px;
width: 20px;
`;
export function Timeline({ entity }: { entity: ActivityTargetableEntity }) {
const theme = useTheme();
const { data: queryResult, loading } = useGetActivitiesByTargetsQuery({
variables: {
activityTargetIds: [entity.id],
@ -136,14 +110,7 @@ export function Timeline({ entity }: { entity: ActivityTargetableEntity }) {
onTaskClick={() => openCreateActivity(ActivityType.Task, [entity])}
/>
</StyledTopActionBar>
<StyledTimelineContainer>
{activities.map((activity) => (
<TimelineActivity key={activity.id} activity={activity} />
))}
<StyledStartIcon>
<IconCircleDot size={theme.icon.size.lg} />
</StyledStartIcon>
</StyledTimelineContainer>
<TimelineItemsContainer activities={activities} />
</StyledMainContainer>
);
}

54
front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx Normal file
View File

@ -0,0 +1,54 @@
import React from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { ActivityForDrawer } from '@/activities/types/ActivityForDrawer';
import { IconCircleDot } from '@/ui/icon';
import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper';
import { TimelineActivity } from './TimelineActivity';
const StyledTimelineContainer = styled.div`
align-items: center;
align-self: stretch;
display: flex;
flex: 1 0 0;
flex-direction: column;
gap: ${({ theme }) => theme.spacing(1)};
justify-content: flex-start;
padding: ${({ theme }) => theme.spacing(3)} ${({ theme }) => theme.spacing(4)};
`;
const StyledStartIcon = styled.div`
align-self: flex-start;
color: ${({ theme }) => theme.font.color.tertiary};
display: flex;
height: 20px;
width: 20px;
`;
const StyledScrollWrapper = styled(ScrollWrapper)``;
export type TimelineItemsContainerProps = {
activities: ActivityForDrawer[];
};
export function TimelineItemsContainer({
activities,
}: TimelineItemsContainerProps) {
const theme = useTheme();
return (
<StyledScrollWrapper>
<StyledTimelineContainer>
{activities.map((activity) => (
<TimelineActivity key={activity.id} activity={activity} />
))}
<StyledStartIcon>
<IconCircleDot size={theme.icon.size.lg} />
</StyledStartIcon>
</StyledTimelineContainer>
</StyledScrollWrapper>
);
}