From 9a43362127b8ad973d79ed9b7d3b0382aa2d0590 Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Mon, 17 Apr 2023 13:51:08 +1200 Subject: [PATCH] Revert "Merge branch 'responsive-ui' of https://github.com/SammCheese/InvokeAI into pr/3207" This reverts commit 866024ea6c020ac9a8037dfdf6ae5db9b95c4d32, reversing changes made to 601cc1f92c433cce517684940c0ce448286bf928. --- invokeai/frontend/web/package.json | 1 - invokeai/frontend/web/src/Loading.tsx | 2 - .../IAICanvasToolbar/IAICanvasToolbar.tsx | 1 - .../components/CurrentImageButtons.tsx | 1 - .../components/CurrentImageDisplay.tsx | 3 +- .../AccordionItems/InvokeAccordionItem.tsx | 2 +- .../components/PromptInput/PromptInput.tsx | 3 +- .../components/InvokeAILogoComponent.tsx | 27 ++- .../features/system/components/SiteHeader.tsx | 158 ++++++++++++------ .../system/components/SiteHeaderMenu.tsx | 120 ------------- .../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 +--- 15 files changed, 157 insertions(+), 314 deletions(-) delete mode 100644 invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx delete 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 df79fa7ad4..c47948746d 100644 --- a/invokeai/frontend/web/package.json +++ b/invokeai/frontend/web/package.json @@ -65,7 +65,6 @@ "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 42fb6ef6f2..671c2cd640 100644 --- a/invokeai/frontend/web/src/Loading.tsx +++ b/invokeai/frontend/web/src/Loading.tsx @@ -1,7 +1,6 @@ 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; @@ -10,7 +9,6 @@ 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/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx index 12da790f3e..4e53039e38 100644 --- a/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx +++ b/invokeai/frontend/web/src/features/canvas/components/IAICanvasToolbar/IAICanvasToolbar.tsx @@ -233,7 +233,6 @@ 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 b6517ee9b7..18457d0cb3 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageButtons.tsx @@ -409,7 +409,6 @@ 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 fa2cbc464b..6c46e14391 100644 --- a/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx +++ b/invokeai/frontend/web/src/features/gallery/components/CurrentImageDisplay.tsx @@ -7,7 +7,6 @@ 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], @@ -37,7 +36,7 @@ const CurrentImageDisplay = () => { flexDirection: 'column', height: '100%', width: '100%', - rowGap: isMobile ? 0 : 4, + rowGap: 4, borderRadius: 'base', }} > 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 18ba3bbe81..b742f5a37e 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 3e4ddcea1d..3d5c38ddc5 100644 --- a/invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx +++ b/invokeai/frontend/web/src/features/parameters/components/PromptInput/PromptInput.tsx @@ -15,7 +15,6 @@ 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], @@ -77,7 +76,7 @@ const PromptInput = () => { onKeyDown={handleKeyDown} resize="vertical" ref={promptRef} - minH={isMobile ? 20 : 40} + minH={40} /> diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx index 04b3c5c242..ac7dc39a78 100644 --- a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx +++ b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx @@ -2,7 +2,6 @@ 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( @@ -12,20 +11,18 @@ 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 ca0fef9426..3f5503ee54 100644 --- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx +++ b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx @@ -1,63 +1,127 @@ -import { Box, Flex, Grid } from '@chakra-ui/react'; -import { useState } from 'react'; -import ModelSelect from './ModelSelect'; -import StatusIndicator from './StatusIndicator'; +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 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 logo, model select and status message. + * Header, includes color mode toggle, settings button, status message. */ const SiteHeader = () => { - const [isMenuOpen, setIsMenuOpen] = useState(false); - - const handleMenuToggle = () => { - setIsMenuOpen(!isMenuOpen); - }; + const { t } = useTranslation(); return ( - <> - - - + + - - + + - + - - - - - - - + + } + /> + - - + + } + /> + - - - - - - - {isMenuOpen && } - - + + + + + + } + /> + + + + } + /> + + + + } + /> + + + + } + /> + + + ); }; diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx deleted file mode 100644 index 095e5aede6..0000000000 --- a/invokeai/frontend/web/src/features/system/components/SiteHeaderMenu.tsx +++ /dev/null @@ -1,120 +0,0 @@ -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/tabs/ImageToImage/ImageToImageContent.tsx b/invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageContent.tsx index efbfedf19c..db62d2ed80 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,7 +4,6 @@ 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', @@ -29,44 +28,22 @@ 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 7c6866bd15..886e3a5331 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,39 +1,20 @@ 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 a0b14b87a4..5eb1a36013 100644 --- a/invokeai/frontend/web/src/theme/components/tabs.ts +++ b/invokeai/frontend/web/src/theme/components/tabs.ts @@ -4,8 +4,6 @@ import { defineStyle, } from '@chakra-ui/styled-system'; -import { isMobile } from 'theme/util/isMobile'; - const { defineMultiStyleConfig, definePartsStyle } = createMultiStyleConfigHelpers(parts.keys); @@ -16,26 +14,16 @@ const invokeAIRoot = defineStyle((_props) => { }; }); -const invokeAIRootMobile = defineStyle((_props) => { - return { - position: 'relative', - display: 'block', - }; -}); - const invokeAITab = defineStyle((_props) => ({})); const invokeAITablist = defineStyle((_props) => ({ display: 'flex', - flexDirection: isMobile ? 'row' : 'column', + flexDirection: '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', @@ -58,7 +46,7 @@ const invokeAITabpanel = defineStyle((_props) => ({ })); const invokeAI = definePartsStyle((props) => ({ - root: isMobile ? invokeAIRootMobile(props) : invokeAIRoot(props), + root: 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 deleted file mode 100644 index c84d8f16c1..0000000000 --- a/invokeai/frontend/web/src/theme/util/isMobile.ts +++ /dev/null @@ -1,5 +0,0 @@ -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 aececc2eb5..1a40014efe 100644 --- a/invokeai/frontend/web/yarn.lock +++ b/invokeai/frontend/web/yarn.lock @@ -2201,11 +2201,6 @@ 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" @@ -3285,11 +3280,6 @@ 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" @@ -3937,13 +3927,6 @@ 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" @@ -4457,7 +4440,7 @@ pretty-ms@^7.0.1: dependencies: parse-ms "^2.1.0" -prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.8.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== @@ -4647,16 +4630,6 @@ 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" @@ -4939,11 +4912,6 @@ 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"