apextoaster
/
onnx-web
1
0
Fork 0
Code Actions

cleanup layout logic and margins

This commit is contained in:
Sean Sube 2024-01-12 08:31:18 -06:00
parent 5888cae298
commit 853b92e88b
Signed by: ssube
GPG Key ID: 3EED7B957D362AF1
1 changed files with 24 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
gui/src/components/OnnxWeb.tsx
View File

@ -12,6 +12,7 @@ import { shallow } from 'zustand/shallow';
import { Motd } from '../Motd.js'; import { Motd } from '../Motd.js';
import { OnnxState, StateContext } from '../state/full.js'; import { OnnxState, StateContext } from '../state/full.js';
import { Layout } from '../state/settings.js';
import { ImageHistory } from './ImageHistory.js'; import { ImageHistory } from './ImageHistory.js';
import { Logo } from './Logo.js'; import { Logo } from './Logo.js';
import { Blend } from './tab/Blend.js'; import { Blend } from './tab/Blend.js';
@ -56,7 +57,7 @@ export function OnnxWeb(props: OnnxWebProps) {
<Logo /> <Logo />
</Box> </Box>
{props.motd && <Motd />} {props.motd && <Motd />}
{layout.direction === 'vertical' ? <VerticalBody layout={layout} style={historyStyle} /> : <HorizontalBody layout={layout} style={historyStyle} />} {renderBody(layout, historyStyle)}
</Container> </Container>
</ThemeProvider> </ThemeProvider>
); );
@ -107,43 +108,50 @@ export const LAYOUT_STYLES = {
}, },
} as const; } as const;
function renderBody(layout: ReturnType<typeof selectLayout>, historyStyle: SxProps<Theme>) {
if (layout.direction === 'vertical') {
return <VerticalBody {...layout} style={historyStyle} />;
} else {
return <HorizontalBody {...layout} style={historyStyle} />;
}
}
// used for both horizontal and vertical // used for both horizontal and vertical
export interface BodyProps { export interface BodyProps {
layout: ReturnType<typeof selectLayout>; direction: Layout;
style: SxProps<Theme>; style: SxProps<Theme>;
width: number;
} }
export function HorizontalBody(props: BodyProps) { export function HorizontalBody(props: BodyProps) {
const store = mustExist(useContext(StateContext)); const layout = LAYOUT_STYLES[props.direction];
const {direction} = useStore(store, selectLayout, shallow);
const layout = LAYOUT_STYLES[direction];
return <Allotment separator className='body-allotment' minSize={300}> return <Allotment separator className='body-allotment' minSize={300}>
<TabGroup /> <TabGroup direction={props.direction} />
<Box sx={layout.history.style}> <Box sx={layout.history.style}>
<ImageHistory width={props.layout.width} /> <ImageHistory width={props.width} />
</Box> </Box>
</Allotment>; </Allotment>;
} }
export function VerticalBody(props: BodyProps) { export function VerticalBody(props: BodyProps) {
const store = mustExist(useContext(StateContext)); const layout = LAYOUT_STYLES[props.direction];
const {direction, width} = useStore(store, selectLayout, shallow);
const layout = LAYOUT_STYLES[direction];
return <Stack direction={layout.direction} spacing={2}> return <Stack direction={layout.direction} spacing={2}>
<TabGroup /> <TabGroup direction={props.direction} />
<Divider flexItem variant='middle' orientation={layout.divider} /> <Divider flexItem variant='middle' orientation={layout.divider} />
<Box sx={layout.history.style}> <Box sx={layout.history.style}>
<ImageHistory width={width} /> <ImageHistory width={props.width} />
</Box> </Box>
</Stack>; </Stack>;
} }
export function TabGroup() { export interface TabGroupProps {
const store = mustExist(useContext(StateContext)); direction: Layout;
const {direction} = useStore(store, selectLayout, shallow); }
const layout = LAYOUT_STYLES[direction];
export function TabGroup(props: TabGroupProps) {
const layout = LAYOUT_STYLES[props.direction];
const [hash, setHash] = useHash(); const [hash, setHash] = useHash();