Skip to content
Snippets Groups Projects
Commit f101adcb authored by Shaun Ellis's avatar Shaun Ellis
Browse files

[WIP] - allows for maximizing windows in react-mosaic layouts

parent 0d52b0a8
No related branches found
No related tags found
No related merge requests found
...@@ -4,6 +4,7 @@ import Typography from '@material-ui/core/Typography'; ...@@ -4,6 +4,7 @@ import Typography from '@material-ui/core/Typography';
import IconButton from '@material-ui/core/IconButton'; import IconButton from '@material-ui/core/IconButton';
import MenuIcon from '@material-ui/icons/MenuSharp'; import MenuIcon from '@material-ui/icons/MenuSharp';
import CloseIcon from '@material-ui/icons/CloseSharp'; import CloseIcon from '@material-ui/icons/CloseSharp';
import FullscreenIcon from '@material-ui/icons/FullscreenSharp';
import Toolbar from '@material-ui/core/Toolbar'; import Toolbar from '@material-ui/core/Toolbar';
import AppBar from '@material-ui/core/AppBar'; import AppBar from '@material-ui/core/AppBar';
import classNames from 'classnames'; import classNames from 'classnames';
...@@ -17,6 +18,14 @@ import ns from '../config/css-ns'; ...@@ -17,6 +18,14 @@ import ns from '../config/css-ns';
* WindowTopBar * WindowTopBar
*/ */
export class WindowTopBar extends Component { export class WindowTopBar extends Component {
/**
* maximizeWindow
* @return
*/
maximizeWindow() {
console.log('maximized!')
}
/** /**
* render * render
* @return * @return
...@@ -41,6 +50,14 @@ export class WindowTopBar extends Component { ...@@ -41,6 +50,14 @@ export class WindowTopBar extends Component {
</Typography> </Typography>
<WindowTopBarButtons windowId={windowId} /> <WindowTopBarButtons windowId={windowId} />
<WindowTopMenuButton className={ns('window-menu-btn')} 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 <IconButton
color="inherit" color="inherit"
className={ns('window-close')} className={ns('window-close')}
......
...@@ -47,6 +47,7 @@ export class WorkspaceMosaic extends React.Component { ...@@ -47,6 +47,7 @@ export class WorkspaceMosaic extends React.Component {
*/ */
determineWorkspaceLayout() { determineWorkspaceLayout() {
const { windows, workspace } = this.props; const { windows, workspace } = this.props;
console.log(windows);
const windowKeys = Object.keys(windows).sort(); const windowKeys = Object.keys(windows).sort();
const leaveKeys = getLeaves(workspace.layout); const leaveKeys = getLeaves(workspace.layout);
// Check every window is in the layout, and all layout windows are present // Check every window is in the layout, and all layout windows are present
...@@ -91,7 +92,7 @@ export class WorkspaceMosaic extends React.Component { ...@@ -91,7 +92,7 @@ export class WorkspaceMosaic extends React.Component {
return ( return (
<Mosaic <Mosaic
renderTile={this.tileRenderer} renderTile={this.tileRenderer}
initialValue={workspace.layout || this.determineWorkspaceLayout()} initialValue={this.determineWorkspaceLayout() || workspace.layout}
onChange={this.mosaicChange} onChange={this.mosaicChange}
className="mirador-mosaic" className="mirador-mosaic"
zeroStateView={this.zeroStateView} zeroStateView={this.zeroStateView}
......
import { compose } from 'redux'; import { compose } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import pickBy from 'lodash/pickBy';
import { Workspace } from '../components/Workspace'; import { Workspace } from '../components/Workspace';
/** /**
...@@ -11,7 +12,10 @@ const mapStateToProps = state => ( ...@@ -11,7 +12,10 @@ const mapStateToProps = state => (
{ {
isWorkspaceControlPanelVisible: state.config.workspaceControlPanel.enabled, isWorkspaceControlPanelVisible: state.config.workspaceControlPanel.enabled,
workspaceType: state.config.workspace.type, 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),
} }
); );
......
...@@ -8,6 +8,7 @@ const ActionTypes = { ...@@ -8,6 +8,7 @@ const ActionTypes = {
SET_WORKSPACE_FULLSCREEN: 'SET_WORKSPACE_FULLSCREEN', SET_WORKSPACE_FULLSCREEN: 'SET_WORKSPACE_FULLSCREEN',
ADD_MANIFEST: 'ADD_MANIFEST', ADD_MANIFEST: 'ADD_MANIFEST',
ADD_WINDOW: 'ADD_WINDOW', ADD_WINDOW: 'ADD_WINDOW',
MAXIMIZE_WINDOW: 'MAXIMIZE_WINDOW',
NEXT_CANVAS: 'NEXT_CANVAS', NEXT_CANVAS: 'NEXT_CANVAS',
PREVIOUS_CANVAS: 'PREVIOUS_CANVAS', PREVIOUS_CANVAS: 'PREVIOUS_CANVAS',
SET_CANVAS: 'SET_CANVAS', SET_CANVAS: 'SET_CANVAS',
......
...@@ -30,10 +30,20 @@ export function addWindow(options) { ...@@ -30,10 +30,20 @@ export function addWindow(options) {
companionWindowIds: [], companionWindowIds: [],
rotation: null, rotation: null,
view: 'single', view: 'single',
displayable: true,
}; };
return { type: ActionTypes.ADD_WINDOW, window: { ...defaultOptions, ...options } }; 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) { export function updateWindow(id, payload) {
return { type: ActionTypes.UPDATE_WINDOW, id, payload }; return { type: ActionTypes.UPDATE_WINDOW, id, payload };
......
...@@ -9,6 +9,15 @@ export const windowsReducer = (state = {}, action) => { ...@@ -9,6 +9,15 @@ export const windowsReducer = (state = {}, action) => {
case ActionTypes.ADD_WINDOW: case ActionTypes.ADD_WINDOW:
return { ...state, [action.window.id]: action.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: case ActionTypes.UPDATE_WINDOW:
return updateIn(state, [action.id], orig => merge(orig, action.payload)); return updateIn(state, [action.id], orig => merge(orig, action.payload));
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment