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

4
app/src/actions/Connection.ts
View File

@@ -1,13 +1,13 @@
import * as q from '../../../backend/src/Model' import * as q from '../../../backend/src/Model'
import * as url from 'url' import * as url from 'url'
import { Action, ActionTypes } from '../reducers/Connection' import { Action, ActionTypes } from '../reducers/Connection'
import { Action as SettingsAction, ActionTypes as SettingsActionTypes } from '../reducers/Settings' import { ActionTypes as SettingsActionTypes } from '../reducers/Settings'
import { AppState } from '../reducers' import { AppState } from '../reducers'
import { DataSourceState, MqttOptions } from '../../../backend/src/DataSource' import { DataSourceState, MqttOptions } from '../../../backend/src/DataSource'
import { Dispatch } from 'redux' import { Dispatch } from 'redux'
import { globalActions } from '.' import { globalActions } from '.'
import { resetStore as resetTreeStore, showTree } from './Tree'
import { showError } from './Global' import { showError } from './Global'
import { showTree, resetStore as resetTreeStore } from './Tree'
import { TopicViewModel } from '../model/TopicViewModel' import { TopicViewModel } from '../model/TopicViewModel'
import { import {
addMqttConnectionEvent, addMqttConnectionEvent,

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

@@ -71,12 +71,8 @@ class PauseButton extends React.Component<Props, {changes: number}> {
return ( return (
<div style={{ display: 'inline-flex' }}> <div style={{ display: 'inline-flex' }}>
<span> <span>
<CustomIconButton onClick={this.props.actions.tree.togglePause} > <CustomIconButton onClick={this.props.actions.tree.togglePause} tooltip={message}>
<Tooltip title={message}> {this.props.paused ? <Resume className={this.props.classes.icon} /> : <Pause className={this.props.classes.icon} />}
<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> </CustomIconButton>
</span> </span>
{this.props.paused ? this.renderBufferStats() : null} {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 ( return (
<CustomIconButton onClick={() => this.deleteTopic(this.props.node)}> <CustomIconButton onClick={() => this.deleteTopic(this.props.node)} tooltip="Clear this topic">
<Tooltip title="Clear this topic"> <Delete />
<span>
<Delete />
</span>
</Tooltip>
</CustomIconButton> </CustomIconButton>
) )
} }
@@ -88,17 +84,15 @@ class Sidebar extends React.Component<Props, State> {
} }
return ( return (
<CustomIconButton onClick={() => this.deleteTopic(this.props.node, true, deleteLimit)}> <Badge
<Tooltip title={`Deletes up to ${deleteLimit} sub-topics with a single click`}> classes={{ badge: this.props.classes.badge }}
<Badge badgeContent={<span style={{ whiteSpace: 'nowrap' }}>{topicCount >= deleteLimit ? '50+' : topicCount}</span>}
classes={{ badge: this.props.classes.badge }} color="secondary"
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" />
<Delete color="action" /> </CustomIconButton>
</Badge> </Badge>
</Tooltip>
</CustomIconButton>
) )
} }

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

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

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

@@ -1,10 +1,11 @@
import * as React from 'react' 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' import { Theme, withStyles } from '@material-ui/core/styles'
interface Props { interface Props {
onClick: any, onClick: any
classes: any, tooltip: string
classes: any
} }
const styles = (theme: Theme) => ({ const styles = (theme: Theme) => ({
@@ -26,7 +27,11 @@ class CustomIconButton extends React.Component<Props, {}> {
public render() { public render() {
return ( 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>
) )
} }
} }