always enable these things on txt2img tab (#3726)

This commit is contained in:
blessedcoolant 2023-07-11 13:14:03 +12:00 committed by GitHub
commit 6733f5bfec
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 2 deletions

View File

@ -3,6 +3,7 @@ import { RootState } from 'app/store/store';
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
import IAIButton from 'common/components/IAIButton'; import IAIButton from 'common/components/IAIButton';
import { setAspectRatio } from 'features/ui/store/uiSlice'; import { setAspectRatio } from 'features/ui/store/uiSlice';
import { activeTabNameSelector } from '../../../../ui/store/uiSelectors';
const aspectRatios = [ const aspectRatios = [
{ name: 'Free', value: null }, { name: 'Free', value: null },
@ -17,6 +18,10 @@ export default function ParamAspectRatio() {
); );
const dispatch = useAppDispatch(); const dispatch = useAppDispatch();
const shouldFitToWidthHeight = useAppSelector(
(state: RootState) => state.generation.shouldFitToWidthHeight
);
const activeTabName = useAppSelector(activeTabNameSelector);
return ( return (
<Flex gap={2} flexGrow={1}> <Flex gap={2} flexGrow={1}>
@ -26,6 +31,9 @@ export default function ParamAspectRatio() {
key={ratio.name} key={ratio.name}
size="sm" size="sm"
isChecked={aspectRatio === ratio.value} isChecked={aspectRatio === ratio.value}
isDisabled={
activeTabName === 'img2img' ? !shouldFitToWidthHeight : false
}
onClick={() => dispatch(setAspectRatio(ratio.value))} onClick={() => dispatch(setAspectRatio(ratio.value))}
> >
{ratio.name} {ratio.name}

View File

@ -8,6 +8,7 @@ import { MdOutlineSwapVert } from 'react-icons/md';
import ParamAspectRatio from './ParamAspectRatio'; import ParamAspectRatio from './ParamAspectRatio';
import ParamHeight from './ParamHeight'; import ParamHeight from './ParamHeight';
import ParamWidth from './ParamWidth'; import ParamWidth from './ParamWidth';
import { activeTabNameSelector } from '../../../../ui/store/uiSelectors';
export default function ParamSize() { export default function ParamSize() {
const { t } = useTranslation(); const { t } = useTranslation();
@ -15,6 +16,7 @@ export default function ParamSize() {
const shouldFitToWidthHeight = useAppSelector( const shouldFitToWidthHeight = useAppSelector(
(state: RootState) => state.generation.shouldFitToWidthHeight (state: RootState) => state.generation.shouldFitToWidthHeight
); );
const activeTabName = useAppSelector(activeTabNameSelector);
return ( return (
<Flex <Flex
sx={{ sx={{
@ -50,13 +52,24 @@ export default function ParamSize() {
size="sm" size="sm"
icon={<MdOutlineSwapVert />} icon={<MdOutlineSwapVert />}
fontSize={20} fontSize={20}
isDisabled={
activeTabName === 'img2img' ? !shouldFitToWidthHeight : false
}
onClick={() => dispatch(toggleSize())} onClick={() => dispatch(toggleSize())}
/> />
</Flex> </Flex>
<Flex gap={2} alignItems="center"> <Flex gap={2} alignItems="center">
<Flex gap={2} flexDirection="column" width="full"> <Flex gap={2} flexDirection="column" width="full">
<ParamWidth isDisabled={!shouldFitToWidthHeight} /> <ParamWidth
<ParamHeight isDisabled={!shouldFitToWidthHeight} /> isDisabled={
activeTabName === 'img2img' ? !shouldFitToWidthHeight : false
}
/>
<ParamHeight
isDisabled={
activeTabName === 'img2img' ? !shouldFitToWidthHeight : false
}
/>
</Flex> </Flex>
</Flex> </Flex>
</Flex> </Flex>