Fine-tune appearance of buttons in calling interface UI
GitLab: #97
Change-Id: Iecf16921171196547e2a392ba6826971ca23ac47
diff --git a/client/src/components/Button.tsx b/client/src/components/Button.tsx
index 8e695cb..268cab6 100644
--- a/client/src/components/Button.tsx
+++ b/client/src/components/Button.tsx
@@ -106,86 +106,102 @@
};
export type ExpandableButtonProps = IconButtonProps & {
+ hidden?: boolean;
Icon?: ComponentType<SvgIconProps>;
expandMenuOptions?: (ExpandMenuOption | ExpandMenuRadioOption)[];
+ IconButtonComp?: ComponentType<IconButtonProps>;
};
-export const ExpandableButton = styled(({ Icon, expandMenuOptions = [], ...props }: ExpandableButtonProps) => {
+export const ExpandableButton = ({
+ hidden,
+ Icon,
+ expandMenuOptions = undefined,
+ IconButtonComp = IconButton,
+ ...props
+}: ExpandableButtonProps) => {
const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
const handleClose = () => {
setAnchorEl(null);
};
- const hasExpandMenuOptions = expandMenuOptions.length > 0;
return (
<Box>
- <Menu
- anchorEl={anchorEl}
- open={!!anchorEl}
- onClose={handleClose}
- anchorOrigin={{
- vertical: 'top',
- horizontal: 'center',
- }}
- transformOrigin={{
- vertical: 'bottom',
- horizontal: 'center',
- }}
- >
- {expandMenuOptions.map((option, id) => {
- if ('options' in option) {
- const { options, defaultSelectedOption } = option;
- return (
- <RadioGroup key={id} defaultValue={defaultSelectedOption}>
- {options.map(({ description, key }) => {
- return (
- <MenuItem key={key}>
- <ListItemIcon>
- <Radio value={key} />
- </ListItemIcon>
- <ListItemText>{description}</ListItemText>
- </MenuItem>
- );
- })}
- </RadioGroup>
- );
- }
+ {expandMenuOptions && (
+ <Menu
+ anchorEl={anchorEl}
+ open={!!anchorEl}
+ onClose={handleClose}
+ anchorOrigin={{
+ vertical: !hidden ? 'top' : 'center',
+ horizontal: !hidden ? 'center' : 'left',
+ }}
+ transformOrigin={{
+ vertical: !hidden ? 'bottom' : 'center',
+ horizontal: !hidden ? 'center' : 'right',
+ }}
+ >
+ {expandMenuOptions?.map((option, id) => {
+ if ('options' in option) {
+ const { options, defaultSelectedOption } = option;
+ return (
+ <RadioGroup key={id} defaultValue={defaultSelectedOption}>
+ {options.map(({ description, key }) => {
+ return (
+ <MenuItem key={key}>
+ <ListItemIcon>
+ <Radio value={key} />
+ </ListItemIcon>
+ <ListItemText>{description}</ListItemText>
+ </MenuItem>
+ );
+ })}
+ </RadioGroup>
+ );
+ }
- return (
- <MenuItem key={id} onClick={handleClose}>
- <ListItemIcon>{option.icon}</ListItemIcon>
- <ListItemText>{option.description}</ListItemText>
- </MenuItem>
- );
- })}
- </Menu>
- <Box position="relative">
- {hasExpandMenuOptions && (
+ return (
+ <MenuItem key={id} onClick={handleClose}>
+ <ListItemIcon>{option.icon}</ListItemIcon>
+ <ListItemText>{option.description}</ListItemText>
+ </MenuItem>
+ );
+ })}
+ </Menu>
+ )}
+ <Box
+ position="relative"
+ display="flex"
+ justifyContent="center"
+ alignItems="center"
+ onClick={(e) => setAnchorEl(e.currentTarget)}
+ >
+ {expandMenuOptions && (
<IconButton
{...props}
- onClick={(e) => setAnchorEl(e.currentTarget)}
aria-label="expand options"
size="small"
sx={{
+ transform: !hidden ? 'scale(0.5)' : 'scale(0.5) rotate(-90deg)',
position: 'absolute',
- left: 0,
- right: 0,
- top: '-50%',
- color: 'white',
+ top: !hidden ? '-50%' : 0,
+ left: hidden ? '-50%' : 0,
+ width: '100%',
+ height: '100%',
}}
>
- <ExpandLessIcon sx={{ backgroundColor: '#555555', borderRadius: '5px' }} />
+ <ExpandLessIcon
+ sx={{
+ backgroundColor: '#444444',
+ borderRadius: '5px',
+ }}
+ />
</IconButton>
)}
- <IconButton {...props} disableRipple={true}>
- {Icon && <Icon fontSize="inherit" />}
- </IconButton>
+ <IconButtonComp {...props}>{Icon && <Icon />}</IconButtonComp>
</Box>
</Box>
);
-})(({ theme }) => ({
- color: 'white',
-}));
+};
export const CancelPictureButton = (props: IconButtonProps) => {
return <RoundButton {...props} aria-label="remove picture" Icon={CancelIcon} size="large" />;
@@ -273,6 +289,10 @@
return (
<IconButton
{...props}
+ sx={{
+ color: selected ? 'white' : 'red',
+ ...props.sx,
+ }}
onClick={() => {
toggle();
}}