github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-04-23 03:00:31 -04:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): queue count badge showing on model/queue tab

Browse Source
This commit is contained in:
psychedelicious
2024-09-09 09:37:51 +10:00
parent 400ef8cdc3
commit eff9ddc980
3 changed files with 21 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
invokeai/frontend/web/src/features/queue/components/QueueCountBadge.tsx
View File

@@ -1,6 +1,9 @@
import { Badge, Portal } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { $isParametersPanelOpen } from 'features/ui/store/uiSlice';
import { createSelector } from '@reduxjs/toolkit';
import { useAppSelector } from 'app/store/storeHooks';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { $isParametersPanelOpen, TABS_WITH_OPTIONS_PANEL } from 'features/ui/store/uiSlice';
import type { RefObject } from 'react';
import { memo, useEffect, useState } from 'react';
import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
@@ -9,8 +12,13 @@ type Props = {
targetRef: RefObject<HTMLDivElement>;
};
const selectActiveTabShouldShowBadge = createSelector(selectActiveTab, (activeTab) =>
TABS_WITH_OPTIONS_PANEL.includes(activeTab)
);
export const QueueCountBadge = memo(({ targetRef }: Props) => {
const [badgePos, setBadgePos] = useState<{ x: string; y: string } | null>(null);
const activeTabShouldShowBadge = useAppSelector(selectActiveTabShouldShowBadge);
const isParametersPanelOpen = useStore($isParametersPanelOpen);
const { queueSize } = useGetQueueStatusQuery(undefined, {
selectFromResult: (res) => ({
@@ -56,6 +64,9 @@ export const QueueCountBadge = memo(({ targetRef }: Props) => {
if (!isParametersPanelOpen) {
return null;
}
if (!activeTabShouldShowBadge) {
return null;
}
return (
<Portal>

12
invokeai/frontend/web/src/features/ui/components/AppContent.tsx
View File

@@ -20,8 +20,13 @@ import { VerticalNavBar } from 'features/ui/components/VerticalNavBar';
import type { UsePanelOptions } from 'features/ui/hooks/usePanel';
import { usePanel } from 'features/ui/hooks/usePanel';
import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
import { $isGalleryPanelOpen, $isParametersPanelOpen, selectUiSlice } from 'features/ui/store/uiSlice';
import type { TabName } from 'features/ui/store/uiTypes';
import {
$isGalleryPanelOpen,
$isParametersPanelOpen,
selectUiSlice,
TABS_WITH_GALLERY_PANEL,
TABS_WITH_OPTIONS_PANEL,
} from 'features/ui/store/uiSlice';
import type { CSSProperties } from 'react';
import { memo, useMemo, useRef } from 'react';
import { useHotkeys } from 'react-hotkeys-hook';
@@ -31,9 +36,6 @@ import { Panel, PanelGroup } from 'react-resizable-panels';
import ParametersPanelUpscale from './ParametersPanels/ParametersPanelUpscale';
import ResizeHandle from './tabs/ResizeHandle';
const TABS_WITH_GALLERY_PANEL: TabName[] = ['generation', 'upscaling', 'workflows'] as const;
const TABS_WITH_OPTIONS_PANEL: TabName[] = ['generation', 'upscaling', 'workflows'] as const;
const panelStyles: CSSProperties = { position: 'relative', height: '100%', width: '100%' };
const GALLERY_MIN_SIZE_PX = 310;
const GALLERY_MIN_SIZE_PCT = 20;

2
invokeai/frontend/web/src/features/ui/store/uiSlice.ts
View File

@@ -80,3 +80,5 @@ export const uiPersistConfig: PersistConfig<UIState> = {
export const $isGalleryPanelOpen = atom(true);
export const $isParametersPanelOpen = atom(true);
export const TABS_WITH_GALLERY_PANEL: TabName[] = ['generation', 'upscaling', 'workflows'] as const;
export const TABS_WITH_OPTIONS_PANEL: TabName[] = ['generation', 'upscaling', 'workflows'] as const;