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

Use IconButtons in TableActions component

Browse Source
This commit is contained in:
Ken Hibino 2020-12-20 12:00:11 -08:00
parent a76cc5afa5
commit 701c186bc3
1 changed files with 49 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

87
ui/src/components/TableActions.tsx
View File

@ -1,20 +1,27 @@
import React, { useState } from "react"; import React, { useState } from "react";
import { makeStyles } from "@material-ui/core/styles"; import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button"; import Tooltip from "@material-ui/core/Tooltip";
import ButtonGroup from "@material-ui/core/ButtonGroup"; import PlayArrowIcon from "@material-ui/icons/PlayArrow";
import DeleteIcon from "@material-ui/icons/Delete";
import ArchiveIcon from "@material-ui/icons/Archive";
import IconButton from "@material-ui/core/IconButton"; import IconButton from "@material-ui/core/IconButton";
import Menu from "@material-ui/core/Menu"; import Menu from "@material-ui/core/Menu";
import MenuItem from "@material-ui/core/MenuItem"; import MenuItem from "@material-ui/core/MenuItem";
import MoreHorizIcon from "@material-ui/icons/MoreHoriz"; import MoreHorizIcon from "@material-ui/icons/MoreHoriz";
const useStyles = makeStyles({ const useStyles = makeStyles((theme) => ({
actionsContainer: { actionsContainer: {
display: "flex",
padding: "4px", padding: "4px",
}, },
moreIcon: { moreIcon: {
marginRight: "8px", marginRight: "8px",
}, },
}); iconGroup: {
paddingLeft: theme.spacing(1),
borderLeft: `1px solid ${theme.palette.grey[100]}`,
},
}));
interface Props { interface Props {
allActionPending: boolean; allActionPending: boolean;
@ -40,13 +47,15 @@ export default function TableActions(props: Props) {
return ( return (
<div className={classes.actionsContainer}> <div className={classes.actionsContainer}>
<IconButton <Tooltip title="More Actions">
aria-label="actions" <IconButton
className={classes.moreIcon} aria-label="actions"
onClick={handleMenuClick} className={classes.moreIcon}
> onClick={handleMenuClick}
<MoreHorizIcon /> >
</IconButton> <MoreHorizIcon />
</IconButton>
</Tooltip>
<Menu <Menu
id="action-menu" id="action-menu"
keepMounted keepMounted
@ -86,35 +95,37 @@ export default function TableActions(props: Props) {
</MenuItem> </MenuItem>
</Menu> </Menu>
{props.showBatchActions && ( {props.showBatchActions && (
<ButtonGroup <div className={classes.iconGroup}>
variant="text"
color="primary"
aria-label="text primary button group"
>
<Button
disabled={props.batchActionPending}
onClick={props.onBatchRunClick}
>
Run
</Button>
{props.onBatchKillClick && ( {props.onBatchKillClick && (
<Button <Tooltip title="Kill">
disabled={props.batchActionPending} <IconButton
onClick={() => { disabled={props.batchActionPending}
if (!props.onBatchKillClick) return; onClick={() => {
props.onBatchKillClick(); if (!props.onBatchKillClick) return;
}} props.onBatchKillClick();
> }}
Kill >
</Button> <ArchiveIcon />
</IconButton>
</Tooltip>
)} )}
<Button <Tooltip title="Delete">
disabled={props.batchActionPending} <IconButton
onClick={props.onBatchDeleteClick} disabled={props.batchActionPending}
> onClick={props.onBatchDeleteClick}
Delete >
</Button> <DeleteIcon />
</ButtonGroup> </IconButton>
</Tooltip>
<Tooltip title="Run">
<IconButton
disabled={props.batchActionPending}
onClick={props.onBatchRunClick}
>
<PlayArrowIcon />
</IconButton>
</Tooltip>
</div>
)} )}
</div> </div>
); );