github/InvokeAI
1
1
Fork 0
mirror of https://github.com/invoke-ai/InvokeAI.git synced 2026-02-03 21:55:10 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): reworked layout (wip)

Browse Source
This commit is contained in:
psychedelicious
2024-09-09 21:53:36 +10:00
parent b67c369bdb
commit 3ed29a16a8
52 changed files with 656 additions and 628 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
invokeai/frontend/web/src/features/queue/components/QueueControls.tsx
View File

@@ -1,25 +1,21 @@
import { Flex, Spacer } from '@invoke-ai/ui-library';
import { useAppSelector } from 'app/store/storeHooks';
import { CanvasSendToToggle } from 'features/controlLayers/components/CanvasSendToToggle';
import { ClearQueueIconButton } from 'features/queue/components/ClearQueueIconButton';
import QueueFrontButton from 'features/queue/components/QueueFrontButton';
import ProgressBar from 'features/system/components/ProgressBar';
import { useFeatureStatus } from 'features/system/hooks/useFeatureStatus';
import { selectActiveTab } from 'features/ui/store/uiSelectors';
import { memo } from 'react';
import { InvokeQueueBackButton } from './InvokeQueueBackButton';
const QueueControls = () => {
const isPrependEnabled = useFeatureStatus('prependQueue');
const tab = useAppSelector(selectActiveTab);
return (
<Flex w="full" position="relative" borderRadius="base" gap={2} flexDir="column">
<Flex gap={2}>
{isPrependEnabled && <QueueFrontButton />}
<InvokeQueueBackButton />
<Spacer />
{tab === 'generation' && <CanvasSendToToggle />}
<ClearQueueIconButton />
</Flex>
<ProgressBar />

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

@@ -3,7 +3,7 @@ import { useStore } from '@nanostores/react';
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 { $isLeftPanelOpen, TABS_WITH_LEFT_PANEL } from 'features/ui/store/uiSlice';
import type { RefObject } from 'react';
import { memo, useEffect, useState } from 'react';
import { useGetQueueStatusQuery } from 'services/api/endpoints/queue';
@@ -13,13 +13,13 @@ type Props = {
};
const selectActiveTabShouldShowBadge = createSelector(selectActiveTab, (activeTab) =>
TABS_WITH_OPTIONS_PANEL.includes(activeTab)
TABS_WITH_LEFT_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 isParametersPanelOpen = useStore($isLeftPanelOpen);
const { queueSize } = useGetQueueStatusQuery(undefined, {
selectFromResult: (res) => ({
queueSize: res.data ? res.data.queue.pending + res.data.queue.in_progress : 0,
@@ -39,7 +39,7 @@ export const QueueCountBadge = memo(({ targetRef }: Props) => {
}
const cb = () => {
if (!$isParametersPanelOpen.get()) {
if (!$isLeftPanelOpen.get()) {
return;
}
const { x, y } = target.getBoundingClientRect();