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

5236 expandable list leave options when editing (#5890)

Browse Source 
Fixes https://github.com/twentyhq/twenty/issues/5236
## After

![image](https://github.com/twentyhq/twenty/assets/29927851/5f0f910c-11b0-40ce-9c59-34e7ce0c2741)
This commit is contained in:
martmull
2024-06-17 10:17:31 +02:00
committed by GitHub
parent d99b9d1d6b
commit d8034b1f40
5 changed files with 47 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/twenty-front/src/modules/activities/inline-cell/components/ActivityTargetInlineCellEditMode.tsx
View File

@ -22,9 +22,9 @@ import { ObjectRecordForSelect } from '@/object-record/relation-picker/hooks/use
import { prefillRecord } from '@/object-record/utils/prefillRecord';
const StyledSelectContainer = styled.div`
left: 0px;
position: absolute;
top: -8px;
left: 0;
top: 0;
`;
type ActivityTargetInlineCellEditModeProps = {

3
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
View File

@ -34,7 +34,8 @@ const StyledLabelAndIconContainer = styled.div`
const StyledValueContainer = styled.div`
display: flex;
width: 100%;
flex-grow: 1;
min-width: 0;
`;
const StyledLabelContainer = styled.div<{ width?: number }>`

65
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
View File

@ -72,35 +72,40 @@ export const RecordInlineCellValue = ({
return <RecordInlineCellSkeletonLoader />;
}
return !readonly && isInlineCellInEditMode ? (
<RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
) : editModeContentOnly ? (
<StyledClickableContainer readonly={readonly}>
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isFocused}
emptyPlaceholder={showLabel ? 'Empty' : label}
>
{editModeContent}
</RecordInlineCellDisplayMode>
</StyledClickableContainer>
) : (
<StyledClickableContainer
readonly={readonly}
onClick={handleDisplayModeClick}
>
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isFocused}
emptyPlaceholder={showLabel ? 'Empty' : label}
>
{displayModeContent}
</RecordInlineCellDisplayMode>
{showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
</StyledClickableContainer>
return (
<>
{!readonly && isInlineCellInEditMode && (
<RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
)}
{editModeContentOnly ? (
<StyledClickableContainer readonly={readonly}>
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isFocused}
emptyPlaceholder={showLabel ? 'Empty' : label}
>
{editModeContent}
</RecordInlineCellDisplayMode>
</StyledClickableContainer>
) : (
<StyledClickableContainer
readonly={readonly}
onClick={handleDisplayModeClick}
>
<RecordInlineCellDisplayMode
disableHoverEffect={disableHoverEffect}
isDisplayModeContentEmpty={isDisplayModeContentEmpty}
isDisplayModeFixHeight={isDisplayModeFixHeight}
isHovered={isFocused}
emptyPlaceholder={showLabel ? 'Empty' : label}
>
{displayModeContent}
</RecordInlineCellDisplayMode>
{showEditButton && <RecordInlineCellButton Icon={buttonIcon} />}
</StyledClickableContainer>
)}
</>
);
};

15
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellContainer.tsx
View File

@ -142,15 +142,14 @@ export const RecordTableCellContainer = ({
[styles.cellBaseContainerSoftFocus]: hasSoftFocus,
})}
>
{isInEditMode ? (
{isInEditMode && (
<RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode>
) : hasSoftFocus ? (
<>
<RecordTableCellSoftFocusMode
editModeContent={editModeContent}
nonEditModeContent={nonEditModeContent}
/>
</>
)}
{hasSoftFocus ? (
<RecordTableCellSoftFocusMode
editModeContent={editModeContent}
nonEditModeContent={nonEditModeContent}
/>
) : (
<RecordTableCellDisplayMode>
{nonEditModeContent}

1
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellEditMode.tsx
View File

@ -4,6 +4,7 @@ import styled from '@emotion/styled';
import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModeProps>`
position: absolute;
align-items: center;
display: flex;
min-width: 200px;