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

4900 multi select field front implement expanded cells (#5151)

Browse Source 
Add expanded cell


https://github.com/twentyhq/twenty/assets/29927851/363f2b44-7b3c-4771-a651-dfc4014da6ac


![image](https://github.com/twentyhq/twenty/assets/29927851/741bb0f9-fd1e-4a38-8b0e-71e144376876)
This commit is contained in:
martmull
2024-05-03 15:03:06 +02:00
committed by GitHub
parent 1351a95754
commit 87994c26ff
51 changed files with 687 additions and 405 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/twenty-front/src/modules/activities/components/ActivityEditorFields.tsx
View File

@ -14,6 +14,7 @@ import {
import { RecordInlineCell } from '@/object-record/record-inline-cell/components/RecordInlineCell';
import { PropertyBox } from '@/object-record/record-inline-cell/property-box/components/PropertyBox';
import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
import { isRightDrawerAnimationCompletedState } from '@/ui/layout/right-drawer/states/isRightDrawerAnimationCompleted';
import { isDefined } from '~/utils/isDefined';
const StyledPropertyBox = styled(PropertyBox)`
@ -27,6 +28,10 @@ export const ActivityEditorFields = ({
}) => {
const { upsertActivity } = useUpsertActivity();
const isRightDrawerAnimationCompleted = useRecoilValue(
isRightDrawerAnimationCompletedState,
);
const getRecordFromCache = useGetRecordFromCache({
objectNameSingular: CoreObjectNameSingular.Activity,
});
@ -93,11 +98,16 @@ export const ActivityEditorFields = ({
</AssigneeFieldContextProvider>
</>
)}
{ActivityTargetsContextProvider && isDefined(activityFromCache) && (
<ActivityTargetsContextProvider>
<ActivityTargetsInlineCell activity={activityFromCache} />
</ActivityTargetsContextProvider>
)}
{ActivityTargetsContextProvider &&
isDefined(activityFromCache) &&
isRightDrawerAnimationCompleted && (
<ActivityTargetsContextProvider>
<ActivityTargetsInlineCell
activity={activityFromCache}
maxWidth={340}
/>
</ActivityTargetsContextProvider>
)}
</StyledPropertyBox>
);
};

102
packages/twenty-front/src/modules/activities/components/ActivityTargetChips.tsx
View File

@ -1,91 +1,47 @@
import { useMemo } from 'react';
import styled from '@emotion/styled';
import { Chip, ChipVariant } from 'twenty-ui';
import { v4 } from 'uuid';
import { ActivityTargetWithTargetRecord } from '@/activities/types/ActivityTargetObject';
import { RecordChip } from '@/object-record/components/RecordChip';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import {
ExpandableList,
ExpandableListProps,
} from '@/ui/layout/expandable-list/components/ExpandableList';
const MAX_RECORD_CHIPS_DISPLAY = 2;
const StyledContainer = styled.div`
const StyledContainer = styled.div<{ maxWidth?: number }>`
display: flex;
flex-wrap: wrap;
gap: ${({ theme }) => theme.spacing(1)};
max-width: ${({ maxWidth }) => `${maxWidth}px` || 'none'};
`;
const StyledRelationsListContainer = styled(StyledContainer)`
padding: ${({ theme }) => theme.spacing(2)};
border-radius: ${({ theme }) => theme.spacing(1)};
background-color: ${({ theme }) => theme.background.secondary};
box-shadow: '0px 2px 4px ${({ theme }) =>
theme.boxShadow.light}, 2px 4px 16px ${({ theme }) =>
theme.boxShadow.strong}';
backdrop-filter: ${({ theme }) => theme.blur.strong};
`;
const showMoreRelationsHandler = (event?: React.MouseEvent<HTMLDivElement>) => {
event?.preventDefault();
event?.stopPropagation();
};
export const ActivityTargetChips = ({
activityTargetObjectRecords,
isHovered,
reference,
maxWidth,
}: {
activityTargetObjectRecords: ActivityTargetWithTargetRecord[];
}) => {
const dropdownId = useMemo(() => `multiple-relations-dropdown-${v4()}`, []);
maxWidth?: number;
} & ExpandableListProps) => {
return (
<StyledContainer>
{activityTargetObjectRecords
?.slice(0, MAX_RECORD_CHIPS_DISPLAY)
.map((activityTargetObjectRecord) => (
<RecordChip
key={activityTargetObjectRecord.targetObject.id}
record={activityTargetObjectRecord.targetObject}
objectNameSingular={
activityTargetObjectRecord.targetObjectMetadataItem.nameSingular
}
/>
))}
{activityTargetObjectRecords.length > MAX_RECORD_CHIPS_DISPLAY && (
<div onClick={showMoreRelationsHandler}>
<Dropdown
dropdownId={dropdownId}
dropdownHotkeyScope={{
scope: dropdownId,
}}
clickableComponent={
<Chip
label={`+${
activityTargetObjectRecords.length - MAX_RECORD_CHIPS_DISPLAY
}`}
variant={ChipVariant.Highlighted}
/>
}
dropdownOffset={{ x: 0, y: -20 }}
dropdownComponents={
<StyledRelationsListContainer>
{activityTargetObjectRecords.map(
(activityTargetObjectRecord) => (
<RecordChip
key={activityTargetObjectRecord.targetObject.id}
record={activityTargetObjectRecord.targetObject}
objectNameSingular={
activityTargetObjectRecord.targetObjectMetadataItem
.nameSingular
}
/>
),
)}
</StyledRelationsListContainer>
}
/>
</div>
)}
<StyledContainer maxWidth={maxWidth}>
<ExpandableList
isHovered={isHovered}
reference={reference}
forceDisplayHiddenCount
>
{activityTargetObjectRecords.map(
(activityTargetObjectRecord, index) => (
<RecordChip
key={index}
record={activityTargetObjectRecord.targetObject}
objectNameSingular={
activityTargetObjectRecord.targetObjectMetadataItem.nameSingular
}
/>
),
)}
</ExpandableList>
</StyledContainer>
);
};

1
packages/twenty-front/src/modules/activities/components/ParticipantChip.tsx
View File

@ -39,6 +39,7 @@ const StyledChip = styled.div`
padding: ${({ theme }) => theme.spacing(1)};
height: 20px;
box-sizing: border-box;
white-space: nowrap;
`;
type ParticipantChipVariant = 'default' | 'bold';