From 2250bca8d92f983b511556ffd5e72187503e616b Mon Sep 17 00:00:00 2001 From: blessedcoolant <54517381+blessedcoolant@users.noreply.github.com> Date: Thu, 4 Jan 2024 00:17:57 +0530 Subject: [PATCH] feat: Remove Header Remove header and incorporate everything else into the side bar and other areas --- invokeai/frontend/web/public/locales/en.json | 1 + .../frontend/web/src/app/components/App.tsx | 14 +-- .../queue/components/QueueControls.tsx | 6 +- .../components/InvokeAILogoComponent.tsx | 42 ++++--- .../system/components/ProgressBar.tsx | 9 +- .../components/SettingsModal/SettingsMenu.tsx | 101 +++++++++++++++++ .../features/system/components/SiteHeader.tsx | 105 ------------------ .../system/components/StatusIndicator.tsx | 40 +++---- .../src/features/ui/components/InvokeTabs.tsx | 22 ++-- 9 files changed, 165 insertions(+), 175 deletions(-) create mode 100644 invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx delete mode 100644 invokeai/frontend/web/src/features/system/components/SiteHeader.tsx diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json index 3c09839078..8f0560e3e9 100644 --- a/invokeai/frontend/web/public/locales/en.json +++ b/invokeai/frontend/web/public/locales/en.json @@ -156,6 +156,7 @@ "save": "Save", "saveAs": "Save As", "settingsLabel": "Settings", + "preferencesLabel": "Preferences", "simple": "Simple", "somethingWentWrong": "Something went wrong", "statusConnected": "Connected", diff --git a/invokeai/frontend/web/src/app/components/App.tsx b/invokeai/frontend/web/src/app/components/App.tsx index 4a88c2af58..f7c8dae831 100644 --- a/invokeai/frontend/web/src/app/components/App.tsx +++ b/invokeai/frontend/web/src/app/components/App.tsx @@ -1,9 +1,7 @@ import { Flex, Grid } from '@chakra-ui/react'; -import { useStore } from '@nanostores/react'; import { useSocketIO } from 'app/hooks/useSocketIO'; import { useLogger } from 'app/logging/useLogger'; import { appStarted } from 'app/store/middleware/listenerMiddleware/listeners/appStarted'; -import { $headerComponent } from 'app/store/nanostores/headerComponent'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; import type { PartialAppConfig } from 'app/types/invokeai'; import ImageUploader from 'common/components/ImageUploader'; @@ -13,7 +11,6 @@ import { useGlobalModifiersInit } from 'common/hooks/useGlobalModifiers'; import ChangeBoardModal from 'features/changeBoardModal/components/ChangeBoardModal'; import DeleteImageModal from 'features/deleteImageModal/components/DeleteImageModal'; import { DynamicPromptsModal } from 'features/dynamicPrompts/components/DynamicPromptsPreviewModal'; -import SiteHeader from 'features/system/components/SiteHeader'; import { configChanged } from 'features/system/store/configSlice'; import { languageSelector } from 'features/system/store/systemSelectors'; import InvokeTabs from 'features/ui/components/InvokeTabs'; @@ -68,8 +65,6 @@ const App = ({ config = DEFAULT_CONFIG, selectedImage }: Props) => { dispatch(appStarted()); }, [dispatch]); - const headerComponent = useStore($headerComponent); - return ( { > - - {headerComponent || } - - - - + + + diff --git a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx index 4588084a52..57704c754b 100644 --- a/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx +++ b/invokeai/frontend/web/src/features/queue/components/QueueControls.tsx @@ -3,6 +3,7 @@ import { InvButtonGroup } from 'common/components/InvButtonGroup/InvButtonGroup' import ClearQueueButton from 'features/queue/components/ClearQueueButton'; import QueueFrontButton from 'features/queue/components/QueueFrontButton'; import ProgressBar from 'features/system/components/ProgressBar'; +import StatusIndicator from 'features/system/components/StatusIndicator'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { memo } from 'react'; @@ -29,8 +30,9 @@ const QueueControls = () => { {isPauseEnabled && } */} - - + + + ); diff --git a/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx b/invokeai/frontend/web/src/features/system/components/InvokeAILogoComponent.tsx index d1abbe7aae..e96e0ea12e 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, Image } from '@chakra-ui/react'; import InvokeLogoYellow from 'assets/images/invoke-key-ylw-sm.svg'; import { InvText } from 'common/components/InvText/wrapper'; +import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import type { AnimationProps } from 'framer-motion'; import { AnimatePresence, motion } from 'framer-motion'; import { memo, useRef } from 'react'; @@ -14,8 +15,29 @@ const InvokeAILogoComponent = () => { const isHovered = useHoverDirty(ref); return ( - + + + {isHovered && appVersion && ( + + + v{appVersion.version} + + + )} + + + } + > invoke-logo { minH="24px" userSelect="none" /> - - - {isHovered && appVersion && ( - - - v{appVersion.version} - - - )} - - - + ); }; diff --git a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx index c5c470a778..ceee058a62 100644 --- a/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx +++ b/invokeai/frontend/web/src/features/system/components/ProgressBar.tsx @@ -16,7 +16,12 @@ const progressBarSelector = createMemoizedSelector( } ); -const ProgressBar = () => { +type ProgressBarProps = { + height?: number | string; +}; + +const ProgressBar = (props: ProgressBarProps) => { + const { height = 'full' } = props; const { t } = useTranslation(); const { data: queueStatus } = useGetQueueStatusQuery(); const { hasSteps, value, isConnected } = useAppSelector(progressBarSelector); @@ -29,7 +34,7 @@ const ProgressBar = () => { isIndeterminate={ isConnected && Boolean(queueStatus?.queue.in_progress) && !hasSteps } - h="full" + h={height} w="full" colorScheme="invokeYellow" /> diff --git a/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx new file mode 100644 index 0000000000..11550458db --- /dev/null +++ b/invokeai/frontend/web/src/features/system/components/SettingsModal/SettingsMenu.tsx @@ -0,0 +1,101 @@ +import { useDisclosure } from '@chakra-ui/react'; +import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; +import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; +import { InvMenuList } from 'common/components/InvMenu/InvMenuList'; +import { + InvMenu, + InvMenuButton, + InvMenuGroup, +} from 'common/components/InvMenu/wrapper'; +import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; +import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger'; +import HotkeysModal from 'features/system/components/HotkeysModal/HotkeysModal'; +import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; +import { memo } from 'react'; +import { useTranslation } from 'react-i18next'; +import { + FaBars, + FaBug, + FaCog, + FaDiscord, + FaGithub, + FaKeyboard, +} from 'react-icons/fa'; + +import SettingsModal from './SettingsModal'; + +const SettingsMenu = () => { + const { t } = useTranslation(); + const { isOpen, onOpen, onClose } = useDisclosure(); + useGlobalMenuCloseTrigger(onClose); + + const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled; + const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled; + const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled; + + const githubLink = 'http://github.com/invoke-ai/InvokeAI'; + const discordLink = 'https://discord.gg/ZmtBAhwWhy'; + + return ( + + + } + boxSize={8} + /> + + + + + {isGithubLinkEnabled && ( + } + > + {t('common.githubLabel')} + + )} + {isBugLinkEnabled && ( + } + > + {t('common.reportBugLabel')} + + )} + {isDiscordLinkEnabled && ( + } + > + {t('common.discordLabel')} + + )} + + + + }> + {t('common.hotkeysLabel')} + + + + }> + {t('common.settingsLabel')} + + + + + + ); +}; + +export default memo(SettingsMenu); diff --git a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx b/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx deleted file mode 100644 index 5c7b5285a4..0000000000 --- a/invokeai/frontend/web/src/features/system/components/SiteHeader.tsx +++ /dev/null @@ -1,105 +0,0 @@ -import { Flex, Spacer, useDisclosure } from '@chakra-ui/react'; -import { InvIconButton } from 'common/components/InvIconButton/InvIconButton'; -import { InvMenuItem } from 'common/components/InvMenu/InvMenuItem'; -import { InvMenuList } from 'common/components/InvMenu/InvMenuList'; -import { - InvMenu, - InvMenuButton, - InvMenuGroup, -} from 'common/components/InvMenu/wrapper'; -import { useGlobalMenuCloseTrigger } from 'common/hooks/useGlobalMenuCloseTrigger'; -import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; -import { memo } from 'react'; -import { useTranslation } from 'react-i18next'; -import { - FaBars, - FaBug, - FaCog, - FaDiscord, - FaGithub, - FaKeyboard, -} from 'react-icons/fa'; - -import HotkeysModal from './HotkeysModal/HotkeysModal'; -import InvokeAILogoComponent from './InvokeAILogoComponent'; -import SettingsModal from './SettingsModal/SettingsModal'; -import StatusIndicator from './StatusIndicator'; - -const SiteHeader = () => { - const { t } = useTranslation(); - const { isOpen, onOpen, onClose } = useDisclosure(); - useGlobalMenuCloseTrigger(onClose); - - const isBugLinkEnabled = useFeatureStatus('bugLink').isFeatureEnabled; - const isDiscordLinkEnabled = useFeatureStatus('discordLink').isFeatureEnabled; - const isGithubLinkEnabled = useFeatureStatus('githubLink').isFeatureEnabled; - - const githubLink = 'http://github.com/invoke-ai/InvokeAI'; - const discordLink = 'https://discord.gg/ZmtBAhwWhy'; - - return ( - - - - - - - } - boxSize={8} - /> - - - {isGithubLinkEnabled && ( - } - > - {t('common.githubLabel')} - - )} - {isBugLinkEnabled && ( - } - > - {t('common.reportBugLabel')} - - )} - {isDiscordLinkEnabled && ( - } - > - {t('common.discordLabel')} - - )} - - - - }> - {t('common.hotkeysLabel')} - - - - }> - {t('common.settingsLabel')} - - - - - - - ); -}; - -export default memo(SiteHeader); diff --git a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx index b92392b9f0..2959777bc0 100644 --- a/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx +++ b/invokeai/frontend/web/src/features/system/components/StatusIndicator.tsx @@ -3,9 +3,8 @@ import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { stateSelector } from 'app/store/store'; import { useAppSelector } from 'app/store/storeHooks'; import { InvText } from 'common/components/InvText/wrapper'; +import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import { STATUS_TRANSLATION_KEYS } from 'features/system/store/types'; -import type { AnimationProps } from 'framer-motion'; -import { AnimatePresence, motion } from 'framer-motion'; import type { ResourceKey } from 'i18next'; import { memo, useMemo, useRef } from 'react'; import { useTranslation } from 'react-i18next'; @@ -54,15 +53,13 @@ const StatusIndicator = () => { const isHovered = useHoverDirty(ref); return ( - - - {isHovered && ( - + + { > {t(statusTranslationKey as ResourceKey)} - - )} - - + ) + } + > + + ); }; export default memo(StatusIndicator); - -const initial: AnimationProps['initial'] = { - opacity: 0, -}; -const animate: AnimationProps['animate'] = { - opacity: 1, - transition: { duration: 0.1 }, -}; -const exit: AnimationProps['exit'] = { - opacity: 0, - transition: { delay: 0.8 }, -}; diff --git a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx index bb4e052b89..a27a09987b 100644 --- a/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx +++ b/invokeai/frontend/web/src/features/ui/components/InvokeTabs.tsx @@ -1,4 +1,4 @@ -import { Spacer } from '@chakra-ui/react'; +import { Flex, Spacer } from '@chakra-ui/react'; import { createMemoizedSelector } from 'app/store/createMemoizedSelector'; import { stateSelector } from 'app/store/store'; import { useAppDispatch, useAppSelector } from 'app/store/storeHooks'; @@ -13,6 +13,8 @@ import { import { InvTooltip } from 'common/components/InvTooltip/InvTooltip'; import ImageGalleryContent from 'features/gallery/components/ImageGalleryContent'; import NodeEditorPanelGroup from 'features/nodes/components/sidePanel/NodeEditorPanelGroup'; +import InvokeAILogoComponent from 'features/system/components/InvokeAILogoComponent'; +import SettingsMenu from 'features/system/components/SettingsModal/SettingsMenu'; import type { UsePanelOptions } from 'features/ui/hooks/usePanel'; import { usePanel } from 'features/ui/hooks/usePanel'; import { usePanelStorage } from 'features/ui/hooks/usePanelStorage'; @@ -249,10 +251,14 @@ const InvokeTabs = () => { gap={4} isLazy > - - {tabs} - - + + + + {tabs} + + + + { onCollapse={onCollapseOptionsPanel} onExpand={onExpandOptionsPanel} collapsible - style={paddingTop4} > {activeTabName === 'nodes' ? ( @@ -287,7 +292,7 @@ const InvokeTabs = () => { /> )} - + {tabPanels} @@ -308,7 +313,6 @@ const InvokeTabs = () => { onCollapse={onCollapseGalleryPanel} onExpand={onExpandGalleryPanel} collapsible - style={paddingTop4} > @@ -320,5 +324,3 @@ const InvokeTabs = () => { }; export default memo(InvokeTabs); - -const paddingTop4: CSSProperties = { paddingTop: '8px' };