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'; import { prefillRecord } from '@/object-record/utils/prefillRecord';
const StyledSelectContainer = styled.div` const StyledSelectContainer = styled.div`
left: 0px;
position: absolute; position: absolute;
top: -8px; left: 0;
top: 0;
`; `;
type ActivityTargetInlineCellEditModeProps = { 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` const StyledValueContainer = styled.div`
display: flex; display: flex;
width: 100%; flex-grow: 1;
min-width: 0;
`; `;
const StyledLabelContainer = styled.div<{ width?: number }>` 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 <RecordInlineCellSkeletonLoader />;
} }
return !readonly && isInlineCellInEditMode ? ( return (
<RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode> <>
) : editModeContentOnly ? ( {!readonly && isInlineCellInEditMode && (
<StyledClickableContainer readonly={readonly}> <RecordInlineCellEditMode>{editModeContent}</RecordInlineCellEditMode>
<RecordInlineCellDisplayMode )}
disableHoverEffect={disableHoverEffect} {editModeContentOnly ? (
isDisplayModeContentEmpty={isDisplayModeContentEmpty} <StyledClickableContainer readonly={readonly}>
isDisplayModeFixHeight={isDisplayModeFixHeight} <RecordInlineCellDisplayMode
isHovered={isFocused} disableHoverEffect={disableHoverEffect}
emptyPlaceholder={showLabel ? 'Empty' : label} isDisplayModeContentEmpty={isDisplayModeContentEmpty}
> isDisplayModeFixHeight={isDisplayModeFixHeight}
{editModeContent} isHovered={isFocused}
</RecordInlineCellDisplayMode> emptyPlaceholder={showLabel ? 'Empty' : label}
</StyledClickableContainer> >
) : ( {editModeContent}
<StyledClickableContainer </RecordInlineCellDisplayMode>
readonly={readonly} </StyledClickableContainer>
onClick={handleDisplayModeClick} ) : (
> <StyledClickableContainer
<RecordInlineCellDisplayMode readonly={readonly}
disableHoverEffect={disableHoverEffect} onClick={handleDisplayModeClick}
isDisplayModeContentEmpty={isDisplayModeContentEmpty} >
isDisplayModeFixHeight={isDisplayModeFixHeight} <RecordInlineCellDisplayMode
isHovered={isFocused} disableHoverEffect={disableHoverEffect}
emptyPlaceholder={showLabel ? 'Empty' : label} isDisplayModeContentEmpty={isDisplayModeContentEmpty}
> isDisplayModeFixHeight={isDisplayModeFixHeight}
{displayModeContent} isHovered={isFocused}
</RecordInlineCellDisplayMode> emptyPlaceholder={showLabel ? 'Empty' : label}
{showEditButton && <RecordInlineCellButton Icon={buttonIcon} />} >
</StyledClickableContainer> {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, [styles.cellBaseContainerSoftFocus]: hasSoftFocus,
})} })}
> >
{isInEditMode ? ( {isInEditMode && (
<RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode> <RecordTableCellEditMode>{editModeContent}</RecordTableCellEditMode>
) : hasSoftFocus ? ( )}
<> {hasSoftFocus ? (
<RecordTableCellSoftFocusMode <RecordTableCellSoftFocusMode
editModeContent={editModeContent} editModeContent={editModeContent}
nonEditModeContent={nonEditModeContent} nonEditModeContent={nonEditModeContent}
/> />
</>
) : ( ) : (
<RecordTableCellDisplayMode> <RecordTableCellDisplayMode>
{nonEditModeContent} {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'; import { autoUpdate, flip, offset, useFloating } from '@floating-ui/react';
const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModeProps>` const StyledEditableCellEditModeContainer = styled.div<RecordTableCellEditModeProps>`
position: absolute;
align-items: center; align-items: center;
display: flex; display: flex;
min-width: 200px; min-width: 200px;