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;
}
.body {
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 {
height: 43px;
}
.toolBar {
height: 43px;
}
}
.sideBar {
border-right: 1px solid #D9D9D9;
}
.settingBar {
width: 350px;
height: 100%;
border-left: 1px solid #D9D9D9;
}
.settingBar {
width: 350px;
height: 100%;
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';
// @ts-ignore
import SplitPane from 'react-split-pane/lib/SplitPane';
// @ts-ignore
import Pane from 'react-split-pane/lib/Pane';
interface ISubComponentProps {
flowChart: Graph;
}
@ -30,14 +35,28 @@ const Layout: React.FC<IProps> = (props) => {
return (
<div className={styles.container}>
<div className={styles.header}>{header}</div>
<div className={styles.body}>
<div className={styles.sideBar}>{sideBar}</div>
<div className={styles.full}>
<div className={styles.toolBar}>{toolBar}</div>
<div className={styles.toolBar}>{toolBar}</div>
<SplitPane split={'vertical'}>
<Pane
className={styles.sideBar}
minSize={'145px'}
maxSize={'443px'}
initialSize={'267px'}
>
{sideBar}
</Pane>
<SplitPane split={'vertical'}>
{props.children}
</div>
<div className={styles.settingBar}>{settingBar}</div>
</div>
<Pane
className={styles.settingBar}
minSize={'350px'}
maxSize={'500px'}
initialSize={'350px'}
>
{settingBar}
</Pane>
</SplitPane>
</SplitPane>
</div>
);
};

Loading…
Cancel
Save