go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-01-19 03:05: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>

37
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,23 +53,25 @@ function ListItemLink(props: Props): ReactElement {
); );
return ( return (
<li> <li>
<ListItem <Tooltip title={primary} placement="right">
button <ListItem
component={renderLink} button
className={clsx(classes.listItem, isMatch && classes.selected)} component={renderLink}
> className={clsx(classes.listItem, isMatch && classes.selected)}
{icon && ( >
<ListItemIcon className={clsx(isMatch && classes.selectedIcon)}> {icon && (
{icon} <ListItemIcon className={clsx(isMatch && classes.selectedIcon)}>
</ListItemIcon> {icon}
)} </ListItemIcon>
<ListItemText )}
primary={primary} <ListItemText
classes={{ primary={primary}
primary: isMatch ? classes.selectedText : undefined, classes={{
}} primary: isMatch ? classes.selectedText : undefined,
/> }}
</ListItem> />
</ListItem>
</Tooltip>
</li> </li>
); );
} }

41
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,25 +259,31 @@ export default function QueuesOverviewTable(props: Props) {
{activeRowIndex === i ? ( {activeRowIndex === i ? (
<React.Fragment> <React.Fragment>
{q.paused ? ( {q.paused ? (
<IconButton <Tooltip title="Resume">
color="secondary" <IconButton
onClick={() => props.onResumeClick(q.queue)} color="secondary"
disabled={q.requestPending} onClick={() => props.onResumeClick(q.queue)}
> disabled={q.requestPending}
<PlayCircleFilledIcon /> >
</IconButton> <PlayCircleFilledIcon />
</IconButton>
</Tooltip>
) : ( ) : (
<IconButton <Tooltip title="Pause">
color="primary" <IconButton
onClick={() => props.onPauseClick(q.queue)} color="primary"
disabled={q.requestPending} onClick={() => props.onPauseClick(q.queue)}
> disabled={q.requestPending}
<PauseCircleFilledIcon /> >
</IconButton> <PauseCircleFilledIcon />
</IconButton>
</Tooltip>
)} )}
<IconButton onClick={() => setQueueToDelete(q)}> <Tooltip title="Delete">
<DeleteIcon /> <IconButton onClick={() => setQueueToDelete(q)}>
</IconButton> <DeleteIcon />
</IconButton>
</Tooltip>
</React.Fragment> </React.Fragment>
) : ( ) : (
<IconButton> <IconButton>