luneski/mqtt-explorer
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor CustomIconButtons

Browse Source
This commit is contained in:
Thomas Nordquist
2019-04-15 15:52:27 +02:00
parent 48e65947f7
commit 91a9ba7757
5 changed files with 29 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
app/src/components/Layout/PauseButton.tsx
View File

@@ -71,12 +71,8 @@ class PauseButton extends React.Component<Props, {changes: number}> {
return (
<div style={{ display: 'inline-flex' }}>
<span>
<CustomIconButton onClick={this.props.actions.tree.togglePause} >
<Tooltip title={message}>
<div /* Required so tooltip does not loose the anchor when the icon changes */>
{this.props.paused ? <Resume className={this.props.classes.icon} /> : <Pause className={this.props.classes.icon} />}
</div>
</Tooltip>
<CustomIconButton onClick={this.props.actions.tree.togglePause} tooltip={message}>
{this.props.paused ? <Resume className={this.props.classes.icon} /> : <Pause className={this.props.classes.icon} />}
</CustomIconButton>
</span>
{this.props.paused ? this.renderBufferStats() : null}

28
app/src/components/Sidebar/Sidebar.tsx
View File

@@ -70,12 +70,8 @@ class Sidebar extends React.Component<Props, State> {
}
return (
<CustomIconButton onClick={() => this.deleteTopic(this.props.node)}>
<Tooltip title="Clear this topic">
<span>
<Delete />
</span>
</Tooltip>
<CustomIconButton onClick={() => this.deleteTopic(this.props.node)} tooltip="Clear this topic">
<Delete />
</CustomIconButton>
)
}
@@ -88,17 +84,15 @@ class Sidebar extends React.Component<Props, State> {
}
return (
<CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}>
<Tooltip title={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
<Badge
classes={{ badge: this.props.classes.badge }}
badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
color="secondary"
>
<Delete color="action" />
</Badge>
</Tooltip>
</CustomIconButton>
<Badge
classes={{ badge: this.props.classes.badge }}
badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
color="secondary"
>
<CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)} tooltip={`Deletes up to ${deleteLimit} sub-topics with a single click`}>
<Delete color="action" />
</CustomIconButton>
</Badge>
)
}

12
app/src/components/helper/Copy.tsx
View File

@@ -48,13 +48,11 @@ class Copy extends React.Component<Props, State> {
return (
<span>
<Tooltip placement="top" title="Copy to clipboard">
<span style={{ fontSize: '16px' }}>
<CustomIconButton onClick={this.handleClick} >
{icon}
</CustomIconButton>
</span>
</Tooltip>
<span style={{ fontSize: '16px' }}>
<CustomIconButton onClick={this.handleClick} tooltip="Copy to clipboard">
{icon}
</CustomIconButton>
</span>
<Snackbar
anchorOrigin={{
vertical: 'bottom',

13
app/src/components/helper/CustomIconButton.tsx
View File

@@ -1,10 +1,11 @@
import * as React from 'react'
import { IconButton } from '@material-ui/core'
import { IconButton, Tooltip } from '@material-ui/core'
import { Theme, withStyles } from '@material-ui/core/styles'
interface Props {
onClick: any,
classes: any,
onClick: any
tooltip: string
classes: any
}
const styles = (theme: Theme) => ({
@@ -26,7 +27,11 @@ class CustomIconButton extends React.Component<Props, {}> {
public render() {
return (
<IconButton className={this.props.classes.button} onClick={this.onClick}>{this.props.children}</IconButton>
<IconButton className={this.props.classes.button} onClick={this.onClick}>
<Tooltip title={this.props.tooltip}>
<span>{this.props.children}</span>
</Tooltip>
</IconButton>
)
}
}