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

Re-enable disabled lint rules and right-size CI runners (#18461)

Browse Source 
## Summary

- Re-enable one lint rule that was temporarily disabled during the
ESLint-to-Oxlint migration:
- **`twenty/sort-css-properties-alphabetically`** in twenty-front — 578
violations auto-fixed across 390 files
- Document why **`typescript/consistent-type-imports`** cannot be
auto-fixed in twenty-server: NestJS relies on `emitDecoratorMetadata`
for DI, so converting constructor parameter imports to `import type`
erases them at compile time and breaks dependency injection at runtime
- Right-size CI runners, reducing 8-core usage from 18 jobs to 3:

| Change | Jobs | Rationale |
|--------|------|-----------|
| **Keep 8-core** | `ci-merge-queue/e2e-test`,
`ci-front/front-sb-build`, `ci-front/front-build` | Heavy builds needing
max CPU + memory (10GB NODE_OPTIONS, full Storybook webpack bundling) |
| **8-core → 4-core** | `ci-server` (build, lint-typecheck, validation,
test, integration-test), `ci-front/front-sb-test`,
`ci-zapier/server-setup`, `ci-sdk/sdk-e2e-test` | Already sharded into
10-12 parallel instances, I/O-bound (DB/Redis), or moderate single
builds |
| **8-core → 2-core** | `ci-emails/emails-test` | Trivially lightweight
(build + curl health check) |
| **Removed** | `ci-front/front-chromatic-deployment` | Dead code —
permanently disabled with `if: false` |

- Fix merge queue CI issues:
- **Concurrency**: Use `merge_group.base_ref` instead of unique merge
group ref so new queue entries cancel previous runs
- **Required status checks**: Add `merge_group` trigger to all 6
required CI workflows (front, server, shared, website, docker-compose,
sdk) with `changed-files-check` auto-skipped for merge_group events —
status check jobs auto-pass without re-running full CI
- **Build caching**: Add Nx build cache restore/save to E2E test job
with fallback to `main` branch cache for faster frontend and server
builds

## Test plan

- [ ] CI passes on this PR (verifies lint rule auto-fix works)
- [ ] Verify 4-core runner jobs complete within their 30-minute timeouts
- [ ] Verify merge queue status checks auto-pass (ci-front-status-check,
ci-server-status-check, etc.)
- [ ] Verify merge queue E2E concurrency cancels previous runs when a
new PR enters the queue
This commit is contained in:
Charles Bochet
2026-03-06 14:33:02 +01:00
committed by GitHub
parent 9f9a6a45dd
commit ef499b6d47
404 changed files with 1755 additions and 1738 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterDropdownRow.tsx
+1 -1
View File
@@ -3,8 +3,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledRow = styled.div`
display: flex;
width: 100%;
gap: ${themeCssVariables.spacing[1]};
width: 100%;
`;
export const AdvancedFilterDropdownRow = StyledRow;
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterFieldSelectSearchInput.tsx
+6 -6
View File
@@ -7,22 +7,22 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
export const StyledInput = styled.input`
background: transparent;
border: none;
border-top: none;
border-bottom: 1px solid ${themeCssVariables.border.color.light};
border-radius: 0;
border-top: none;
border-top-left-radius: ${themeCssVariables.border.radius.md};
border-top-right-radius: ${themeCssVariables.border.radius.md};
color: ${themeCssVariables.font.color.primary};
margin: 0;
outline: none;
padding: ${themeCssVariables.spacing[2]};
min-height: 19px;
font-family: inherit;
font-size: ${themeCssVariables.font.size.sm};
font-weight: inherit;
margin: 0;
max-width: 100%;
min-height: 19px;
outline: none;
overflow: hidden;
padding: ${themeCssVariables.spacing[2]};
text-decoration: none;
&::placeholder {
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterLogicalOperatorCell.tsx
+3 -3
View File
@@ -7,18 +7,18 @@ import { capitalize } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledText = styled.div`
height: ${themeCssVariables.spacing[8]};
display: flex;
align-items: center;
display: flex;
height: ${themeCssVariables.spacing[8]};
padding-left: 9px;
`;
const StyledContainer = styled.div`
align-items: start;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
min-width: ${themeCssVariables.spacing[20]};
color: ${themeCssVariables.font.color.tertiary};
`;
type AdvancedFilterLogicalOperatorCellProps = {
packages/twenty-front/src/modules/object-record/advanced-filter/components/AdvancedFilterValueInputDropdownButtonClickableSelect.tsx
+6 -6
View File
@@ -15,18 +15,18 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
// TODO: factorize this with https://github.com/twentyhq/core-team-issues/issues/752
const StyledControlContainer = styled.div`
display: flex;
align-items: center;
gap: ${themeCssVariables.spacing[1]};
box-sizing: border-box;
height: ${themeCssVariables.spacing[8]};
max-width: 100%;
padding: 0 ${themeCssVariables.spacing[2]};
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
display: flex;
gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[8]};
max-width: 100%;
padding: 0 ${themeCssVariables.spacing[2]};
text-align: left;
`;
packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelColumn.tsx
+1 -1
View File
@@ -4,8 +4,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledColumn = styled.div`
display: flex;
flex-direction: column;
width: 100%;
gap: ${themeCssVariables.spacing[1]};
width: 100%;
`;
export const AdvancedFilterSidePanelColumn = StyledColumn;
packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelLogicalOperatorCell.tsx
+1 -1
View File
@@ -21,9 +21,9 @@ const StyledText = styled.div`
const StyledContainer = styled.div`
align-items: start;
color: ${themeCssVariables.font.color.tertiary};
display: flex;
min-width: ${themeCssVariables.spacing[20]};
color: ${themeCssVariables.font.color.tertiary};
`;
type AdvancedFilterSidePanelLogicalOperatorCellProps = {
packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterColumn.tsx
+1 -1
View File
@@ -18,8 +18,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
gap: ${themeCssVariables.spacing[1]};
justify-content: space-between;
`;
type AdvancedFilterSidePanelRecordFilterColumnProps = {
packages/twenty-front/src/modules/object-record/advanced-filter/side-panel/components/AdvancedFilterSidePanelRecordFilterGroupColumn.tsx
+1 -1
View File
@@ -12,8 +12,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
gap: ${themeCssVariables.spacing[1]};
justify-content: space-between;
`;
export const AdvancedFilterSidePanelRecordFilterGroupColumn = ({
packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownBooleanSelect.tsx
+3 -3
View File
@@ -15,20 +15,20 @@ import { IconCheck } from 'twenty-ui/display';
const StyledBooleanSelectContainer = styled.div<{ selected?: boolean }>`
align-items: center;
border-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
display: flex;
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]}
${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[1]};
border-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.primary};
&:hover {
background: ${themeCssVariables.background.transparent.light};
}
`;
const StyledIconCheckContainer = styled.div`
flex: 1;
display: flex;
flex: 1;
justify-content: flex-end;
`;
packages/twenty-front/src/modules/object-record/object-options-dropdown/components/ObjectOptionsDropdownMenuViewName.tsx
+3 -3
View File
@@ -22,9 +22,9 @@ import { useDebouncedCallback } from 'use-debounce';
const StyledDropdownMenuIconAndNameContainer = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
margin-left: 0;
margin-right: 0;
gap: ${themeCssVariables.spacing[1]};
`;
const StyledMenuTitleContainer = styled.div`
@@ -35,8 +35,8 @@ const StyledMenuTitleContainer = styled.div`
`;
const StyledMenuIconContainer = styled.div`
color: ${themeCssVariables.font.color.primary};
align-items: center;
color: ${themeCssVariables.font.color.primary};
display: flex;
height: ${themeCssVariables.spacing[6]};
justify-content: center;
@@ -46,10 +46,10 @@ const StyledMenuIconContainer = styled.div`
const StyledMainText = styled.div`
color: ${themeCssVariables.font.color.primary};
flex-shrink: 0;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
`;
type ObjectOptionsDropdownMenuViewNameProps = {
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoard.tsx
+2 -2
View File
@@ -23,14 +23,14 @@ const StyledContainer = styled.div`
const StyledContainerContainer = styled.div`
display: flex;
flex-direction: column;
min-height: calc(100% - ${themeCssVariables.spacing[2]});
height: min-content;
min-height: calc(100% - ${themeCssVariables.spacing[2]});
`;
const StyledBoardContentContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1;
flex-direction: column;
`;
export const RecordBoard = () => {
packages/twenty-front/src/modules/object-record/record-board/components/RecordBoardHeader.tsx
+2 -2
View File
@@ -11,10 +11,10 @@ const StyledHeaderContainer = styled.div`
display: flex;
flex-direction: row;
height: 40px;
z-index: 10;
overflow: visible;
width: 100%;
z-index: 10;
&.header-sticky {
position: sticky;
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragCounterChip.tsx
+1 -1
View File
@@ -5,8 +5,8 @@ import { NotificationCounter } from 'twenty-ui/navigation';
const StyledNotificationCounterContainer = styled.div`
position: absolute;
top: -7px;
right: -7px;
top: -7px;
z-index: 1000;
`;
packages/twenty-front/src/modules/object-record/record-board/record-board-card/components/RecordBoardCardMultiDragStack.tsx
+5 -5
View File
@@ -4,14 +4,14 @@ import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledRecordBoardCardStackCard = styled.div<{ offset: number }>`
position: absolute;
top: ${({ offset }) => (offset === 1 ? 2 : (offset - 1) * 4 + 2)}px;
left: 0;
right: 0;
height: 100%;
background-color: ${themeCssVariables.accent.tertiary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
height: 100%;
left: 0;
position: absolute;
right: 0;
top: ${({ offset }) => (offset === 1 ? 2 : (offset - 1) * 4 + 2)}px;
z-index: ${({ offset }) => -offset};
`;
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumn.tsx
+5 -5
View File
@@ -15,15 +15,15 @@ import { isDefined } from 'twenty-shared/utils';
const StyledColumn = styled.div`
background-color: ${themeCssVariables.background.primary};
display: flex;
flex-direction: column;
max-width: 200px;
min-width: 200px;
min-height: 100%;
flex: 1;
flex-direction: column;
height: 100%;
max-width: 200px;
min-height: 100%;
min-width: 200px;
padding: ${themeCssVariables.spacing[2]};
padding-top: 0px;
position: relative;
height: 100%;
`;
type RecordBoardColumnProps = {
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnCardContainerSkeletonLoader.tsx
+2 -2
View File
@@ -23,16 +23,16 @@ const StyledBodyContainer = styled.div`
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing['0.5']};
padding-top: 4px;
padding-bottom: 4px;
padding-top: 4px;
`;
const StyledStaticCellSkeleton = styled.div<{ width: number; height: number }>`
background-color: ${themeCssVariables.background.tertiary};
border-radius: ${themeCssVariables.border.radius.sm};
width: ${({ width }) => width}px;
height: ${({ height }) => height}px;
width: ${({ width }) => width}px;
`;
export const RecordBoardColumnCardContainerSkeletonLoader = () => {
packages/twenty-front/src/modules/object-record/record-board/record-board-column/components/RecordBoardColumnHeader.tsx
+1 -1
View File
@@ -28,9 +28,9 @@ const StyledHeader = styled.div`
cursor: pointer;
display: flex;
flex-direction: row;
height: 100%;
justify-content: left;
width: 100%;
height: 100%;
`;
const StyledHeaderActions = styled.div`
packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendar.tsx
+1 -1
View File
@@ -20,8 +20,8 @@ const StyledContainerContainer = styled.div`
box-sizing: border-box;
display: flex;
flex-direction: column;
height: 100%;
gap: ${themeCssVariables.spacing[2]};
height: 100%;
padding: ${themeCssVariables.spacing[2]};
padding-left: ${themeCssVariables.spacing[1]};
`;
packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarAddNew.tsx
+2 -2
View File
@@ -15,9 +15,9 @@ import { Button } from 'twenty-ui/input';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledButtonContainer = styled.div`
padding: ${themeCssVariables.spacing['0.5']};
min-width: unset;
height: auto;
min-width: unset;
padding: ${themeCssVariables.spacing['0.5']};
`;
type RecordCalendarAddNewProps = {
packages/twenty-front/src/modules/object-record/record-calendar/components/RecordCalendarTopBar.tsx
+2 -2
View File
@@ -35,14 +35,14 @@ const StyledNavigationButtonContainer = styled.div`
`;
const StyledLeftSection = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[2]};
`;
const StyledNavigationSection = styled.div`
display: flex;
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
justify-content: flex-end;
`;
packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBody.tsx
+3 -3
View File
@@ -4,11 +4,11 @@ import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
display: flex;
flex-direction: column;
flex: 1;
border: 1px solid ${themeCssVariables.border.color.light};
border-radius: 4px;
display: flex;
flex: 1;
flex-direction: column;
overflow: hidden;
`;
packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyDay.tsx
+12 -12
View File
@@ -21,12 +21,6 @@ const StyledContainer = styled.div<{
isOtherMonth: boolean;
isDayOfWeekend: boolean;
}>`
display: flex;
width: calc(100% / 7);
flex-direction: column;
min-height: 122px;
padding: ${themeCssVariables.spacing[1]};
min-width: 0;
background: ${({ isOtherMonth, isDayOfWeekend }) =>
isOtherMonth || isDayOfWeekend
? themeCssVariables.background.secondary
@@ -35,6 +29,12 @@ const StyledContainer = styled.div<{
isOtherMonth
? themeCssVariables.font.color.light
: themeCssVariables.font.color.primary};
display: flex;
flex-direction: column;
min-height: 122px;
min-width: 0;
padding: ${themeCssVariables.spacing[1]};
width: calc(100% / 7);
&:not(:last-child) {
border-right: 1px solid ${themeCssVariables.border.color.light};
@@ -60,20 +60,20 @@ const StyledDayHeaderDayContainer = styled.div`
const StyledDayHeaderDay = styled.span<{ isToday: boolean }>`
align-items: center;
display: flex;
font-size: ${themeCssVariables.font.size.sm};
justify-content: center;
line-height: 140%;
width: 20px;
border-radius: ${({ isToday }) => (isToday ? '4px' : '0')};
background: ${({ isToday }) =>
isToday ? themeCssVariables.color.blue : 'transparent'};
border-radius: ${({ isToday }) => (isToday ? '4px' : '0')};
color: ${({ isToday }) =>
isToday
? themeCssVariables.font.color.inverted
: themeCssVariables.font.color.primary};
display: flex;
font-size: ${themeCssVariables.font.size.sm};
font-weight: ${({ isToday }) =>
isToday ? themeCssVariables.font.weight.medium : 'normal'};
justify-content: center;
line-height: 140%;
width: 20px;
`;
const StyledCardsContainer = styled.div<{ isDraggedOver?: boolean }>`
packages/twenty-front/src/modules/object-record/record-calendar/month/components/RecordCalendarMonthBodyWeek.tsx
+1 -1
View File
@@ -10,8 +10,8 @@ import {
} from 'twenty-shared/utils';
const StyledContainer = styled.div`
display: flex;
align-items: stretch;
display: flex;
flex: 1;
&:not(:last-of-type) {
packages/twenty-front/src/modules/object-record/record-card/components/RecordCard.tsx
+4 -4
View File
@@ -11,10 +11,10 @@ const StyledBoardCard = styled.div<{
border-radius: ${themeCssVariables.border.radius.sm};
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
width: 100%;
opacity: ${({ isSecondaryDragged }) => (isSecondaryDragged ? '0.3' : '1')};
width: 100%;
&[data-selected='true'] {
background-color: ${themeCssVariables.accent.quaternary};
}
@@ -37,8 +37,8 @@ const StyledBoardCard = styled.div<{
}
.checkbox-container {
transition: all ease-in-out 160ms;
opacity: 0;
transition: all ease-in-out 160ms;
}
&[data-selected='true'] .checkbox-container {
@@ -50,8 +50,8 @@ const StyledBoardCard = styled.div<{
}
.compact-icon-container {
transition: all ease-in-out 160ms;
opacity: 0;
transition: all ease-in-out 160ms;
}
&:hover .compact-icon-container {
opacity: 1;
packages/twenty-front/src/modules/object-record/record-card/components/RecordCardHeaderContainer.tsx
+1 -1
View File
@@ -8,9 +8,9 @@ export const StyledBoardCardHeaderContainer = styled.div<{
align-items: center;
display: flex;
flex-direction: row;
justify-content: space-between;
font-weight: ${themeCssVariables.font.weight.medium};
height: 24px;
justify-content: space-between;
padding: ${({ padding, isCompact }) =>
padding ??
`${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]} ${isCompact ? themeCssVariables.spacing[2] : themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]}`};
packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailRecordsListItemContainer.tsx
+2 -2
View File
@@ -8,10 +8,10 @@ const StyledListItem = styled.div<{
isDropdownOpen?: boolean;
}>`
align-items: center;
justify-content: space-between;
gap: ${themeCssVariables.spacing[1]};
display: flex;
gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[10]};
justify-content: space-between;
padding-left: ${({ noHorizontalPadding }) =>
noHorizontalPadding ? 0 : themeCssVariables.spacing[3]};
padding-right: ${({ noHorizontalPadding }) =>
packages/twenty-front/src/modules/object-record/record-field-list/record-detail-section/components/RecordDetailSectionContainer.tsx
+1 -1
View File
@@ -6,8 +6,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledRecordDetailSectionWrapper = styled.div`
border-top: 1px solid ${themeCssVariables.border.color.light};
padding-top: ${themeCssVariables.spacing[3]};
padding-bottom: ${themeCssVariables.spacing[3]};
padding-top: ${themeCssVariables.spacing[3]};
width: auto;
`;
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/BaseChip.tsx
+21 -21
View File
@@ -4,27 +4,27 @@ import { IconX } from 'twenty-ui/display';
import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledChip = styled.div<{ deletable: boolean; danger: boolean }>`
align-items: center;
background-color: ${({ danger }) =>
danger ? themeCssVariables.color.red3 : themeCssVariables.color.blue3};
border-width: 1px;
border-style: solid;
border-color: ${({ danger }) =>
danger ? themeCssVariables.color.red5 : themeCssVariables.color.blue5};
border-radius: 4px;
height: 20px;
border-style: solid;
border-width: 1px;
box-sizing: border-box;
column-gap: ${themeCssVariables.spacing[1]};
cursor: ${({ deletable }) => (deletable ? 'pointer' : 'default')};
display: inline-flex;
align-items: center;
flex-direction: row;
flex-shrink: 0;
column-gap: ${themeCssVariables.spacing[1]};
height: 20px;
padding-left: ${themeCssVariables.spacing[1]};
user-select: none;
white-space: nowrap;
cursor: ${({ deletable }) => (deletable ? 'pointer' : 'default')};
padding-right: ${({ deletable }) =>
deletable ? '0' : themeCssVariables.spacing[1]};
user-select: none;
white-space: nowrap;
`;
const StyledLabel = styled.span<{ danger: boolean }>`
@@ -34,23 +34,23 @@ const StyledLabel = styled.span<{ danger: boolean }>`
`;
const StyledDelete = styled.button<{ danger: boolean }>`
box-sizing: border-box;
height: 20px;
width: 20px;
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
font-size: ${themeCssVariables.font.size.sm};
user-select: none;
padding: 0;
margin: 0;
background: none;
border: none;
border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
color: ${({ danger }) =>
danger ? themeCssVariables.color.red : themeCssVariables.color.blue};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
cursor: pointer;
display: flex;
font-size: ${themeCssVariables.font.size.sm};
height: 20px;
justify-content: center;
margin: 0;
padding: 0;
user-select: none;
width: 20px;
&:hover {
background-color: ${({ danger }) =>
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormAdvancedTextFieldInput.tsx
+7 -7
View File
@@ -27,29 +27,29 @@ const StyledAdvancedTextFieldContainerWrapper = styled.div`
`;
const StyledAdvancedTextFieldFieldContainer = styled.div`
position: relative;
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
flex-grow: 1;
gap: ${themeCssVariables.spacing[2]};
position: relative;
`;
const StyledAdvancedTextFieldInnerContainer = styled.div`
flex-grow: 1;
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
display: flex;
flex-grow: 1;
overflow: auto;
width: 100%;
`;
const StyledEditorActionButtonContainer = styled.div`
position: absolute;
top: ${themeCssVariables.spacing[0]};
right: 30px;
top: ${themeCssVariables.spacing[0]};
z-index: 1;
`;
@@ -59,8 +59,8 @@ const StyledFullScreenEditorContainer = styled.div`
border-radius: ${themeCssVariables.border.radius.sm};
flex: 1;
min-height: 0;
padding: ${themeCssVariables.spacing[2]};
overflow-y: auto;
padding: ${themeCssVariables.spacing[2]};
`;
const StyledFullScreenButtonContainerWrapper = styled.div`
@@ -70,8 +70,8 @@ const StyledFullScreenButtonContainerWrapper = styled.div`
padding: ${themeCssVariables.spacing[2]};
:hover {
cursor: pointer;
background-color: ${themeCssVariables.background.transparent.light};
cursor: pointer;
}
}
`;
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormArrayFieldInput.tsx
+3 -3
View File
@@ -56,13 +56,13 @@ const StyledDisplayModeContainer = styled.div`
align-items: center;
background: transparent;
border: none;
box-sizing: border-box;
cursor: pointer;
display: flex;
font-family: inherit;
height: 30px;
padding-inline: ${themeCssVariables.spacing[2]};
width: 100%;
height: 30px;
cursor: pointer;
box-sizing: border-box;
&:hover,
&[data-open='true'] {
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormBooleanFieldToggleInput.tsx
+5 -5
View File
@@ -22,23 +22,23 @@ const StyledDescription = styled.span`
color: ${themeCssVariables.font.color.secondary};
display: flex;
font-size: ${themeCssVariables.font.size.md};
padding-left: ${themeCssVariables.spacing[2]};
white-space: nowrap;
overflow: hidden;
padding-left: ${themeCssVariables.spacing[2]};
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledToggleContainer = styled.div`
background-color: ${themeCssVariables.background.transparent.lighter};
border-top: 1px solid ${themeCssVariables.border.color.medium};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
border-right: 1px solid ${themeCssVariables.border.color.medium};
border-bottom-right-radius: ${themeCssVariables.border.radius.sm};
border-right: 1px solid ${themeCssVariables.border.color.medium};
border-top: 1px solid ${themeCssVariables.border.color.medium};
border-top-right-radius: ${themeCssVariables.border.radius.sm};
display: flex;
padding-bottom: ${themeCssVariables.spacing[2]};
padding-right: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[2]};
padding-bottom: ${themeCssVariables.spacing[2]};
`;
export const FormBooleanFieldToggleInput = ({
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormDateFieldInput.tsx
+5 -5
View File
@@ -49,12 +49,15 @@ const StyledDateInputAbsoluteContainer = styled.div`
const StyledDateInput = styled.input<{ hasError?: boolean }>`
background-color: transparent;
border: none;
color: ${({ hasError }) =>
hasError
? themeCssVariables.color.red
: themeCssVariables.font.color.primary};
color: ${themeCssVariables.font.color.primary};
font-family: ${themeCssVariables.font.family};
font-size: inherit;
font-weight: inherit;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
&::placeholder,
&::-webkit-input-placeholder {
@@ -67,10 +70,7 @@ const StyledDateInput = styled.input<{ hasError?: boolean }>`
color: ${themeCssVariables.font.color.tertiary};
}
color: ${({ hasError }) =>
hasError
? themeCssVariables.color.red
: themeCssVariables.font.color.primary};
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
`;
const StyledDateInputContainer = styled.div`
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputInnerContainer.tsx
+2 -2
View File
@@ -18,13 +18,13 @@ const StyledFormFieldInputInnerContainer = styled.div<
>`
background-color: ${themeCssVariables.background.transparent.lighter};
border: 1px solid ${themeCssVariables.border.color.medium};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-bottom-left-radius: ${themeCssVariables.border.radius.sm};
border-bottom-right-radius: ${({ multiline, hasRightElement }) =>
multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'};
border-right: ${({ multiline, hasRightElement }) =>
multiline || !hasRightElement ? 'auto' : 'none'};
border-top-left-radius: ${themeCssVariables.border.radius.sm};
border-top-right-radius: ${({ multiline, hasRightElement }) =>
multiline || !hasRightElement ? themeCssVariables.border.radius.sm : '0'};
box-sizing: border-box;
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormFieldInputRowContainer.tsx
+2 -2
View File
@@ -8,15 +8,15 @@ const StyledFormFieldInputRowContainer = styled.div<{
}>`
display: flex;
flex-direction: row;
position: relative;
height: ${({ multiline }) => (multiline ? 'auto' : '32px')};
line-height: ${({ multiline }) =>
multiline ? `${LINE_HEIGHT}px` : 'normal'};
max-height: ${({ multiline, maxHeight }) =>
multiline ? `${maxHeight ?? 5 * LINE_HEIGHT}px` : 'none'};
min-height: ${({ multiline }) =>
multiline ? `${3 * LINE_HEIGHT}px` : 'auto'};
position: relative;
`;
export const FormFieldInputRowContainer = StyledFormFieldInputRowContainer;
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormMultiSelectFieldInput.tsx
+2 -2
View File
@@ -54,11 +54,11 @@ const StyledDisplayModeContainer = styled.div`
align-items: center;
background: transparent;
border: none;
cursor: pointer;
display: flex;
font-family: inherit;
padding-inline: ${themeCssVariables.spacing[2]};
width: 100%;
cursor: pointer;
&:hover,
&[data-open='true'] {
@@ -68,8 +68,8 @@ const StyledDisplayModeContainer = styled.div`
const StyledSelectInputContainer = styled.div`
position: absolute;
z-index: 1;
top: ${themeCssVariables.spacing[9]};
z-index: 1;
`;
const StyledPlaceholderContainer = styled.div`
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormNestedFieldInputContainer.tsx
+2 -2
View File
@@ -2,11 +2,11 @@ import { styled } from '@linaria/react';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledFormNestedFieldInputContainer = styled.div`
display: flex;
flex-direction: column;
background: ${themeCssVariables.background.secondary};
border: 1px solid ${themeCssVariables.border.color.medium};
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
padding: ${themeCssVariables.spacing[2]};
`;
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/FormSingleRecordPicker.tsx
+2 -2
View File
@@ -24,11 +24,11 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledFormSelectContainerWrapper = styled.div<{ readonly?: boolean }>`
align-items: center;
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
height: 32px;
justify-content: space-between;
padding-right: ${themeCssVariables.spacing[2]};
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
padding-right: ${themeCssVariables.spacing[2]};
&:hover,
&[data-open='true'] {
packages/twenty-front/src/modules/object-record/record-field/ui/form-types/components/TextVariableEditor.tsx
+13 -13
View File
@@ -7,35 +7,35 @@ const StyledEditor = styled.div<{
multiline?: boolean;
readonly?: boolean;
}>`
width: 100%;
display: flex;
box-sizing: border-box;
display: flex;
padding-right: ${({ multiline }) =>
multiline ? themeCssVariables.spacing[4] : '0'};
width: 100%;
.editor-content {
width: 100%;
}
.tiptap {
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
align-items: ${({ multiline }) => (multiline ? 'top' : 'center')};
border: none !important;
box-sizing: border-box;
display: flex;
height: 100%;
overflow-x: auto;
overflow-y: ${({ multiline }) => (multiline ? 'auto' : 'hidden')};
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
color: ${({ readonly }) =>
readonly
? themeCssVariables.font.color.light
: themeCssVariables.font.color.primary};
display: flex;
font-family: ${themeCssVariables.font.family};
font-weight: ${themeCssVariables.font.weight.regular};
border: none !important;
align-items: ${({ multiline }) => (multiline ? 'top' : 'center')};
&::-webkit-scrollbar {
display: none;
}
height: 100%;
overflow-x: auto;
overflow-y: ${({ multiline }) => (multiline ? 'auto' : 'hidden')};
padding: ${themeCssVariables.spacing[1]} ${themeCssVariables.spacing[2]};
scrollbar-width: none;
white-space: ${({ multiline }) => (multiline ? 'pre' : 'nowrap')};
p.is-editor-empty:first-of-type::before {
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/display/components/ForbiddenFieldDisplay.tsx
+7 -7
View File
@@ -6,16 +6,16 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledContainer = styled.div`
align-items: center;
display: inline-flex;
background: ${themeCssVariables.background.transparent.light};
color: ${themeCssVariables.font.color.tertiary};
font-weight: ${themeCssVariables.font.weight.regular};
font-size: ${themeCssVariables.font.size.md};
padding: ${themeCssVariables.spacing[1]};
gap: ${themeCssVariables.spacing[1]};
border-radius: 4px;
color: ${themeCssVariables.font.color.tertiary};
display: inline-flex;
font-size: ${themeCssVariables.font.size.md};
font-weight: ${themeCssVariables.font.weight.regular};
gap: ${themeCssVariables.spacing[1]};
padding: ${themeCssVariables.spacing[1]};
`;
export const ForbiddenFieldDisplay = () => {
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/MultiItemBaseInput.tsx
+17 -17
View File
@@ -15,14 +15,20 @@ const StyledInput = styled.input<{
hasError?: boolean;
hasItem: boolean;
}>`
background-color: ${({ hasItem }) =>
hasItem ? themeCssVariables.background.transparent.lighter : 'transparent'};
background-color: transparent;
border: ${({ hasItem, hasError }) =>
hasItem
? hasError
? `1px solid ${themeCssVariables.border.color.danger}`
: `1px solid ${themeCssVariables.border.color.medium}`
: 'none'};
border: none;
border-radius: ${({ hasItem }) => (hasItem ? '4px' : '0')};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
font-family: ${themeCssVariables.font.family};
font-size: inherit;
font-weight: inherit;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
&::placeholder,
&::-webkit-input-placeholder {
@@ -31,23 +37,17 @@ const StyledInput = styled.input<{
font-weight: ${themeCssVariables.font.weight.medium};
}
background-color: ${({ hasItem }) =>
hasItem ? themeCssVariables.background.transparent.lighter : 'transparent'};
border: ${({ hasItem, hasError }) =>
hasItem
? hasError
? `1px solid ${themeCssVariables.border.color.danger}`
: `1px solid ${themeCssVariables.border.color.medium}`
: 'none'};
border-radius: ${({ hasItem }) => (hasItem ? '4px' : '0')};
box-sizing: border-box;
font-size: inherit;
font-weight: ${themeCssVariables.font.weight.medium};
font-weight: inherit;
height: 32px;
position: relative;
width: 100%;
outline: none;
padding: ${themeCssVariables.spacing[0]} ${themeCssVariables.spacing[2]};
padding-right: ${({ withRightComponent }) =>
withRightComponent ? '32px' : '0'};
position: relative;
width: 100%;
`;
const StyledInputContainer = styled.div`
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RawJsonFieldInput.tsx
+3 -3
View File
@@ -21,15 +21,15 @@ const CONTAINER_HEIGHT = 300;
const StyledContainer = styled.div`
box-sizing: border-box;
height: ${CONTAINER_HEIGHT}px;
width: 400px;
position: relative;
overflow-y: auto;
position: relative;
width: 400px;
`;
const StyledSwitchModeButtonContainer = styled.div`
position: fixed;
top: ${themeCssVariables.spacing[1]};
right: ${themeCssVariables.spacing[1]};
top: ${themeCssVariables.spacing[1]};
`;
const StyledCodeEditorContainer = styled.div`
packages/twenty-front/src/modules/object-record/record-field/ui/meta-types/input/components/RichTextFieldInput.tsx
+4 -4
View File
@@ -24,13 +24,13 @@ const ActivityRichTextEditor = lazy(() =>
const StyledContainer = styled.div`
background-color: ${themeCssVariables.background.primary};
width: 480px;
box-sizing: border-box;
display: flex;
margin: 0 0 0 calc(-1 * ${themeCssVariables.spacing[5]});
padding: ${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[2]}
${themeCssVariables.spacing[2]} ${themeCssVariables.spacing[12]};
margin: 0 0 0 calc(-1 * ${themeCssVariables.spacing[5]});
display: flex;
box-sizing: border-box;
position: relative;
width: 480px;
`;
const StyledCollapseButton = styled.div`
packages/twenty-front/src/modules/object-record/record-index/components/RecordIndexContainer.tsx
+3 -3
View File
@@ -21,16 +21,16 @@ const StyledContainer = styled.div`
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
overflow: hidden;
width: 100%;
`;
const StyledContainerWithPadding = styled.div`
box-sizing: border-box;
flex: 1;
min-height: 0;
margin-left: ${themeCssVariables.spacing[2]};
min-height: 0;
`;
export const RecordIndexContainer = () => {
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellContainer.tsx
+6 -6
View File
@@ -55,14 +55,14 @@ const StyledLabelContainer = styled.div<{ width?: number }>`
`;
const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>`
box-sizing: border-box;
width: 100%;
display: flex;
height: fit-content;
gap: ${themeCssVariables.spacing[1]};
user-select: none;
align-items: center;
box-sizing: border-box;
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
display: flex;
gap: ${themeCssVariables.spacing[1]};
height: fit-content;
user-select: none;
width: 100%;
`;
export const StyledSkeletonDiv = styled.div`
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellDisplayMode.tsx
+16 -16
View File
@@ -18,26 +18,26 @@ const StyledRecordInlineCellNormalModeOuterContainer = styled.div<
'isDisplayModeFixHeight' | 'disableHoverEffect' | 'readonly'
> & { isHovered?: boolean }
>`
align-items: center;
background-color: ${({ isHovered, readonly, disableHoverEffect }) =>
isHovered && !readonly && !disableHoverEffect
? themeCssVariables.background.transparent.light
: 'transparent'};
border-radius: ${themeCssVariables.border.radius.sm};
cursor: ${({ isHovered, readonly }) =>
isHovered && !readonly ? 'pointer' : 'default'};
display: flex;
height: ${({ isDisplayModeFixHeight }) =>
isDisplayModeFixHeight ? '16px' : 'auto'};
min-height: 16px;
outline: 1px solid
${({ isHovered, readonly }) =>
isHovered && readonly
? themeCssVariables.border.color.medium
: 'transparent'};
align-items: center;
border-radius: ${themeCssVariables.border.radius.sm};
display: flex;
height: ${({ isDisplayModeFixHeight }) =>
isDisplayModeFixHeight ? '16px' : 'auto'};
min-height: 16px;
overflow: hidden;
padding-right: ${themeCssVariables.spacing[1]};
padding-left: ${themeCssVariables.spacing[1]};
background-color: ${({ isHovered, readonly, disableHoverEffect }) =>
isHovered && !readonly && !disableHoverEffect
? themeCssVariables.background.transparent.light
: 'transparent'};
cursor: ${({ isHovered, readonly }) =>
isHovered && !readonly ? 'pointer' : 'default'};
padding-right: ${themeCssVariables.spacing[1]};
`;
const StyledRecordInlineCellNormalModeInnerContainer = styled.div`
@@ -47,11 +47,11 @@ const StyledRecordInlineCellNormalModeInnerContainer = styled.div`
height: fit-content;
overflow: hidden;
padding-bottom: 2px;
padding-top: 2px;
text-overflow: ellipsis;
white-space: nowrap;
padding-top: 2px;
padding-bottom: 2px;
`;
const StyledEmptyField = styled.div`
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellEditMode.tsx
+5 -5
View File
@@ -21,12 +21,12 @@ import { createPortal } from 'react-dom';
const StyledInlineCellEditModeContainer = styled.div`
align-items: center;
display: flex;
width: 100%;
position: absolute;
height: 24px;
background: transparent;
display: flex;
height: 24px;
position: absolute;
width: 100%;
`;
type RecordInlineCellEditModeProps = {
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellHoveredPortalContent.tsx
+8 -8
View File
@@ -9,20 +9,20 @@ const StyledRecordTableCellHoveredPortalContent = styled.div<{
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
width: 100%;
justify-content: ${({ isCentered }) =>
isCentered === true ? 'center' : 'normal'};
width: 100%;
`;
const StyledInlineCellBaseContainer = styled.div<{ readonly: boolean }>`
box-sizing: border-box;
width: 100%;
display: flex;
height: fit-content;
gap: ${themeCssVariables.spacing[1]};
user-select: none;
align-items: center;
box-sizing: border-box;
display: flex;
gap: ${themeCssVariables.spacing[1]};
height: fit-content;
user-select: none;
width: 100%;
`;
type RecordInlineCellHoveredPortalContentProps = {
packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCellValue.tsx
+2 -2
View File
@@ -12,13 +12,13 @@ const StyledClickableContainer = styled.div<{
isCentered?: boolean;
}>`
align-items: center;
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
display: flex;
gap: ${themeCssVariables.spacing[1]};
width: 100%;
justify-content: ${({ isCentered }) =>
isCentered === true ? 'center' : 'normal'};
cursor: ${({ readonly }) => (readonly ? 'default' : 'pointer')};
width: 100%;
`;
export const RecordInlineCellValue = () => {
packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBox.tsx
+1 -1
View File
@@ -17,12 +17,12 @@ const StyledPropertyBoxContainer = styled.div<{
display: flex;
flex-direction: column;
gap: ${themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[3]};
padding-bottom: ${themeCssVariables.spacing[3]};
padding-left: ${({ noHorizontalPadding }) =>
noHorizontalPadding ? 0 : themeCssVariables.spacing[3]};
padding-right: ${({ noHorizontalPadding }) =>
noHorizontalPadding ? 0 : themeCssVariables.spacing[2]};
padding-top: ${themeCssVariables.spacing[3]};
`;
export const PropertyBox = ({
packages/twenty-front/src/modules/object-record/record-inline-cell/property-box/components/PropertyBoxSkeletonLoader.tsx
+1 -1
View File
@@ -8,8 +8,8 @@ const StyledSkeletonDiv = styled.div`
align-items: center;
display: flex;
gap: ${themeCssVariables.spacing[1]};
width: 100%;
height: 24px;
width: 100%;
`;
export const PropertyBoxSkeletonLoader = () => {
const { theme } = useContext(ThemeContext);
packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsContainer.tsx
+3 -3
View File
@@ -21,10 +21,10 @@ import { MergeSettingsTab } from './MergeSettingsTab';
const StyledShowPageRightContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: start;
width: 100%;
height: 100%;
justify-content: start;
overflow: auto;
width: 100%;
`;
const StyledTabListContainer = styled.div`
@@ -33,9 +33,9 @@ const StyledTabListContainer = styled.div`
`;
const StyledContentContainer = styled.div`
background: ${themeCssVariables.background.primary};
flex: 1;
overflow-y: auto;
background: ${themeCssVariables.background.primary};
padding-bottom: ${themeCssVariables.spacing[16]};
`;
packages/twenty-front/src/modules/object-record/record-merge/components/MergeRecordsFooter.tsx
+1 -1
View File
@@ -19,8 +19,8 @@ const StyledFooterContainer = styled.div`
`;
const StyledFooterActions = styled.div`
display: flex;
align-items: flex-end;
display: flex;
gap: ${themeCssVariables.spacing[2]};
`;
packages/twenty-front/src/modules/object-record/record-show/components/PageLayoutRecordPageRenderer.tsx
+2 -2
View File
@@ -25,14 +25,14 @@ const StyledShowPageRightContainer = styled.div`
flex-direction: column;
height: 100%;
justify-content: start;
width: 100%;
overflow: auto;
width: 100%;
`;
const StyledContentContainer = styled.div<{ isInSidePanel: boolean }>`
background: ${themeCssVariables.background.primary};
flex: 1;
overflow-y: auto;
background: ${themeCssVariables.background.primary};
padding-bottom: ${({ isInSidePanel }) =>
isInSidePanel ? themeCssVariables.spacing[16] : 0};
`;
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableStyleWrapper.tsx
+26 -26
View File
@@ -53,10 +53,10 @@ const StyledTable = styled.div<{
display: flex;
flex-wrap: wrap;
width: 100%;
position: relative;
width: 100%;
div.header-cell {
position: sticky;
top: 0;
@@ -72,10 +72,10 @@ const StyledTable = styled.div<{
}
div.header-cell:nth-of-type(1) {
left: 0px;
background-color: ${themeCssVariables.background.primary};
left: 0px;
z-index: ${({ hasRecordGroups }) =>
hasRecordGroups
? TABLE_Z_INDEX.headerColumns.withGroups.headerColumnsSticky
@@ -83,10 +83,10 @@ const StyledTable = styled.div<{
}
div.header-cell:nth-of-type(2) {
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
top: 0;
background-color: ${themeCssVariables.background.primary};
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
top: 0;
z-index: ${({ hasRecordGroups }) =>
hasRecordGroups
@@ -95,10 +95,10 @@ const StyledTable = styled.div<{
}
div.header-cell:nth-of-type(3) {
left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
right: 0;
background-color: ${themeCssVariables.background.primary};
left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
right: 0;
z-index: ${({ hasRecordGroups }) =>
hasRecordGroups
@@ -109,8 +109,8 @@ const StyledTable = styled.div<{
}
div.table-cell:nth-of-type(1) {
position: sticky;
left: 0px;
position: sticky;
z-index: ${({ hasRecordGroups }) =>
hasRecordGroups
? TABLE_Z_INDEX.cell.withGroups.sticky
@@ -118,8 +118,8 @@ const StyledTable = styled.div<{
}
div.table-cell:nth-of-type(2) {
position: sticky;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
position: sticky;
z-index: ${({ hasRecordGroups }) =>
hasRecordGroups
? TABLE_Z_INDEX.cell.withGroups.sticky
@@ -127,15 +127,15 @@ const StyledTable = styled.div<{
}
div.table-cell-0-0 {
position: sticky;
left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
position: sticky;
${HorizontalScrollBoxShadowCSS}
}
div.table-cell:nth-of-type(3) {
position: sticky;
left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
position: sticky;
z-index: ${({ hasRecordGroups }) =>
hasRecordGroups
? TABLE_Z_INDEX.cell.withGroups.sticky
@@ -145,43 +145,43 @@ const StyledTable = styled.div<{
}
div.${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME} {
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
}
div.${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME} {
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
max-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
}
div.${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH_CLASS_NAME} {
width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
max-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
}
${columnFieldWidthRules}
div.${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME} {
width: var(${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME});
min-width: var(
${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
max-width: var(
${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
min-width: var(
${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
width: var(${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME});
}
div.${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME} {
width: var(
max-width: var(
${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
min-width: var(
${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
max-width: var(
width: var(
${RECORD_TABLE_COLUMN_WITH_GROUP_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
}
packages/twenty-front/src/modules/object-record/record-table/record-table-body/components/RecordTableBodyVirtualizedDraggableClone.tsx
+14 -14
View File
@@ -66,60 +66,60 @@ const cloneColumnFieldWidthRules = Array.from(
const StyledRowDraggableCloneCSSBridge = styled.div`
div.table-cell:nth-of-type(1) {
position: sticky;
left: 0px;
position: sticky;
z-index: ${TABLE_Z_INDEX.cell.withGroups.sticky};
}
div.table-cell:nth-of-type(2) {
position: sticky;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
position: sticky;
z-index: ${TABLE_Z_INDEX.cell.withoutGroups.sticky};
}
div.table-cell-0-0 {
position: sticky;
left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
position: sticky;
${HorizontalScrollBoxShadowCSS}
}
div.table-cell:nth-of-type(3) {
position: sticky;
left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
position: sticky;
z-index: ${TABLE_Z_INDEX.cell.withoutGroups.sticky};
${HorizontalScrollBoxShadowCSS}
}
div.${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH_CLASS_NAME} {
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
}
div.${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH_CLASS_NAME} {
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
max-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
}
div.${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH_CLASS_NAME} {
width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
max-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
}
${cloneColumnFieldWidthRules}
div.${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_CLASS_NAME} {
width: var(${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME});
min-width: var(
${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
max-width: var(
${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
min-width: var(
${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME}
);
width: var(${RECORD_TABLE_COLUMN_LAST_EMPTY_COLUMN_WIDTH_VARIABLE_NAME});
}
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellBaseContainer.tsx
+5 -5
View File
@@ -19,18 +19,18 @@ const StyledBaseContainer = styled.div<{
cursor: ${({ isReadOnly }) => (isReadOnly ? 'default' : 'pointer')};
display: flex;
height: 32px;
user-select: none;
position: relative;
user-select: none;
&:hover {
outline: ${({ isReadOnly, fontColorMedium }) =>
isReadOnly ? `1px solid ${fontColorMedium}` : 'unset'};
border-radius: ${({ isReadOnly }) => (isReadOnly ? '0px' : 'unset')};
background-color: ${({ isReadOnly, backgroundColorSecondary }) =>
isReadOnly ? backgroundColorSecondary : 'unset'};
border-radius: ${({ isReadOnly }) => (isReadOnly ? '0px' : 'unset')};
color: ${({ isReadOnly, fontColorSecondary }) =>
isReadOnly ? fontColorSecondary : 'unset'};
outline: ${({ isReadOnly, fontColorMedium }) =>
isReadOnly ? `1px solid ${fontColorMedium}` : 'unset'};
svg {
color: ${({ isReadOnly, fontColorSecondary }) =>
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellButtons.tsx
+2 -2
View File
@@ -5,13 +5,13 @@ import { MOBILE_VIEWPORT, themeCssVariables } from 'twenty-ui/theme-constants';
import { AnimatedContainer } from 'twenty-ui/utilities';
const StyledButtonContainer = styled.div`
margin: ${themeCssVariables.spacing[1]};
border: 1px solid ${themeCssVariables.border.color.strong};
@media (max-width: ${MOBILE_VIEWPORT}px) {
position: relative;
right: 7px;
}
border-radius: ${themeCssVariables.border.radius.sm};
border: 1px solid ${themeCssVariables.border.color.strong};
margin: ${themeCssVariables.spacing[1]};
`;
type RecordTableCellButtonsProps = {
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckbox.tsx
+1 -1
View File
@@ -18,8 +18,8 @@ const StyledContainer = styled.div`
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: center;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH};
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH};
padding-right: ${themeCssVariables.spacing[1]};
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH};
`;
const StyledRecordTableTdContainer = styled.div`
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellCheckboxPlaceholder.tsx
+1 -1
View File
@@ -15,8 +15,8 @@ const StyledContainer = styled.div`
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: center;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH};
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH};
padding-right: ${themeCssVariables.spacing[1]};
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH};
`;
const StyledRecordTableTdContainer = styled.div`
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx
+1 -1
View File
@@ -17,8 +17,8 @@ const StyledInnerContainer = styled.div`
display: flex;
height: 100%;
overflow: hidden;
width: 100%;
white-space: nowrap;
width: 100%;
`;
const StyledEmptyPlaceholderField = styled.div`
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDragAndDrop.tsx
+1 -1
View File
@@ -9,10 +9,10 @@ import { RecordTableCellStyleWrapper } from '@/object-record/record-table/record
import { IconListViewGrip } from 'twenty-ui/input';
const StyledContainer = styled.div`
height: ${RECORD_TABLE_ROW_HEIGHT}px;
border-color: transparent;
cursor: grab;
display: flex;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
&:hover .icon {
opacity: 1;
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellFirstRowFirstColumn.tsx
+5 -5
View File
@@ -15,21 +15,21 @@ const StyledRecordTableTd = styled.div<{
hasBottomBorder?: boolean;
zIndex: number;
}>`
background: ${({ backgroundColor, isDragging }) =>
isDragging ? 'transparent' : backgroundColor};
border-bottom: 1px solid
${({ borderColor, hasBottomBorder, isDragging }) =>
hasBottomBorder && !isDragging ? borderColor : 'transparent'};
color: ${({ fontColor }) => fontColor};
border-right: ${({ borderColor, hasRightBorder }) =>
hasRightBorder ? `1px solid ${borderColor}` : 'none'};
color: ${({ fontColor }) => fontColor};
padding: 0;
text-align: left;
background: ${({ backgroundColor, isDragging }) =>
isDragging ? 'transparent' : backgroundColor};
z-index: ${({ zIndex }) => zIndex};
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellLoading.tsx
+1 -1
View File
@@ -6,8 +6,8 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledStaticCellSkeleton = styled.div`
background-color: ${themeCssVariables.background.tertiary};
border-radius: ${themeCssVariables.border.radius.sm};
padding: 8px;
margin: 8px;
padding: 8px;
`;
export const RecordTableCellLoading = ({
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellStyleWrapper.tsx
+5 -5
View File
@@ -12,20 +12,20 @@ export const StyledCell = styled.div<{
hasRightBorder?: boolean;
hasBottomBorder?: boolean;
}>`
background: ${({ backgroundColor, isDragging }) =>
isDragging ? 'transparent' : backgroundColor};
border-bottom: 1px solid
${({ borderColor, hasBottomBorder, isDragging }) =>
hasBottomBorder && !isDragging ? borderColor : 'transparent'};
color: ${({ fontColor }) => fontColor};
border-right: ${({ borderColor, hasRightBorder }) =>
hasRightBorder ? `1px solid ${borderColor}` : 'none'};
color: ${({ fontColor }) => fontColor};
padding: 0;
text-align: left;
background: ${({ backgroundColor, isDragging }) =>
isDragging ? 'transparent' : backgroundColor};
`;
export const RecordTableCellStyleWrapper = ({
packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableDragAndDropPlaceholderCell.tsx
+6 -6
View File
@@ -5,16 +5,16 @@ import { cx } from '@linaria/core';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledPlaceholderDragAndDropCell = styled.div`
background-color: ${themeCssVariables.background.primary};
border-bottom: 1px solid ${themeCssVariables.background.primary};
height: ${RECORD_TABLE_ROW_HEIGHT}px;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
left: 0;
min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
background-color: ${themeCssVariables.background.primary};
border-bottom: 1px solid ${themeCssVariables.background.primary};
position: sticky;
left: 0;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
`;
export const RecordTableDragAndDropPlaceholderCell = ({
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooter.tsx
+6 -6
View File
@@ -15,10 +15,10 @@ const StyledPlaceholderDragAndDropFooterCell = styled.div<{
isTableWithGroups: boolean;
}>`
background-color: ${themeCssVariables.background.primary};
width: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
position: sticky;
left: 0px;
bottom: 0;
left: 0px;
position: sticky;
width: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
z-index: ${({ isTableWithGroups }) =>
isTableWithGroups
@@ -30,9 +30,9 @@ const StyledPlaceholderAddButtonPlaceholderFooterCell = styled.div<{
isTableWithGroups: boolean;
}>`
background-color: ${themeCssVariables.background.primary};
width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
position: sticky;
bottom: 0;
position: sticky;
width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
z-index: ${({ isTableWithGroups }) =>
isTableWithGroups
? TABLE_Z_INDEX.footer.tableWithGroups.default
@@ -43,8 +43,8 @@ const StyledPlaceholderLastColumnEmptyFooterCell = styled.div<{
isTableWithGroups: boolean;
}>`
background-color: ${themeCssVariables.background.primary};
position: sticky;
bottom: 0;
position: sticky;
z-index: ${({ isTableWithGroups }) =>
isTableWithGroups
? TABLE_Z_INDEX.footer.tableWithGroups.default
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableAggregateFooterCell.tsx
+16 -16
View File
@@ -20,29 +20,29 @@ const StyledColumnFooterCell = styled.div<{
isTableWithGroups: boolean;
}>`
background-color: ${themeCssVariables.background.primary};
color: ${themeCssVariables.font.color.tertiary};
border-right: solid 1px ${themeCssVariables.background.primary};
padding: 0;
min-width: ${({ columnWidth }) => columnWidth}px;
width: ${({ columnWidth }) => columnWidth}px;
text-align: left;
&:hover {
background: ${themeCssVariables.background.secondary};
}
height: ${RECORD_TABLE_ROW_HEIGHT}px;
overflow: hidden;
position: sticky;
bottom: 0;
color: ${themeCssVariables.font.color.tertiary};
height: ${RECORD_TABLE_ROW_HEIGHT}px;
left: ${({ isFirstCell }) =>
isFirstCell
? `${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`
: 'auto'};
min-width: ${({ columnWidth }) => columnWidth}px;
&:hover {
background: ${themeCssVariables.background.secondary};
}
overflow: hidden;
padding: 0;
position: sticky;
text-align: left;
width: ${({ columnWidth }) => columnWidth}px;
z-index: ${({ isFirstCell, isTableWithGroups }) =>
isFirstCell
? isTableWithGroups
@@ -70,8 +70,8 @@ const StyledColumnFooterCell = styled.div<{
const StyledColumnFootContainer = styled.div`
position: relative;
z-index: 1;
width: 100%;
z-index: 1;
`;
export const RecordTableAggregateFooterCell = ({
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValue.tsx
+13 -13
View File
@@ -7,35 +7,35 @@ import { isDefined } from 'twenty-shared/utils';
import { OverflowingTextWithTooltip } from 'twenty-ui/display';
const StyledText = styled.span`
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: flex;
height: 20px;
align-items: center;
gap: 4px;
display: flex;
flex-grow: 1;
gap: 4px;
height: 20px;
overflow: hidden;
padding-left: ${themeCssVariables.spacing[2]};
text-overflow: ellipsis;
white-space: nowrap;
z-index: 1;
`;
const StyledValueContainer = styled.div`
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
-ms-overflow-style: none;
align-items: center;
display: flex;
gap: 4px;
&::-webkit-scrollbar {
display: none;
}
align-items: center;
display: flex;
gap: 4px;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: flex-end;
overflow-x: auto;
padding: 0 8px;
scrollbar-width: none;
white-space: nowrap;
`;
const StyledValue = styled.div`
packages/twenty-front/src/modules/object-record/record-table/record-table-footer/components/RecordTableColumnAggregateFooterValueCell.tsx
+9 -9
View File
@@ -15,22 +15,22 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>`
align-items: center;
background: ${({ isUnfolded }) =>
isUnfolded ? themeCssVariables.background.tertiary : 'none'};
cursor: pointer;
display: flex;
flex-direction: row;
flex-grow: 1;
flex-shrink: 0;
font-weight: ${themeCssVariables.font.weight.medium};
gap: ${themeCssVariables.spacing[1]};
height: ${themeCssVariables.spacing[8]};
justify-content: space-between;
min-width: ${themeCssVariables.spacing[7]};
flex-grow: 1;
max-width: 100%;
cursor: pointer;
background: ${({ isUnfolded }) =>
isUnfolded ? themeCssVariables.background.tertiary : 'none'};
min-width: ${themeCssVariables.spacing[7]};
padding-left: ${({ isFirstCell }) =>
isFirstCell
@@ -41,10 +41,10 @@ const StyledCell = styled.div<{ isUnfolded: boolean; isFirstCell: boolean }>`
const StyledIconContainer = styled.div`
align-items: center;
display: flex;
height: 20px;
justify-content: center;
flex-grow: 0;
flex-shrink: 0;
height: 20px;
justify-content: center;
padding-right: ${themeCssVariables.spacing[2]};
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderAddColumnButton.tsx
+7 -7
View File
@@ -24,24 +24,24 @@ import { ThemeContext, themeCssVariables } from 'twenty-ui/theme-constants';
const StyledPlusIconHeaderCell = styled.div<{
shouldDisplayBorderBottom: boolean;
}>`
background-color: ${themeCssVariables.background.primary};
border-bottom: ${({ shouldDisplayBorderBottom }) =>
shouldDisplayBorderBottom
? `1px solid ${themeCssVariables.border.color.light}`
: 'none'};
background-color: ${themeCssVariables.background.primary};
color: ${themeCssVariables.font.color.tertiary};
border-right: ${themeCssVariables.border.color.light} !important;
color: ${themeCssVariables.font.color.tertiary};
cursor: pointer;
width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
z-index: 1;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
max-height: ${RECORD_TABLE_ROW_HEIGHT}px;
width: ${RECORD_TABLE_COLUMN_ADD_COLUMN_BUTTON_WIDTH}px;
z-index: 1;
&:hover {
background: ${themeCssVariables.background.secondary};
}
@@ -51,8 +51,8 @@ const StyledPlusIconContainer = styled.div`
align-items: center;
display: flex;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
width: 100%;
justify-content: center;
width: 100%;
`;
const StyledDropdownContainer = styled.div`
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCellContainer.tsx
+13 -13
View File
@@ -7,24 +7,24 @@ const StyledHeaderCell = styled.div<{
shouldDisplayBorderBottom: boolean;
isResizing: boolean;
}>`
color: ${themeCssVariables.font.color.tertiary};
padding: 0;
text-align: left;
position: relative;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
max-height: ${RECORD_TABLE_ROW_HEIGHT}px;
background-color: ${themeCssVariables.background.primary};
border-right: 1px solid ${themeCssVariables.border.color.light};
border-bottom: ${({ shouldDisplayBorderBottom }) =>
shouldDisplayBorderBottom
? `1px solid ${themeCssVariables.border.color.light}`
: 'none'};
border-right: 1px solid ${themeCssVariables.border.color.light};
user-select: none;
color: ${themeCssVariables.font.color.tertiary};
cursor: ${({ isResizing }) => (isResizing ? 'col-resize' : 'pointer')};
height: ${RECORD_TABLE_ROW_HEIGHT}px;
max-height: ${RECORD_TABLE_ROW_HEIGHT}px;
padding: 0;
position: relative;
text-align: left;
&:hover {
background: ${({ isResizing }) =>
@@ -40,7 +40,7 @@ const StyledHeaderCell = styled.div<{
: themeCssVariables.background.tertiary};
}
cursor: ${({ isResizing }) => (isResizing ? 'col-resize' : 'pointer')};
user-select: none;
z-index: ${({ zIndex }) => zIndex ?? 'auto'};
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
+7 -7
View File
@@ -26,27 +26,27 @@ const StyledContainer = styled.div<{
shouldDisplayBorderBottom: boolean;
}>`
align-items: center;
display: flex;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: center;
min-width: 24px;
padding-right: ${themeCssVariables.spacing[1]};
background-color: ${themeCssVariables.background.primary};
border-bottom: ${({ shouldDisplayBorderBottom }) =>
shouldDisplayBorderBottom
? `1px solid ${themeCssVariables.border.color.light}`
: 'none'};
display: flex;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: center;
min-width: 24px;
padding-right: ${themeCssVariables.spacing[1]};
`;
const StyledColumnHeaderCell = styled.div`
background-color: ${themeCssVariables.background.primary};
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
box-sizing: border-box;
cursor: pointer;
max-height: ${RECORD_TABLE_ROW_HEIGHT}px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
`;
export const RecordTableHeaderCheckboxColumn = () => {
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderDragDropColumn.tsx
+8 -8
View File
@@ -19,18 +19,18 @@ const StyledDragDropHeaderCell = styled.div<{
backgroundColor: string;
}>`
background-color: ${({ backgroundColor }) => backgroundColor};
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;
border-bottom: ${({ shouldDisplayBorderBottom }) =>
shouldDisplayBorderBottom
? `1px solid ${themeCssVariables.background.primary}`
: 'none'};
cursor: pointer;
max-height: ${RECORD_TABLE_ROW_HEIGHT}px;
max-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
min-height: ${RECORD_TABLE_ROW_HEIGHT}px;
min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
`;
export const RecordTableHeaderDragDropColumn = () => {
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderFirstCell.tsx
+1 -1
View File
@@ -25,8 +25,8 @@ import { isDefined } from 'twenty-shared/utils';
const StyledPlusButtonWrapper = styled.div`
position: absolute;
top: 0;
right: 0;
top: 0;
z-index: ${TABLE_Z_INDEX.headerColumns.withoutGroups.headerColumnsSticky};
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastEmptyColumn.tsx
+2 -2
View File
@@ -15,12 +15,12 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledLastColumnHeader = styled.div<{
shouldDisplayBorderBottom: boolean;
}>`
background-color: ${themeCssVariables.background.primary};
border-bottom: ${({ shouldDisplayBorderBottom }) =>
shouldDisplayBorderBottom
? `1px solid ${themeCssVariables.border.color.light}`
: 'none'};
background-color: ${themeCssVariables.background.primary};
border-left: none !important;
color: ${themeCssVariables.font.color.tertiary};
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderResizeHandler.tsx
+1 -1
View File
@@ -13,8 +13,8 @@ const StyledResizeHandler = styled.div<{
}>`
bottom: 0;
cursor: col-resize;
position: absolute;
left: ${({ position }) => (position === 'left' ? '-1px' : 'auto')};
position: absolute;
right: ${({ position }) => (position === 'right' ? '-1px' : 'auto')};
top: 0;
width: 10px;
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableActionRow.tsx
+8 -8
View File
@@ -27,14 +27,14 @@ const StyledFieldPlaceholderCell = styled.div<{ widthOfFields: number }>`
`;
const StyledRecordTableDraggableTr = styled.div`
cursor: pointer;
align-items: center;
border: none;
background: ${themeCssVariables.background.primary};
border: none;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
&:hover {
div:not(:first-of-type) {
@@ -57,10 +57,10 @@ const StyledIconContainer = styled.div`
display: flex;
height: ${RECORD_TABLE_ROW_HEIGHT}px;
justify-content: center;
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
position: sticky;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
`;
const StyledActionTextContainer = styled.div<{ width: number }>`
@@ -79,13 +79,13 @@ const StyledActionTextContainer = styled.div<{ width: number }>`
const StyledText = styled.span`
color: ${themeCssVariables.font.color.tertiary};
margin-left: ${themeCssVariables.spacing[2]};
font-size: ${themeCssVariables.font.size.md};
margin-left: ${themeCssVariables.spacing[2]};
position: absolute;
text-align: left;
vertical-align: middle;
white-space: nowrap;
position: absolute;
white-space: nowrap;
`;
type RecordTableActionRowProps = {
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowDiv.tsx
+14 -14
View File
@@ -7,18 +7,6 @@ const StyledTr = styled.div<{
isFirstRowOfGroup?: boolean;
isScrolledVertically?: boolean;
}>`
--z-index-for-sticky-cells: ${({
isFirstRowOfGroup,
isScrolledVertically,
}) =>
isFirstRowOfGroup === true
? isScrolledVertically
? TABLE_Z_INDEX.activeRows.firstRow.sticky.scrolledVertically
: TABLE_Z_INDEX.activeRows.firstRow.sticky.noVerticalScroll
: isScrolledVertically
? TABLE_Z_INDEX.activeRows.afterFirstRow.sticky.scrolledVertically
: TABLE_Z_INDEX.activeRows.afterFirstRow.sticky.noVerticalScroll};
--z-index-for-normal-cells: ${({
isFirstRowOfGroup,
isScrolledVertically,
@@ -31,6 +19,18 @@ const StyledTr = styled.div<{
? TABLE_Z_INDEX.activeRows.afterFirstRow.normal.scrolledVertically
: TABLE_Z_INDEX.activeRows.afterFirstRow.normal.noVerticalScroll};
--z-index-for-sticky-cells: ${({
isFirstRowOfGroup,
isScrolledVertically,
}) =>
isFirstRowOfGroup === true
? isScrolledVertically
? TABLE_Z_INDEX.activeRows.firstRow.sticky.scrolledVertically
: TABLE_Z_INDEX.activeRows.firstRow.sticky.noVerticalScroll
: isScrolledVertically
? TABLE_Z_INDEX.activeRows.afterFirstRow.sticky.scrolledVertically
: TABLE_Z_INDEX.activeRows.afterFirstRow.sticky.noVerticalScroll};
border-top: ${({ isDragging }) =>
isDragging ? `1px solid ${themeCssVariables.border.color.medium}` : 'none'};
@@ -42,9 +42,9 @@ const StyledTr = styled.div<{
div.table-cell,
div.table-cell-0-0 {
&:not(:first-of-type) {
background-color: ${themeCssVariables.background.tertiary};
border-bottom: 1px solid ${themeCssVariables.border.color.medium};
border-color: ${themeCssVariables.border.color.medium};
background-color: ${themeCssVariables.background.tertiary};
}
&:nth-of-type(2) {
border-left: 1px solid ${themeCssVariables.border.color.medium};
@@ -56,9 +56,9 @@ const StyledTr = styled.div<{
}
}
&:last-of-type {
border-right: 1px solid ${themeCssVariables.border.color.medium};
border-radius: 0 ${themeCssVariables.border.radius.sm}
${themeCssVariables.border.radius.sm} 0;
border-right: 1px solid ${themeCssVariables.border.color.medium};
}
}
}
packages/twenty-front/src/modules/object-record/record-table/record-table-row/components/RecordTableRowMultiDragCounterChip.tsx
+1 -1
View File
@@ -4,9 +4,9 @@ import { styled } from '@linaria/react';
import { NotificationCounter } from 'twenty-ui/navigation';
const StyledNotificationCounterContainer = styled.div`
left: -7px;
position: absolute;
top: -7px;
left: -7px;
z-index: 1000;
`;
packages/twenty-front/src/modules/object-record/record-table/record-table-section/components/RecordTableRecordGroupSection.tsx
+12 -12
View File
@@ -53,13 +53,13 @@ const StyledChevronContainer = styled.div`
border-right: none;
color: ${themeCssVariables.font.color.secondary};
display: flex;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
position: sticky;
text-align: center;
vertical-align: middle;
width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
min-width: ${RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px;
position: sticky;
left: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
z-index: ${TABLE_Z_INDEX.groupSection.stickyCell};
`;
@@ -78,11 +78,11 @@ const StyledRecordGroupSection = styled.div<{ width: number }>`
flex-direction: row;
gap: ${themeCssVariables.spacing[1]};
height: ${RECORD_TABLE_ROW_HEIGHT}px;
width: ${({ width }) => width}px;
left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
min-width: ${({ width }) => width}px;
position: sticky;
left: ${`${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH + RECORD_TABLE_COLUMN_CHECKBOX_WIDTH}px`};
width: ${({ width }) => width}px;
z-index: ${TABLE_Z_INDEX.groupSection.stickyCell};
`;
@@ -100,16 +100,16 @@ const StyledFieldPlaceholderCell = styled.div<{ widthOfFields: number }>`
`;
const StyledRecordTableDragAndDropPlaceholderCell = styled.div`
background-color: ${themeCssVariables.background.primary};
border-bottom: 1px solid ${themeCssVariables.background.primary};
height: ${RECORD_TABLE_ROW_HEIGHT}px;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
left: 0;
min-width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
background-color: ${themeCssVariables.background.primary};
border-bottom: 1px solid ${themeCssVariables.background.primary};
position: sticky;
left: 0;
width: ${RECORD_TABLE_COLUMN_DRAG_AND_DROP_WIDTH}px;
z-index: ${TABLE_Z_INDEX.groupSection.stickyCell};
`;
packages/twenty-front/src/modules/object-record/record-table/virtualization/components/RecordTableRowVirtualizedDebugRowHelper.tsx
+13 -13
View File
@@ -15,29 +15,29 @@ import { isDefined } from 'twenty-shared/utils';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDebugRow = styled.div`
position: absolute;
left: 250px;
top: 5px;
z-index: 20;
color: ${themeCssVariables.font.color.primary};
background-color: ${themeCssVariables.color.gray3};
border: 1px solid ${themeCssVariables.color.blue8};
padding: ${themeCssVariables.spacing['0.5']};
color: ${themeCssVariables.font.color.primary};
display: flex;
left: 250px;
max-height: ${themeCssVariables.spacing[4]};
overflow: hidden;
padding: ${themeCssVariables.spacing['0.5']};
position: absolute;
top: 5px;
z-index: 20;
`;
const StyledDebugColumn = styled.div<{ width: number }>`
min-width: ${({ width }) => width}px;
max-width: ${({ width }) => width}px;
overflow: hidden;
display: flex;
text-wrap-mode: nowrap;
padding-right: ${themeCssVariables.spacing['0.5']};
max-width: ${({ width }) => width}px;
min-width: ${({ width }) => width}px;
overflow: hidden;
padding-left: ${themeCssVariables.spacing['0.5']};
padding-right: ${themeCssVariables.spacing['0.5']};
text-wrap-mode: nowrap;
`;
type RecordTableRowVirtualizedDebugRowHelperProps = {
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleCellTextFieldDisplay.tsx
+5 -5
View File
@@ -11,18 +11,18 @@ import { OverflowingTextWithTooltip } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDiv = styled.div`
align-items: center;
background: inherit;
border: none;
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
overflow: hidden;
height: 24px;
padding: ${themeCssVariables.spacing[0]} 5px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 24px;
justify-content: center;
overflow: hidden;
padding: ${themeCssVariables.spacing[0]} 5px;
:hover {
background: ${themeCssVariables.background.transparent.light};
}
packages/twenty-front/src/modules/object-record/record-title-cell/components/RecordTitleFullNameFieldDisplay.tsx
+5 -5
View File
@@ -12,18 +12,18 @@ import { OverflowingTextWithTooltip } from 'twenty-ui/display';
import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledDiv = styled.div`
align-items: center;
background: inherit;
border: none;
border-radius: ${themeCssVariables.border.radius.sm};
box-sizing: border-box;
color: ${themeCssVariables.font.color.primary};
cursor: pointer;
overflow: hidden;
height: 24px;
padding: ${themeCssVariables.spacing[0]} 5px;
box-sizing: border-box;
display: flex;
align-items: center;
height: 24px;
justify-content: center;
overflow: hidden;
padding: ${themeCssVariables.spacing[0]} 5px;
:hover {
background: ${themeCssVariables.background.transparent.light};
}
packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsContainer.tsx
+3 -3
View File
@@ -13,16 +13,16 @@ import { themeCssVariables } from 'twenty-ui/theme-constants';
const StyledShowPageRightContainer = styled.div`
display: flex;
flex-direction: column;
justify-content: start;
width: 100%;
height: 100%;
justify-content: start;
overflow: auto;
width: 100%;
`;
const StyledContentContainer = styled.div`
background: ${themeCssVariables.background.primary};
flex: 1;
overflow-y: auto;
background: ${themeCssVariables.background.primary};
padding-bottom: ${themeCssVariables.spacing[16]};
`;
packages/twenty-front/src/modules/object-record/record-update-multiple/components/UpdateMultipleRecordsFooter.tsx
+1 -1
View File
@@ -21,8 +21,8 @@ const StyledFooterContainer = styled.div`
`;
const StyledFooterActions = styled.div`
display: flex;
align-items: flex-end;
display: flex;
gap: ${themeCssVariables.spacing[2]};
`;