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

View File

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

View File

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

View File

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

View File

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