cleanup layout logic and margins
This commit is contained in:
parent
5888cae298
commit
853b92e88b
|
@ -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();
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue