Add tooltip to arrow icon in task table

This commit is contained in:
Ken Hibino 2020-12-25 14:27:14 -08:00
parent c51449562c
commit 16b60af858
5 changed files with 47 additions and 36 deletions

View File

@ -212,7 +212,7 @@ function ActiveTasksTable(props: Props & ReduxProps) {
<TableRow> <TableRow>
<TablePagination <TablePagination
rowsPerPageOptions={rowsPerPageOptions} rowsPerPageOptions={rowsPerPageOptions}
colSpan={columns.length} colSpan={columns.length + 1}
count={props.tasks.length} count={props.tasks.length}
rowsPerPage={pageSize} rowsPerPage={pageSize}
page={page} page={page}
@ -270,13 +270,15 @@ function Row(props: RowProps) {
/> />
</TableCell> </TableCell>
<TableCell> <TableCell>
<IconButton <Tooltip title={open ? "Hide Details" : "Show Details"}>
aria-label="expand row" <IconButton
size="small" aria-label="expand row"
onClick={() => setOpen(!open)} size="small"
> onClick={() => setOpen(!open)}
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} >
</IconButton> {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</Tooltip>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}

View File

@ -315,13 +315,15 @@ function Row(props: RowProps) {
/> />
</TableCell> </TableCell>
<TableCell> <TableCell>
<IconButton <Tooltip title={open ? "Hide Details" : "Show Details"}>
aria-label="expand row" <IconButton
size="small" aria-label="expand row"
onClick={() => setOpen(!open)} size="small"
> onClick={() => setOpen(!open)}
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} >
</IconButton> {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</Tooltip>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}

View File

@ -9,6 +9,7 @@ import AlertTitle from "@material-ui/lab/AlertTitle";
import TableContainer from "@material-ui/core/TableContainer"; import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead"; import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow"; import TableRow from "@material-ui/core/TableRow";
import Tooltip from "@material-ui/core/Tooltip";
import Paper from "@material-ui/core/Paper"; import Paper from "@material-ui/core/Paper";
import Box from "@material-ui/core/Box"; import Box from "@material-ui/core/Box";
import Collapse from "@material-ui/core/Collapse"; import Collapse from "@material-ui/core/Collapse";
@ -159,13 +160,15 @@ function Row(props: { task: PendingTask }) {
<React.Fragment> <React.Fragment>
<TableRow key={task.id} className={classes.root}> <TableRow key={task.id} className={classes.root}>
<TableCell> <TableCell>
<IconButton <Tooltip title={open ? "Hide Details" : "Show Details"}>
aria-label="expand row" <IconButton
size="small" aria-label="expand row"
onClick={() => setOpen(!open)} size="small"
> onClick={() => setOpen(!open)}
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} >
</IconButton> {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</Tooltip>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}

View File

@ -349,13 +349,15 @@ function Row(props: RowProps) {
/> />
</TableCell> </TableCell>
<TableCell> <TableCell>
<IconButton <Tooltip title={open ? "Hide Details" : "Show Details"}>
aria-label="expand row" <IconButton
size="small" aria-label="expand row"
onClick={() => setOpen(!open)} size="small"
> onClick={() => setOpen(!open)}
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} >
</IconButton> {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</Tooltip>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}

View File

@ -346,13 +346,15 @@ function Row(props: RowProps) {
/> />
</TableCell> </TableCell>
<TableCell> <TableCell>
<IconButton <Tooltip title={open ? "Hide Details" : "Show Details"}>
aria-label="expand row" <IconButton
size="small" aria-label="expand row"
onClick={() => setOpen(!open)} size="small"
> onClick={() => setOpen(!open)}
{open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />} >
</IconButton> {open ? <KeyboardArrowUpIcon /> : <KeyboardArrowDownIcon />}
</IconButton>
</Tooltip>
</TableCell> </TableCell>
<TableCell component="th" scope="row"> <TableCell component="th" scope="row">
{uuidPrefix(task.id)} {uuidPrefix(task.id)}