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

Refactored table width and height constants (#14613)

Browse Source 
This PR essentially refactors some hard-coded values for width and
height in the table.

It also fixes a few differences from the Figma design, on the checkbox
column width and the top bar and view bar left alignment with the table.

The blue color has been set like before the refactor of the focus portal
(`theme.adaptiveColors.blue4`)

Fixes in https://github.com/twentyhq/core-team-issues/issues/1490 : 
- Fix first drag and drop column width that has changed from main (see
Figma)
- Unify all widths, heights, z-index, etc. with constants
- Put same blue as before for focused portal

Also removed `focus-active` class because we now use a portal for the
focus.
This commit is contained in:
Lucas Bordeau
2025-09-19 17:19:26 +02:00
committed by GitHub
parent 8ba1dc1d94
commit aff3a300fe
29 changed files with 103 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedCellEffect.tsx
+3 -2
View File
@@ -1,3 +1,4 @@
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
@@ -51,8 +52,8 @@ export const RecordTableScrollToFocusedCellEffect = () => {
}
}
focusElement.style.scrollMarginTop = '32px';
focusElement.style.scrollMarginBottom = '32px';
focusElement.style.scrollMarginTop = `${RECORD_TABLE_ROW_HEIGHT}px`;
focusElement.style.scrollMarginBottom = `${RECORD_TABLE_ROW_HEIGHT}px`;
focusElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableScrollToFocusedRowEffect.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { focusedRecordTableRowIndexComponentState } from '@/object-record/record-table/states/focusedRecordTableRowIndexComponentState';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
@@ -47,8 +48,8 @@ export const RecordTableScrollToFocusedRowEffect = () => {
return;
}
focusElement.style.scrollMarginBottom = '32px';
focusElement.style.scrollMarginTop = '32px';
focusElement.style.scrollMarginBottom = `${RECORD_TABLE_ROW_HEIGHT}px`;
focusElement.style.scrollMarginTop = `${RECORD_TABLE_ROW_HEIGHT}px`;
focusElement.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx
+8 -5
View File
@@ -98,7 +98,7 @@ const StyledTable = styled.div<{
}
div.header-cell:nth-of-type(2) {
left: 16px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
top: 0;
background-color: ${({ theme }) => theme.background.primary};
@@ -110,7 +110,8 @@ const StyledTable = styled.div<{
}
div.header-cell:nth-of-type(3) {
left: 48px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH +
RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
right: 0;
background-color: ${({ theme }) => theme.background.primary};
@@ -140,7 +141,7 @@ const StyledTable = styled.div<{
div.table-cell:nth-of-type(2) {
position: sticky;
left: 16px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
z-index: ${({ hasRecordGroups }) =>
hasRecordGroups
? TABLE_Z_INDEX.cell.withGroups.sticky
@@ -149,14 +150,16 @@ const StyledTable = styled.div<{
div.table-cell-0-0 {
position: sticky;
left: 48px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH +
RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
${HorizontalScrollBoxShadowCSS}
}
div.table-cell:nth-of-type(3) {
position: sticky;
left: 48px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH +
RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
z-index: ${({ hasRecordGroups }) =>
hasRecordGroups
? TABLE_Z_INDEX.cell.withGroups.sticky
packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnCheckboxWidth.ts
+1 -1
View File
@@ -1 +1 @@
export const RECORD_TABLE_COLUMN_CHECKBOX_WIDTH = 32;
export const RECORD_TABLE_COLUMN_CHECKBOX_WIDTH = 28;
packages/twenty-front/src/modules/object-record/record-table/constants/RecordTableColumnDragAndDropWidth.ts
+1 -1
View File
@@ -1 +1 @@
export const RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH = 16;
export const RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH = 12;
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyFetchMoreLoader.tsx
+2 -1
View File
@@ -3,6 +3,7 @@ import { useInView } from 'react-intersection-observer';
import { useRecoilState } from 'recoil';
import { useRecordIndexTableFetchMore } from '@/object-record/record-index/hooks/useRecordIndexTableFetchMore';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { hasRecordTableFetchedAllRecordsComponentState } from '@/object-record/record-table/states/hasRecordTableFetchedAllRecordsComponentState';
import { isFetchingMoreRecordsFamilyState } from '@/object-record/states/isFetchingMoreRecordsFamilyState';
@@ -15,7 +16,7 @@ const StyledText = styled.div`
box-shadow: none;
color: ${GRAY_SCALE.gray40};
display: flex;
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
margin-left: ${({ theme }) => theme.spacing(8)};
padding-left: ${({ theme }) => theme.spacing(2)};
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyLoading.tsx
+2 -2
View File
@@ -3,7 +3,7 @@ import { RecordTableRowContextProvider } from '@/object-record/record-table/cont
import { RecordTableRowDraggableContextProvider } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext';
import { RecordTableBody } from '@/object-record/record-table/record-table-body/components/RecordTableBody';
import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
import { RecordTableCellGrip } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip';
import { RecordTableCellDragAndDrop } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop';
import { RecordTableCellLoading } from '@/object-record/record-table/record-table-cell/components/RecordTableCellLoading';
import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell';
import { RecordTablePlusButtonCellPlaceholder } from '@/object-record/record-table/record-table-cell/components/RecordTablePlusButtonCellPlaceholder';
@@ -40,7 +40,7 @@ export const RecordTableBodyLoading = () => {
data-selectable-id={`row-id-${rowIndex}`}
isFirstRowOfGroup={rowIndex === 0}
>
<RecordTableCellGrip />
<RecordTableCellDragAndDrop />
<RecordTableCellCheckbox />
{visibleRecordFields.map((recordField, index) => (
<RecordTableCellLoading
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx
+3 -9
View File
@@ -5,10 +5,11 @@ import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldCont
import { useFieldFocus } from '@/object-record/record-field/ui/hooks/useFieldFocus';
import { isFieldIdentifierDisplay } from '@/object-record/record-field/ui/meta-types/display/utils/isFieldIdentifierDisplay';
import { RECORD_CHIP_CLICK_OUTSIDE_ID } from '@/object-record/record-table/constants/RecordChipClickOutsideId';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { RecordTableCellContext } from '@/object-record/record-table/contexts/RecordTableCellContext';
import { useOpenRecordTableCellFromCell } from '@/object-record/record-table/record-table-cell/hooks/useOpenRecordTableCellFromCell';
import { BORDER_COMMON, ThemeContext } from 'twenty-ui/theme';
import { ThemeContext } from 'twenty-ui/theme';
const StyledBaseContainer = styled.div<{
fontColorExtraLight: string;
@@ -17,22 +18,16 @@ const StyledBaseContainer = styled.div<{
backgroundColorSecondary: string;
fontColorSecondary: string;
isReadOnly: boolean;
borderColorBlue: string;
}>`
align-items: center;
box-sizing: border-box;
cursor: ${({ isReadOnly }) => (isReadOnly ? 'default' : 'pointer')};
display: flex;
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
user-select: none;
position: relative;
&.focus-active {
border-radius: ${BORDER_COMMON.radius.sm};
outline: 1px solid ${({ borderColorBlue }) => borderColorBlue};
}
&:hover {
${(props) => {
if (!props.isReadOnly) return '';
@@ -103,7 +98,6 @@ export const RecordTableCellBaseContainer = ({
fontColorExtraLight={theme.font.color.extraLight}
fontColorSecondary={theme.font.color.secondary}
fontColorMedium={theme.border.color.medium}
borderColorBlue={theme.adaptiveColors.blue4}
isReadOnly={isReadOnly ?? false}
id={`record-table-cell-${cellPosition.column}-${cellPosition.row}`}
data-click-outside-id={
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
+5 -4
View File
@@ -1,22 +1,23 @@
import styled from '@emotion/styled';
import { useCallback } from 'react';
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidthClassName';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { RecordTableCellStyleWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper';
import { useSetCurrentRowSelected } from '@/object-record/record-table/record-table-row/hooks/useSetCurrentRowSelected';
import { isDefined } from 'twenty-shared/utils';
import { Checkbox } from 'twenty-ui/input';
export const TABLE_CELL_CHECKBOX_MIN_WIDTH = '24px';
const StyledContainer = styled.div`
align-items: center;
cursor: pointer;
display: flex;
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: center;
min-width: ${TABLE_CELL_CHECKBOX_MIN_WIDTH};
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH};
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH};
padding-right: ${({ theme }) => theme.spacing(1)};
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellGrip.tsx → packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx
+3 -2
View File
@@ -1,13 +1,14 @@
import styled from '@emotion/styled';
import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidthClassName';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
import { useRecordTableRowDraggableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowDraggableContext';
import { RecordTableCellStyleWrapper } from '@/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper';
import { IconListViewGrip } from 'twenty-ui/input';
const StyledContainer = styled.div`
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
border-color: transparent;
cursor: grab;
display: flex;
@@ -27,7 +28,7 @@ const StyledIconWrapper = styled.div<{ isDragging: boolean }>`
}
`;
export const RecordTableCellGrip = () => {
export const RecordTableCellDragAndDrop = () => {
const { dragHandleProps, isDragging } =
useRecordTableRowDraggableContextOrThrow();
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFocusedPortalContent.tsx
+3 -2
View File
@@ -1,4 +1,5 @@
import { FieldDisplay } from '@/object-record/record-field/ui/components/FieldDisplay';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableBodyContextOrThrow } from '@/object-record/record-table/contexts/RecordTableBodyContext';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { RecordTableCellDisplayMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode';
@@ -23,9 +24,9 @@ const StyledRecordTableCellFocusPortalContent = styled.div<{
box-sizing: border-box;
display: flex;
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
outline: ${({ theme }) => `1px solid ${theme.color.blue}`};
outline: ${({ theme }) => `1px solid ${theme.adaptiveColors.blue4}`};
user-select: none;
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellHoveredPortalContent.tsx
+2 -1
View File
@@ -1,6 +1,7 @@
import { FieldDisplay } from '@/object-record/record-field/ui/components/FieldDisplay';
import { FieldContext } from '@/object-record/record-field/ui/contexts/FieldContext';
import { useIsFieldInputOnly } from '@/object-record/record-field/ui/hooks/useIsFieldInputOnly';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableRowContextOrThrow } from '@/object-record/record-table/contexts/RecordTableRowContext';
import { RecordTableCellDisplayMode } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDisplayMode';
import { RecordTableCellEditButton } from '@/object-record/record-table/record-table-cell/components/RecordTableCellEditButton';
@@ -30,7 +31,7 @@ const StyledRecordTableCellHoveredPortalContent = styled.div<{
cursor: ${({ isReadOnly }) => (isReadOnly ? 'default' : 'pointer')};
display: flex;
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
outline: ${({ theme, isReadOnly, isRowActive }) =>
isRowActive
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableDragAndDropPlaceholderCell.tsx → packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell.tsx
View File
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/__tests__/useSetIsRecordTableFocusActive.test.tsx
+3 -13
View File
@@ -46,11 +46,13 @@ const renderHooks = () => {
() => {
const { setIsRecordTableCellFocusActive } =
useSetIsRecordTableCellFocusActive('test-table-id');
const isRecordTableFocusActive = useRecoilValue(
isRecordTableCellFocusActiveComponentState.atomFamily({
instanceId: 'test-table-id',
}),
);
const focusPosition = useRecoilValue(
recordTableFocusPositionComponentState.atomFamily({
instanceId: 'test-table-id',
@@ -89,10 +91,6 @@ describe('useSetIsRecordTableFocusActive', () => {
});
});
expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0');
expect(mockClassList.add).toHaveBeenCalledWith('focus-active');
expect(result.current.isRecordTableFocusActive).toBe(true);
expect(result.current.focusPosition).toEqual(cellPosition);
@@ -110,13 +108,9 @@ describe('useSetIsRecordTableFocusActive', () => {
});
});
expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0');
expect(mockClassList.remove).toHaveBeenCalledWith('focus-active');
expect(result.current.isRecordTableFocusActive).toBe(false);
expect(result.current.focusPosition).toEqual(cellPosition);
expect(result.current.focusPosition).toEqual(null);
});
it('should handle case when the cell element is not found', () => {
@@ -133,10 +127,6 @@ describe('useSetIsRecordTableFocusActive', () => {
});
});
expect(mockGetElementById).toHaveBeenCalledWith('record-table-cell-1-0');
expect(mockClassList.add).not.toHaveBeenCalled();
expect(result.current.isRecordTableFocusActive).toBe(true);
expect(result.current.focusPosition).toEqual(cellPosition);
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useFocusRecordTableCell.ts
+4 -13
View File
@@ -17,7 +17,7 @@ export const useFocusRecordTableCell = (recordTableId?: string) => {
recordTableId,
);
const focusPositionState = useRecoilComponentCallbackState(
const focusPositionCallbackState = useRecoilComponentCallbackState(
recordTableFocusPositionComponentState,
recordTableIdFromProps,
);
@@ -30,10 +30,10 @@ export const useFocusRecordTableCell = (recordTableId?: string) => {
useRemoveFocusItemFromFocusStackById();
const focusRecordTableCell = useRecoilCallback(
({ set, snapshot }) => {
({ snapshot }) => {
return (newPosition: TableCellPosition) => {
const currentPosition = snapshot
.getLoadable(focusPositionState)
.getLoadable(focusPositionCallbackState)
.getValue();
if (isDefined(currentPosition)) {
@@ -47,15 +47,6 @@ export const useFocusRecordTableCell = (recordTableId?: string) => {
});
}
set(focusPositionState, newPosition);
if (isDefined(currentPosition)) {
setIsRecordTableCellFocusActive({
isRecordTableFocusActive: false,
cellPosition: currentPosition,
});
}
setIsRecordTableCellFocusActive({
isRecordTableFocusActive: true,
cellPosition: newPosition,
@@ -76,7 +67,7 @@ export const useFocusRecordTableCell = (recordTableId?: string) => {
};
},
[
focusPositionState,
focusPositionCallbackState,
recordTableIdFromProps,
removeFocusItemFromFocusStackById,
setIsRecordTableCellFocusActive,
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/hooks/useSetIsRecordTableCellFocusActive.ts
+16 -13
View File
@@ -1,14 +1,20 @@
import { isRecordTableCellFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableCellFocusActiveComponentState';
import { recordTableFocusPositionComponentState } from '@/object-record/record-table/states/recordTableFocusPositionComponentState';
import { type TableCellPosition } from '@/object-record/record-table/types/TableCellPosition';
import { useRecoilComponentCallbackState } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentCallbackState';
import { useRecoilCallback } from 'recoil';
export const useSetIsRecordTableCellFocusActive = (recordTableId?: string) => {
const isRecordTableFocusActiveState = useRecoilComponentCallbackState(
const isRecordTableFocusActiveCallbackState = useRecoilComponentCallbackState(
isRecordTableCellFocusActiveComponentState,
recordTableId,
);
const recordTableFocusPositionCallbackState = useRecoilComponentCallbackState(
recordTableFocusPositionComponentState,
recordTableId,
);
const setIsRecordTableCellFocusActive = useRecoilCallback(
({ set }) =>
({
@@ -18,21 +24,18 @@ export const useSetIsRecordTableCellFocusActive = (recordTableId?: string) => {
isRecordTableFocusActive: boolean;
cellPosition: TableCellPosition;
}) => {
const cellId = `record-table-cell-${cellPosition.column}-${cellPosition.row}`;
const cellElement = document.getElementById(cellId);
if (isRecordTableFocusActive) {
cellElement?.classList.add('focus-active');
set(isRecordTableFocusActiveCallbackState, true);
set(recordTableFocusPositionCallbackState, cellPosition);
} else {
set(isRecordTableFocusActiveCallbackState, false);
set(recordTableFocusPositionCallbackState, null);
}
if (!isRecordTableFocusActive) {
cellElement?.classList.remove('focus-active');
}
set(isRecordTableFocusActiveState, isRecordTableFocusActive);
},
[isRecordTableFocusActiveState],
[
isRecordTableFocusActiveCallbackState,
recordTableFocusPositionCallbackState,
],
);
return {
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx
+3 -1
View File
@@ -1,6 +1,8 @@
import styled from '@emotion/styled';
import { useContext } from 'react';
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth';
import { RECORD_TABLE_LABEL_IDENTIFIER_COLUMN_WIDTH_ON_MOBILE } from '@/object-record/record-table/constants/RecordTableLabelIdentifierColumnWidthOnMobile';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { TABLE_Z_INDEX } from '@/object-record/record-table/constants/TableZIndex';
@@ -56,7 +58,7 @@ const StyledColumnFooterCell = styled.div<{
${({ isFirstCell, isTableWithGroups }) =>
isFirstCell
? `left: 48px; z-index: ${isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.stickyColumn : TABLE_Z_INDEX.footer.tableWithoutGroups.stickyColumn};`
? `left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px; z-index: ${isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.stickyColumn : TABLE_Z_INDEX.footer.tableWithoutGroups.stickyColumn};`
: `z-index: ${isTableWithGroups ? TABLE_Z_INDEX.footer.tableWithGroups.default : TABLE_Z_INDEX.footer.tableWithoutGroups.default};`}
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx
+2 -1
View File
@@ -1,3 +1,4 @@
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useAggregateRecordsForRecordTableColumnFooter } from '@/object-record/record-table/record-table-footer/hooks/useAggregateRecordsForRecordTableColumnFooter';
import styled from '@emotion/styled';
import { Trans } from '@lingui/react/macro';
@@ -33,7 +34,7 @@ const StyledValueContainer = styled(StyledScrollableContainer)`
align-items: center;
display: flex;
gap: 4px;
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: flex-end;
padding: 0 8px;
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx
+3 -2
View File
@@ -1,5 +1,6 @@
import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector';
import { TABLE_CELL_CHECKBOX_MIN_WIDTH } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
import { RecordTableColumnAggregateFooterCellContext } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterCellContext';
import { RecordTableColumnAggregateFooterValue } from '@/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue';
import { hasAggregateOperationForViewFieldFamilySelector } from '@/object-record/record-table/record-table-footer/states/hasAggregateOperationForViewFieldFamilySelector';
@@ -33,7 +34,7 @@ const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>`
${({ isFirstCell, theme }) =>
isFirstCell &&
`
padding-left: calc(${TABLE_CELL_CHECKBOX_MIN_WIDTH} + ${theme.spacing(1)});
padding-left: calc(${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH} + ${theme.spacing(1)});
`}
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
+5 -3
View File
@@ -3,7 +3,9 @@ import styled from '@emotion/styled';
import { recordIndexAllRecordIdsComponentSelector } from '@/object-record/record-index/states/selectors/recordIndexAllRecordIdsComponentSelector';
import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector';
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidthClassName';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { useResetTableRowSelection } from '@/object-record/record-table/hooks/internal/useResetTableRowSelection';
import { useSelectAllRows } from '@/object-record/record-table/hooks/internal/useSelectAllRows';
@@ -23,7 +25,7 @@ const StyledContainer = styled.div<{
}>`
align-items: center;
display: flex;
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: center;
min-width: 24px;
padding-right: ${({ theme }) => theme.spacing(1)};
@@ -37,12 +39,12 @@ const StyledContainer = styled.div<{
const StyledColumnHeaderCell = styled.div`
background-color: ${({ theme }) => theme.background.primary};
min-width: 32px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
box-sizing: border-box;
cursor: pointer;
max-height: 32px;
max-height: ${RECORD_TABLE_ROW_HEIGHT}px;
`;
export const RecordTableHeaderCheckboxColumn = () => {
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx
+7 -5
View File
@@ -1,5 +1,7 @@
import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector';
import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth';
import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidthClassName';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState';
@@ -16,11 +18,11 @@ const StyledDragDropHeaderCell = styled.div<{
backgroundColor: string;
}>`
background-color: ${({ backgroundColor }) => backgroundColor};
min-width: 16px;
width: 16px;
max-width: 16px;
min-height: 32px;
max-height: 32px;
min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
min-height: ${RECORD_TABLE_ROW_HEIGHT}px;
max-height: ${RECORD_TABLE_ROW_HEIGHT}px;
cursor: pointer;
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx
+3 -2
View File
@@ -1,5 +1,6 @@
import { hasRecordGroupsComponentSelector } from '@/object-record/record-group/states/selectors/hasRecordGroupsComponentSelector';
import { RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME } from '@/object-record/record-table/constants/RecordTableColumnLastEmptyColumnWidthClassName';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState';
import { isRecordTableRowFocusActiveComponentState } from '@/object-record/record-table/states/isRecordTableRowFocusActiveComponentState';
import { isRecordTableRowFocusedComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowFocusedComponentFamilyState';
@@ -23,8 +24,8 @@ const StyledLastColumnHeader = styled.div<{
cursor: pointer;
height: 32px;
max-height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
max-height: ${RECORD_TABLE_ROW_HEIGHT}px;
`;
export const RecordTableHeaderLastEmptyColumn = () => {
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
+5 -3
View File
@@ -2,10 +2,11 @@ import styled from '@emotion/styled';
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth';
import { RECORD_TABLE_ROW_HEIGHT } from '@/object-record/record-table/constants/RecordTableRowHeight';
import { useRecordTableContextOrThrow } from '@/object-record/record-table/contexts/RecordTableContext';
import { RecordTableDragAndDropPlaceholderCell } from '@/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell';
import { RecordTableAddButtonPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableAddButtonPlaceholderCell';
import { RecordTableDragAndDropPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableDragAndDropPlaceholderCell';
import { RecordTableGroupSectionLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell';
import { useTheme } from '@emotion/react';
import {
@@ -62,7 +63,7 @@ const StyledIconContainer = styled.div`
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
position: sticky;
left: 16px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
`;
const StyledActionTextContainer = styled.div<{ width: number }>`
@@ -74,7 +75,8 @@ const StyledActionTextContainer = styled.div<{ width: number }>`
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: start;
left: 48px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH +
RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
position: sticky;
width: ${({ width }) => width}px;
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRow.tsx
+3 -3
View File
@@ -1,6 +1,6 @@
import { useRecordIndexContextOrThrow } from '@/object-record/record-index/contexts/RecordIndexContext';
import { RecordTableCellCheckbox } from '@/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox';
import { RecordTableCellGrip } from '@/object-record/record-table/record-table-cell/components/RecordTableCellGrip';
import { RecordTableCellDragAndDrop } from '@/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop';
import { RecordTableLastEmptyCell } from '@/object-record/record-table/record-table-cell/components/RecordTableLastEmptyCell';
import { RecordTablePlusButtonCellPlaceholder } from '@/object-record/record-table/record-table-cell/components/RecordTablePlusButtonCellPlaceholder';
import { RecordTableCells } from '@/object-record/record-table/record-table-row/components/RecordTableCells';
@@ -52,7 +52,7 @@ export const RecordTableRow = ({
<RecordTableRowArrowKeysEffect />
</>
)}
<RecordTableCellGrip />
<RecordTableCellDragAndDrop />
<RecordTableCellCheckbox />
<RecordTableCells />
<RecordTablePlusButtonCellPlaceholder />
@@ -75,7 +75,7 @@ export const RecordTableRow = ({
<RecordTableRowArrowKeysEffect />
</>
)}
<RecordTableCellGrip />
<RecordTableCellDragAndDrop />
<RecordTableCellCheckbox />
<RecordTableCells />
<RecordTablePlusButtonCellPlaceholder />
packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx
+7 -5
View File
@@ -17,6 +17,7 @@ import { useRecordTableContextOrThrow } from '@/object-record/record-table/conte
import { RecordTableAddButtonPlaceholderCell } from '@/object-record/record-table/record-table-row/components/RecordTableAddButtonPlaceholderCell';
import { RecordTableGroupSectionLastDynamicFillingCell } from '@/object-record/record-table/record-table-row/components/RecordTableGroupSectionLastDynamicFillingCell';
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
import { useAggregateRecordsForRecordTableSection } from '@/object-record/record-table/record-table-section/hooks/useAggregateRecordsForRecordTableSection';
import { isRecordGroupTableSectionToggledComponentState } from '@/object-record/record-table/record-table-section/states/isRecordGroupTableSectionToggledComponentState';
import { isRecordTableRowActiveComponentFamilyState } from '@/object-record/record-table/states/isRecordTableRowActiveComponentFamilyState';
@@ -54,11 +55,11 @@ const StyledChevronContainer = styled.div`
display: flex;
text-align: center;
vertical-align: middle;
width: 32px;
min-width: 32px;
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
position: sticky;
left: 16px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
z-index: ${TABLE_Z_INDEX.groupSection.stickyCell};
`;
@@ -76,12 +77,13 @@ const StyledRecordGroupSection = styled.div<{ width: number }>`
display: flex;
flex-direction: row;
gap: ${({ theme }) => theme.spacing(1)};
height: 32px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
width: ${({ width }) => width}px;
min-width: ${({ width }) => width}px;
position: sticky;
left: 48px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH +
RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
z-index: ${TABLE_Z_INDEX.groupSection.stickyCell};
`;
packages/twenty-front/src/modules/settings/roles/role-permissions/object-level-permissions/object-form/components/OverridableCheckbox.tsx
+4 -1
View File
@@ -1,3 +1,5 @@
import { RECORD_TABLE_COLUMN_CHECKBOX_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnCheckboxWidth';
import { RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH } from '@/object-record/record-table/constants/RecordTableColumnDragAndDropWidth';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { IconReload, IconX } from 'twenty-ui/display';
@@ -10,7 +12,8 @@ const StyledOverridableCheckboxContainer = styled.div`
align-items: center;
display: inline-flex;
justify-content: flex-start;
width: 48px;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH +
RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
`;
const StyledOverridableCheckboxContainerItem = styled.div`
packages/twenty-front/src/modules/ui/layout/dropdown/components/StyledDropdownButtonContainer.tsx
+1 -1
View File
@@ -21,7 +21,7 @@ export const StyledDropdownButtonContainer = styled.div<StyledDropdownButtonProp
display: flex;
padding: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
padding-left: ${({ theme }) => theme.spacing(1)};
padding-right: ${({ theme }) => theme.spacing(2)};
user-select: none;
packages/twenty-front/src/modules/ui/layout/top-bar/components/TopBar.tsx
+1 -1
View File
@@ -12,7 +12,7 @@ type TopBarProps = {
const StyledContainer = styled.div`
border-bottom: ${({ theme }) => `1px solid ${theme.border.color.light}`};
display: flex;
margin-left: ${({ theme }) => theme.spacing(2)};
margin-left: ${({ theme }) => theme.spacing(3)};
flex-direction: column;
`;
packages/twenty-front/src/modules/views/components/ViewBarDetails.tsx
-1
View File
@@ -54,7 +54,6 @@ const StyledBar = styled.div`
min-height: 32px;
padding-top: ${({ theme }) => theme.spacing(1)};
padding-bottom: ${({ theme }) => theme.spacing(1)};
padding-left: ${({ theme }) => theme.spacing(2)};
z-index: 4;
`;