Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-20 00:08:02 +01:00
Code Issues Projects Releases Wiki Activity

fix: users table sort header styles

Browse Source
This commit is contained in:
Tymoteusz Czech 2022-04-29 13:30:50 +02:00
parent 860656a95e
commit 81b64e61e7
2 changed files with 43 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts
View File

@ -2,13 +2,10 @@ import { makeStyles } from '@material-ui/core/styles';
export const useStyles = makeStyles(theme => ({
tableCellHeaderSortable: {
padding: 0,
position: 'relative',
cursor: 'pointer',
'&:hover': {
backgroundColor: theme.v2.palette.grey[40],
'& > svg': {
color: theme.v2.palette.grey[90],
},
},
overflow: 'hidden',
'& > svg': {
fontSize: theme.v2.fontSizes.headerIcon,
verticalAlign: 'middle',
@ -24,8 +21,22 @@ export const useStyles = makeStyles(theme => ({
},
sortButton: {
all: 'unset',
padding: theme.spacing(2),
width: '100%',
'&:focus-visible, &:active': {
outline: 'revert',
},
display: 'flex',
alignItems: 'center',
'&:hover': {
backgroundColor: theme.v2.palette.grey[40],
'& > svg': {
color: theme.v2.palette.grey[90],
},
},
},
icon: {
marginLeft: theme.spacing(0.5),
fontSize: theme.v2.fontSizes.headerIcon,
},
}));

37
frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx
View File

@ -60,18 +60,33 @@ export const TableCellSortable = ({
<TableCell aria-sort={ariaSort} className={cellClassName}>
<button className={styles.sortButton} onClick={onSortClick}>
{children}
<ConditionallyRender
condition={sort.type === name}
show={
<ConditionallyRender
condition={Boolean(sort.desc)}
show={
<KeyboardArrowDown
className={styles.icon}
fontSize="inherit"
/>
}
elseShow={
<KeyboardArrowUp
className={styles.icon}
fontSize="inherit"
/>
}
/>
}
elseShow={
<UnfoldMoreOutlined
className={styles.icon}
fontSize="inherit"
/>
}
/>
</button>
<ConditionallyRender
condition={sort.type === name}
show={
<ConditionallyRender
condition={Boolean(sort.desc)}
show={<KeyboardArrowDown />}
elseShow={<KeyboardArrowUp />}
/>
}
elseShow={<UnfoldMoreOutlined />}
/>
</TableCell>
);
};