mirror of
https://github.com/invoke-ai/InvokeAI
synced 2024-08-30 20:32:17 +00:00
feat(ui): improve UI on smaller screens
- responsive changes were causing a lot of weird layout issues, had to remove the rest of them - canvas (non-beta) toolbar now wraps - reduces minH for prompt boxes a bit
This commit is contained in:
parent
b31fc43bfa
commit
cc22427f25
@ -76,18 +76,21 @@ const App = ({
|
||||
{isLightboxEnabled && <Lightbox />}
|
||||
<ImageUploader>
|
||||
<Grid
|
||||
gap={4}
|
||||
p={4}
|
||||
gridAutoRows="min-content auto"
|
||||
w={APP_WIDTH}
|
||||
h={APP_HEIGHT}
|
||||
sx={{
|
||||
gap: 4,
|
||||
p: 4,
|
||||
gridAutoRows: 'min-content auto',
|
||||
w: 'full',
|
||||
h: 'full',
|
||||
}}
|
||||
>
|
||||
{headerComponent || <SiteHeader />}
|
||||
<Flex
|
||||
gap={4}
|
||||
w={{ base: '100vw', xl: 'full' }}
|
||||
h="full"
|
||||
flexDir={{ base: 'column', xl: 'row' }}
|
||||
sx={{
|
||||
gap: 4,
|
||||
w: 'full',
|
||||
h: 'full',
|
||||
}}
|
||||
>
|
||||
<InvokeTabs />
|
||||
</Flex>
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { ButtonGroup, Flex } from '@chakra-ui/react';
|
||||
import { Box, ButtonGroup, Flex } from '@chakra-ui/react';
|
||||
import { createSelector } from '@reduxjs/toolkit';
|
||||
import { useAppDispatch, useAppSelector } from 'app/store/storeHooks';
|
||||
import IAIIconButton from 'common/components/IAIIconButton';
|
||||
@ -210,16 +210,19 @@ const IAICanvasToolbar = () => {
|
||||
sx={{
|
||||
alignItems: 'center',
|
||||
gap: 2,
|
||||
flexWrap: 'wrap',
|
||||
}}
|
||||
>
|
||||
<IAISelect
|
||||
tooltip={`${t('unifiedCanvas.layer')} (Q)`}
|
||||
tooltipProps={{ hasArrow: true, placement: 'top' }}
|
||||
value={layer}
|
||||
validValues={LAYER_NAMES_DICT}
|
||||
onChange={handleChangeLayer}
|
||||
isDisabled={isStaging}
|
||||
/>
|
||||
<Box w={24}>
|
||||
<IAISelect
|
||||
tooltip={`${t('unifiedCanvas.layer')} (Q)`}
|
||||
tooltipProps={{ hasArrow: true, placement: 'top' }}
|
||||
value={layer}
|
||||
validValues={LAYER_NAMES_DICT}
|
||||
onChange={handleChangeLayer}
|
||||
isDisabled={isStaging}
|
||||
/>
|
||||
</Box>
|
||||
|
||||
<IAICanvasMaskOptions />
|
||||
<IAICanvasToolChooserOptions />
|
||||
|
@ -6,7 +6,7 @@ import { memo } from 'react';
|
||||
|
||||
const FieldTypeLegend = () => {
|
||||
return (
|
||||
<Flex gap={2} flexDirection={{ base: 'column', xl: 'row' }}>
|
||||
<Flex sx={{ gap: 2, flexDir: 'column' }}>
|
||||
{map(FIELDS, ({ title, description, color }, key) => (
|
||||
<Tooltip key={key} label={description}>
|
||||
<Badge
|
||||
|
@ -11,7 +11,7 @@ const NodeEditor = () => {
|
||||
sx={{
|
||||
position: 'relative',
|
||||
width: 'full',
|
||||
height: { base: '100vh', xl: 'full' },
|
||||
height: 'full',
|
||||
borderRadius: 'md',
|
||||
bg: 'base.850',
|
||||
}}
|
||||
|
@ -25,6 +25,7 @@ const ParamNegativeConditioning = () => {
|
||||
borderColor: 'error.600',
|
||||
}}
|
||||
fontSize="sm"
|
||||
minH={16}
|
||||
/>
|
||||
</FormControl>
|
||||
);
|
||||
|
@ -82,7 +82,7 @@ const ParamPositiveConditioning = () => {
|
||||
onKeyDown={handleKeyDown}
|
||||
resize="vertical"
|
||||
ref={promptRef}
|
||||
minH={{ base: 20, lg: 40 }}
|
||||
minH={32}
|
||||
/>
|
||||
</FormControl>
|
||||
</Box>
|
||||
|
@ -13,22 +13,16 @@ const InvokeAILogoComponent = () => {
|
||||
<Image
|
||||
src={InvokeAILogoImage}
|
||||
alt="invoke-ai-logo"
|
||||
w="32px"
|
||||
h="32px"
|
||||
minW="32px"
|
||||
minH="32px"
|
||||
userSelect="none"
|
||||
/>
|
||||
<Flex
|
||||
gap={3}
|
||||
display={{
|
||||
base: 'inherit',
|
||||
sm: 'none',
|
||||
md: 'inherit',
|
||||
sx={{
|
||||
w: '32px',
|
||||
h: '32px',
|
||||
minW: '32px',
|
||||
minH: '32px',
|
||||
userSelect: 'none',
|
||||
}}
|
||||
>
|
||||
<Text fontSize="xl">
|
||||
/>
|
||||
<Flex sx={{ gap: 3 }}>
|
||||
<Text sx={{ fontSize: 'xl', userSelect: 'none' }}>
|
||||
invoke <strong>ai</strong>
|
||||
</Text>
|
||||
<Text
|
||||
|
@ -1,66 +1,138 @@
|
||||
import { Flex, Grid } from '@chakra-ui/react';
|
||||
import { memo, useState } from 'react';
|
||||
import { Flex, Spacer } from '@chakra-ui/react';
|
||||
import { memo } from 'react';
|
||||
import StatusIndicator from './StatusIndicator';
|
||||
|
||||
import InvokeAILogoComponent from './InvokeAILogoComponent';
|
||||
import SiteHeaderMenu from './SiteHeaderMenu';
|
||||
import useResolution from 'common/hooks/useResolution';
|
||||
import { FaBars } from 'react-icons/fa';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from '@chakra-ui/react';
|
||||
import IAIIconButton from 'common/components/IAIIconButton';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { FaBug, FaCube, FaDiscord, FaGithub, FaKeyboard } from 'react-icons/fa';
|
||||
import { MdSettings } from 'react-icons/md';
|
||||
import HotkeysModal from './HotkeysModal/HotkeysModal';
|
||||
import InvokeAILogoComponent from './InvokeAILogoComponent';
|
||||
import LanguagePicker from './LanguagePicker';
|
||||
import ModelManagerModal from './ModelManager/ModelManagerModal';
|
||||
import SettingsModal from './SettingsModal/SettingsModal';
|
||||
import ThemeChanger from './ThemeChanger';
|
||||
import { useFeatureStatus } from '../hooks/useFeatureStatus';
|
||||
|
||||
/**
|
||||
* Header, includes color mode toggle, settings button, status message.
|
||||
*/
|
||||
const SiteHeader = () => {
|
||||
const [menuOpened, setMenuOpened] = useState(false);
|
||||
const resolution = useResolution();
|
||||
const { t } = useTranslation();
|
||||
|
||||
const isModelManagerEnabled =
|
||||
useFeatureStatus('modelManager').isFeatureEnabled;
|
||||
const isLocalizationEnabled =
|
||||
useFeatureStatus('localization').isFeatureEnabled;
|
||||
const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled;
|
||||
const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled;
|
||||
const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled;
|
||||
|
||||
return (
|
||||
<Grid
|
||||
gridTemplateColumns={{ base: 'auto', sm: 'auto max-content' }}
|
||||
paddingRight={{ base: 10, xl: 0 }}
|
||||
gap={2}
|
||||
<Flex
|
||||
sx={{
|
||||
gap: 2,
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Flex justifyContent={{ base: 'center', sm: 'start' }}>
|
||||
<InvokeAILogoComponent />
|
||||
</Flex>
|
||||
<Flex
|
||||
alignItems="center"
|
||||
gap={2}
|
||||
justifyContent={{ base: 'center', sm: 'start' }}
|
||||
>
|
||||
<StatusIndicator />
|
||||
<InvokeAILogoComponent />
|
||||
<Spacer />
|
||||
<StatusIndicator />
|
||||
|
||||
{resolution === 'desktop' ? (
|
||||
<SiteHeaderMenu />
|
||||
) : (
|
||||
{isModelManagerEnabled && (
|
||||
<ModelManagerModal>
|
||||
<IAIIconButton
|
||||
icon={<FaBars />}
|
||||
aria-label={t('accessibility.menu')}
|
||||
background={menuOpened ? 'base.800' : 'none'}
|
||||
_hover={{ background: menuOpened ? 'base.800' : 'none' }}
|
||||
onClick={() => setMenuOpened(!menuOpened)}
|
||||
p={0}
|
||||
></IAIIconButton>
|
||||
)}
|
||||
</Flex>
|
||||
|
||||
{resolution !== 'desktop' && menuOpened && (
|
||||
<Flex
|
||||
position="absolute"
|
||||
right={6}
|
||||
top={{ base: 28, sm: 16 }}
|
||||
backgroundColor="base.800"
|
||||
padding={4}
|
||||
borderRadius={4}
|
||||
zIndex={{ base: 99, xl: 0 }}
|
||||
>
|
||||
<SiteHeaderMenu />
|
||||
</Flex>
|
||||
aria-label={t('modelManager.modelManager')}
|
||||
tooltip={t('modelManager.modelManager')}
|
||||
size="sm"
|
||||
variant="link"
|
||||
data-variant="link"
|
||||
fontSize={20}
|
||||
icon={<FaCube />}
|
||||
/>
|
||||
</ModelManagerModal>
|
||||
)}
|
||||
</Grid>
|
||||
|
||||
<HotkeysModal>
|
||||
<IAIIconButton
|
||||
aria-label={t('common.hotkeysLabel')}
|
||||
tooltip={t('common.hotkeysLabel')}
|
||||
size="sm"
|
||||
variant="link"
|
||||
data-variant="link"
|
||||
fontSize={20}
|
||||
icon={<FaKeyboard />}
|
||||
/>
|
||||
</HotkeysModal>
|
||||
|
||||
<ThemeChanger />
|
||||
|
||||
{isLocalizationEnabled && <LanguagePicker />}
|
||||
|
||||
{isBugLinkEnabled && (
|
||||
<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>
|
||||
)}
|
||||
|
||||
{isGithubLinkEnabled && (
|
||||
<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>
|
||||
)}
|
||||
|
||||
{isDiscordLinkEnabled && (
|
||||
<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>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -152,16 +152,18 @@ const InvokeTabs = () => {
|
||||
onChange={(index: number) => {
|
||||
dispatch(setActiveTab(index));
|
||||
}}
|
||||
flexGrow={1}
|
||||
flexDir={{ base: 'column', xl: 'row' }}
|
||||
gap={{ base: 4 }}
|
||||
sx={{
|
||||
flexGrow: 1,
|
||||
gap: 4,
|
||||
}}
|
||||
isLazy
|
||||
>
|
||||
<TabList
|
||||
pt={2}
|
||||
gap={4}
|
||||
flexDir={{ base: 'row', xl: 'column' }}
|
||||
justifyContent={{ base: 'center', xl: 'start' }}
|
||||
sx={{
|
||||
pt: 2,
|
||||
gap: 4,
|
||||
flexDir: 'column',
|
||||
}}
|
||||
>
|
||||
{tabs}
|
||||
<Spacer />
|
||||
|
@ -33,7 +33,6 @@ const PinParametersPanelButton = (props: PinParametersPanelButtonProps) => {
|
||||
icon={shouldPinParametersPanel ? <BsPinAngleFill /> : <BsPinAngle />}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
px={{ base: 10, xl: 0 }}
|
||||
sx={{
|
||||
color: 'base.700',
|
||||
_hover: {
|
||||
|
Loading…
Reference in New Issue
Block a user