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

On RecordTable, if I have no records, the Record Table Layout is not broken (#2911)

Browse Source 
* On RecordTable, if I have no records, the Record Table Layout is not broken

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Revert scrollbar changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* fix + button

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Revert unwanted changes

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Merge main

Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* On RecordTable, if I have no records, the Record Table Layout is not broken

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Add bottom border

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Always show + button

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Refactor according to review

Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>

* Fix according to PR

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: v1b3m <vibenjamin6@gmail.com>
Co-authored-by: RubensRafael <rubensrafael2@live.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
Co-authored-by: Thiago Nascimbeni <tnascimbeni@gmail.com>
Co-authored-by: Lucas Bordeau <bordeau.lucas@gmail.com>
This commit is contained in:
gitstart-twenty
2023-12-15 17:35:26 +08:00
committed by GitHub
parent b04c787540
commit af9d3fb217
2 changed files with 22 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeader.tsx
View File

@ -6,6 +6,7 @@ import { RecordTableHeaderCell } from '@/object-record/record-table/components/R
import { IconPlus } from '@/ui/display/icon';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { useScrollWrapperScopedRef } from '@/ui/utilities/scroll/hooks/useScrollWrapperScopedRef';
import { useRecordTableScopedStates } from '../hooks/internal/useRecordTableScopedStates';
@ -16,7 +17,7 @@ const StyledTableHead = styled.thead`
cursor: pointer;
`;
const StyledPlusIconHeaderCell = styled.th`
const StyledPlusIconHeaderCell = styled.th<{ isTableWiderThanScreen: boolean }>`
${({ theme }) => {
return `
&:hover {
@ -25,10 +26,16 @@ const StyledPlusIconHeaderCell = styled.th`
padding-left: ${theme.spacing(3)};
`;
}};
border-bottom: none !important;
border-left: none !important;
min-width: 32px;
position: relative;
${({ isTableWiderThanScreen, theme }) =>
isTableWiderThanScreen &&
`position: relative;
right: 0;
width: 32px;
border-right: none !important;
background-color: ${theme.background.primary};
`};
z-index: 1;
`;
@ -55,6 +62,12 @@ export const RecordTableHeader = ({
useRecordTableScopedStates();
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
const scrollWrapper = useScrollWrapperScopedRef();
const isTableWiderThanScreen =
(scrollWrapper.current?.clientWidth ?? 0) <
(scrollWrapper.current?.scrollWidth ?? 0);
const visibleTableColumns = useRecoilValue(visibleTableColumnsSelector);
const theme = useTheme();
@ -78,8 +91,10 @@ export const RecordTableHeader = ({
createRecord={createRecord}
/>
))}
{hiddenTableColumns.length > 0 && (
<StyledPlusIconHeaderCell>
<StyledPlusIconHeaderCell
isTableWiderThanScreen={isTableWiderThanScreen}
>
{hiddenTableColumns.length > 0 && (
<DropdownScope
dropdownScopeId={HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID}
>
@ -96,8 +111,8 @@ export const RecordTableHeader = ({
}}
/>
</DropdownScope>
</StyledPlusIconHeaderCell>
)}
)}
</StyledPlusIconHeaderCell>
</tr>
</StyledTableHead>
);

1
packages/twenty-front/src/modules/object-record/relation-picker/components/MultipleEntitySelect.tsx
View File

@ -1,4 +1,3 @@
/* eslint-disable react-hooks/rules-of-hooks */
import { useRef } from 'react';
import { isNonEmptyString } from '@sniptt/guards';
import debounce from 'lodash.debounce';