From de569f4c06148abbd56c8f1862cecd332778b453 Mon Sep 17 00:00:00 2001 From: Charles Bochet Date: Fri, 25 Aug 2023 12:38:45 +0200 Subject: [PATCH] Scroll behavior part 2 (#1304) * Fix layout issues introduced by scroll behavior * Complete scrollbar work --- .../timeline/components/Timeline.tsx | 39 ++------------ .../components/TimelineItemsContainer.tsx | 54 +++++++++++++++++++ .../companies/components/CompanyTeam.tsx | 1 + .../ui/board/components/EntityBoard.tsx | 12 ++--- .../layout/components/ShowPageContainer.tsx | 31 +++++++++-- .../components/ShowPageLeftContainer.tsx | 39 ++++++++++---- .../components/ShowPageRightContainer.tsx | 6 +-- .../right-drawer/components/RightDrawer.tsx | 2 +- .../ui/table/components/EntityTable.tsx | 23 ++++---- .../scroll/components/ScrollWrapper.tsx | 35 ++++++++++++ .../scroll/components/StyledScrollWrapper.tsx | 12 ----- 11 files changed, 162 insertions(+), 92 deletions(-) create mode 100644 front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx create mode 100644 front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx delete mode 100644 front/src/modules/ui/utilities/scroll/components/StyledScrollWrapper.tsx diff --git a/front/src/modules/activities/timeline/components/Timeline.tsx b/front/src/modules/activities/timeline/components/Timeline.tsx index 42471a828..edccddd3a 100644 --- a/front/src/modules/activities/timeline/components/Timeline.tsx +++ b/front/src/modules/activities/timeline/components/Timeline.tsx @@ -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])} /> - - {activities.map((activity) => ( - - ))} - - - - + ); } diff --git a/front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx b/front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx new file mode 100644 index 000000000..00dacd527 --- /dev/null +++ b/front/src/modules/activities/timeline/components/TimelineItemsContainer.tsx @@ -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 ( + + + {activities.map((activity) => ( + + ))} + + + + + + ); +} diff --git a/front/src/modules/companies/components/CompanyTeam.tsx b/front/src/modules/companies/components/CompanyTeam.tsx index 2e85f79fb..877232edf 100644 --- a/front/src/modules/companies/components/CompanyTeam.tsx +++ b/front/src/modules/companies/components/CompanyTeam.tsx @@ -29,6 +29,7 @@ const StyledListContainer = styled.div` align-items: flex-start; border: 1px solid ${({ theme }) => theme.border.color.medium}; border-radius: ${({ theme }) => theme.spacing(1)}; + box-sizing: border-box; display: flex; flex-direction: column; overflow: auto; diff --git a/front/src/modules/ui/board/components/EntityBoard.tsx b/front/src/modules/ui/board/components/EntityBoard.tsx index 580d0a924..891a54a54 100644 --- a/front/src/modules/ui/board/components/EntityBoard.tsx +++ b/front/src/modules/ui/board/components/EntityBoard.tsx @@ -14,8 +14,7 @@ import { BoardColumnIdContext } from '@/ui/board/contexts/BoardColumnIdContext'; import { SelectedSortType } from '@/ui/filter-n-sort/types/interface'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { RecoilScope } from '@/ui/utilities/recoil-scope/components/RecoilScope'; -import { StyledScrollWrapper } from '@/ui/utilities/scroll/components/StyledScrollWrapper'; -import { useListenScroll } from '@/ui/utilities/scroll/hooks/useListenScroll'; +import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { PipelineProgress, PipelineProgressOrderByWithRelationInput, @@ -31,7 +30,7 @@ import { BoardOptions } from '../types/BoardOptions'; import { EntityBoardColumn } from './EntityBoardColumn'; -const StyledCustomScrollWrapper = styled(StyledScrollWrapper)` +const StyledCustomScrollWrapper = styled(ScrollWrapper)` flex-direction: column; `; @@ -103,15 +102,10 @@ export function EntityBoard({ return a.index - b.index; }); - const scrollableRef = useRef(null); const boardRef = useRef(null); - useListenScroll({ - scrollableRef, - }); - return (boardColumns?.length ?? 0) > 0 ? ( - + } diff --git a/front/src/modules/ui/layout/components/ShowPageContainer.tsx b/front/src/modules/ui/layout/components/ShowPageContainer.tsx index 61b2b29ba..298ba216e 100644 --- a/front/src/modules/ui/layout/components/ShowPageContainer.tsx +++ b/front/src/modules/ui/layout/components/ShowPageContainer.tsx @@ -2,14 +2,26 @@ import { ReactElement } from 'react'; import styled from '@emotion/styled'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; +import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; -export const StyledShowPageContainer = styled.div` +const StyledOuterContainer = styled.div` display: flex; - flex-direction: ${() => (useIsMobile() ? 'column' : 'row')}; + gap: ${({ theme }) => (useIsMobile() ? theme.spacing(3) : '0')}; height: ${() => (useIsMobile() ? '100%' : 'auto')}; overflow-x: ${() => (useIsMobile() ? 'hidden' : 'auto')}; - width: ${() => (useIsMobile() ? `calc(100% - 2px);` : '100%')}; + width: 100%; +`; + +const StyledInnerContainer = styled.div` + display: flex; + flex-direction: ${() => (useIsMobile() ? 'column' : 'row')}; + width: 100%; +`; + +const StyledScrollWrapper = styled(ScrollWrapper)` + background-color: ${({ theme }) => theme.background.secondary}; + border-radius: ${({ theme }) => theme.border.radius.md}; `; export type ShowPageContainerProps = { @@ -17,5 +29,16 @@ export type ShowPageContainerProps = { }; export function ShowPageContainer({ children }: ShowPageContainerProps) { - return {children} ; + const isMobile = useIsMobile(); + return isMobile ? ( + + + {children} + + + ) : ( + + {children} + + ); } diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx index 1941a01f8..a3ad18220 100644 --- a/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx +++ b/front/src/modules/ui/layout/show-page/components/ShowPageLeftContainer.tsx @@ -2,27 +2,33 @@ import { ReactElement } from 'react'; import styled from '@emotion/styled'; import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile'; +import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; -const StyledShowPageLeftContainer = styled.div` +const StyledOuterContainer = styled.div` background: ${({ theme }) => theme.background.secondary}; border-bottom-left-radius: 8px; - border-right: 1px solid - ${({ theme }) => { - const isMobile = useIsMobile(); - return !isMobile ? theme.border.color.medium : 0; - }}; + border-right: ${({ theme }) => { + const isMobile = useIsMobile(); + return !isMobile ? `1px solid ${theme.border.color.medium}` : 'none'; + }}; border-top-left-radius: 8px; display: flex; flex-direction: column; gap: ${({ theme }) => theme.spacing(3)}; - padding: 0px ${({ theme }) => theme.spacing(3)}; + + z-index: 10; +`; + +const StyledInnerContainer = styled.div` + display: flex; + flex-direction: column; + padding: 0px ${({ theme }) => theme.spacing(2)} 0px + ${({ theme }) => theme.spacing(3)}; width: ${({ theme }) => { const isMobile = useIsMobile(); - return isMobile ? `calc(100% - ${theme.spacing(6)})` : '320px'; + return isMobile ? `calc(100% - ${theme.spacing(5)})` : '320px'; }}; - - z-index: 10; `; export type ShowPageLeftContainerProps = { @@ -32,5 +38,16 @@ export type ShowPageLeftContainerProps = { export function ShowPageLeftContainer({ children, }: ShowPageLeftContainerProps) { - return {children} ; + const isMobile = useIsMobile(); + return isMobile ? ( + + {children} + + ) : ( + + + {children} + + + ); } diff --git a/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx b/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx index e619d49b9..934c6a6d7 100644 --- a/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx +++ b/front/src/modules/ui/layout/show-page/components/ShowPageRightContainer.tsx @@ -9,11 +9,7 @@ export const StyledShowPageRightContainer = styled.div` flex-direction: column; justify-content: center; overflow: ${() => (useIsMobile() ? 'none' : 'hidden')}; - width: ${({ theme }) => { - const isMobile = useIsMobile(); - - return isMobile ? `calc(100% - ${theme.spacing(6)})` : 'auto'; - }}; + width: calc(100% + 4px); `; export type ShowPageRightContainerProps = { diff --git a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx index d56da4984..e7e301724 100644 --- a/front/src/modules/ui/right-drawer/components/RightDrawer.tsx +++ b/front/src/modules/ui/right-drawer/components/RightDrawer.tsx @@ -31,7 +31,7 @@ const StyledContainer = styled(motion.div)` right: 0; top: 0; - z-index: 2; + z-index: 100; `; const StyledRightDrawer = styled.div` diff --git a/front/src/modules/ui/table/components/EntityTable.tsx b/front/src/modules/ui/table/components/EntityTable.tsx index 907b0571e..ec2e6d03c 100644 --- a/front/src/modules/ui/table/components/EntityTable.tsx +++ b/front/src/modules/ui/table/components/EntityTable.tsx @@ -8,8 +8,7 @@ import type { import { SortType } from '@/ui/filter-n-sort/types/interface'; import { DragSelect } from '@/ui/utilities/drag-select/components/DragSelect'; import { useListenClickOutside } from '@/ui/utilities/pointer-event/hooks/useListenClickOutside'; -import { StyledScrollWrapper } from '@/ui/utilities/scroll/components/StyledScrollWrapper'; -import { useListenScroll } from '@/ui/utilities/scroll/hooks/useListenScroll'; +import { ScrollWrapper } from '@/ui/utilities/scroll/components/ScrollWrapper'; import { EntityUpdateMutationContext } from '../contexts/EntityUpdateMutationHookContext'; import { useLeaveTableFocus } from '../hooks/useLeaveTableFocus'; @@ -125,12 +124,6 @@ export function EntityTable({ }, }); - const scrollableRef = useRef(null); - - useListenScroll({ - scrollableRef, - }); - return ( @@ -143,12 +136,14 @@ export function EntityTable({ onViewSubmit={onViewSubmit} onImport={onImport} /> - - - - - - + +
+ + + + +
+ theme.border.color.medium}; + } +`; + +export type ScrollWrapperProps = { + children: React.ReactNode; + className?: string; +}; + +export function ScrollWrapper({ children, className }: ScrollWrapperProps) { + const scrollableRef = useRef(null); + + useListenScroll({ + scrollableRef, + }); + + return ( + + {children} + + ); +} diff --git a/front/src/modules/ui/utilities/scroll/components/StyledScrollWrapper.tsx b/front/src/modules/ui/utilities/scroll/components/StyledScrollWrapper.tsx deleted file mode 100644 index a3ae157f2..000000000 --- a/front/src/modules/ui/utilities/scroll/components/StyledScrollWrapper.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import styled from '@emotion/styled'; - -export const StyledScrollWrapper = styled.div` - display: flex; - height: 100%; - overflow: auto; - width: 100%; - - &.scrolling::-webkit-scrollbar-thumb { - background-color: ${({ theme }) => theme.border.color.medium}; - } -`;