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:
psychedelicious 2023-06-06 14:08:04 +10:00
parent b31fc43bfa
commit cc22427f25
10 changed files with 168 additions and 94 deletions

View File

@ -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>

View File

@ -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 />

View File

@ -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

View File

@ -11,7 +11,7 @@ const NodeEditor = () => {
sx={{
position: 'relative',
width: 'full',
height: { base: '100vh', xl: 'full' },
height: 'full',
borderRadius: 'md',
bg: 'base.850',
}}

View File

@ -25,6 +25,7 @@ const ParamNegativeConditioning = () => {
borderColor: 'error.600',
}}
fontSize="sm"
minH={16}
/>
</FormControl>
);

View File

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

View File

@ -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

View File

@ -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>
);
};

View File

@ -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 />

View File

@ -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: {