Mirrored_Repos/InvokeAI
1
0
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI synced 2024-08-30 20:32:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): more fiddly queue count layout stuff

Browse Source
This commit is contained in:
psychedelicious 2024-08-29 08:54:07 +10:00
parent d60605fcd8
commit 6c1fb2d06e
1 changed files with 7 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
invokeai/frontend/web/src/features/queue/components/QueueActionsMenuButton.tsx
View File

@ -9,6 +9,7 @@ import {
Portal, Portal,
useDisclosure, useDisclosure,
} from '@invoke-ai/ui-library'; } from '@invoke-ai/ui-library';
import { useStore } from '@nanostores/react';
import { useAppDispatch } from 'app/store/storeHooks'; import { useAppDispatch } from 'app/store/storeHooks';
import type { Coordinate } from 'features/controlLayers/store/types'; import type { Coordinate } from 'features/controlLayers/store/types';
import { useClearQueueConfirmationAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog'; import { useClearQueueConfirmationAlertDialog } from 'features/queue/components/ClearQueueConfirmationAlertDialog';
@ -16,7 +17,7 @@ import { useClearQueue } from 'features/queue/hooks/useClearQueue';
import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor'; import { usePauseProcessor } from 'features/queue/hooks/usePauseProcessor';
import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor'; import { useResumeProcessor } from 'features/queue/hooks/useResumeProcessor';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus'; import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { setActiveTab } from 'features/ui/store/uiSlice'; import { $isParametersPanelOpen, setActiveTab } from 'features/ui/store/uiSlice';
import type { RefObject } from 'react'; import type { RefObject } from 'react';
import { memo, useCallback, useEffect, useRef, useState } from 'react'; import { memo, useCallback, useEffect, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next'; import { useTranslation } from 'react-i18next';
@ -34,6 +35,7 @@ export const QueueActionsMenuButton = memo(({ containerRef }: Props) => {
const { t } = useTranslation(); const { t } = useTranslation();
const [badgePos, setBadgePos] = useState<Coordinate | null>(null); const [badgePos, setBadgePos] = useState<Coordinate | null>(null);
const menuButtonRef = useRef<HTMLButtonElement>(null); const menuButtonRef = useRef<HTMLButtonElement>(null);
const isParametersPanelOpen = useStore($isParametersPanelOpen);
const dialogState = useClearQueueConfirmationAlertDialog(); const dialogState = useClearQueueConfirmationAlertDialog();
const isPauseEnabled = useFeatureStatus('pauseQueue'); const isPauseEnabled = useFeatureStatus('pauseQueue');
const isResumeEnabled = useFeatureStatus('resumeQueue'); const isResumeEnabled = useFeatureStatus('resumeQueue');
@ -66,6 +68,9 @@ export const QueueActionsMenuButton = memo(({ containerRef }: Props) => {
const menuButton = menuButtonRef.current; const menuButton = menuButtonRef.current;
const cb = () => { const cb = () => {
if (!$isParametersPanelOpen.get()) {
return;
}
const { x, y } = menuButton.getBoundingClientRect(); const { x, y } = menuButton.getBoundingClientRect();
setBadgePos({ x: x - 10, y: y - 10 }); setBadgePos({ x: x - 10, y: y - 10 });
}; };
@ -120,7 +125,7 @@ export const QueueActionsMenuButton = memo(({ containerRef }: Props) => {
</MenuItem> </MenuItem>
</MenuList> </MenuList>
</Menu> </Menu>
{queueSize > 0 && badgePos !== null && ( {queueSize > 0 && badgePos !== null && isParametersPanelOpen && (
<Portal> <Portal>
<Badge <Badge
pos="absolute" pos="absolute"