apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

fix(gui): move image card labels to tooltip

This commit is contained in:
Sean Sube 2023-01-24 22:19:08 -06:00
parent 99897af004
commit 2bc679ea97
1 changed files with 26 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
gui/src/components/ImageCard.tsx
View File

@ -1,6 +1,6 @@
import { doesExist, mustExist } from '@apextoaster/js-utils'; import { doesExist, mustExist } from '@apextoaster/js-utils';
import { Brush, ContentCopy, ContentCopyTwoTone, Delete, Download } from '@mui/icons-material'; import { Brush, ContentCopy, ContentCopyTwoTone, Delete, Download } from '@mui/icons-material';
import { Box, Button, Card, CardContent, CardMedia, Grid, Paper } from '@mui/material'; import { Box, Button, Card, CardContent, CardMedia, Grid, IconButton, Paper, Tooltip } from '@mui/material';
import * as React from 'react'; import * as React from 'react';
import { useContext } from 'react'; import { useContext } from 'react';
import { useStore } from 'zustand'; import { useStore } from 'zustand';
@ -67,37 +67,43 @@ export function ImageCard(props: ImageCardProps) {
title={params.prompt} title={params.prompt}
/> />
<CardContent> <CardContent>
<Box> <Box textAlign='center'>
<Grid container spacing={2}> <Grid container spacing={2}>
<GridItem xs={4}>CFG: {params.cfg}</GridItem> <GridItem xs={4}>CFG: {params.cfg}</GridItem>
<GridItem xs={4}>Steps: {params.steps}</GridItem> <GridItem xs={4}>Steps: {params.steps}</GridItem>
<GridItem xs={4}>Size: {size.width}x{size.height}</GridItem> <GridItem xs={4}>Size: {size.width}x{size.height}</GridItem>
<GridItem xs={4}>Seed: {params.seed}</GridItem> <GridItem xs={4}>Seed: {params.seed}</GridItem>
<GridItem xs={8}>Scheduler: {params.scheduler}</GridItem> <GridItem xs={8}>Scheduler: {params.scheduler}</GridItem>
<GridItem xs={12}>{params.prompt}</GridItem> <GridItem xs={12}>
<GridItem xs={3}> <Box textAlign='left'>{params.prompt}</Box>
<Button onClick={downloadImage}>
<Download />
Save
</Button>
</GridItem> </GridItem>
<GridItem xs={3}> <GridItem xs={3}>
<Button onClick={copySourceToImg2Img}> <Tooltip title='Save'>
<ContentCopy /> <IconButton onClick={downloadImage}>
Img2img <Download />
</Button> </IconButton>
</Tooltip>
</GridItem> </GridItem>
<GridItem xs={3}> <GridItem xs={3}>
<Button onClick={copySourceToInpaint}> <Tooltip title='Img2img'>
<Brush /> <IconButton onClick={copySourceToImg2Img}>
Inpaint <ContentCopy />
</Button> </IconButton>
</Tooltip>
</GridItem> </GridItem>
<GridItem xs={3}> <GridItem xs={3}>
<Button onClick={deleteImage}> <Tooltip title='Inpaint'>
<Delete /> <IconButton onClick={copySourceToInpaint}>
Delete <Brush />
</Button> </IconButton>
</Tooltip>
</GridItem>
<GridItem xs={3}>
<Tooltip title='Delete'>
<IconButton onClick={deleteImage}>
<Delete />
</IconButton>
</Tooltip>
</GridItem> </GridItem>
</Grid> </Grid>
</Box> </Box>