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 (
<Badge
style={{
top: '3px',
right: '3px',
}}
badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
color="secondary"
>
<CustomIconButton onClick={onClick} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
<Delete style={{ marginTop: '-3px' }} color="action" />
<Delete color="action" />
</CustomIconButton>
</Badge>
)

View File

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

View File

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

View File

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