From f101adcb2f977251fff01fe7b6e01bdbbf942562 Mon Sep 17 00:00:00 2001 From: Shaun Ellis <shaun@sdellis.com> Date: Wed, 27 Feb 2019 16:47:25 -0500 Subject: [PATCH] [WIP] - allows for maximizing windows in react-mosaic layouts --- src/components/WindowTopBar.js | 17 +++++++++++++++++ src/components/WorkspaceMosaic.js | 3 ++- src/containers/Workspace.js | 6 +++++- src/state/actions/action-types.js | 1 + src/state/actions/window.js | 10 ++++++++++ src/state/reducers/windows.js | 9 +++++++++ 6 files changed, 44 insertions(+), 2 deletions(-) diff --git a/src/components/WindowTopBar.js b/src/components/WindowTopBar.js index a36cd1dcc..f7b6ba338 100644 --- a/src/components/WindowTopBar.js +++ b/src/components/WindowTopBar.js @@ -4,6 +4,7 @@ import Typography from '@material-ui/core/Typography'; import IconButton from '@material-ui/core/IconButton'; import MenuIcon from '@material-ui/icons/MenuSharp'; import CloseIcon from '@material-ui/icons/CloseSharp'; +import FullscreenIcon from '@material-ui/icons/FullscreenSharp'; import Toolbar from '@material-ui/core/Toolbar'; import AppBar from '@material-ui/core/AppBar'; import classNames from 'classnames'; @@ -17,6 +18,14 @@ import ns from '../config/css-ns'; * WindowTopBar */ export class WindowTopBar extends Component { + /** + * maximizeWindow + * @return + */ + maximizeWindow() { + console.log('maximized!') + } + /** * render * @return @@ -41,6 +50,14 @@ export class WindowTopBar extends Component { </Typography> <WindowTopBarButtons windowId={windowId} /> <WindowTopMenuButton className={ns('window-menu-btn')} windowId={windowId} /> + <IconButton + color="inherit" + className={ns('window-maximize')} + aria-label={t('maximizeWindow')} + onClick={this.maximizeWindow} + > + <FullscreenIcon /> + </IconButton> <IconButton color="inherit" className={ns('window-close')} diff --git a/src/components/WorkspaceMosaic.js b/src/components/WorkspaceMosaic.js index 629081a2c..7a7de1ac2 100644 --- a/src/components/WorkspaceMosaic.js +++ b/src/components/WorkspaceMosaic.js @@ -47,6 +47,7 @@ export class WorkspaceMosaic extends React.Component { */ determineWorkspaceLayout() { const { windows, workspace } = this.props; + console.log(windows); const windowKeys = Object.keys(windows).sort(); const leaveKeys = getLeaves(workspace.layout); // Check every window is in the layout, and all layout windows are present @@ -91,7 +92,7 @@ export class WorkspaceMosaic extends React.Component { return ( <Mosaic renderTile={this.tileRenderer} - initialValue={workspace.layout || this.determineWorkspaceLayout()} + initialValue={this.determineWorkspaceLayout() || workspace.layout} onChange={this.mosaicChange} className="mirador-mosaic" zeroStateView={this.zeroStateView} diff --git a/src/containers/Workspace.js b/src/containers/Workspace.js index ea8c5b444..d0eaac1da 100644 --- a/src/containers/Workspace.js +++ b/src/containers/Workspace.js @@ -1,5 +1,6 @@ import { compose } from 'redux'; import { connect } from 'react-redux'; +import pickBy from 'lodash/pickBy'; import { Workspace } from '../components/Workspace'; /** @@ -11,7 +12,10 @@ const mapStateToProps = state => ( { isWorkspaceControlPanelVisible: state.config.workspaceControlPanel.enabled, workspaceType: state.config.workspace.type, - windows: state.windows, + windows: pickBy(state.windows, window => window.displayable === true), + // Object.keys(state.windows) + // .map(id => state.windows[id]) + // .filter(window => window.displayable === true), } ); diff --git a/src/state/actions/action-types.js b/src/state/actions/action-types.js index 117eda905..f3a2ddf1f 100644 --- a/src/state/actions/action-types.js +++ b/src/state/actions/action-types.js @@ -8,6 +8,7 @@ const ActionTypes = { SET_WORKSPACE_FULLSCREEN: 'SET_WORKSPACE_FULLSCREEN', ADD_MANIFEST: 'ADD_MANIFEST', ADD_WINDOW: 'ADD_WINDOW', + MAXIMIZE_WINDOW: 'MAXIMIZE_WINDOW', NEXT_CANVAS: 'NEXT_CANVAS', PREVIOUS_CANVAS: 'PREVIOUS_CANVAS', SET_CANVAS: 'SET_CANVAS', diff --git a/src/state/actions/window.js b/src/state/actions/window.js index afb5c766f..3f2df733f 100644 --- a/src/state/actions/window.js +++ b/src/state/actions/window.js @@ -30,10 +30,20 @@ export function addWindow(options) { companionWindowIds: [], rotation: null, view: 'single', + displayable: true, }; return { type: ActionTypes.ADD_WINDOW, window: { ...defaultOptions, ...options } }; } +/** + * maximizeWindow + * @param {String} windowId + * @memberof ActionCreators + */ +export function maximizeWindow(windowId) { + return { type: ActionTypes.MAXIMIZE_WINDOW, windowId }; +} + /** */ export function updateWindow(id, payload) { return { type: ActionTypes.UPDATE_WINDOW, id, payload }; diff --git a/src/state/reducers/windows.js b/src/state/reducers/windows.js index 7a1739f8e..d025bf1f1 100644 --- a/src/state/reducers/windows.js +++ b/src/state/reducers/windows.js @@ -9,6 +9,15 @@ export const windowsReducer = (state = {}, action) => { case ActionTypes.ADD_WINDOW: return { ...state, [action.window.id]: action.window }; + case ActionTypes.MAXIMIZE_WINDOW: + return Object.keys(state).reduce((object, key) => { + if (key !== action.windowId) { + object[key] = state[key]; + object[key].displayable = false; + } + return object; + }, {}); + case ActionTypes.UPDATE_WINDOW: return updateIn(state, [action.id], orig => merge(orig, action.payload)); -- GitLab