mirror of
https://github.com/Unleash/unleash.git
synced 2025-01-20 00:08:02 +01:00
fix: remove tooltip from favorites cell, some refactoring (#2687)
https://linear.app/unleash/issue/2-510/favorite-cell-tooltips-is-buggy-when-pinned-remove-tooltips Tooltips were buggy when using the pinned feature, so I aligned with @NicolaeUnleash and decided to remove them for now: <img width="407" alt="image" src="https://user-images.githubusercontent.com/14320932/207380515-476a4bec-c1c0-43af-adb8-f7001ae75e9c.png"> Also includes a slight refactor on this component.
This commit is contained in:
parent
212083b5ed
commit
eb433185a1
@ -5,49 +5,46 @@ import {
|
|||||||
StarBorder as StarBorderIcon,
|
StarBorder as StarBorderIcon,
|
||||||
} from '@mui/icons-material';
|
} from '@mui/icons-material';
|
||||||
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
|
||||||
import { TooltipResolver } from 'component/common/TooltipResolver/TooltipResolver';
|
|
||||||
|
const StyledCell = styled(Box)(({ theme }) => ({
|
||||||
|
paddingLeft: theme.spacing(1.25),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledIconButton = styled(IconButton)(({ theme }) => ({
|
||||||
|
color: theme.palette.primary.main,
|
||||||
|
padding: theme.spacing(1.25),
|
||||||
|
}));
|
||||||
|
|
||||||
|
const StyledIconButtonInactive = styled(StyledIconButton)({
|
||||||
|
opacity: 0,
|
||||||
|
});
|
||||||
|
|
||||||
interface IFavoriteIconCellProps {
|
interface IFavoriteIconCellProps {
|
||||||
value?: boolean;
|
value?: boolean;
|
||||||
onClick?: () => void;
|
onClick?: () => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
const InactiveIconButton = styled(IconButton)(({ theme }) => ({
|
|
||||||
color: theme.palette.primary.main,
|
|
||||||
opacity: 0,
|
|
||||||
}));
|
|
||||||
|
|
||||||
export const FavoriteIconCell: VFC<IFavoriteIconCellProps> = ({
|
export const FavoriteIconCell: VFC<IFavoriteIconCellProps> = ({
|
||||||
value = false,
|
value,
|
||||||
onClick,
|
onClick,
|
||||||
}) => (
|
}) => (
|
||||||
<Box sx={{ pl: 1.25, display: 'inline-flex' }}>
|
<StyledCell>
|
||||||
<ConditionallyRender
|
<ConditionallyRender
|
||||||
condition={value}
|
condition={Boolean(value)}
|
||||||
show={
|
show={
|
||||||
<TooltipResolver title={'Remove from favorites'}>
|
<StyledIconButton onClick={onClick} size="small">
|
||||||
<IconButton
|
<StarIcon fontSize="small" />
|
||||||
onClick={onClick}
|
</StyledIconButton>
|
||||||
color="primary"
|
|
||||||
size="small"
|
|
||||||
sx={{ padding: 1.25 }}
|
|
||||||
>
|
|
||||||
<StarIcon fontSize="small" />
|
|
||||||
</IconButton>
|
|
||||||
</TooltipResolver>
|
|
||||||
}
|
}
|
||||||
elseShow={
|
elseShow={
|
||||||
<TooltipResolver title={'Add to favorites'}>
|
<StyledIconButtonInactive
|
||||||
<InactiveIconButton
|
className="show-row-hover"
|
||||||
className="show-row-hover"
|
onClick={onClick}
|
||||||
onClick={onClick}
|
size="small"
|
||||||
size="small"
|
>
|
||||||
sx={{ padding: 1.25 }}
|
<StarBorderIcon fontSize="small" />
|
||||||
>
|
</StyledIconButtonInactive>
|
||||||
<StarBorderIcon fontSize="small" />
|
|
||||||
</InactiveIconButton>
|
|
||||||
</TooltipResolver>
|
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
</Box>
|
</StyledCell>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user