From 2edd032ec7a07176641b6d13ef6df37d90a48451 Mon Sep 17 00:00:00 2001 From: SammCheese Date: Sat, 15 Apr 2023 21:34:03 +0200 Subject: [PATCH 1/2] draft mobile layout --- invokeai/frontend/web/package.json | 3 +- invokeai/frontend/web/src/Loading.tsx | 2 + invokeai/frontend/web/src/app/App.tsx | 21 ++- .../IAICanvasToolbar/IAICanvasToolbar.tsx | 1 + .../components/CurrentImageButtons.tsx | 1 + .../components/CurrentImageDisplay.tsx | 3 +- .../gallery/components/ImageGalleryPanel.tsx | 52 +++--- .../AccordionItems/InvokeAccordionItem.tsx | 2 +- .../components/PromptInput/PromptInput.tsx | 3 +- .../components/InvokeAILogoComponent.tsx | 27 +-- .../features/system/components/SiteHeader.tsx | 154 +++++------------- .../system/components/SiteHeaderMenu.tsx | 120 ++++++++++++++ .../features/ui/components/InvokeWorkarea.tsx | 34 +++- .../ui/components/ParametersPanel.tsx | 78 +++++---- .../tabs/ImageToImage/ImageToImageContent.tsx | 55 +++++-- .../tabs/TextToImage/TextToImageContent.tsx | 43 +++-- .../frontend/web/src/theme/components/tabs.ts | 16 +- .../frontend/web/src/theme/util/isMobile.ts | 5 + invokeai/frontend/web/yarn.lock | 34 +++- 19 files changed, 433 insertions(+), 221 deletions(-) create mode 100644 invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx create mode 100644 invokeai/frontend/web/src/theme/util/isMobile.ts diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index c47948746d..3eccbb097a 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -4,7 +4,7 @@ "version": "0.0.1", "scripts": { "prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky", - "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"", + "dev": "concurrently \"vite dev --host\" \"yarn run theme:watch\"", "build": "yarn run lint && vite build", "preview": "vite preview", "lint:madge": "madge --circular src/main.tsx", @@ -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", diff --git a/invokeai/frontend/web/src/Loading.tsx b/invokeai/frontend/web/src/Loading.tsx index 671c2cd640..42fb6ef6f2 100644 --- a/invokeai/frontend/web/src/Loading.tsx +++ b/invokeai/frontend/web/src/Loading.tsx @@ -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; diff --git a/invokeai/frontend/web/src/app/App.tsx b/invokeai/frontend/web/src/app/App.tsx index 40c15b38c0..46f3fe70cc 100644 --- a/invokeai/frontend/web/src/app/App.tsx +++ b/invokeai/frontend/web/src/app/App.tsx @@ -15,6 +15,8 @@ import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel'; import Lightbox from 'features/lightbox/components/Lightbox'; import { useAppSelector } from './storeHooks'; import { PropsWithChildren, useEffect } from 'react'; +import { isMobile } from 'theme/util/isMobile'; +import MediaQuery from 'react-responsive'; keepGUIAlive(); @@ -35,16 +37,23 @@ const App = (props: PropsWithChildren) => { {props.children || } - - - - + + + + + + + + + + + diff --git a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index 4e53039e38..12da790f3e 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -233,6 +233,7 @@ const IAICanvasToolbar = () => { diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx index 18457d0cb3..b6517ee9b7 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx @@ -409,6 +409,7 @@ const CurrentImageButtons = (props: CurrentImageButtonsProps) => { justifyContent: 'center', alignItems: 'center', columnGap: '0.5em', + flexWrap: 'wrap', }} {...props} > diff --git a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx index 6c46e14391..fa2cbc464b 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx @@ -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', }} > diff --git a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx index da97dea9bf..797928f76f 100644 --- a/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/ImageGalleryPanel.tsx @@ -26,6 +26,8 @@ import { import { isStagingSelector } from 'features/canvas/store/canvasSelectors'; import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale'; import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; +import { isMobile } from 'theme/util/isMobile'; +import MediaQuery from 'react-responsive'; const GALLERY_TAB_WIDTHS: Record< InvokeTabName, @@ -147,6 +149,7 @@ export default function ImageGalleryPanel() { ); const IMAGE_SIZE_STEP = 32; + const screenWidth = window.innerWidth; useHotkeys( 'shift+up', @@ -179,24 +182,35 @@ export default function ImageGalleryPanel() { ); return ( - - - + <> + + + + + + + + + ); } diff --git a/invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx b/invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx index b742f5a37e..18ba3bbe81 100644 --- a/invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/AccordionItems/InvokeAccordionItem.tsx @@ -23,7 +23,7 @@ export default function InvokeAccordionItem(props: InvokeAccordionItemProps) { return ( - + {header} diff --git a/invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx b/invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx index 3d5c38ddc5..3e4ddcea1d 100644 --- a/invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx @@ -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} /> diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx index ac7dc39a78..04b3c5c242 100644 --- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx +++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx @@ -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 ( invoke-ai-logo - - invoke ai - - - {appVersion} - + + + invoke ai + + + {appVersion} + + ); }; diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx index 3f5503ee54..572d82fef8 100644 --- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx +++ b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx @@ -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 React, { 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 ( - - + <> + + + - - + + - + - - } - /> - + + + + + + + - - } - /> - + + - - - - - - } - /> - - - - } - /> - - - - } - /> - - - - } - /> - - - + + + + + + + {isMenuOpen && } + + ); }; diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx new file mode 100644 index 0000000000..095e5aede6 --- /dev/null +++ b/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx @@ -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 ( + + + + } + /> + + + + } + /> + + + + + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + + ); +}; + +SiteHeaderMenu.displayName = 'SiteHeaderMenu'; +export default SiteHeaderMenu; diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx index ea4cd5ba1a..4463b4394b 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx @@ -13,6 +13,9 @@ import useGetImageByUuid from 'features/gallery/hooks/useGetImageByUuid'; import { isEqual } from 'lodash'; import { APP_CONTENT_HEIGHT } from 'theme/util/constants'; import ParametersPanel from './ParametersPanel'; +import MediaQuery from 'react-responsive'; +import ImageGalleryPanel from 'features/gallery/components/ImageGalleryPanel'; +import { isMobile } from 'theme/util/isMobile'; const workareaSelector = createSelector( [uiSelector, activeTabNameSelector], @@ -54,12 +57,31 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => { }; return ( - - {parametersPanelContent} - - {children} - - + <> + + + {parametersPanelContent} + + {children} + + + + + + + {children} + + {parametersPanelContent} + {isMobile && } + + + ); }; diff --git a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx index 1f0bcaead3..8b7b3d7286 100644 --- a/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx +++ b/invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx @@ -1,4 +1,4 @@ -import { Flex } from '@chakra-ui/react'; +import { Box, Flex } from '@chakra-ui/react'; import { useAppDispatch, useAppSelector } from 'app/storeHooks'; import { memo, ReactNode } from 'react'; @@ -19,6 +19,7 @@ import { createSelector } from '@reduxjs/toolkit'; import { activeTabNameSelector, uiSelector } from '../store/uiSelectors'; import { isEqual } from 'lodash'; import { lightboxSelector } from 'features/lightbox/store/lightboxSelectors'; +import MediaQuery from 'react-responsive'; const parametersPanelSelector = createSelector( [uiSelector, activeTabNameSelector, lightboxSelector], @@ -89,40 +90,49 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => { [] ); return ( - - - {!shouldPinParametersPanel && ( - - - + <> + + + + {!shouldPinParametersPanel && ( + + + + + )} + {children} + {shouldPinParametersPanel && ( + + )} - )} - {children} - {shouldPinParametersPanel && ( - - )} - - + + + + + {children} + + + ); }; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageContent.tsx index db62d2ed80..efbfedf19c 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageContent.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageContent.tsx @@ -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 ( - - - {imageToImageComponent} - - - - - + <> + + + + {imageToImageComponent} + + + + + + + + + + {imageToImageComponent} + + + + + + + ); }; diff --git a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageContent.tsx index 886e3a5331..7c6866bd15 100644 --- a/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageContent.tsx +++ b/invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageContent.tsx @@ -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 ( - - - - - + <> + + + + + + + + + + + + + + + ); }; diff --git a/invokeai/frontend/web/src/theme/components/tabs.ts b/invokeai/frontend/web/src/theme/components/tabs.ts index 5eb1a36013..a0b14b87a4 100644 --- a/invokeai/frontend/web/src/theme/components/tabs.ts +++ b/invokeai/frontend/web/src/theme/components/tabs.ts @@ -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), diff --git a/invokeai/frontend/web/src/theme/util/isMobile.ts b/invokeai/frontend/web/src/theme/util/isMobile.ts new file mode 100644 index 0000000000..c84d8f16c1 --- /dev/null +++ b/invokeai/frontend/web/src/theme/util/isMobile.ts @@ -0,0 +1,5 @@ +export let isMobile = false; + +export function updateIsMobile() { + isMobile = window.innerWidth <= 768 || document.body.clientWidth <= 768; +} diff --git a/invokeai/frontend/web/yarn.lock b/invokeai/frontend/web/yarn.lock index 1a40014efe..aececc2eb5 100644 --- a/invokeai/frontend/web/yarn.lock +++ b/invokeai/frontend/web/yarn.lock @@ -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" From 2ec4f5af10d5522f89ab3e972a192af01883e587 Mon Sep 17 00:00:00 2001 From: SammCheese Date: Sat, 15 Apr 2023 21:53:33 +0200 Subject: [PATCH 2/2] remove unused import to pass lint & revert package.json --- invokeai/frontend/web/package.json | 2 +- .../frontend/web/src/features/system/components/SiteHeader.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/invokeai/frontend/web/package.json b/invokeai/frontend/web/package.json index 3eccbb097a..df79fa7ad4 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -4,7 +4,7 @@ "version": "0.0.1", "scripts": { "prepare": "cd ../../../ && husky install invokeai/frontend/web/.husky", - "dev": "concurrently \"vite dev --host\" \"yarn run theme:watch\"", + "dev": "concurrently \"vite dev\" \"yarn run theme:watch\"", "build": "yarn run lint && vite build", "preview": "vite preview", "lint:madge": "madge --circular src/main.tsx", diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx index 572d82fef8..ca0fef9426 100644 --- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx +++ b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx @@ -1,5 +1,5 @@ import { Box, Flex, Grid } from '@chakra-ui/react'; -import React, { useState } from 'react'; +import { useState } from 'react'; import ModelSelect from './ModelSelect'; import StatusIndicator from './StatusIndicator';