Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'responsive-ui' of https://github.com/SammCheese/InvokeAI into pr/3207

Browse Source
This commit is contained in:
blessedcoolant 2023-04-17 13:50:44 +12:00
commit 866024ea6c
15 changed files with 312 additions and 155 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
invokeai/frontend/web/package.json
View File

@ -65,6 +65,7 @@
"react-konva": "^18.2.4",
"react-konva-utils": "^0.3.2",
"react-redux": "^8.0.5",
"react-responsive": "^9.0.2",
"react-transition-group": "^4.4.5",
"react-zoom-pan-pinch": "^2.6.1",
"redux-deep-persist": "^1.0.7",

2
invokeai/frontend/web/src/Loading.tsx
View File

@ -1,6 +1,7 @@
import { Flex, Spinner, Text } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { updateIsMobile } from 'theme/util/isMobile';
interface LoaderProps {
showText?: boolean;
text?: string;
@ -9,6 +10,7 @@ interface LoaderProps {
// This component loads before the theme so we cannot use theme tokens here
const Loading = (props: LoaderProps) => {
updateIsMobile();
const { t } = useTranslation();
const { showText = false, text = t('common.loadingInvokeAI') } = props;

1
invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx
View File

@ -233,6 +233,7 @@ const IAICanvasToolbar = () => {
<Flex
sx={{
alignItems: 'center',
flexWrap: 'wrap',
gap: 2,
}}
>

1
invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx
View File

@ -409,6 +409,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
justifyContent: 'center',
alignItems: 'center',
columnGap: '0.5em',
flexWrap: 'wrap',
}}
{...props}
>

3
invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx
View File

@ -7,6 +7,7 @@ import { MdPhoto } from 'react-icons/md';
import { gallerySelector } from '../store/gallerySelectors';
import CurrentImageButtons from './CurrentImageButtons';
import CurrentImagePreview from './CurrentImagePreview';
import { isMobile } from 'theme/util/isMobile';
export const currentImageDisplaySelector = createSelector(
[gallerySelector],
@ -36,7 +37,7 @@ const CurrentImageDisplay = () => {
flexDirection: 'column',
height: '100%',
width: '100%',
rowGap: 4,
rowGap: isMobile ? 0 : 4,
borderRadius: 'base',
}}
>

2
invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx
View File

@ -23,7 +23,7 @@ export default function InvokeAccordionItem(props: InvokeAccordionItemProps) {
return (
<AccordionItem>
<AccordionButton>
<Flex width="100%" gap={2} align="center">
<Flex width="100vw" gap={2} align="center">
<Box flexGrow={1} textAlign="start">
{header}
</Box>

3
invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx
View File

@ -15,6 +15,7 @@ import { activeTabNameSelector } from 'features/ui/store/uiSelectors';
import { isEqual } from 'lodash';
import { useHotkeys } from 'react-hotkeys-hook';
import { useTranslation } from 'react-i18next';
import { isMobile } from 'theme/util/isMobile';
const promptInputSelector = createSelector(
[(state: RootState) => state.generation, activeTabNameSelector],
@ -76,7 +77,7 @@ const PromptInput = () => {
onKeyDown={handleKeyDown}
resize="vertical"
ref={promptRef}
minH={40}
minH={isMobile ? 20 : 40}
/>
</FormControl>
</Box>

27
invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx
View File

@ -2,6 +2,7 @@ import { Flex, Text, Image } from '@chakra-ui/react';
import { RootState } from 'app/store';
import { useAppSelector } from 'app/storeHooks';
import InvokeAILogoImage from 'assets/images/logo.png';
import MediaQuery from 'react-responsive';
const InvokeAILogoComponent = () => {
const appVersion = useAppSelector(
@ -11,18 +12,20 @@ const InvokeAILogoComponent = () => {
return (
<Flex alignItems="center" gap={3} ps={1}>
<Image src={InvokeAILogoImage} alt="invoke-ai-logo" w="32px" h="32px" />
<Text fontSize="xl">
invoke <strong>ai</strong>
</Text>
<Text
sx={{
fontWeight: 300,
marginTop: 1,
}}
variant="subtext"
>
{appVersion}
</Text>
<MediaQuery minDeviceWidth={768}>
<Text fontSize="xl">
invoke <strong>ai</strong>
</Text>
<Text
sx={{
fontWeight: 300,
marginTop: 1,
}}
variant="subtext"
>
{appVersion}
</Text>
</MediaQuery>
</Flex>
);
};

154
invokeai/frontend/web/src/features/system/components/SiteHeader.tsx
View File

@ -1,127 +1,63 @@
import { Flex, Grid, Link } from '@chakra-ui/react';
import { FaBug, FaCube, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
import IAIIconButton from 'common/components/IAIIconButton';
import HotkeysModal from './HotkeysModal/HotkeysModal';
import ModelManagerModal from './ModelManager/ModelManagerModal';
import { Box, Flex, Grid } from '@chakra-ui/react';
import { useState } from 'react';
import ModelSelect from './ModelSelect';
import SettingsModal from './SettingsModal/SettingsModal';
import StatusIndicator from './StatusIndicator';
import ThemeChanger from './ThemeChanger';
import LanguagePicker from './LanguagePicker';
import { useTranslation } from 'react-i18next';
import { MdSettings } from 'react-icons/md';
import InvokeAILogoComponent from './InvokeAILogoComponent';
import MediaQuery from 'react-responsive';
import SiteHeaderMenu from './SiteHeaderMenu';
import { FaBars } from 'react-icons/fa';
/**
* Header, includes color mode toggle, settings button, status message.
* Header, includes logo, model select and status message.
*/
const SiteHeader = () => {
const { t } = useTranslation();
const [isMenuOpen, setIsMenuOpen] = useState(false);
const handleMenuToggle = () => {
setIsMenuOpen(!isMenuOpen);
};
return (
<Grid gridTemplateColumns="auto max-content">
<InvokeAILogoComponent />
<>
<MediaQuery minDeviceWidth={768}>
<Grid gridTemplateColumns="auto max-content">
<InvokeAILogoComponent />
<Flex alignItems="center" gap={2}>
<StatusIndicator />
<Flex alignItems="center" gap={2}>
<StatusIndicator />
<ModelSelect />
<ModelSelect />
<ModelManagerModal>
<IAIIconButton
aria-label={t('modelManager.modelManager')}
tooltip={t('modelManager.modelManager')}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
icon={<FaCube />}
/>
</ModelManagerModal>
<SiteHeaderMenu />
</Flex>
</Grid>
</MediaQuery>
<MediaQuery maxDeviceWidth={768}>
<Flex>
<InvokeAILogoComponent />
<HotkeysModal>
<IAIIconButton
aria-label={t('common.hotkeysLabel')}
tooltip={t('common.hotkeysLabel')}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
icon={<FaKeyboard />}
/>
</HotkeysModal>
<Flex alignItems="center" gap={3} marginLeft="2rem">
<StatusIndicator />
<ThemeChanger />
<LanguagePicker />
<Link
isExternal
href="http://github.com/invoke-ai/InvokeAI/issues"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.reportBugLabel')}
tooltip={t('common.reportBugLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaBug />}
/>
</Link>
<Link
isExternal
href="http://github.com/invoke-ai/InvokeAI"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.githubLabel')}
tooltip={t('common.githubLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaGithub />}
/>
</Link>
<Link
isExternal
href="https://discord.gg/ZmtBAhwWhy"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.discordLabel')}
tooltip={t('common.discordLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaDiscord />}
/>
</Link>
<SettingsModal>
<IAIIconButton
aria-label={t('common.settingsLabel')}
tooltip={t('common.settingsLabel')}
variant="link"
data-variant="link"
fontSize={22}
size="sm"
icon={<MdSettings />}
/>
</SettingsModal>
</Flex>
</Grid>
<ModelSelect />
</Flex>
<Box
onClick={handleMenuToggle}
sx={{
marginLeft: '20px',
cursor: 'pointer',
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
}}
>
<FaBars />
</Box>
</Flex>
{isMenuOpen && <SiteHeaderMenu />}
</MediaQuery>
</>
);
};

120
invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx Normal file
View File

@ -0,0 +1,120 @@
import { Flex, Grid, Link } from '@chakra-ui/react';
import { FaBug, FaCube, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
import IAIIconButton from 'common/components/IAIIconButton';
import HotkeysModal from './HotkeysModal/HotkeysModal';
import ModelManagerModal from './ModelManager/ModelManagerModal';
import SettingsModal from './SettingsModal/SettingsModal';
import ThemeChanger from './ThemeChanger';
import LanguagePicker from './LanguagePicker';
import { useTranslation } from 'react-i18next';
import { MdSettings } from 'react-icons/md';
/**
* HeaderMenu, includes color mode toggle, settings button.
*/
const SiteHeaderMenu = () => {
const { t } = useTranslation();
return (
<Grid gridTemplateColumns="auto max-content">
<Flex alignItems="center" gap={2}>
<ModelManagerModal>
<IAIIconButton
aria-label={t('modelManager.modelManager')}
tooltip={t('modelManager.modelManager')}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
icon={<FaCube />}
/>
</ModelManagerModal>
<HotkeysModal>
<IAIIconButton
aria-label={t('common.hotkeysLabel')}
tooltip={t('common.hotkeysLabel')}
size="sm"
variant="link"
data-variant="link"
fontSize={20}
icon={<FaKeyboard />}
/>
</HotkeysModal>
<ThemeChanger />
<LanguagePicker />
<Link
isExternal
href="http://github.com/invoke-ai/InvokeAI/issues"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.reportBugLabel')}
tooltip={t('common.reportBugLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaBug />}
/>
</Link>
<Link
isExternal
href="http://github.com/invoke-ai/InvokeAI"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.githubLabel')}
tooltip={t('common.githubLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaGithub />}
/>
</Link>
<Link
isExternal
href="https://discord.gg/ZmtBAhwWhy"
marginBottom="-0.25rem"
>
<IAIIconButton
aria-label={t('common.discordLabel')}
tooltip={t('common.discordLabel')}
variant="link"
data-variant="link"
fontSize={20}
size="sm"
icon={<FaDiscord />}
/>
</Link>
<SettingsModal>
<IAIIconButton
aria-label={t('common.settingsLabel')}
tooltip={t('common.settingsLabel')}
variant="link"
data-variant="link"
fontSize={22}
size="sm"
icon={<MdSettings />}
/>
</SettingsModal>
</Flex>
</Grid>
);
};
SiteHeaderMenu.displayName = 'SiteHeaderMenu';
export default SiteHeaderMenu;

55
invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageContent.tsx
View File

@ -4,6 +4,7 @@ import { useAppSelector } from 'app/storeHooks';
import ImageUploadButton from 'common/components/ImageUploaderButton';
import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
import InitImagePreview from './InitImagePreview';
import MediaQuery from 'react-responsive';
const workareaSplitViewStyle: ChakraProps['sx'] = {
flexDirection: 'column',
@ -28,22 +29,44 @@ const ImageToImageContent = () => {
);
return (
<Grid
sx={{
w: '100%',
h: '100%',
gridTemplateColumns: '1fr 1fr',
borderRadius: 'base',
bg: 'base.850',
}}
>
<Flex sx={{ ...workareaSplitViewStyle, paddingInlineEnd: 2 }}>
{imageToImageComponent}
</Flex>
<Flex sx={{ ...workareaSplitViewStyle, paddingInlineStart: 2 }}>
<CurrentImageDisplay />
</Flex>
</Grid>
<>
<MediaQuery minDeviceWidth={768}>
<Grid
sx={{
w: '100%',
h: '100%',
gridTemplateColumns: '1fr 1fr',
borderRadius: 'base',
bg: 'base.850',
}}
>
<Flex sx={{ ...workareaSplitViewStyle, paddingInlineEnd: 2 }}>
{imageToImageComponent}
</Flex>
<Flex sx={{ ...workareaSplitViewStyle, paddingInlineStart: 2 }}>
<CurrentImageDisplay />
</Flex>
</Grid>
</MediaQuery>
<MediaQuery maxDeviceWidth={768}>
<Grid
sx={{
w: '100%',
h: '100%',
gridTemplateColumns: '1fr 3fr',
borderRadius: 'base',
bg: 'base.850',
}}
>
<Flex sx={{ ...workareaSplitViewStyle, paddingInlineEnd: 2 }}>
{imageToImageComponent}
</Flex>
<Flex sx={{ ...workareaSplitViewStyle, paddingInlineStart: 2 }}>
<CurrentImageDisplay />
</Flex>
</Grid>
</MediaQuery>
</>
);
};

43
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageContent.tsx
View File

@ -1,20 +1,39 @@
import { Box, Flex } from '@chakra-ui/react';
import CurrentImageDisplay from 'features/gallery/components/CurrentImageDisplay';
import MediaQuery from 'react-responsive';
const TextToImageContent = () => {
return (
<Box
sx={{
width: '100%',
height: '100%',
borderRadius: 'base',
bg: 'base.850',
}}
>
<Flex sx={{ p: 4, width: '100%', height: '100%' }}>
<CurrentImageDisplay />
</Flex>
</Box>
<>
<MediaQuery minDeviceWidth={768}>
<Box
sx={{
width: '100%',
height: '100%',
borderRadius: 'base',
bg: 'base.850',
}}
>
<Flex sx={{ p: 4, width: '100%', height: '100%' }}>
<CurrentImageDisplay />
</Flex>
</Box>
</MediaQuery>
<MediaQuery maxDeviceWidth={768}>
<Box
sx={{
position: 'relative',
width: 'full',
height: 'full',
bg: 'base.850',
}}
>
<Flex sx={{ height: '100%' }}>
<CurrentImageDisplay />
</Flex>
</Box>
</MediaQuery>
</>
);
};

16
invokeai/frontend/web/src/theme/components/tabs.ts
View File

@ -4,6 +4,8 @@ import {
defineStyle,
} from '@chakra-ui/styled-system';
import { isMobile } from 'theme/util/isMobile';
const { defineMultiStyleConfig, definePartsStyle } =
createMultiStyleConfigHelpers(parts.keys);
@ -14,16 +16,26 @@ const invokeAIRoot = defineStyle((_props) => {
};
});
const invokeAIRootMobile = defineStyle((_props) => {
return {
position: 'relative',
display: 'block',
};
});
const invokeAITab = defineStyle((_props) => ({}));
const invokeAITablist = defineStyle((_props) => ({
display: 'flex',
flexDirection: 'column',
flexDirection: isMobile ? 'row' : 'column',
gap: 1,
color: 'base.700',
justifyContent: isMobile ? 'center' : '',
button: {
fontSize: 'sm',
padding: 2,
paddingLeft: isMobile ? '5vw' : '',
paddingRight: isMobile ? '5vw' : '',
borderRadius: 'base',
_selected: {
bg: 'accent.700',
@ -46,7 +58,7 @@ const invokeAITabpanel = defineStyle((_props) => ({
}));
const invokeAI = definePartsStyle((props) => ({
root: invokeAIRoot(props),
root: isMobile ? invokeAIRootMobile(props) : invokeAIRoot(props),
tab: invokeAITab(props),
tablist: invokeAITablist(props),
tabpanel: invokeAITabpanel(props),

5
invokeai/frontend/web/src/theme/util/isMobile.ts Normal file
View File

@ -0,0 +1,5 @@
export let isMobile = false;
export function updateIsMobile() {
isMobile = window.innerWidth <= 768 || document.body.clientWidth <= 768;
}

34
invokeai/frontend/web/yarn.lock
View File

@ -2201,6 +2201,11 @@ css-box-model@1.2.1:
dependencies:
tiny-invariant "^1.0.6"
css-mediaquery@^0.1.2:
version "0.1.2"
resolved "https://registry.yarnpkg.com/css-mediaquery/-/css-mediaquery-0.1.2.tgz#6a2c37344928618631c54bd33cedd301da18bea0"
integrity sha512-COtn4EROW5dBGlE/4PiKnh6rZpAPxDeFLaEEwt4i10jpDMFt2EhQGS79QmmrO+iKCHv0PU/HrOWEhijFd1x99Q==
csstype@^3.0.11, csstype@^3.0.2:
version "3.1.1"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.1.tgz#841b532c45c758ee546a11d5bd7b7b473c8c30b9"
@ -3280,6 +3285,11 @@ husky@^8.0.3:
resolved "https://registry.yarnpkg.com/husky/-/husky-8.0.3.tgz#4936d7212e46d1dea28fef29bb3a108872cd9184"
integrity sha512-+dQSyqPh4x1hlO1swXBiNb2HzTDN1I2IGLQx1GrBuiqFJfoMrnZWwVmatvSiO+Iz8fBUnf+lekwNo4c2LlXItg==
hyphenate-style-name@^1.0.0:
version "1.0.4"
resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
i18next-browser-languagedetector@^7.0.1:
version "7.0.1"
resolved "https://registry.yarnpkg.com/i18next-browser-languagedetector/-/i18next-browser-languagedetector-7.0.1.tgz#ead34592edc96c6c3a618a51cb57ad027c5b5d87"
@ -3927,6 +3937,13 @@ make-error@^1.1.1:
resolved "https://registry.yarnpkg.com/make-error/-/make-error-1.3.6.tgz#2eb2e37ea9b67c4891f684a1394799af484cf7a2"
integrity sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw==
matchmediaquery@^0.3.0:
version "0.3.1"
resolved "https://registry.yarnpkg.com/matchmediaquery/-/matchmediaquery-0.3.1.tgz#8247edc47e499ebb7c58f62a9ff9ccf5b815c6d7"
integrity sha512-Hlk20WQHRIm9EE9luN1kjRjYXAQToHOIAHPJn9buxBwuhfTHoKUcX+lXBbxc85DVQfXYbEQ4HcwQdd128E3qHQ==
dependencies:
css-mediaquery "^0.1.2"
merge-stream@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@ -4440,7 +4457,7 @@ pretty-ms@^7.0.1:
dependencies:
parse-ms "^2.1.0"
prop-types@^15.6.2, prop-types@^15.8.1:
prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -4630,6 +4647,16 @@ react-remove-scroll@^2.5.5:
use-callback-ref "^1.3.0"
use-sidecar "^1.1.2"
react-responsive@^9.0.2:
version "9.0.2"
resolved "https://registry.yarnpkg.com/react-responsive/-/react-responsive-9.0.2.tgz#34531ca77a61e7a8775714016d21241df7e4205c"
integrity sha512-+4CCab7z8G8glgJoRjAwocsgsv6VA2w7JPxFWHRc7kvz8mec1/K5LutNC2MG28Mn8mu6+bu04XZxHv5gyfT7xQ==
dependencies:
hyphenate-style-name "^1.0.0"
matchmediaquery "^0.3.0"
prop-types "^15.6.1"
shallow-equal "^1.2.1"
react-style-singleton@^2.2.1:
version "2.2.1"
resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.2.1.tgz#f99e420492b2d8f34d38308ff660b60d0b1205b4"
@ -4912,6 +4939,11 @@ semver@^7.3.4, semver@^7.3.5, semver@^7.3.7:
dependencies:
lru-cache "^6.0.0"
shallow-equal@^1.2.1:
version "1.2.1"
resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
shebang-command@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"