Add fullscreen to visualizations

Fullscreen hides the header, footer and menu, thus showing only the visualization in the browser window.

src/containers/app.js

@@ -26,11 +26,13 @@ import HTML5Backend from 'react-dnd-html5-backend';
 import NotificationSystem from 'react-notification-system';
 import { Redirect, Route } from 'react-router-dom';
 import { Col } from 'react-bootstrap';
+import classNames from 'classnames';
 
 import AppDispatcher from '../app-dispatcher';
 import SimulationStore from '../stores/simulation-store';
 import NodeStore from '../stores/node-store';
 import UserStore from '../stores/user-store';
+import DesignStore from '../stores/design-store';
 import NotificationsDataManager from '../data-managers/notifications-data-manager';
 
 import Header from '../components/header';
@@ -51,7 +53,7 @@ import '../styles/app.css';
 
 class App extends React.Component {
   static getStores() {
-    return [ NodeStore, UserStore, SimulationStore ];
+    return [ NodeStore, UserStore, SimulationStore, DesignStore ];
   }
 
   static calculateState(prevState) {
@@ -63,7 +65,8 @@ class App extends React.Component {
       currentRole: currentUser ? currentUser.role : '',
       token: UserStore.getState().token,
 
-      showSidebarMenu: false
+      showSidebarMenu: false,
+      fullscreen: DesignStore.getState().fullscreen
     };
   }
 
@@ -110,6 +113,15 @@ class App extends React.Component {
       return (<Redirect to="/login" />);
     }
 
+    const bodyClasses = classNames('app-body', {
+      'app-body-spacing': !this.state.fullscreen
+    });
+
+    const contentClasses = classNames('app-content', {
+      'app-content-margin-left': !this.state.fullscreen,
+      'app-content-fullscreen': this.state.fullscreen
+    });
+
     return (
       <div>
         <Col style={{ width: this.state.showSidebarMenu ? '280px' : '0px' }} smHidden mdHidden lgHidden className="sidenav">
@@ -119,14 +131,18 @@ class App extends React.Component {
         <div className="app">
           <NotificationSystem ref="notificationSystem" />
 
-          <Header onMenuButton={this.showSidebarMenu} showMenuButton={this.state.token != null} />
+          {!this.state.fullscreen &&
+            <Header onMenuButton={this.showSidebarMenu} showMenuButton={this.state.token != null} />
+          }
 
-          <div className="app-body">
-            <Col xsHidden>
-              <SidebarMenu currentRole={this.state.currentRole}/>
-            </Col>
+          <div className={bodyClasses} >
+            {!this.state.fullscreen &&
+              <Col xsHidden>
+                <SidebarMenu currentRole={this.state.currentRole} />
+              </Col>
+            }
 
-            <div className="app-content">
+            <div className={contentClasses}>
               <Route exact path="/" component={Home} />
               <Route path="/home" component={Home} />
               <Route exact path="/projects" component={Projects} />
@@ -139,7 +155,9 @@ class App extends React.Component {
             </div>
           </div>
 
-          <Footer />
+          {!this.state.fullscreen &&
+            <Footer />
+          }
         </div>
       </div>
     );

src/containers/visualization.js

@@ -37,6 +37,7 @@ import VisualizationStore from '../stores/visualization-store';
 import ProjectStore from '../stores/project-store';
 import SimulationStore from '../stores/simulation-store';
 import FileStore from '../stores/file-store';
+import DesignStore from '../stores/design-store';
 import AppDispatcher from '../app-dispatcher';
 import NotificationsDataManager from '../data-managers/notifications-data-manager';
 import NotificationsFactory from '../data-managers/notifications-factory';
@@ -45,7 +46,7 @@ import '../styles/context-menu.css';
 
 class Visualization extends React.Component {
   static getStores() {
-    return [ VisualizationStore, ProjectStore, SimulationStore, FileStore, UserStore ];
+    return [ VisualizationStore, ProjectStore, SimulationStore, FileStore, UserStore, DesignStore ];
   }
 
   static calculateState(prevState) {
@@ -59,6 +60,7 @@ class Visualization extends React.Component {
       projects: ProjectStore.getState(),
       simulations: SimulationStore.getState(),
       files: FileStore.getState(),
+      fullscreen: DesignStore.getState().fullscreen,
 
       visualization: prevState.visualization || {},
       project: prevState.project || null,
@@ -387,6 +389,20 @@ class Visualization extends React.Component {
     this.setState({ visualization });
   }
 
+  setFullscreen = () => {
+    AppDispatcher.dispatch({
+      type: 'design/fullscreen',
+      fullscreen: true
+    });
+  }
+
+  unsetFullscreen = () => {
+    AppDispatcher.dispatch({
+      type: 'design/fullscreen',
+      fullscreen: false
+    });
+  }
+
   render() {
     const current_widgets = this.state.visualization.widgets;
 
@@ -411,9 +427,20 @@ class Visualization extends React.Component {
             </div>
           ) : (
             <div className='section-buttons-group'>
-              <Button bsStyle="link" onClick={() => this.setState({ editing: true })}>
-                <span className="glyphicon glyphicon-pencil"></span> Edit
-              </Button>
+              {this.state.fullscreen === false ? (
+                <span>
+                  <Button bsStyle="link" onClick={() => this.setState({ editing: true })}>
+                    <span className="glyphicon glyphicon-pencil"></span> Edit
+                  </Button>
+                  <Button bsStyle="link" onClick={this.setFullscreen} style={{ marginLeft: '8px' }}>
+                    <span className="glyphicon glyphicon-resize-full"></span> Fullscreen
+                  </Button>
+                </span>
+              ) : (
+                <Button bsStyle="link" onClick={this.unsetFullscreen}>
+                  <span className="glyphicon glyphicon-resize-small"></span> Disable fullscreen
+                </Button>
+              )}
             </div>
           )}
 

src/stores/design-store.js

@@ -0,0 +1,48 @@
+/**
+ * File: design-store.js
+ * Author: Markus Grigull <mgrigull@eonerc.rwth-aachen.de>
+ * Date: 18.08.2017
+ *
+ * This file is part of VILLASweb.
+ *
+ * VILLASweb is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * VILLASweb is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with VILLASweb. If not, see <http://www.gnu.org/licenses/>.
+ ******************************************************************************/
+
+import { ReduceStore } from 'flux/utils';
+
+import AppDispatcher from '../app-dispatcher';
+
+class DesignStore extends ReduceStore {
+  constructor() {
+    super(AppDispatcher);
+  }
+
+  getInitialState() {
+    return { 
+      fullscreen: false
+    };
+  }
+
+  reduce(state, action) {
+    switch(action.type) {
+      case 'design/fullscreen':
+        return Object.assign({}, state, { fullscreen: action.fullscreen });
+
+      default:
+        return state;
+    }
+  }
+}
+
+export default new DesignStore();

src/styles/app.css

@@ -27,13 +27,17 @@ body {
 }
 
 .app {
-  height: 100%;
+  height: 100vh;
   color: #4d4d4d;
 
   font: 16px 'Helvetica Neue', Helvetica, Arial, sans-serif;
   hyphens: auto;
 }
 
+.app-body {
+  height: 100%;
+}
+
 .app-header {
   width: 100%;
   height: 60px;
@@ -80,15 +84,19 @@ body {
   clear: both;
 }
 
-.app-body {
+.app-body-spacing {
   padding: 15px 5px 0px 5px;
 }
 
-.app-body > div {
+.app-body-spacing > div {
   margin-left: 7px;
   margin-right: 7px;
 }
 
+.app-content-fullscreen {
+  height: 100%;
+}
+
 .app-content {
   padding: 15px 20px;
 
@@ -101,7 +109,7 @@ body {
 }
 
 @media (min-width: 768px) {
-  .app-content {
+  .app-content-margin-left {
     margin-left: 200px !important;
   }
 }