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>
<FeedbackIcon />
</ListItemIcon>
<ListItemText primary="Report Issues" />
<ListItemText primary="Send Feedback" />
</ListItem>
</List>
</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 ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Tooltip from "@material-ui/core/Tooltip";
import { makeStyles } from "@material-ui/core/styles";
import {
useRouteMatch,
@ -52,23 +53,25 @@ function ListItemLink(props: Props): ReactElement {
);
return (
<li>
<ListItem
button
component={renderLink}
className={clsx(classes.listItem, isMatch && classes.selected)}
>
{icon && (
<ListItemIcon className={clsx(isMatch && classes.selectedIcon)}>
{icon}
</ListItemIcon>
)}
<ListItemText
primary={primary}
classes={{
primary: isMatch ? classes.selectedText : undefined,
}}
/>
</ListItem>
<Tooltip title={primary} placement="right">
<ListItem
button
component={renderLink}
className={clsx(classes.listItem, isMatch && classes.selected)}
>
{icon && (
<ListItemIcon className={clsx(isMatch && classes.selectedIcon)}>
{icon}
</ListItemIcon>
)}
<ListItemText
primary={primary}
classes={{
primary: isMatch ? classes.selectedText : undefined,
}}
/>
</ListItem>
</Tooltip>
</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 TableSortLabel from "@material-ui/core/TableSortLabel";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import PauseCircleFilledIcon from "@material-ui/icons/PauseCircleFilled";
import PlayCircleFilledIcon from "@material-ui/icons/PlayCircleFilled";
import DeleteIcon from "@material-ui/icons/Delete";
@ -258,25 +259,31 @@ export default function QueuesOverviewTable(props: Props) {
{activeRowIndex === i ? (
<React.Fragment>
{q.paused ? (
<IconButton
color="secondary"
onClick={() => props.onResumeClick(q.queue)}
disabled={q.requestPending}
>
<PlayCircleFilledIcon />
</IconButton>
<Tooltip title="Resume">
<IconButton
color="secondary"
onClick={() => props.onResumeClick(q.queue)}
disabled={q.requestPending}
>
<PlayCircleFilledIcon />
</IconButton>
</Tooltip>
) : (
<IconButton
color="primary"
onClick={() => props.onPauseClick(q.queue)}
disabled={q.requestPending}
>
<PauseCircleFilledIcon />
</IconButton>
<Tooltip title="Pause">
<IconButton
color="primary"
onClick={() => props.onPauseClick(q.queue)}
disabled={q.requestPending}
>
<PauseCircleFilledIcon />
</IconButton>
</Tooltip>
)}
<IconButton onClick={() => setQueueToDelete(q)}>
<DeleteIcon />
</IconButton>
<Tooltip title="Delete">
<IconButton onClick={() => setQueueToDelete(q)}>
<DeleteIcon />
</IconButton>
</Tooltip>
</React.Fragment>
) : (
<IconButton>