fix(gui): emphasize the generate buttons, align fill color picker
This commit is contained in:
parent
77d68bf6ac
commit
64663f5eec
|
@ -65,7 +65,7 @@ export function Img2Img() {
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button
|
<Button
|
||||||
disabled={doesExist(source) === false}
|
disabled={doesExist(source) === false}
|
||||||
variant='outlined'
|
variant='contained'
|
||||||
onClick={() => upload.mutate()}
|
onClick={() => upload.mutate()}
|
||||||
>Generate</Button>
|
>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
import { doesExist, mustExist } from '@apextoaster/js-utils';
|
||||||
import { Box, Button, Stack } from '@mui/material';
|
import { Box, Button, FormControlLabel, Stack } from '@mui/material';
|
||||||
import * as React from 'react';
|
import * as React from 'react';
|
||||||
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
import { useMutation, useQuery, useQueryClient } from 'react-query';
|
||||||
import { useStore } from 'zustand';
|
import { useStore } from 'zustand';
|
||||||
|
@ -151,19 +151,29 @@ export function Inpaint() {
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<Stack direction='row' spacing={2}>
|
<Stack direction='row' spacing={2}>
|
||||||
<input name='fill-color' type='color' defaultValue={fillColor} onBlur={(event) => {
|
<FormControlLabel
|
||||||
setInpaint({
|
label='Fill Color'
|
||||||
fillColor: event.target.value,
|
sx={{ mx: 1 }}
|
||||||
});
|
control={
|
||||||
}} />
|
<input
|
||||||
<label htmlFor='fill-color'>Fill Color</label>
|
defaultValue={fillColor}
|
||||||
|
name='fill-color'
|
||||||
|
type='color'
|
||||||
|
onBlur={(event) => {
|
||||||
|
setInpaint({
|
||||||
|
fillColor: event.target.value,
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
/>
|
||||||
</Stack>
|
</Stack>
|
||||||
</Stack>
|
</Stack>
|
||||||
<OutpaintControl />
|
<OutpaintControl />
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button
|
<Button
|
||||||
disabled={doesExist(source) === false || doesExist(mask) === false}
|
disabled={doesExist(source) === false || doesExist(mask) === false}
|
||||||
variant='outlined'
|
variant='contained'
|
||||||
onClick={() => upload.mutate()}
|
onClick={() => upload.mutate()}
|
||||||
>Generate</Button>
|
>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -38,7 +38,7 @@ export function Settings() {
|
||||||
<TextField variant='outlined' label='API Server' value={root} onChange={(event) => {
|
<TextField variant='outlined' label='API Server' value={root} onChange={(event) => {
|
||||||
setRoot(event.target.value);
|
setRoot(event.target.value);
|
||||||
}} />
|
}} />
|
||||||
<Button startIcon={<Refresh />} onClick={() => {
|
<Button variant='contained' startIcon={<Refresh />} onClick={() => {
|
||||||
const query = new URLSearchParams(window.location.search);
|
const query = new URLSearchParams(window.location.search);
|
||||||
query.set('api', root);
|
query.set('api', root);
|
||||||
window.location.search = query.toString();
|
window.location.search = query.toString();
|
||||||
|
|
|
@ -66,7 +66,7 @@ export function Txt2Img() {
|
||||||
</Stack>
|
</Stack>
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button
|
<Button
|
||||||
variant='outlined'
|
variant='contained'
|
||||||
onClick={() => generate.mutate()}
|
onClick={() => generate.mutate()}
|
||||||
>Generate</Button>
|
>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
|
@ -46,7 +46,7 @@ export function Upscale() {
|
||||||
<UpscaleControl />
|
<UpscaleControl />
|
||||||
<Button
|
<Button
|
||||||
disabled={doesExist(params.source) === false}
|
disabled={doesExist(params.source) === false}
|
||||||
variant='outlined'
|
variant='contained'
|
||||||
onClick={() => upload.mutate()}
|
onClick={() => upload.mutate()}
|
||||||
>Generate</Button>
|
>Generate</Button>
|
||||||
</Stack>
|
</Stack>
|
||||||
|
|
Loading…
Reference in New Issue