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

layout improvements

Browse Source
This commit is contained in:
SammCheese 2023-04-17 13:30:33 +02:00
parent 9a43362127
commit 9749ef34b5
No known key found for this signature in database
GPG Key ID: 28CFE2321A140BA1
10 changed files with 198 additions and 147 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
invokeai/frontend/web/src/app/App.tsx
View File

@ -35,7 +35,7 @@ const App = (props: PropsWithChildren) => {
<ProgressBar />
<Grid
gap={4}
p={4}
p={{ base: 1, lg: 4 }}
gridAutoRows="min-content auto"
w={APP_WIDTH}
h={APP_HEIGHT}
@ -43,7 +43,7 @@ const App = (props: PropsWithChildren) => {
{props.children || <SiteHeader />}
<Flex
gap={4}
w="full"
w={{ base: '100vw', xl: 'full' }}
h="full"
flexDir={{ base: 'column', xl: 'row' }}
>

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

@ -406,6 +406,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => {
return (
<Flex
sx={{
flexWrap: 'wrap',
justifyContent: 'center',
alignItems: 'center',
columnGap: '0.5em',

66
invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx
View File

@ -27,6 +27,7 @@ import { isStagingSelector } from 'features/canvas/store/canvasSelectors';
import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors';
import useResolution from 'common/hooks/useResolution';
import { Flex } from '@chakra-ui/react';
const GALLERY_TAB_WIDTHS: Record<
InvokeTabName,
@ -182,30 +183,47 @@ export default function ImageGalleryPanel() {
);
const calcGalleryMinHeight = () => {
if (resolution == 'desktop') return;
return 600;
if (resolution === 'desktop') return;
return 300;
};
return (
<ResizableDrawer
direction="right"
isResizable={isResizable || !shouldPinGallery}
isOpen={shouldShowGallery}
onClose={handleCloseGallery}
isPinned={shouldPinGallery && !isLightboxOpen}
minWidth={
shouldPinGallery
? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
: 200
}
maxWidth={
shouldPinGallery
? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
: undefined
}
minHeight={calcGalleryMinHeight()}
>
<ImageGalleryContent />
</ResizableDrawer>
);
const imageGalleryContent = () => {
return (
<Flex w="100vw" h="100vh">
<ImageGalleryContent />;
</Flex>
);
};
const resizableImageGalleryContent = () => {
return (
<ResizableDrawer
direction="right"
isResizable={isResizable || !shouldPinGallery}
isOpen={shouldShowGallery}
onClose={handleCloseGallery}
isPinned={shouldPinGallery && !isLightboxOpen}
minWidth={
shouldPinGallery
? GALLERY_TAB_WIDTHS[activeTabName].galleryMinWidth
: 200
}
maxWidth={
shouldPinGallery
? GALLERY_TAB_WIDTHS[activeTabName].galleryMaxWidth
: undefined
}
minHeight={calcGalleryMinHeight()}
>
<ImageGalleryContent />
</ResizableDrawer>
);
};
const renderImageGallery = () => {
if (['mobile', 'tablet'].includes(resolution)) return imageGalleryContent();
return resizableImageGalleryContent();
};
return renderImageGallery();
}

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

@ -76,7 +76,7 @@ const PromptInput = () => {
onKeyDown={handleKeyDown}
resize="vertical"
ref={promptRef}
minH={40}
minH={{ base: 20, lg: 40 }}
/>
</FormControl>
</Box>

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

@ -11,18 +11,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>
<Flex gap={3} display={{ base: 'none', sm: 'inherit' }}>
<Text fontSize="xl">
invoke <strong>ai</strong>
</Text>
<Text
sx={{
fontWeight: 300,
marginTop: 1,
}}
variant="subtext"
>
{appVersion}
</Text>
</Flex>
</Flex>
);
};

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

@ -1,28 +1,21 @@
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 { 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 SiteHeaderMenu from './SiteHeaderMenu';
import useResolution from 'common/hooks/useResolution';
import { FaBars } from 'react-icons/fa';
/**
* Header, includes color mode toggle, settings button, status message.
*/
const SiteHeader = () => {
const { t } = useTranslation();
const [menuOpened, setMenuOpened] = useState(false);
const resolution = useResolution();
const isMobile = ['mobile', 'tablet'].includes(resolution);
return (
<Grid gridTemplateColumns="auto max-content">
@ -33,94 +26,12 @@ const SiteHeader = () => {
<ModelSelect />
<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>
{!isMobile && <SiteHeaderMenu />}
<Flex>
{isMobile && <FaBars onClick={() => setMenuOpened(!menuOpened)} />}
</Flex>
</Flex>
<Flex>{isMobile && menuOpened && <SiteHeaderMenu />}</Flex>
</Grid>
);
};

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

@ -0,0 +1,109 @@
import { Flex, Link } from '@chakra-ui/react';
import { useTranslation } from 'react-i18next';
import { FaCube, FaKeyboard, FaBug, FaGithub, FaDiscord } from 'react-icons/fa';
import { MdSettings } from 'react-icons/md';
import HotkeysModal from './HotkeysModal/HotkeysModal';
import LanguagePicker from './LanguagePicker';
import ModelManagerModal from './ModelManager/ModelManagerModal';
import SettingsModal from './SettingsModal/SettingsModal';
import ThemeChanger from './ThemeChanger';
import IAIIconButton from 'common/components/IAIIconButton';
const SiteHeaderMenu = () => {
const { t } = useTranslation();
return (
<>
<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>
</>
);
};
SiteHeaderMenu.displayName = 'SiteHeaderMenu';
export default SiteHeaderMenu;

9
invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx
View File

@ -58,7 +58,7 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
{...rest}
gridTemplateAreas={{
base: `'workarea-display' 'workarea-panel'`,
md: `'workarea-panel workarea-display'`,
xl: `'workarea-panel workarea-display'`,
}}
gridAutoRows={{ base: 'maxcontent auto' }}
gridAutoColumns={{ md: 'max-content auto' }}
@ -69,7 +69,12 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
>
<ParametersPanel>{parametersPanelContent}</ParametersPanel>
<GridItem gridArea="workarea-display">
<Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
<Box
pos="relative"
w={{ base: '100vw', xl: 'full' }}
h="100%"
onDrop={handleDrop}
>
{children}
</Box>
</GridItem>

9
invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
View File

@ -94,7 +94,12 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
const parametersPanelContent = () => {
return (
<Flex flexDir="column" position="relative" h="full" w="full">
<Flex
flexDir="column"
position="relative"
h="full"
w={{ sm: 'full', lg: '100vw', xl: 'full' }}
>
{!shouldPinParametersPanel && (
<Flex
paddingTop={1.5}
@ -143,7 +148,7 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
return resizableParametersPanelContent();
};
return resizableParametersPanelContent();
return renderParametersPanel();
};
export default memo(ParametersPanel);

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

@ -32,7 +32,7 @@ const ImageToImageContent = () => {
sx={{
w: '100%',
h: '100%',
gridTemplateColumns: '1fr 1fr',
gridTemplateColumns: { base: '1fr 4fr', xl: '1fr 1fr' },
borderRadius: 'base',
bg: 'base.850',
}}