twentyhq/twenty
1
1
Fork 0
mirror of https://github.com/twentyhq/twenty.git synced 2025-01-05 10:54:15 +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 { useTheme } from '@emotion/react';
import styled from '@emotion/styled';
import { useRecoilCallback, useRecoilState } from 'recoil';
import { IconPlus } from '@/ui/display/icon';
import { IconButton } from '@/ui/input/button/components/IconButton';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownScope } from '@/ui/layout/dropdown/scopes/DropdownScope';
import { useTrackPointer } from '@/ui/utilities/pointer-event/hooks/useTrackPointer';
@ -28,11 +28,18 @@ const StyledColumnHeaderCell = styled.th<{
isResizing?: boolean;
}>`
${({ columnWidth }) => `
min-width: ${columnWidth}px;
width: ${columnWidth}px;
`}
min-width: ${columnWidth}px;
width: ${columnWidth}px;
`}
position: relative;
user-select: none;
${({ theme }) => {
return `
&:hover {
background: ${theme.background.transparent.light};
};
`;
}};
${({ isResizing, theme }) => {
if (isResizing) {
return `&:after {
@ -69,6 +76,30 @@ const StyledColumnHeadContainer = styled.div`
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 =
'hidden-table-columns-dropdown-scope-id';
@ -156,6 +187,8 @@ export const RecordTableHeader = () => {
(column) => column.position === 0,
);
const theme = useTheme();
return (
<StyledTableHead data-select-disable>
<tr>
@ -197,31 +230,26 @@ export const RecordTableHeader = () => {
/>
</StyledColumnHeaderCell>
))}
<th>
{hiddenTableColumns.length > 0 && (
<StyledColumnHeadContainer>
<DropdownScope
dropdownScopeId={HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID}
>
<Dropdown
clickableComponent={
<IconButton
size="medium"
variant="tertiary"
Icon={IconPlus}
position="middle"
/>
}
dropdownComponents={<RecordTableHeaderPlusButtonContent />}
dropdownPlacement="bottom-start"
dropdownHotkeyScope={{
scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID,
}}
/>
</DropdownScope>
</StyledColumnHeadContainer>
)}
</th>
{hiddenTableColumns.length > 0 && (
<StyledPlusIconHeaderCell>
<DropdownScope
dropdownScopeId={HIDDEN_TABLE_COLUMN_DROPDOWN_SCOPE_ID}
>
<Dropdown
clickableComponent={
<StyledPlusIconContainer>
<IconPlus size={theme.icon.size.md} />
</StyledPlusIconContainer>
}
dropdownComponents={<RecordTableHeaderPlusButtonContent />}
dropdownPlacement="bottom-start"
dropdownHotkeyScope={{
scope: HIDDEN_TABLE_COLUMN_DROPDOWN_HOTKEY_SCOPE_ID,
}}
/>
</DropdownScope>
</StyledPlusIconHeaderCell>
)}
</tr>
</StyledTableHead>
);