From 4879bdad61317c4397569064ea71be58fab06fb3 Mon Sep 17 00:00:00 2001
From: Sandro Weber <webers@in.tum.de>
Date: Mon, 3 May 2021 16:46:31 +0200
Subject: [PATCH] grid layout and flexlayout not fullscreen
---
.../simulation-view/simulation-view.css | 30 +++++++++++++++++++
.../simulation-view/simulation-view.js | 23 ++++++++++++--
2 files changed, 51 insertions(+), 2 deletions(-)
create mode 100644 src/components/simulation-view/simulation-view.css
diff --git a/src/components/simulation-view/simulation-view.css b/src/components/simulation-view/simulation-view.css
new file mode 100644
index 0000000..e49bf06
--- /dev/null
+++ b/src/components/simulation-view/simulation-view.css
@@ -0,0 +1,30 @@
+.simulation-view-wrapper {
+ display: grid;
+ grid-template-rows: 100px auto;
+ grid-template-columns: 100px auto;
+ grid-template-areas:
+ "simulation-view-header simulation-view-header"
+ "simulation-view-sidebar simulation-view-mainview";
+}
+
+.simulation-view-header {
+ grid-area: simulation-view-header;
+ background-color: yellow;
+ min-height: 100px;
+}
+
+.simulation-view-sidebar {
+ grid-area: simulation-view-sidebar;
+ background-color: green;
+ height: 100vh;
+}
+
+.simulation-view-mainview {
+ grid-area: simulation-view-mainview;
+ background-color: red;
+}
+
+.simulation-view-flexlayout {
+ position: relative;
+ height: 100%;
+}
\ No newline at end of file
diff --git a/src/components/simulation-view/simulation-view.js b/src/components/simulation-view/simulation-view.js
index 8c82d3f..d202d53 100644
--- a/src/components/simulation-view/simulation-view.js
+++ b/src/components/simulation-view/simulation-view.js
@@ -2,6 +2,7 @@ import React from 'react';
import FlexLayout from 'flexlayout-react';
import '../../../node_modules/flexlayout-react/style/light.css';
+import './simulation-view.css';
const jsonBaseLayout = {
global: {},
@@ -38,6 +39,15 @@ const jsonBaseLayout = {
}
};
+const classNameMapper = (className) => {
+ if (className === 'flexlayout__layout') {
+ return 'simulation-view-flexlayout';
+ }
+ else {
+ return className;
+ }
+};
+
export default class SimulationView extends React.Component {
constructor(props) {
super(props);
@@ -57,8 +67,17 @@ export default class SimulationView extends React.Component {
render() {
return (
- <div>
- <FlexLayout.Layout model={this.state.model} factory={this.factory}/>
+ <div className='simulation-view-wrapper'>
+ <div className='simulation-view-header'>
+ header
+ </div>
+ <div className='simulation-view-sidebar'>
+ sidebar
+ </div>
+ <div className='simulation-view-mainview'>
+ <FlexLayout.Layout model={this.state.model} factory={this.factory}
+ classNameMapper={classNameMapper}/>
+ </div>
</div>
);
}
--
GitLab