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

Add selected number to title (#11200)

Browse Source 
Fixes https://github.com/twentyhq/core-team-issues/issues/586

<img width="633" alt="Capture d’écran 2025-03-26 à 17 37 10"
src="https://github.com/user-attachments/assets/2215aa95-1f74-4634-b76e-2b9322230fe8"
/>
This commit is contained in:
Thomas Trompette
2025-03-26 18:03:42 +01:00
committed by GitHub
parent 1860768b52
commit b3948d2406
2 changed files with 40 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexPageHeader.tsx
View File

@ -1,15 +1,39 @@
import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActionMenu'; import { RecordIndexActionMenu } from '@/action-menu/components/RecordIndexActionMenu';
import { contextStoreNumberOfSelectedRecordsComponentState } from '@/context-store/states/contextStoreNumberOfSelectedRecordsComponentState';
import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems'; import { useFilteredObjectMetadataItems } from '@/object-metadata/hooks/useFilteredObjectMetadataItems';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext'; import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton'; import { PageHeaderOpenCommandMenuButton } from '@/ui/layout/page-header/components/PageHeaderOpenCommandMenuButton';
import { PageHeader } from '@/ui/layout/page/components/PageHeader'; import { PageHeader } from '@/ui/layout/page/components/PageHeader';
import { useIcons } from 'twenty-ui'; import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
import styled from '@emotion/styled';
import { t } from '@lingui/core/macro';
import { capitalize } from 'twenty-shared/utils'; import { capitalize } from 'twenty-shared/utils';
import { useIcons } from 'twenty-ui';
const StyledTitleWithSelectedRecords = styled.div`
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)};
`;
const StyledTitle = styled.div`
color: ${({ theme }) => theme.font.color.primary};
padding-right: ${({ theme }) => theme.spacing(0.5)};
`;
const StyledSelectedRecordsCount = styled.div`
color: ${({ theme }) => theme.font.color.tertiary};
padding-left: ${({ theme }) => theme.spacing(0.5)};
`;
export const RecordIndexPageHeader = () => { export const RecordIndexPageHeader = () => {
const { findObjectMetadataItemByNamePlural } = const { findObjectMetadataItemByNamePlural } =
useFilteredObjectMetadataItems(); useFilteredObjectMetadataItems();
const contextStoreNumberOfSelectedRecords = useRecoilComponentValueV2(
contextStoreNumberOfSelectedRecordsComponentState,
);
const { objectNamePlural } = useRecordIndexContextOrThrow(); const { objectNamePlural } = useRecordIndexContextOrThrow();
const objectMetadataItem = const objectMetadataItem =
@ -20,8 +44,20 @@ export const RecordIndexPageHeader = () => {
const { recordIndexId } = useRecordIndexContextOrThrow(); const { recordIndexId } = useRecordIndexContextOrThrow();
const label = objectMetadataItem?.labelPlural ?? capitalize(objectNamePlural);
const pageHeaderTitle = const pageHeaderTitle =
objectMetadataItem?.labelPlural ?? capitalize(objectNamePlural); contextStoreNumberOfSelectedRecords > 0 ? (
<StyledTitleWithSelectedRecords>
<StyledTitle>{label}</StyledTitle>
<>{'->'}</>
<StyledSelectedRecordsCount>
{t`${contextStoreNumberOfSelectedRecords} selected`}
</StyledSelectedRecordsCount>
</StyledTitleWithSelectedRecords>
) : (
label
);
return ( return (
<PageHeader title={pageHeaderTitle} Icon={Icon}> <PageHeader title={pageHeaderTitle} Icon={Icon}>

3
packages/twenty-front/src/modules/ui/layout/page/components/PageHeader.tsx
View File

@ -54,7 +54,8 @@ const StyledTitleContainer = styled.div`
display: flex; display: flex;
font-size: ${({ theme }) => theme.font.size.md}; font-size: ${({ theme }) => theme.font.size.md};
font-weight: ${({ theme }) => theme.font.weight.medium}; font-weight: ${({ theme }) => theme.font.weight.medium};
margin-left: ${({ theme }) => theme.spacing(1)}; margin-left: ${({ theme }) => theme.spacing(0.5)};
margin-right: ${({ theme }) => theme.spacing(1)};
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
`; `;