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

Feat: The scrollbar should fade away when the scroll is finished or not started (#1269)

Browse Source 
* The scrollbar should fade away when the scroll is finished or not started

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>

* Complete scroll work

* Fix pr

* Fix pr

---------

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: FellipeMTX <fellipefacdir@gmail.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-twenty
2023-08-24 23:13:53 +00:00
committed by GitHub
parent 75207b093b
commit e373d17a2a
8 changed files with 87 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
front/src/modules/ui/board/components/EntityBoard.tsx
View File

@ -14,6 +14,8 @@ 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 {
PipelineProgress,
PipelineProgressOrderByWithRelationInput,
@ -29,11 +31,8 @@ import { BoardOptions } from '../types/BoardOptions';
import { EntityBoardColumn } from './EntityBoardColumn';
const StyledBoardWithHeader = styled.div`
display: flex;
flex: 1;
const StyledCustomScrollWrapper = styled(StyledScrollWrapper)`
flex-direction: column;
width: 100%;
`;
export function EntityBoard({
@ -104,10 +103,15 @@ export function EntityBoard({
return a.index - b.index;
});
const boardRef = useRef(null);
const scrollableRef = useRef<HTMLDivElement>(null);
const boardRef = useRef<HTMLDivElement>(null);
useListenScroll({
scrollableRef,
});
return (boardColumns?.length ?? 0) > 0 ? (
<StyledBoardWithHeader>
<StyledCustomScrollWrapper ref={scrollableRef}>
<BoardHeader
viewName="All opportunities"
viewIcon={<IconList size={theme.icon.size.md} />}
@ -115,7 +119,7 @@ export function EntityBoard({
onSortsUpdate={updateSorts}
context={CompanyBoardRecoilScopeContext}
/>
<StyledBoard ref={boardRef}>
<StyledBoard>
<DragDropContext onDragEnd={onDragEnd}>
{sortedBoardColumns.map((column) => (
<BoardColumnIdContext.Provider value={column.id} key={column.id}>
@ -137,7 +141,7 @@ export function EntityBoard({
dragSelectable={boardRef}
onDragSelectionChange={setCardSelected}
/>
</StyledBoardWithHeader>
</StyledCustomScrollWrapper>
) : (
<></>
);