twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2025-01-07 09:17:31 +03:00
Code Issues Packages Projects Releases Wiki Activity

2385-feat(front): icon button styles added (#2411)

Browse Source 
* 2385-feat(front): icon button styles added

* 2385-feat(front): pr requested changes done

* Fix alignment

---------

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Kanav Arora 2023-11-09 20:53:45 +05:30 committed by GitHub
parent 279630052f
commit f26be4d837
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 57 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

86
front/src/modules/ui/object/record-table/components/RecordTableHeader.tsx
View File

@ -1,9 +1,9 @@
import { useCallback, useState } from 'react'; import { useCallback, useState } from 'react';
import { useTheme } from '@emotion/react';
import styled from '@emotion/styled'; import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilState } from 'recoil'; import { useRecoilCallback, useRecoilState } from 'recoil';
import { IconPlus } from '@/ui/display/icon'; import { IconPlus } from '@/ui/display/icon';
import { IconButton } from '@/ui/input/button/components/IconButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown'; import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope'; import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer'; import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
@ -28,11 +28,18 @@ const StyledColumnHeaderCell = styled.th<{
isResizing?: boolean; isResizing?: boolean;
}>` }>`
${({ columnWidth }) => ` ${({ columnWidth }) => `
min-width: ${columnWidth}px; min-width: ${columnWidth}px;
width: ${columnWidth}px; width: ${columnWidth}px;
`} `}
position: relative; position: relative;
user-select: none; user-select: none;
${({ theme }) => {
return `
&:hover {
background: ${theme.background.transparent.light};
};
`;
}};
${({ isResizing, theme }) => { ${({ isResizing, theme }) => {
if (isResizing) { if (isResizing) {
return `&:after { return `&:after {
@ -69,6 +76,30 @@ const StyledColumnHeadContainer = styled.div`
z-index: 1; z-index: 1;
`; `;
const StyledPlusIconHeaderCell = styled.th`
${({ theme }) => {
return `
&:hover {
background: ${theme.background.transparent.light};
};
padding-left: ${theme.spacing(3)};
`;
}};
border-bottom: none !important;
border-left: none !important;
min-width: 32px;
position: relative;
z-index: 1;
`;
const StyledPlusIconContainer = styled.div`
align-items: center;
display: flex;
height: 32px;
justify-content: center;
width: 32px;
`;
const HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID = const HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID =
'hidden-table-columns-dropdown-scope-id'; 'hidden-table-columns-dropdown-scope-id';
@ -156,6 +187,8 @@ export const RecordTableHeader = () => {
(column) => column.position === 0, (column) => column.position === 0,
); );
const theme = useTheme();
return ( return (
<StyledTableHead data-select-disable> <StyledTableHead data-select-disable>
<tr> <tr>
@ -197,31 +230,26 @@ export const RecordTableHeader = () => {
/> />
</StyledColumnHeaderCell> </StyledColumnHeaderCell>
))} ))}
<th> {hiddenTableColumns.length > 0 && (
{hiddenTableColumns.length > 0 && ( <StyledPlusIconHeaderCell>
<StyledColumnHeadContainer> <DropdownScope
<DropdownScope dropdownScopeId={HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID}
dropdownScopeId={HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID} >
> <Dropdown
<Dropdown clickableComponent={
clickableComponent={ <StyledPlusIconContainer>
<IconButton <IconPlus size={theme.icon.size.md} />
size="medium" </StyledPlusIconContainer>
variant="tertiary" }
Icon={IconPlus} dropdownComponents={<RecordTableHeaderPlusButtonContent />}
position="middle" dropdownPlacement="bottom-start"
/> dropdownHotkeyScope={{
} scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID,
dropdownComponents={<RecordTableHeaderPlusButtonContent />} }}
dropdownPlacement="bottom-start" />
dropdownHotkeyScope={{ </DropdownScope>
scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID, </StyledPlusIconHeaderCell>
}} )}
/>
</DropdownScope>
</StyledColumnHeadContainer>
)}
</th>
</tr> </tr>
</StyledTableHead> </StyledTableHead>
); );