Fix button layout

This commit is contained in:
Thomas Nordquist
2019-07-17 11:00:57 +02:00
parent 72020b02b8
commit 1c52aced63
4 changed files with 10 additions and 15 deletions

View File

@@ -28,15 +28,11 @@ export const RecursiveTopicDeleteButton = (props: {
} }
return ( return (
<Badge <Badge
style={{
top: '3px',
right: '3px',
}}
badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>} badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
color="secondary" color="secondary"
> >
<CustomIconButton onClick={onClick} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}> <CustomIconButton onClick={onClick} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
<Delete style={{ marginTop: '-3px' }} color="action" /> <Delete color="action" />
</CustomIconButton> </CustomIconButton>
</Badge> </Badge>
) )

View File

@@ -13,7 +13,7 @@ export const TopicDeleteButton = (props: {
} }
return ( return (
<CustomIconButton onClick={() => props.deleteTopicAction(node)} tooltip="Clear this topic"> <CustomIconButton onClick={() => props.deleteTopicAction(node)} tooltip="Clear this topic">
<Delete style={{ marginTop: '-3px' }} /> <Delete />
</CustomIconButton> </CustomIconButton>
) )
} }

View File

@@ -44,13 +44,9 @@ class Copy extends React.PureComponent<Props, State> {
) )
return ( return (
<span>
<span style={{ fontSize: '16px' }}>
<CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard"> <CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
{icon} <div style={{ marginTop: '2px' }}>{icon}</div>
</CustomIconButton> </CustomIconButton>
</span>
</span>
) )
} }
} }

View File

@@ -16,6 +16,9 @@ const styles = (theme: Theme) => ({
width: '32px', width: '32px',
height: '32px', height: '32px',
}, },
tooltip: {
marginTop: '-16px',
},
label: { label: {
marginTop: '-2px', marginTop: '-2px',
}, },
@@ -34,8 +37,8 @@ class CustomIconButton extends React.PureComponent<Props, {}> {
public render() { public render() {
return ( return (
<IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}> <IconButton className={this.props.classes.button} style={this.props.style} onClick={this.onClick}>
<Tooltip title={this.props.tooltip} className={this.props.classes.label}> <Tooltip title={this.props.tooltip} classes={{ popper: this.props.classes.tooltip }}>
<span>{this.props.children}</span> <span className={this.props.classes.label}>{this.props.children}</span>
</Tooltip> </Tooltip>
</IconButton> </IconButton>
) )