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

feat(ui): align invoke buttons

Browse Source
This commit is contained in:
psychedelicious 2023-08-23 20:00:49 +10:00
parent 4f088252db
commit cfee02b753
23 changed files with 117 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
invokeai/frontend/web/src/features/nodes/components/NodeEditor.tsx
View File

@ -7,6 +7,11 @@ import { MdDeviceHub } from 'react-icons/md';
import 'reactflow/dist/style.css';
import AddNodePopover from './flow/AddNodePopover/AddNodePopover';
import { Flow } from './flow/Flow';
import TopLeftPanel from './flow/panels/TopLeftPanel/TopLeftPanel';
import TopCenterPanel from './flow/panels/TopCenterPanel/TopCenterPanel';
import TopRightPanel from './flow/panels/TopRightPanel/TopRightPanel';
import BottomLeftPanel from './flow/panels/BottomLeftPanel/BottomLeftPanel';
import MinimapPanel from './flow/panels/MinimapPanel/MinimapPanel';
const NodeEditor = () => {
const isReady = useAppSelector((state) => state.nodes.isReady);
@ -40,6 +45,11 @@ const NodeEditor = () => {
>
<Flow />
<AddNodePopover />
<TopLeftPanel />
<TopCenterPanel />
<TopRightPanel />
<BottomLeftPanel />
<MinimapPanel />
</motion.div>
)}
</AnimatePresence>

10
invokeai/frontend/web/src/features/nodes/components/flow/Flow.tsx
View File

@ -42,11 +42,6 @@ import InvocationDefaultEdge from './edges/InvocationDefaultEdge';
import CurrentImageNode from './nodes/CurrentImage/CurrentImageNode';
import InvocationNodeWrapper from './nodes/Invocation/InvocationNodeWrapper';
import NotesNode from './nodes/Notes/NotesNode';
import BottomLeftPanel from './panels/BottomLeftPanel/BottomLeftPanel';
import MinimapPanel from './panels/MinimapPanel/MinimapPanel';
import TopCenterPanel from './panels/TopCenterPanel/TopCenterPanel';
import TopLeftPanel from './panels/TopLeftPanel/TopLeftPanel';
import TopRightPanel from './panels/TopRightPanel/TopRightPanel';
const DELETE_KEYS = ['Delete', 'Backspace'];
@ -196,11 +191,6 @@ export const Flow = () => {
deleteKeyCode={DELETE_KEYS}
selectionMode={selectionMode}
>
<TopLeftPanel />
<TopCenterPanel />
<TopRightPanel />
<BottomLeftPanel />
<MinimapPanel />
<Background />
</ReactFlow>
);

11
invokeai/frontend/web/src/features/nodes/components/flow/panels/BottomLeftPanel/BottomLeftPanel.tsx
View File

@ -1,16 +1,13 @@
import { memo } from 'react';
import { Panel } from 'reactflow';
import ViewportControls from './ViewportControls';
import NodeOpacitySlider from './NodeOpacitySlider';
import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
import NodeOpacitySlider from './NodeOpacitySlider';
import ViewportControls from './ViewportControls';
const BottomLeftPanel = () => (
<Panel position="bottom-left">
<Flex sx={{ gap: 2 }}>
<Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineStart: 2 }}>
<ViewportControls />
<NodeOpacitySlider />
</Flex>
</Panel>
);
export default memo(BottomLeftPanel);

6
invokeai/frontend/web/src/features/nodes/components/flow/panels/MinimapPanel/MinimapPanel.tsx
View File

@ -1,6 +1,6 @@
import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import { useColorModeValue } from '@chakra-ui/react';
import { Flex, useColorModeValue } from '@chakra-ui/react';
import { memo } from 'react';
import { MiniMap } from 'reactflow';
@ -29,7 +29,7 @@ const MinimapPanel = () => {
);
return (
<>
<Flex sx={{ gap: 2, position: 'absolute', bottom: 2, insetInlineEnd: 2 }}>
{shouldShowMinimapPanel && (
<MiniMap
pannable
@ -40,7 +40,7 @@ const MinimapPanel = () => {
maskColor={maskColor}
/>
)}
</>
</Flex>
);
};

3
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/ResetWorkflowButton.tsx
View File

@ -6,10 +6,8 @@ import {
AlertDialogHeader,
AlertDialogOverlay,
Button,
Divider,
Flex,
Text,
VStack,
useDisclosure,
} from '@chakra-ui/react';
import { RootState } from 'app/store/store';
@ -55,6 +53,7 @@ const ResetWorkflowButton = () => {
aria-label={t('nodes.resetWorkflow')}
onClick={onOpen}
isDisabled={!nodesCount}
colorScheme="error"
/>
<AlertDialog

21
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/TopCenterPanel.tsx
View File

@ -1,8 +1,25 @@
import { Flex } from '@chakra-ui/layout';
import { memo } from 'react';
import { Panel } from 'reactflow';
import LoadWorkflowButton from './LoadWorkflowButton';
import ResetWorkflowButton from './ResetWorkflowButton';
import SaveWorkflowButton from './SaveWorkflowButton';
const TopCenterPanel = () => {
return <Panel position="top-center">{null}</Panel>;
return (
<Flex
sx={{
gap: 2,
position: 'absolute',
top: 2,
insetInlineStart: '50%',
transform: 'translate(-50%)',
}}
>
<SaveWorkflowButton />
<LoadWorkflowButton />
<ResetWorkflowButton />
</Flex>
);
};
export default memo(TopCenterPanel);

8
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopCenterPanel/WorkflowEditorControls.tsx
View File

@ -2,18 +2,12 @@ import { Flex } from '@chakra-ui/react';
import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton';
import { memo } from 'react';
import LoadWorkflowButton from './LoadWorkflowButton';
import ResetWorkflowButton from './ResetWorkflowButton';
import SaveWorkflowButton from './SaveWorkflowButton';
const WorkflowEditorControls = () => {
return (
<Flex sx={{ gap: 2 }}>
<Flex layerStyle="first" sx={{ gap: 2, borderRadius: 'base', p: 2 }}>
<InvokeButton />
<CancelButton />
<ResetWorkflowButton />
<SaveWorkflowButton />
<LoadWorkflowButton />
</Flex>
);
};

6
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopLeftPanel/TopLeftPanel.tsx
View File

@ -1,9 +1,9 @@
import { Flex } from '@chakra-ui/layout';
import { useAppDispatch } from 'app/store/storeHooks';
import IAIIconButton from 'common/components/IAIIconButton';
import { addNodePopoverOpened } from 'features/nodes/store/nodesSlice';
import { memo, useCallback } from 'react';
import { FaPlus } from 'react-icons/fa';
import { Panel } from 'reactflow';
const TopLeftPanel = () => {
const dispatch = useAppDispatch();
@ -13,14 +13,14 @@ const TopLeftPanel = () => {
}, [dispatch]);
return (
<Panel position="top-left">
<Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineStart: 2 }}>
<IAIIconButton
tooltip="Add Node (Shift+A, Space)"
aria-label="Add Node"
icon={<FaPlus />}
onClick={handleOpenAddNodePopover}
/>
</Panel>
</Flex>
);
};

6
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/TopRightPanel.tsx
View File

@ -1,6 +1,6 @@
import { Flex } from '@chakra-ui/layout';
import { useAppSelector } from 'app/store/storeHooks';
import { memo } from 'react';
import { Panel } from 'reactflow';
import FieldTypeLegend from './FieldTypeLegend';
import WorkflowEditorSettings from './WorkflowEditorSettings';
@ -10,10 +10,10 @@ const TopRightPanel = () => {
);
return (
<Panel position="top-right">
<Flex sx={{ gap: 2, position: 'absolute', top: 2, insetInlineEnd: 2 }}>
<WorkflowEditorSettings />
{shouldShowFieldTypeLegend && <FieldTypeLegend />}
</Panel>
</Flex>
);
};

6
invokeai/frontend/web/src/features/nodes/components/flow/panels/TopRightPanel/WorkflowEditorSettings.tsx
View File

@ -9,6 +9,7 @@ import {
ModalContent,
ModalHeader,
ModalOverlay,
forwardRef,
useDisclosure,
} from '@chakra-ui/react';
import { createSelector } from '@reduxjs/toolkit';
@ -54,7 +55,7 @@ const selector = createSelector(
defaultSelectorOptions
);
const WorkflowEditorSettings = () => {
const WorkflowEditorSettings = forwardRef((_, ref) => {
const { isOpen, onOpen, onClose } = useDisclosure();
const dispatch = useAppDispatch();
const {
@ -103,6 +104,7 @@ const WorkflowEditorSettings = () => {
return (
<>
<IAIIconButton
ref={ref}
aria-label="Workflow Editor Settings"
tooltip="Workflow Editor Settings"
icon={<FaCog />}
@ -170,6 +172,6 @@ const WorkflowEditorSettings = () => {
</Modal>
</>
);
};
});
export default memo(WorkflowEditorSettings);

4
invokeai/frontend/web/src/features/nodes/components/sidePanel/NodeEditorPanelGroup.tsx
View File

@ -1,4 +1,5 @@
import { Flex } from '@chakra-ui/react';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
import { memo, useCallback, useRef, useState } from 'react';
@ -8,7 +9,6 @@ import {
PanelGroup,
} from 'react-resizable-panels';
import 'reactflow/dist/style.css';
import WorkflowEditorControls from '../flow/panels/TopCenterPanel/WorkflowEditorControls';
import InspectorPanel from './inspector/InspectorPanel';
import WorkflowPanel from './workflow/WorkflowPanel';
@ -26,7 +26,7 @@ const NodeEditorPanelGroup = () => {
return (
<Flex sx={{ flexDir: 'column', gap: 2, height: '100%', width: '100%' }}>
<WorkflowEditorControls />
<ProcessButtons />
<PanelGroup
ref={panelGroupRef}
id="workflow-panel-group"

2
invokeai/frontend/web/src/features/nodes/components/sidePanel/inspector/InspectorPanel.tsx
View File

@ -20,7 +20,7 @@ const InspectorPanel = () => {
w: 'full',
h: 'full',
borderRadius: 'base',
p: 4,
p: 2,
gap: 2,
}}
>

2
invokeai/frontend/web/src/features/nodes/components/sidePanel/workflow/WorkflowPanel.tsx
View File

@ -20,7 +20,7 @@ const WorkflowPanel = () => {
w: 'full',
h: 'full',
borderRadius: 'base',
p: 4,
p: 2,
gap: 2,
}}
>

3
invokeai/frontend/web/src/features/parameters/components/Parameters/ImageToImage/InitialImageDisplay.tsx
View File

@ -49,7 +49,7 @@ const InitialImageDisplay = () => {
alignItems: 'center',
justifyContent: 'center',
borderRadius: 'base',
p: 4,
p: 2,
gap: 4,
}}
>
@ -64,6 +64,7 @@ const InitialImageDisplay = () => {
>
<Text
sx={{
ps: 2,
fontWeight: 600,
userSelect: 'none',
color: 'base.700',

4
invokeai/frontend/web/src/features/parameters/components/ProcessButtons/ProcessButtons.tsx
View File

@ -1,14 +1,14 @@
import { Flex } from '@chakra-ui/react';
import { memo } from 'react';
import CancelButton from './CancelButton';
import InvokeButton from './InvokeButton';
import { memo } from 'react';
/**
* Buttons to start and cancel image generation.
*/
const ProcessButtons = () => {
return (
<Flex gap={2}>
<Flex layerStyle="first" sx={{ gap: 2, borderRadius: 'base', p: 2 }}>
<InvokeButton />
<CancelButton />
</Flex>

4
invokeai/frontend/web/src/features/sdxl/components/SDXLImageToImageTabParameters.tsx
View File

@ -2,17 +2,15 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import { memo } from 'react';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
import SDXLImageToImageTabCoreParameters from './SDXLImageToImageTabCoreParameters';
import { memo } from 'react';
const SDXLImageToImageTabParameters = () => {
return (
<>
<ParamSDXLPromptArea />
<ProcessButtons />
<SDXLImageToImageTabCoreParameters />
<ParamSDXLRefinerCollapse />
<ParamControlNetCollapse />

4
invokeai/frontend/web/src/features/sdxl/components/SDXLTextToImageTabParameters.tsx
View File

@ -2,17 +2,15 @@ import ParamDynamicPromptsCollapse from 'features/dynamicPrompts/components/Para
import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import TextToImageTabCoreParameters from 'features/ui/components/tabs/TextToImage/TextToImageTabCoreParameters';
import { memo } from 'react';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
import { memo } from 'react';
const SDXLTextToImageTabParameters = () => {
return (
<>
<ParamSDXLPromptArea />
<ProcessButtons />
<TextToImageTabCoreParameters />
<ParamSDXLRefinerCollapse />
<ParamControlNetCollapse />

2
invokeai/frontend/web/src/features/sdxl/components/SDXLUnifiedCanvasTabParameters.tsx
View File

@ -5,7 +5,6 @@ import ParamMaskAdjustmentCollapse from 'features/parameters/components/Paramete
import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import ParamSDXLPromptArea from './ParamSDXLPromptArea';
import ParamSDXLRefinerCollapse from './ParamSDXLRefinerCollapse';
import SDXLUnifiedCanvasTabCoreParameters from './SDXLUnifiedCanvasTabCoreParameters';
@ -14,7 +13,6 @@ export default function SDXLUnifiedCanvasTabParameters() {
return (
<>
<ParamSDXLPromptArea />
<ProcessButtons />
<SDXLUnifiedCanvasTabCoreParameters />
<ParamSDXLRefinerCollapse />
<ParamControlNetCollapse />

21
invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx
View File

@ -1,6 +1,7 @@
import { Box, Flex } from '@chakra-ui/react';
import { RootState } from 'app/store/store';
import { useAppSelector } from 'app/store/storeHooks';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import SDXLImageToImageTabParameters from 'features/sdxl/components/SDXLImageToImageTabParameters';
import SDXLTextToImageTabParameters from 'features/sdxl/components/SDXLTextToImageTabParameters';
import SDXLUnifiedCanvasTabParameters from 'features/sdxl/components/SDXLUnifiedCanvasTabParameters';
@ -59,11 +60,29 @@ export default memo(ParametersPanel);
const ParametersPanelWrapper = memo((props: PropsWithChildren) => {
return (
<Flex
sx={{
w: 'full',
h: 'full',
flexDir: 'column',
gap: 2,
}}
>
<ProcessButtons />
<Flex
layerStyle="first"
sx={{
w: 'full',
h: 'full',
position: 'relative',
borderRadius: 'base',
p: 2,
}}
>
<Flex
sx={{
w: 'full',
h: 'full',
position: 'relative',
}}
>
<Box
@ -103,6 +122,8 @@ const ParametersPanelWrapper = memo((props: PropsWithChildren) => {
</OverlayScrollbarsComponent>
</Box>
</Flex>
</Flex>
</Flex>
);
});

8
invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageTabParameters.tsx
View File

@ -3,24 +3,20 @@ import ParamLoraCollapse from 'features/lora/components/ParamLoraCollapse';
import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Advanced/ParamAdvancedCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
import { memo } from 'react';
import ImageToImageTabCoreParameters from './ImageToImageTabCoreParameters';
const ImageToImageTabParameters = () => {
return (
<>
<ParamPromptArea />
<ProcessButtons />
<ImageToImageTabCoreParameters />
<ParamControlNetCollapse />
<ParamLoraCollapse />
<ParamDynamicPromptsCollapse />
{/* <ParamVariationCollapse /> */}
<ParamNoiseCollapse />
<ParamSymmetryCollapse />
<ParamSeamlessCollapse />

2
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabMain.tsx
View File

@ -10,7 +10,7 @@ const TextToImageTabMain = () => {
position: 'relative',
width: '100%',
height: '100%',
p: 4,
p: 2,
borderRadius: 'base',
}}
>

6
invokeai/frontend/web/src/features/ui/components/tabs/TextToImage/TextToImageTabParameters.tsx
View File

@ -5,22 +5,18 @@ import ParamControlNetCollapse from 'features/parameters/components/Parameters/C
import ParamNoiseCollapse from 'features/parameters/components/Parameters/Noise/ParamNoiseCollapse';
import ParamSeamlessCollapse from 'features/parameters/components/Parameters/Seamless/ParamSeamlessCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import { memo } from 'react';
import ParamPromptArea from '../../../../parameters/components/Parameters/Prompt/ParamPromptArea';
import TextToImageTabCoreParameters from './TextToImageTabCoreParameters';
import { memo } from 'react';
const TextToImageTabParameters = () => {
return (
<>
<ParamPromptArea />
<ProcessButtons />
<TextToImageTabCoreParameters />
<ParamControlNetCollapse />
<ParamLoraCollapse />
<ParamDynamicPromptsCollapse />
{/* <ParamVariationCollapse /> */}
<ParamNoiseCollapse />
<ParamSymmetryCollapse />
<ParamSeamlessCollapse />

6
invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasParameters.tsx
View File

@ -4,24 +4,20 @@ import ParamAdvancedCollapse from 'features/parameters/components/Parameters/Adv
import ParamInfillAndScalingCollapse from 'features/parameters/components/Parameters/Canvas/InfillAndScaling/ParamInfillAndScalingCollapse';
import ParamControlNetCollapse from 'features/parameters/components/Parameters/ControlNet/ParamControlNetCollapse';
import ParamSymmetryCollapse from 'features/parameters/components/Parameters/Symmetry/ParamSymmetryCollapse';
// import ParamVariationCollapse from 'features/parameters/components/Parameters/Variations/ParamVariationCollapse';
import ParamMaskAdjustmentCollapse from 'features/parameters/components/Parameters/Canvas/MaskAdjustment/ParamMaskAdjustmentCollapse';
import ParamSeamPaintingCollapse from 'features/parameters/components/Parameters/Canvas/SeamPainting/ParamSeamPaintingCollapse';
import ParamPromptArea from 'features/parameters/components/Parameters/Prompt/ParamPromptArea';
import ProcessButtons from 'features/parameters/components/ProcessButtons/ProcessButtons';
import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
import { memo } from 'react';
import UnifiedCanvasCoreParameters from './UnifiedCanvasCoreParameters';
const UnifiedCanvasParameters = () => {
return (
<>
<ParamPromptArea />
<ProcessButtons />
<UnifiedCanvasCoreParameters />
<ParamControlNetCollapse />
<ParamLoraCollapse />
<ParamDynamicPromptsCollapse />
{/* <ParamVariationCollapse /> */}
<ParamSymmetryCollapse />
<ParamMaskAdjustmentCollapse />
<ParamInfillAndScalingCollapse />