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

Add minor UI updates (#772)

Browse Source 
* Add minor UI updates

* Fix lint

* Fix company board card fields

* Fix company board card fields

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Emilien Chauvet
2023-07-19 22:40:52 -07:00
committed by GitHub
parent 7670ae5638
commit 8cd426fab8
8 changed files with 64 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
front/src/modules/ui/table/editable-cell/components/EditableCell.tsx
View File

@ -28,6 +28,7 @@ type OwnProps = {
editModeVerticalPosition?: 'over' | 'below';
editHotkeyScope?: HotkeyScope;
transparent?: boolean;
maxContentWidth?: number;
onSubmit?: () => void;
onCancel?: () => void;
};
@ -39,6 +40,7 @@ export function EditableCell({
nonEditModeContent,
editHotkeyScope,
transparent = false,
maxContentWidth,
onSubmit,
onCancel,
}: OwnProps) {
@ -50,6 +52,7 @@ export function EditableCell({
<CellBaseContainer>
{isCurrentCellInEditMode ? (
<EditableCellEditMode
maxContentWidth={maxContentWidth}
transparent={transparent}
editModeHorizontalAlign={editModeHorizontalAlign}
editModeVerticalPosition={editModeVerticalPosition}

9
front/src/modules/ui/table/editable-cell/components/EditableCellEditMode.tsx
View File

@ -17,20 +17,23 @@ export const EditableCellEditModeContainer = styled.div<OwnProps>`
margin-left: -1px;
margin-top: -1px;
max-width: ${({ maxContentWidth }) =>
maxContentWidth ? `${maxContentWidth}px` : 'auto'};
min-height: 100%;
min-width: 100%;
position: absolute;
position: absolute;
right: ${(props) =>
props.editModeHorizontalAlign === 'right' ? '0' : 'auto'};
top: ${(props) => (props.editModeVerticalPosition === 'over' ? '0' : '100%')};
z-index: 1;
${({ transparent }) => (transparent ? '' : overlayBackground)};
z-index: 1;
`;
type OwnProps = {
children: ReactElement;
transparent?: boolean;
maxContentWidth?: number;
editModeHorizontalAlign?: 'left' | 'right';
editModeVerticalPosition?: 'over' | 'below';
onOutsideClick?: () => void;
@ -45,6 +48,7 @@ export function EditableCellEditMode({
onCancel,
onSubmit,
transparent = false,
maxContentWidth,
}: OwnProps) {
const wrapperRef = useRef(null);
@ -52,6 +56,7 @@ export function EditableCellEditMode({
return (
<EditableCellEditModeContainer
maxContentWidth={maxContentWidth}
transparent={transparent}
data-testid="editable-cell-edit-mode-container"
ref={wrapperRef}