go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 11:15:53 +08:00
Code Issues Projects Releases Wiki Activity

Add tooltip to action buttons and links

Browse Source
This commit is contained in:
Ken Hibino 2021-01-09 17:58:03 -08:00
parent 251b262798
commit 95eb3e0855
3 changed files with 45 additions and 35 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/src/App.tsx
View File

@ -251,7 +251,7 @@ function App(props: ConnectedProps<typeof connector>) {
<ListItemIcon> <ListItemIcon>
<FeedbackIcon /> <FeedbackIcon />
</ListItemIcon> </ListItemIcon>
<ListItemText primary="Report Issues" /> <ListItemText primary="Send Feedback" />
</ListItem> </ListItem>
</List> </List>
</div> </div>

3
ui/src/components/ListItemLink.tsx
View File

@ -3,6 +3,7 @@ import clsx from "clsx";
import ListItem from "@material-ui/core/ListItem"; import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon"; import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText"; import ListItemText from "@material-ui/core/ListItemText";
import Tooltip from "@material-ui/core/Tooltip";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import { import {
useRouteMatch, useRouteMatch,
@ -52,6 +53,7 @@ function ListItemLink(props: Props): ReactElement {
); );
return ( return (
<li> <li>
<Tooltip title={primary} placement="right">
<ListItem <ListItem
button button
component={renderLink} component={renderLink}
@ -69,6 +71,7 @@ function ListItemLink(props: Props): ReactElement {
}} }}
/> />
</ListItem> </ListItem>
</Tooltip>
</li> </li>
); );
} }

7
ui/src/components/QueuesOverviewTable.tsx
View File

@ -11,6 +11,7 @@ import TableRow from "@material-ui/core/TableRow";
import TableFooter from "@material-ui/core/TableFooter"; import TableFooter from "@material-ui/core/TableFooter";
import TableSortLabel from "@material-ui/core/TableSortLabel"; import TableSortLabel from "@material-ui/core/TableSortLabel";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled"; import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled";
import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled"; import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled";
import DeleteIcon from "@material-ui/icons/Delete"; import DeleteIcon from "@material-ui/icons/Delete";
@ -258,6 +259,7 @@ export default function QueuesOverviewTable(props: Props) {
{activeRowIndex === i ? ( {activeRowIndex === i ? (
<React.Fragment> <React.Fragment>
{q.paused ? ( {q.paused ? (
<Tooltip title="Resume">
<IconButton <IconButton
color="secondary" color="secondary"
onClick={() => props.onResumeClick(q.queue)} onClick={() => props.onResumeClick(q.queue)}
@ -265,7 +267,9 @@ export default function QueuesOverviewTable(props: Props) {
> >
<PlayCircleFilledIcon /> <PlayCircleFilledIcon />
</IconButton> </IconButton>
</Tooltip>
) : ( ) : (
<Tooltip title="Pause">
<IconButton <IconButton
color="primary" color="primary"
onClick={() => props.onPauseClick(q.queue)} onClick={() => props.onPauseClick(q.queue)}
@ -273,10 +277,13 @@ export default function QueuesOverviewTable(props: Props) {
> >
<PauseCircleFilledIcon /> <PauseCircleFilledIcon />
</IconButton> </IconButton>
</Tooltip>
)} )}
<Tooltip title="Delete">
<IconButton onClick={() => setQueueToDelete(q)}> <IconButton onClick={() => setQueueToDelete(q)}>
<DeleteIcon /> <DeleteIcon />
</IconButton> </IconButton>
</Tooltip>
</React.Fragment> </React.Fragment>
) : ( ) : (
<IconButton> <IconButton>