diff options
Diffstat (limited to 'src/client/views/nodes/generativeFill/GenerativeFill.tsx')
| -rw-r--r-- | src/client/views/nodes/generativeFill/GenerativeFill.tsx | 49 |
1 files changed, 22 insertions, 27 deletions
diff --git a/src/client/views/nodes/generativeFill/GenerativeFill.tsx b/src/client/views/nodes/generativeFill/GenerativeFill.tsx index 547a76348..998961f20 100644 --- a/src/client/views/nodes/generativeFill/GenerativeFill.tsx +++ b/src/client/views/nodes/generativeFill/GenerativeFill.tsx @@ -3,12 +3,12 @@ import React = require('react'); import { useEffect, useRef, useState } from 'react'; import { APISuccess, ImageUtility } from './generativeFillUtils/ImageHandler'; import { BrushHandler } from './generativeFillUtils/BrushHandler'; -import { Box, Checkbox, FormControlLabel, IconButton, Slider, TextField } from '@mui/material'; +import { IconButton } from 'browndash-components'; +import { Checkbox, FormControlLabel, Slider, TextField } from '@mui/material'; import { CursorData, ImageDimensions, Point } from './generativeFillUtils/generativeFillInterfaces'; import { activeColor, canvasSize, eraserColor, freeformRenderSize, newCollectionSize, offsetDistanceY, offsetX } from './generativeFillUtils/generativeFillConstants'; import { PointerHandler } from './generativeFillUtils/PointerHandler'; -import { BsEraser, BsX } from 'react-icons/bs'; -import { CiUndo, CiRedo } from 'react-icons/ci'; +import { IoMdUndo, IoMdRedo } from 'react-icons/io'; import { MainView } from '../../MainView'; import { Doc, DocListCast } from '../../../../fields/Doc'; import { Networking } from '../../../Network'; @@ -19,6 +19,7 @@ import { CollectionDockingView } from '../../collections/CollectionDockingView'; import { OpenWhereMod } from '../DocumentView'; import Buttons from './GenerativeFillButtons'; import { List } from '../../../../fields/List'; +import { CgClose } from 'react-icons/cg'; enum BrushStyle { ADD, @@ -432,9 +433,7 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD sx={{ whiteSpace: 'nowrap' }} /> <Buttons getEdit={getEdit} loading={loading} onReset={handleReset} /> - <IconButton onClick={handleViewClose}> - <BsX color={activeColor} /> - </IconButton> + <IconButton color={activeColor} tooltip="close" icon={<CgClose size={'16px'} />} onClick={handleViewClose} /> </div> </div> {/* Main canvas for editing */} @@ -459,40 +458,34 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD </div> {/* Icons */} <div className="iconContainer"> - <IconButton - onClick={() => { - setBrushStyle(BrushStyle.ADD); - }}> - <BsEraser color={brushStyle === BrushStyle.ADD ? activeColor : 'inherit'} /> - </IconButton> {/* Undo and Redo */} <IconButton + style={{ cursor: 'pointer' }} onPointerDown={e => { e.stopPropagation(); handleUndo(); }} onPointerUp={e => { e.stopPropagation(); - }}> - <CiUndo /> - </IconButton> + }} + color={activeColor} + tooltip="Undo" + icon={<IoMdUndo />} + /> <IconButton + style={{ cursor: 'pointer' }} onPointerDown={e => { e.stopPropagation(); handleRedo(); }} onPointerUp={e => { e.stopPropagation(); - }}> - <CiRedo /> - </IconButton> - <Box - sx={{ - height: 225, - width: '100%', - display: 'flex', - justifyContent: 'center', - }}> + }} + color={activeColor} + tooltip="Redo" + icon={<IoMdRedo />} + /> + <div onPointerDown={e => e.stopPropagation()} style={{ height: 225, width: '100%', display: 'flex', justifyContent: 'center', cursor: 'pointer' }}> <Slider sx={{ '& input[type="range"]': { @@ -500,14 +493,16 @@ const GenerativeFill = ({ imageEditorOpen, imageEditorSource, imageRootDoc, addD }, }} orientation="vertical" - min={10} + min={25} max={500} defaultValue={150} + size="small" + valueLabelDisplay="auto" onChange={(e, val) => { setCursorData(prev => ({ ...prev, width: val as number })); }} /> - </Box> + </div> </div> {/* Edits thumbnails*/} <div className="editsBox"> |