From 69e5281a14f766abc135b04b6e259c22bd2bb42e Mon Sep 17 00:00:00 2001 From: Markus Grigull Date: Fri, 18 Aug 2017 17:12:42 +0200 Subject: [PATCH] Add fullscreen to visualizations Fullscreen hides the header, footer and menu, thus showing only the visualization in the browser window. --- src/containers/app.js | 36 ++++++++++++++++++------- src/containers/visualization.js | 35 +++++++++++++++++++++--- src/stores/design-store.js | 48 +++++++++++++++++++++++++++++++++ src/styles/app.css | 16 ++++++++--- 4 files changed, 118 insertions(+), 17 deletions(-) create mode 100644 src/stores/design-store.js diff --git a/src/containers/app.js b/src/containers/app.js index 9141dec..d4edcea 100644 --- a/src/containers/app.js +++ b/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 (); } + 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 (
@@ -119,14 +131,18 @@ class App extends React.Component {
-
+ {!this.state.fullscreen && +
+ } -
- - - +
+ {!this.state.fullscreen && + + + + } -
+
@@ -139,7 +155,9 @@ class App extends React.Component {
-
+ {!this.state.fullscreen && +
+ }
); diff --git a/src/containers/visualization.js b/src/containers/visualization.js index e28f419..8028c43 100644 --- a/src/containers/visualization.js +++ b/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 {
) : (
- + {this.state.fullscreen === false ? ( + + + + + ) : ( + + )}
)} diff --git a/src/stores/design-store.js b/src/stores/design-store.js new file mode 100644 index 0000000..25e1c74 --- /dev/null +++ b/src/stores/design-store.js @@ -0,0 +1,48 @@ +/** + * File: design-store.js + * Author: Markus Grigull + * 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 . + ******************************************************************************/ + +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(); diff --git a/src/styles/app.css b/src/styles/app.css index 6cc5360..0df60ed 100644 --- a/src/styles/app.css +++ b/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; } }