Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix imagine dialog layout #1226

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Fix imagine dialog layout #1226

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
dbf9e0b
format imagine dialog
OlegMoshkovich Jul 2, 2024
4358211
change the dimensions of the image
OlegMoshkovich Jul 2, 2024
e013c66
clean up
OlegMoshkovich Jul 3, 2024
f0f9c6d
clean up
OlegMoshkovich Jul 3, 2024
29bbfc7
fix image dimensions
OlegMoshkovich Jul 5, 2024
5a3e797
Merge branch 'main' into imagine_dialog
OlegMoshkovich Jul 8, 2024
4cfd5dd
adjust clear button
OlegMoshkovich Jul 24, 2024
9edb050
Merge branch 'main' into imagine_dialog
OlegMoshkovich Aug 6, 2024
a946a84
try the tree adjustment
OlegMoshkovich Aug 7, 2024
34aabaf
revert changes to other components
OlegMoshkovich Aug 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/Components/Buttons.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export function RectangularButton({
return (
icon ?
<Button onClick={onClick} startIcon={icon} variant='contained'>{title}</Button> :
<Button onClick={onClick} variant='contained' disabled={disabled}>{title}</Button>
<Button onClick={onClick} variant='contained' disabled={disabled} sx={{minWidth: '10em'}}>{title}</Button>
)
}

Expand Down
50 changes: 31 additions & 19 deletions src/Components/Imagine/ImagineDialog.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ import TextField from '@mui/material/TextField'
import Box from '@mui/material/Box'
import InputAdornment from '@mui/material/InputAdornment'
import IconButton from '@mui/material/IconButton'
import {useIsMobile} from '../Hooks'
import useStore from '../../store/useStore'
import debug from '../../utils/debug'
import {RectangularButton} from '../Buttons'
import Dialog from '../Dialog'
import Loader from '../Loader'
import ClearIcon from '@mui/icons-material/Clear'
import BotIcon from '../../assets/icons/Bot2.svg'
import CloseIcon from '@mui/icons-material/Close'
import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'


/**
Expand All @@ -36,6 +37,7 @@ export default function ImagineDialog({
const [image, setImage] = useState(null)

const [finalPrompt, setFinalPrompt] = useState(null)
const imageDimensions = useIsMobile() ? '280px' : '390px'

useEffect(() => {
if (viewer && isDialogDisplayed && isModelReady) {
Expand Down Expand Up @@ -71,18 +73,24 @@ export default function ImagineDialog({

return (
<Dialog
headerIcon={<BotIcon className='icon-share' style={{height: '50px'}}/>}
headerIcon={<AutoFixHighOutlinedIcon className='icon-share'/>}
headerText={'Imagine'}
isDialogDisplayed={isDialogDisplayed}
setIsDialogDisplayed={setIsDialogDisplayed}
>
<Helmet><title>{finalPrompt ? `Imagine: ${finalPrompt}` : 'Imagine'}</title></Helmet>
<Stack
sx={{minHeight: '390px'}}
sx={{
'minHeight': imageDimensions,
'minWidth': '35em',
'@media (max-width: 900px)': {
minWidth: '10em',
},
}}
>
<Box
sx={{
minHeight: '390px',
minHeight: imageDimensions,
borderRadius: '10px',
display: 'flex',
justifyContent: 'center',
Expand All @@ -94,12 +102,17 @@ export default function ImagineDialog({
<img
src={image}
alt='Imagine'
height='390px'
height={imageDimensions}
data-testid='img-rendered'
style={{borderRadius: '1em'}}
/>}
</Box>

<Stack>
<Stack
sx={{padding: '1em 0em'}}
direction='column'
spacing={2}
justifyContent='center'
>
<TextField
value={prompt}
onChange={(event) => setPrompt(event.target.value)}
Expand All @@ -110,17 +123,16 @@ export default function ImagineDialog({
data-testid='text-field-render-description'
InputProps={{
endAdornment: (
<InputAdornment position='end'>
{prompt && (
<IconButton
aria-label='clear text'
onClick={onClearClick}
edge='end'
size='small'
>
<ClearIcon size='inherit'/>
</IconButton>
)}
<InputAdornment position="end">
<IconButton
aria-label="clear text"
onClick={onClearClick}
edge='end'
size='small'
sx={{marginRight: '-.4em', height: '2em', width: '2em'}}
>
<CloseIcon fontSize="small"/>
</IconButton>
</InputAdornment>
),
}}
Expand Down
Loading