Browse Source

#56 fix: adjust page's layout

master
smallstonesk 4 years ago
parent
commit
0412d7aedc
  1. 37
      packages/core/src/mods/layout/index.module.less
  2. 33
      packages/core/src/mods/layout/index.tsx

37
packages/core/src/mods/layout/index.module.less

@ -11,34 +11,17 @@
border-bottom: 1px solid #D9D9D9; border-bottom: 1px solid #D9D9D9;
} }
.body { .toolBar {
height: 43px;
flex: 1; }
display: flex;
flex-direction: row;
width: 100%;
height: 100%;
.sideBar {
width: 235px;
border-right: 1px solid #D9D9D9;
}
.full {
flex: 1;
display: flex;
flex-direction: column;
.toolBar { .sideBar {
height: 43px; border-right: 1px solid #D9D9D9;
} }
}
.settingBar { .settingBar {
width: 350px; width: 350px;
height: 100%; height: 100%;
border-left: 1px solid #D9D9D9; border-left: 1px solid #D9D9D9;
}
} }
} }

33
packages/core/src/mods/layout/index.tsx

@ -4,6 +4,11 @@ import styles from './index.module.less';
import { Graph } from '@antv/x6'; import { Graph } from '@antv/x6';
// @ts-ignore
import SplitPane from 'react-split-pane/lib/SplitPane';
// @ts-ignore
import Pane from 'react-split-pane/lib/Pane';
interface ISubComponentProps { interface ISubComponentProps {
flowChart: Graph; flowChart: Graph;
} }
@ -30,14 +35,28 @@ const Layout: React.FC<IProps> = (props) => {
return ( return (
<div className={styles.container}> <div className={styles.container}>
<div className={styles.header}>{header}</div> <div className={styles.header}>{header}</div>
<div className={styles.body}> <div className={styles.toolBar}>{toolBar}</div>
<div className={styles.sideBar}>{sideBar}</div> <SplitPane split={'vertical'}>
<div className={styles.full}> <Pane
<div className={styles.toolBar}>{toolBar}</div> className={styles.sideBar}
minSize={'145px'}
maxSize={'443px'}
initialSize={'267px'}
>
{sideBar}
</Pane>
<SplitPane split={'vertical'}>
{props.children} {props.children}
</div> <Pane
<div className={styles.settingBar}>{settingBar}</div> className={styles.settingBar}
</div> minSize={'350px'}
maxSize={'500px'}
initialSize={'350px'}
>
{settingBar}
</Pane>
</SplitPane>
</SplitPane>
</div> </div>
); );
}; };

Loading…
Cancel
Save