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

feat(ui): rename "Generation" tab to "Canvas", updated icons

Browse Source
This commit is contained in:
psychedelicious
2024-09-14 17:57:48 +10:00
parent 2241d115c3
commit e48ec1ce6d
12 changed files with 36 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
invokeai/frontend/web/src/features/controlLayers/components/CanvasAlerts/CanvasAlertsSendingTo.tsx
View File

@@ -68,7 +68,7 @@ const ActivateCanvasButton = (props: PropsWithChildren) => {
const dispatch = useAppDispatch();
const imageViewer = useImageViewer();
const onClick = useCallback(() => {
dispatch(setActiveTab('generation'));
dispatch(setActiveTab('canvas'));
setRightPanelTabToLayers();
imageViewer.close();
}, [dispatch, imageViewer]);

9
invokeai/frontend/web/src/features/controlLayers/components/StagingArea/StagingAreaToolbar.tsx
View File

@@ -22,6 +22,7 @@ import {
PiEyeBold,
PiEyeSlashBold,
PiFloppyDiskBold,
PiStackPlusBold,
PiTrashSimpleBold,
PiXBold,
} from 'react-icons/pi';
@@ -179,6 +180,14 @@ export const StagingAreaToolbar = memo(() => {
colorScheme="invokeBlue"
isDisabled={!selectedImage || !selectedImage.imageDTO.is_intermediate}
/>
<IconButton
tooltip={`${t('unifiedCanvas.saveToGallery')} (Shift+S)`}
aria-label={t('unifiedCanvas.saveToGallery')}
icon={<PiStackPlusBold />}
onClick={onSaveStagingImage}
colorScheme="invokeBlue"
isDisabled={!selectedImage}
/>
<IconButton
tooltip={`${t('unifiedCanvas.discardCurrent')}`}
aria-label={t('unifiedCanvas.discardCurrent')}

2
invokeai/frontend/web/src/features/gallery/components/ImageContextMenu/ImageMenuItemSendToCanvas.tsx
View File

@@ -31,7 +31,7 @@ export const ImageMenuItemSendToCanvas = memo(() => {
};
dispatch(sentImageToCanvas());
dispatch(rasterLayerAdded({ overrides, isSelected: true }));
dispatch(setActiveTab('generation'));
dispatch(setActiveTab('canvas'));
imageViewer.close();
toast({
id: 'SENT_TO_CANVAS',

2
invokeai/frontend/web/src/features/gallery/components/ImageMetadataViewer/ImageMetadataActions.tsx
View File

@@ -33,7 +33,7 @@ const ImageMetadataActions = (props: Props) => {
<MetadataItem metadata={metadata} handlers={handlers.scheduler} />
<MetadataItem metadata={metadata} handlers={handlers.cfgScale} />
<MetadataItem metadata={metadata} handlers={handlers.cfgRescaleMultiplier} />
{activeTabName !== 'generation' && <MetadataItem metadata={metadata} handlers={handlers.strength} />}
{activeTabName !== 'canvas' && <MetadataItem metadata={metadata} handlers={handlers.strength} />}
<MetadataItem metadata={metadata} handlers={handlers.hrfEnabled} />
<MetadataItem metadata={metadata} handlers={handlers.hrfMethod} />
<MetadataItem metadata={metadata} handlers={handlers.hrfStrength} />

4
invokeai/frontend/web/src/features/gallery/hooks/useImageActions.ts
View File

@@ -66,13 +66,13 @@ export const useImageActions = (image_name?: string) => {
}, [dispatch, activeStylePresetId, t]);
const recallAll = useCallback(() => {
parseAndRecallAllMetadata(metadata, activeTabName === 'generation');
parseAndRecallAllMetadata(metadata, activeTabName === 'canvas');
clearStylePreset();
}, [activeTabName, metadata, clearStylePreset]);
const remix = useCallback(() => {
// Recalls all metadata parameters except seed
parseAndRecallAllMetadata(metadata, activeTabName === 'generation', ['seed']);
parseAndRecallAllMetadata(metadata, activeTabName === 'canvas', ['seed']);
clearStylePreset();
}, [activeTabName, metadata, clearStylePreset]);

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

@@ -20,7 +20,7 @@ const QueueControls = () => {
{isPrependEnabled && <QueueFrontButton />}
<InvokeQueueBackButton />
<Spacer />
{tab === 'generation' && <SendToToggle />}
{tab === 'canvas' && <SendToToggle />}
<ClearQueueIconButton />
</Flex>
<ProgressBar />

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

@@ -156,7 +156,7 @@ AppContent.displayName = 'AppContent';
const RightPanelContent = memo(() => {
const tab = useAppSelector(selectActiveTab);
if (tab === 'generation') {
if (tab === 'canvas') {
return <CanvasRightPanel />;
}
@@ -171,7 +171,7 @@ RightPanelContent.displayName = 'RightPanelContent';
const LeftPanelContent = memo(() => {
const tab = useAppSelector(selectActiveTab);
if (tab === 'generation') {
if (tab === 'canvas') {
return <ParametersPanelTextToImage />;
}
if (tab === 'upscaling') {
@@ -188,7 +188,7 @@ LeftPanelContent.displayName = 'LeftPanelContent';
const MainPanelContent = memo(() => {
const tab = useAppSelector(selectActiveTab);
if (tab === 'generation') {
if (tab === 'canvas') {
return <CanvasMainPanelContent />;
}
if (tab === 'upscaling') {

14
invokeai/frontend/web/src/features/ui/components/VerticalNavBar.tsx
View File

@@ -7,9 +7,7 @@ import StatusIndicator from 'features/system/components/StatusIndicator';
import { TabMountGate } from 'features/ui/components/TabMountGate';
import { memo } from 'react';
import { useTranslation } from 'react-i18next';
import { MdZoomOutMap } from 'react-icons/md';
import { PiFlowArrowBold } from 'react-icons/pi';
import { RiBox2Line, RiInputMethodLine, RiPlayList2Fill } from 'react-icons/ri';
import { PiArrowsOutBold, PiBoundingBoxBold, PiCubeBold, PiFlowArrowBold, PiQueueBold } from 'react-icons/pi';
import { TabButton } from './TabButton';
@@ -21,20 +19,20 @@ export const VerticalNavBar = memo(() => {
<Flex flexDir="column" alignItems="center" py={2} gap={4}>
<InvokeAILogoComponent />
<Flex gap={4} pt={6} h="full" flexDir="column">
<TabMountGate tab="generation">
<TabButton tab="generation" icon={<RiInputMethodLine />} label={t('ui.tabs.generation')} />
<TabMountGate tab="canvas">
<TabButton tab="canvas" icon={<PiBoundingBoxBold />} label={t('ui.tabs.canvas')} />
</TabMountGate>
<TabMountGate tab="upscaling">
<TabButton tab="upscaling" icon={<MdZoomOutMap />} label={t('ui.tabs.upscaling')} />
<TabButton tab="upscaling" icon={<PiArrowsOutBold />} label={t('ui.tabs.upscaling')} />
</TabMountGate>
<TabMountGate tab="workflows">
<TabButton tab="workflows" icon={<PiFlowArrowBold />} label={t('ui.tabs.workflows')} />
</TabMountGate>
<TabMountGate tab="models">
<TabButton tab="models" icon={<RiBox2Line />} label={t('ui.tabs.models')} />
<TabButton tab="models" icon={<PiCubeBold />} label={t('ui.tabs.models')} />
</TabMountGate>
<TabMountGate tab="queue">
<TabButton tab="queue" icon={<RiPlayList2Fill />} label={t('ui.tabs.queue')} />
<TabButton tab="queue" icon={<PiQueueBold />} label={t('ui.tabs.queue')} />
</TabMountGate>
</Flex>
<Spacer />

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

@@ -7,8 +7,8 @@ import { atom } from 'nanostores';
import type { TabName, UIState } from './uiTypes';
const initialUIState: UIState = {
_version: 2,
activeTab: 'generation',
_version: 3,
activeTab: 'canvas',
shouldShowImageDetails: false,
shouldShowProgressInViewer: true,
accordions: {},
@@ -63,6 +63,10 @@ const migrateUIState = (state: any): any => {
state.activeTab = 'generation';
state._version = 2;
}
if (state._version === 2) {
state.activeTab = 'canvas';
state._version = 3;
}
return state;
};
@@ -75,11 +79,11 @@ export const uiPersistConfig: PersistConfig<UIState> = {
export const LEFT_PANEL_MIN_SIZE_PX = 400;
export const LEFT_PANEL_MIN_SIZE_PCT = 20;
const TABS_WITH_LEFT_PANEL: TabName[] = ['generation', 'upscaling', 'workflows'] as const;
const TABS_WITH_LEFT_PANEL: TabName[] = ['canvas', 'upscaling', 'workflows'] as const;
export const $isLeftPanelOpen = atom(true);
export const selectWithLeftPanel = createSelector(selectUiSlice, (ui) => TABS_WITH_LEFT_PANEL.includes(ui.activeTab));
const TABS_WITH_RIGHT_PANEL: TabName[] = ['generation', 'upscaling', 'workflows'] as const;
const TABS_WITH_RIGHT_PANEL: TabName[] = ['canvas', 'upscaling', 'workflows'] as const;
export const RIGHT_PANEL_MIN_SIZE_PX = 390;
export const RIGHT_PANEL_MIN_SIZE_PCT = 20;
export const $isRightPanelOpen = atom(true);

4
invokeai/frontend/web/src/features/ui/store/uiTypes.ts
View File

@@ -1,10 +1,10 @@
export type TabName = 'generation' | 'upscaling' | 'workflows' | 'models' | 'queue';
export type TabName = 'canvas' | 'upscaling' | 'workflows' | 'models' | 'queue';
export interface UIState {
/**
* Slice schema version.
*/
_version: 2;
_version: 3;
/**
* The currently active tab.
*/