twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2024-12-23 12:02:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix: Checkbox column width should be fixed (#8489)

Browse Source 
## Description

- This PR adds the functionality of fixed column width across all boards
- This PR fixes the issue 
#8463 
#8331

<img width="1167" alt="Screenshot 2024-11-14 at 12 19 02 PM"
src="https://github.com/user-attachments/assets/7c2b1016-2a59-4d08-8d29-9558648bcd67">

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
This commit is contained in:
Harshit Singh 2024-11-16 21:17:36 +05:30 committed by GitHub
parent 859ce89e87
commit 8c33e4cdae
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 22 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,5 +6,10 @@ import { RecordTableTd } from '@/object-record/record-table/record-table-cell/co
export const RecordTableLastEmptyCell = () => {
const { isSelected } = useContext(RecordTableRowContext);
return <RecordTableTd isSelected={isSelected} hasRightBorder={false} />;
return (
<>
<RecordTableTd isSelected={isSelected} hasRightBorder={false} />
<RecordTableTd isSelected={isSelected} hasRightBorder={false} />
</>
);
};

4
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderCheckboxColumn.tsx
View File

@ -17,8 +17,6 @@ const StyledColumnHeaderCell = styled.th`
background-color: ${({ theme }) => theme.background.primary};
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
border-right: transparent;
max-width: 30px;
min-width: 30px;
width: 30px;
`;
@ -28,7 +26,6 @@ export const RecordTableHeaderCheckboxColumn = () => {
);
const { selectAllRows, resetTableRowSelection, setHasUserSelectedAllRows } =
useRecordTable();
const checked = allRowsSelectedStatus === 'all';
const indeterminate = allRowsSelectedStatus === 'some';
@ -37,6 +34,7 @@ export const RecordTableHeaderCheckboxColumn = () => {
setHasUserSelectedAllRows(true);
selectAllRows();
} else {
setHasUserSelectedAllRows(false);
resetTableRowSelection();
}
};

30
packages/twenty-front/src/modules/object-record/record-table/record-table-header/components/RecordTableHeaderLastColumn.tsx
View File

@ -5,10 +5,8 @@ import { IconPlus, ThemeContext } from 'twenty-ui';
import { HIDDEN_TABLE_COLUMN_DROPDOWN_ID } from '@/object-record/record-table/constants/HiddenTableColumnDropdownId';
import { RecordTableHeaderPlusButtonContent } from '@/object-record/record-table/record-table-header/components/RecordTableHeaderPlusButtonContent';
import { hiddenTableColumnsComponentSelector } from '@/object-record/record-table/states/selectors/hiddenTableColumnsComponentSelector';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
import { useRecoilComponentValueV2 } from '@/ui/utilities/state/component-state/hooks/useRecoilComponentValueV2';
const StyledPlusIconHeaderCell = styled.th<{
theme: Theme;
@ -25,9 +23,8 @@ const StyledPlusIconHeaderCell = styled.th<{
background-color: ${({ theme }) => theme.background.primary};
border-left: none !important;
color: ${({ theme }) => theme.font.color.tertiary};
min-width: 32px;
width: 32px;
border-right: none !important;
width: 32px;
${({ isTableWiderThanScreen, theme }) =>
isTableWiderThanScreen
@ -38,6 +35,12 @@ const StyledPlusIconHeaderCell = styled.th<{
z-index: 1;
`;
const StyledEmptyHeaderCell = styled.th`
border-bottom: 1px solid ${({ theme }) => theme.border.color.light};
background-color: ${({ theme }) => theme.background.primary};
width: 100%;
`;
const StyledPlusIconContainer = styled.div`
align-items: center;
display: flex;
@ -58,16 +61,12 @@ export const RecordTableHeaderLastColumn = () => {
(scrollWrapper.ref.current?.clientWidth ?? 0) <
(scrollWrapper.ref.current?.scrollWidth ?? 0);
const hiddenTableColumns = useRecoilComponentValueV2(
hiddenTableColumnsComponentSelector,
);
return (
<StyledPlusIconHeaderCell
theme={theme}
isTableWiderThanScreen={isTableWiderThanScreen}
>
{hiddenTableColumns.length > 0 && (
<>
<StyledPlusIconHeaderCell
theme={theme}
isTableWiderThanScreen={isTableWiderThanScreen}
>
<Dropdown
dropdownId={HIDDEN_TABLE_COLUMN_DROPDOWN_ID}
clickableComponent={
@ -81,7 +80,8 @@ export const RecordTableHeaderLastColumn = () => {
scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID,
}}
/>
)}
</StyledPlusIconHeaderCell>
</StyledPlusIconHeaderCell>
<StyledEmptyHeaderCell />
</>
);
};