diff --git a/src/modules/ui/components/layout/index.js b/src/modules/ui/components/layout/index.js
index d5e7764fe5d8..461980910274 100755
--- a/src/modules/ui/components/layout/index.js
+++ b/src/modules/ui/components/layout/index.js
@@ -9,14 +9,6 @@ const rootStyle = {
backgroundColor: '#F7F7F7',
};
-const fullScreenStyle = {
- height: '100vh',
- border: 0,
- margin: 0,
- padding: 0,
- overflow: 'hidden',
-};
-
const leftPanelStyle = {
position: 'absolute',
width: '100%',
@@ -40,7 +32,7 @@ const contentPanelStyle = {
padding: '10px 10px 10px 0',
};
-const previewStyle = {
+const normalPreviewStyle = {
width: '100%',
height: '100%',
backgroundColor: '#FFF',
@@ -48,6 +40,22 @@ const previewStyle = {
borderRadius: 4,
};
+const fullScreenPreviewStyle = {
+ position: 'fixed',
+ left: '0px',
+ right: '0px',
+ top: '0px',
+ zIndex: 1,
+ backgroundColor: '#FFF',
+ height: '100%',
+ width: '100%',
+ border: 0,
+ margin: 0,
+ padding: 0,
+ overflow: 'hidden',
+};
+
+
const vsplit = ;
const hsplit = ;
@@ -60,21 +68,24 @@ const onDragEnd = function () {
};
class Layout extends React.Component {
- renderWithFullscreen() {
- return (
-
- {this.props.preview()}
-
- );
- }
+ render() {
+ const {
+ goFullScreen, showLeftPanel, showDownPanel, downPanelInRight,
+ downPanel, leftPanel, preview,
+ } = this.props;
+
+ let previewStyle = normalPreviewStyle;
+
+ if (goFullScreen) {
+ previewStyle = fullScreenPreviewStyle;
+ }
- renderNormally() {
- const props = this.props;
- const leftPanelDefaultSize = props.showLeftPanel ? 250 : 1;
+ const leftPanelDefaultSize = showLeftPanel ? 250 : 1;
let downPanelDefaultSize = 1;
- if (props.showDownPanel) {
- downPanelDefaultSize = props.downPanelInRight ? 400 : 200;
+ if (showDownPanel) {
+ downPanelDefaultSize = downPanelInRight ? 400 : 200;
}
+
return (
- {props.showLeftPanel ? props.leftPanel() : null}
+ {showLeftPanel ? leftPanel() : null}
- {props.preview()}
+ {preview()}
- {props.showDownPanel ? props.downPanel() : null}
+ {showDownPanel ? downPanel() : null}
);
}
-
- render() {
- const { goFullScreen } = this.props;
- if (goFullScreen) {
- return this.renderWithFullscreen();
- }
-
- return this.renderNormally();
- }
}
Layout.propTypes = {