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

Implemented dropdown menu section label in filter and sort (#12453)

Browse Source 
This PR implements a new component `DropdownMenuSectionLabel`, to be
used for indicating visible and hidden fields in the multiple dropdowns
that use those two sections.

After : 

<img width="247" alt="Capture d’écran 2025-06-04 à 12 49 42"
src="https://github.com/user-attachments/assets/759c48ca-c54d-4921-bea6-cbfe7a2d244d"
/>
<img width="252" alt="Capture d’écran 2025-06-04 à 12 49 20"
src="https://github.com/user-attachments/assets/72cd63d0-e5d6-4000-897d-c16efd8396c9"
/>
<img width="359" alt="Capture d’écran 2025-06-04 à 12 48 44"
src="https://github.com/user-attachments/assets/d7c41039-dc15-46d7-be89-33a39e226fb2"
/>

In this PR we also fix the scrolling behavior of those two sections so
that it is more natural. The height mechanism will be properly
refactored by this issue :
https://github.com/twentyhq/twenty/issues/11766, in the mean time this
temporary modification is working :


https://github.com/user-attachments/assets/c7ddb424-66b9-41e3-a6a8-a29ece09d62e

Some components that weren't used are also removed :
`AdvancedFilterDropdownFieldSelectMenu`,
`AdvancedFilterDropdownFieldSelectMenuItem` and
`AdvancedFilterDropdownSubFieldSelectMenu`

Fixes https://github.com/twentyhq/core-team-issues/issues/1000
This commit is contained in:
Lucas Bordeau
2025-06-05 20:50:12 +02:00
committed by GitHub
parent 26bd16a2cb
commit 276f1796cc
9 changed files with 187 additions and 585 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuItemsContainer.tsx
View File

@ -49,12 +49,14 @@ export const DropdownMenuItemsContainer = ({
className,
scrollable = true,
width = 'auto',
scrollWrapperHeightAuto,
}: {
children: React.ReactNode;
hasMaxHeight?: boolean;
className?: string;
scrollable?: boolean;
width?: number | 'auto' | '100%';
scrollWrapperHeightAuto?: boolean;
}) => {
const id = useId();
@ -68,6 +70,7 @@ export const DropdownMenuItemsContainer = ({
{hasMaxHeight ? (
<StyledScrollWrapper
componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
heightAuto={scrollWrapperHeightAuto}
>
<StyledDropdownMenuItemsInternalContainer>
{children}
@ -80,7 +83,10 @@ export const DropdownMenuItemsContainer = ({
)}
</StyledDropdownMenuItemsExternalContainer>
) : (
<ScrollWrapper componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}>
<ScrollWrapper
componentInstanceId={`scroll-wrapper-dropdown-menu-${id}`}
heightAuto={scrollWrapperHeightAuto}
>
<StyledDropdownMenuItemsExternalContainer
hasMaxHeight={hasMaxHeight}
className={className}

26
packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuSectionLabel.tsx Normal file
View File

@ -0,0 +1,26 @@
import styled from '@emotion/styled';
const StyledDropdownMenuSectionLabel = styled.div`
background-color: ${({ theme }) => theme.background.transparent.lighter};
color: ${({ theme }) => theme.font.color.light};
min-height: 20px;
width: auto;
font-size: ${({ theme }) => theme.font.size.xxs};
display: flex;
align-items: center;
justify-content: flex-start;
padding-left: ${({ theme }) => theme.spacing(1)};
user-select: none;
`;
export type DropdownMenuSectionLabelProps = {
label: string;
};
export const DropdownMenuSectionLabel = ({
label,
}: DropdownMenuSectionLabelProps) => {
return (
<StyledDropdownMenuSectionLabel>{label}</StyledDropdownMenuSectionLabel>
);
};

7
packages/twenty-front/src/modules/ui/utilities/scroll/components/ScrollWrapper.tsx
View File

@ -7,7 +7,7 @@ import { scrollWrapperScrollLeftComponentState } from '@/ui/utilities/scroll/sta
import { scrollWrapperScrollTopComponentState } from '@/ui/utilities/scroll/states/scrollWrapperScrollTopComponentState';
import { useSetRecoilComponentStateV2 } from '@/ui/utilities/state/component-state/hooks/useSetRecoilComponentStateV2';
const StyledScrollWrapper = styled.div`
const StyledScrollWrapper = styled.div<{ height: string }>`
&.scroll-wrapper-x-enabled {
overflow-x: overlay;
}
@ -17,7 +17,7 @@ const StyledScrollWrapper = styled.div`
overflow-x: hidden;
overflow-y: hidden;
width: 100%;
height: 100%;
height: ${({ height }) => height};
`;
export type ScrollWrapperProps = {
@ -26,6 +26,7 @@ export type ScrollWrapperProps = {
defaultEnableXScroll?: boolean;
defaultEnableYScroll?: boolean;
componentInstanceId: string;
heightAuto?: boolean;
};
export const ScrollWrapper = ({
@ -34,6 +35,7 @@ export const ScrollWrapper = ({
className,
defaultEnableXScroll = true,
defaultEnableYScroll = true,
heightAuto = false,
}: ScrollWrapperProps) => {
const setScrollTop = useSetRecoilComponentStateV2(
scrollWrapperScrollTopComponentState,
@ -71,6 +73,7 @@ export const ScrollWrapper = ({
id={`scroll-wrapper-${componentInstanceId}`}
className={className}
onScroll={handleScroll}
height={heightAuto ? 'auto' : '100%'}
>
{children}
</StyledScrollWrapper>