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: Restyle the WorkflowPanel

Browse Source
This commit is contained in:
blessedcoolant 2023-08-23 21:29:45 +12:00 committed by psychedelicious
parent ca3e826a14
commit 4f088252db
3 changed files with 44 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,19 +1,20 @@
import { Flex } from '@chakra-ui/react';
import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton'; import CancelButton from 'features/parameters/components/ProcessButtons/CancelButton';
import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton'; import InvokeButton from 'features/parameters/components/ProcessButtons/InvokeButton';
import { memo } from 'react'; import { memo } from 'react';
import ResetWorkflowButton from './ResetWorkflowButton';
import LoadWorkflowButton from './LoadWorkflowButton'; import LoadWorkflowButton from './LoadWorkflowButton';
import ResetWorkflowButton from './ResetWorkflowButton';
import SaveWorkflowButton from './SaveWorkflowButton'; import SaveWorkflowButton from './SaveWorkflowButton';
const WorkflowEditorControls = () => { const WorkflowEditorControls = () => {
return ( return (
<> <Flex sx={{ gap: 2 }}>
<InvokeButton /> <InvokeButton />
<CancelButton /> <CancelButton />
<ResetWorkflowButton /> <ResetWorkflowButton />
<SaveWorkflowButton /> <SaveWorkflowButton />
<LoadWorkflowButton /> <LoadWorkflowButton />
</> </Flex>
); );
}; };

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

@ -1,3 +1,4 @@
import { Flex } from '@chakra-ui/react';
import ResizeHandle from 'features/ui/components/tabs/ResizeHandle'; import ResizeHandle from 'features/ui/components/tabs/ResizeHandle';
import { usePanelStorage } from 'features/ui/hooks/usePanelStorage'; import { usePanelStorage } from 'features/ui/hooks/usePanelStorage';
import { memo, useCallback, useRef, useState } from 'react'; import { memo, useCallback, useRef, useState } from 'react';
@ -7,6 +8,7 @@ import {
PanelGroup, PanelGroup,
} from 'react-resizable-panels'; } from 'react-resizable-panels';
import 'reactflow/dist/style.css'; import 'reactflow/dist/style.css';
import WorkflowEditorControls from '../flow/panels/TopCenterPanel/WorkflowEditorControls';
import InspectorPanel from './inspector/InspectorPanel'; import InspectorPanel from './inspector/InspectorPanel';
import WorkflowPanel from './workflow/WorkflowPanel'; import WorkflowPanel from './workflow/WorkflowPanel';
@ -21,42 +23,46 @@ const NodeEditorPanelGroup = () => {
} }
panelGroupRef.current.setLayout([50, 50]); panelGroupRef.current.setLayout([50, 50]);
}, []); }, []);
return ( return (
<PanelGroup <Flex sx={{ flexDir: 'column', gap: 2, height: '100%', width: '100%' }}>
ref={panelGroupRef} <WorkflowEditorControls />
id="workflow-panel-group" <PanelGroup
direction="vertical" ref={panelGroupRef}
style={{ height: '100%', width: '100%' }} id="workflow-panel-group"
storage={panelStorage}
>
<Panel
id="workflow"
collapsible
onCollapse={setIsTopPanelCollapsed}
minSize={25}
>
<WorkflowPanel />
</Panel>
<ResizeHandle
direction="vertical" direction="vertical"
onDoubleClick={handleDoubleClickHandle} style={{ height: '100%', width: '100%' }}
collapsedDirection={ storage={panelStorage}
isTopPanelCollapsed
? 'top'
: isBottomPanelCollapsed
? 'bottom'
: undefined
}
/>
<Panel
id="inspector"
collapsible
onCollapse={setIsBottomPanelCollapsed}
minSize={25}
> >
<InspectorPanel /> <Panel
</Panel> id="workflow"
</PanelGroup> collapsible
onCollapse={setIsTopPanelCollapsed}
minSize={25}
>
<WorkflowPanel />
</Panel>
<ResizeHandle
direction="vertical"
onDoubleClick={handleDoubleClickHandle}
collapsedDirection={
isTopPanelCollapsed
? 'top'
: isBottomPanelCollapsed
? 'bottom'
: undefined
}
/>
<Panel
id="inspector"
collapsible
onCollapse={setIsBottomPanelCollapsed}
minSize={25}
>
<InspectorPanel />
</Panel>
</PanelGroup>
</Flex>
); );
}; };

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

@ -8,9 +8,8 @@ import {
} from '@chakra-ui/react'; } from '@chakra-ui/react';
import { memo } from 'react'; import { memo } from 'react';
import WorkflowGeneralTab from './WorkflowGeneralTab'; import WorkflowGeneralTab from './WorkflowGeneralTab';
import WorkflowLinearTab from './WorkflowLinearTab';
import WorkflowJSONTab from './WorkflowJSONTab'; import WorkflowJSONTab from './WorkflowJSONTab';
import WorkflowEditorControls from '../../flow/panels/TopCenterPanel/WorkflowEditorControls'; import WorkflowLinearTab from './WorkflowLinearTab';
const WorkflowPanel = () => { const WorkflowPanel = () => {
return ( return (
@ -25,9 +24,6 @@ const WorkflowPanel = () => {
gap: 2, gap: 2,
}} }}
> >
<Flex gap={2}>
<WorkflowEditorControls />
</Flex>
<Tabs <Tabs
variant="line" variant="line"
sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }} sx={{ display: 'flex', flexDir: 'column', w: 'full', h: 'full' }}