feature request: full screen toggle button

[cag-oss]

And by full screen I mean toggling that panel to be the only one visible, and taking up all of the available space.

[abenhamdine]

Would be very useful IMHO, because often the user want to focus on a sole topic on screen, so don't need to see other windows then.

[nomcopter]

This is pretty complicated to do at the Mosaic level given the flexibility it gives to the consumer to fill the tiles. This should be doable at the consumer level by adding a button that when pressed, sets the current node to the current window, and stores the original state within. It is then up to the consumer to hide the other buttons and make disable close, split, etc from that state.

[bradennapier]

Just got done doing this FYI. Below is a rough example for anyone interested.

import {
  MosaicWindow, Mosaic, ExpandButton, RemoveButton,
} from 'react-mosaic-component';

function handleFullscreen(id) {
  const elem = document.getElementById(id);
  launchFullscreen(elem);
}

function handleChange() {}

export default class DynamicGrid extends React.Component<*> {
  static defaultProps = {
    grid: {
      direction: 'row',
      first: {
        direction: 'column',
        first: 'Information',
        second: 'Chart',
        splitPercentage: 25,
      },
      second: {
        first: 'Order Book',
        second: 'Depth Chart',
        splitPercentage: 80,
        direction: 'column',
      },
      splitPercentage: 50,
      new: 'New Window',
    },
  };

  render() {
    return (
      <GridWrapper>
        <GridProvider>
          <GridContainer>
            <GridToolbar />
            <GridMosaicWrapper>
              <Mosaic
                className={styles.grid}
                initialValue={this.props.grid}
                onChange={handleChange.bind(this)}
                renderTile={(id, path) => {
                  const windowID = `grid-window-${id}`;
                  const toolbarControls = [
                    <button
                      key="fs"
                      data-tip="Fullscreen"
                      key="fs"
                      className={styles.fullscreen}
                      onClick={() => handleFullscreen(windowID)}
                    />,
                    <div data-tip="Expand" key="expand">
                      <ExpandButton onClick={() => this.props.onExpand && this.props.onExpand(widget)} />
                    </div>,
                    <div data-tip="Remove" key="remove">
                      <RemoveButton onClick={() => this.props.onRemove && this.props.onRemove(widget)} />
                    </div>,
                  ];
                  const mosaicWindowProps = {
                    title: id,
                    path,
                    toolbarControls,
                  };
                  return (
                    <div key={windowID} id={windowID}>
                      <MosaicWindow {...mosaicWindowProps}>
                        <GridWidgetWrapper>
                          Rendering
                          {id}
                        </GridWidgetWrapper>
                      </MosaicWindow>
                    </div>
                  );
                }}
              />
            </GridMosaicWrapper>
          </GridContainer>
        </GridProvider>
      </GridWrapper>
    );
  }
}

With launchFullscreen:

export function launchFullscreen(elem = document.documentElement) {
  const { screen } = window;
  if (
    window.fullScreen
    || document.webkitIsFullScreen
    || elem.fullscreenElement
    || document.fullscreenElement
    || (window.innerWidth === screen.width && window.innerHeight === screen.height)
  ) {
    return exitFullscreen();
  }
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.mozRequestFullScreen) {
    elem.mozRequestFullScreen();
  } else if (elem.webkitRequestFullscreen) {
    elem.webkitRequestFullscreen();
  } else if (elem.webkitRequestFullScreen) {
    elem.webkitRequestFullScreen();
  } else if (elem.msRequestFullscreen) {
    elem.msRequestFullscreen();
  }
}

export function exitFullscreen(elem = document.documentElement) {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  } else if (document.webkitExitFullscreen) {
    document.webkitExitFullscreen();
  } else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  } else if (elem.exitFullscreen) {
    elem.exitFullscreen();
  } else if (elem.mozCancelFullScreen) {
    elem.mozCancelFullScreen();
  } else if (elem.webkitExitFullscreen) {
    elem.webkitExitFullscreen();
  } else if (elem.webkitExitFullScreen) {
    elem.webkitExitFullScreen();
  } else if (elem.msExitFullscreen) {
    elem.msExitFullscreen();
  }
}

[MrRainesE]

@bradennapier How do you set your icons? The approach I'm using below isn't working, and the icons aren't showing for me. What am I doing wrong?

<div data-tip="Remove" key="remove">
    <RemoveButton onClick={() => mosaicActions.remove(path)}>
        <Close />
    </RemoveButton>
</div>