go-pkg/asynqmon
2
0
Fork 0
mirror of https://github.com/hibiken/asynqmon.git synced 2025-10-23 06:46:11 +08:00
Code Issues Projects Releases Wiki Activity

make copy icon align with id

Browse Source
This commit is contained in:
Peizhi Zheng
2022-01-14 21:07:18 -08:00
parent d44b8e2f32
commit c1b7fa09c6
6 changed files with 63 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
ui/src/components/ActiveTasksTable.tsx
View File

@@ -258,12 +258,11 @@ function ActiveTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
copyButton: { },
display: "inline-block" "&:hover $copyButton": {
}, display: "inline-block"
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@@ -275,6 +274,10 @@ const useRowStyles = makeStyles((theme) => ({
copyButton: { copyButton: {
display: "none" display: "none"
}, },
IdGroup: {
display: "flex",
alignItems: "center",
}
})); }));
interface RowProps { interface RowProps {
@@ -308,7 +311,8 @@ function Row(props: RowProps) {
/> />
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell} > <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard"> <Tooltip title="Copy text to clipboard">
<IconButton <IconButton
@@ -323,6 +327,7 @@ function Row(props: RowProps) {
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} /> <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>
<TableCell> <TableCell>

17
ui/src/components/ArchivedTasksTable.tsx
View File

@@ -288,12 +288,11 @@ function ArchivedTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
copyButton: { },
display: "inline-block" "&:hover $copyButton": {
}, display: "inline-block"
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@@ -311,7 +310,11 @@ const useRowStyles = makeStyles((theme) => ({
}, },
copyButton: { copyButton: {
display: "none" display: "none"
}, },
IdGroup: {
display: "flex",
alignItems: "center",
}
})); }));
interface RowProps { interface RowProps {
@@ -347,7 +350,8 @@ function Row(props: RowProps) {
/> />
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell} > <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard"> <Tooltip title="Copy text to clipboard">
<IconButton <IconButton
@@ -362,6 +366,7 @@ function Row(props: RowProps) {
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} /> <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>
<TableCell> <TableCell>

17
ui/src/components/CompletedTasksTable.tsx
View File

@@ -258,12 +258,11 @@ function CompletedTasksTable(props: Props & ReduxProps) {
const useRowStyles = makeStyles((theme) => ({ const useRowStyles = makeStyles((theme) => ({
root: { root: {
cursor: "pointer", cursor: "pointer",
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
copyButton: { },
display: "inline-block" "&:hover $copyButton": {
}, display: "inline-block"
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@@ -281,7 +280,11 @@ const useRowStyles = makeStyles((theme) => ({
}, },
copyButton: { copyButton: {
display: "none" display: "none"
}, },
IdGroup: {
display: "flex",
alignItems: "center",
}
})); }));
interface RowProps { interface RowProps {
@@ -316,7 +319,8 @@ function Row(props: RowProps) {
/> />
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell} > <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard"> <Tooltip title="Copy text to clipboard">
<IconButton <IconButton
@@ -331,6 +335,7 @@ function Row(props: RowProps) {
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} /> <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>
<TableCell> <TableCell>

14
ui/src/components/PendingTasksTable.tsx
View File

@@ -289,9 +289,9 @@ const useRowStyles = makeStyles((theme) => ({
cursor: "pointer", cursor: "pointer",
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
copyButton: { },
display: "inline-block" "&:hover $copyButton":{
}, display: "inline-block"
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@@ -311,6 +311,10 @@ const useRowStyles = makeStyles((theme) => ({
copyButton: { copyButton: {
display: "none" display: "none"
}, },
IdGroup:{
display:"flex",
alignItems:"center",
}
})); }));
interface RowProps { interface RowProps {
@@ -347,6 +351,7 @@ function Row(props: RowProps) {
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell} > <TableCell component="th" scope="row" className={classes.idCell} >
<div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard"> <Tooltip title="Copy text to clipboard">
<IconButton <IconButton
@@ -357,9 +362,10 @@ function Row(props: RowProps) {
size="small" size="small"
className={classes.copyButton} className={classes.copyButton}
> >
<FileCopyOutlinedIcon fontSize="small" style={{height:"12px", width:"12px"}} /> <FileCopyOutlinedIcon fontSize="small" />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>
<TableCell> <TableCell>

16
ui/src/components/RetryTasksTable.tsx
View File

@@ -317,9 +317,9 @@ const useRowStyles = makeStyles((theme) => ({
cursor: "pointer", cursor: "pointer",
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
copyButton: { },
display: "inline-block" "&:hover $copyButton": {
}, display: "inline-block"
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@@ -337,7 +337,11 @@ const useRowStyles = makeStyles((theme) => ({
}, },
copyButton: { copyButton: {
display: "none" display: "none"
}, },
IdGroup: {
display: "flex",
alignItems: "center",
}
})); }));
interface RowProps { interface RowProps {
@@ -375,7 +379,8 @@ function Row(props: RowProps) {
/> />
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell} > <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard"> <Tooltip title="Copy text to clipboard">
<IconButton <IconButton
@@ -390,6 +395,7 @@ function Row(props: RowProps) {
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} /> <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>
<TableCell> <TableCell>

14
ui/src/components/ScheduledTasksTable.tsx
View File

@@ -327,9 +327,9 @@ const useRowStyles = makeStyles((theme) => ({
cursor: "pointer", cursor: "pointer",
"&:hover": { "&:hover": {
boxShadow: theme.shadows[2], boxShadow: theme.shadows[2],
copyButton: { },
display: "inline-block" "&:hover $copyButton": {
}, display: "inline-block"
}, },
"&:hover .MuiTableCell-root": { "&:hover .MuiTableCell-root": {
borderBottomColor: theme.palette.background.paper, borderBottomColor: theme.palette.background.paper,
@@ -348,6 +348,10 @@ const useRowStyles = makeStyles((theme) => ({
copyButton: { copyButton: {
display: "none" display: "none"
}, },
IdGroup: {
display: "flex",
alignItems: "center",
}
})); }));
interface RowProps { interface RowProps {
@@ -384,7 +388,8 @@ function Row(props: RowProps) {
/> />
</IconButton> </IconButton>
</TableCell> </TableCell>
<TableCell component="th" scope="row" className={classes.idCell} > <TableCell component="th" scope="row" className={classes.idCell}>
<div className={classes.IdGroup}>
{uuidPrefix(task.id)} {uuidPrefix(task.id)}
<Tooltip title="Copy text to clipboard"> <Tooltip title="Copy text to clipboard">
<IconButton <IconButton
@@ -399,6 +404,7 @@ function Row(props: RowProps) {
<FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} /> <FileCopyOutlinedIcon fontSize="small" style={{ height: "12px", width: "12px" }} />
</IconButton> </IconButton>
</Tooltip> </Tooltip>
</div>
</TableCell> </TableCell>
<TableCell>{task.type}</TableCell> <TableCell>{task.type}</TableCell>
<TableCell> <TableCell>