Skip to content
Snippets Groups Projects
Select Git revision
  • a34930def960a7c289dfaf5e0f535442adad876e
  • mui5-annotation-on-video-stable default
  • get_setter_canvasSizeInformations
  • fix-error-div-into-p
  • annotation-on-video-v2
  • detached
  • annotation-on-video-r17
  • mui5
  • mui5-react-18
  • jacob-test
  • annotation-on-video protected
  • master
  • test-antoinev1
  • 20-fetch-thumbnail-on-annotation
  • add-research-field
  • Save
  • add-plugin
  • 14-wip-no-seek-to
  • 14-bug-on-video-time-control
  • 9_wip_videotests
  • _upgrade_material_ui
  • latest-tetras-16
  • v3.3.0
  • v3.2.0
  • v3.1.1
  • v3.1.0
  • v3.0.0
  • v3.0.0-rc.7
  • v3.0.0-rc.6
  • v3.0.0-rc.5
  • v3.0.0-rc.4
  • v3.0.0-rc.3
  • v3.0.0-rc.2
  • v3.0.0-rc.1
  • v3.0.0-beta.10
  • v3.0.0-beta.9
  • v3.0.0-beta.8
  • v3.0.0-beta.7
  • v3.0.0-beta.6
  • v3.0.0-beta.5
  • v3.0.0-beta.3
41 results

WindowTopBar.js

Blame
  • user avatar
    Mathias Maaß authored
    d317ac6b
    History
    WindowTopBar.js 2.42 KiB
    import React, { Component } from 'react';
    import PropTypes from 'prop-types';
    import { withStyles } from '@material-ui/core/styles';
    import Typography from '@material-ui/core/Typography';
    import IconButton from '@material-ui/core/IconButton';
    import MenuIcon from '@material-ui/icons/Menu';
    import CloseIcon from '@material-ui/icons/Close';
    import Toolbar from '@material-ui/core/Toolbar';
    import AppBar from '@material-ui/core/AppBar';
    import classNames from 'classnames';
    import WindowIcon from '../containers/WindowIcon';
    import WindowTopMenuButton from '../containers/WindowTopMenuButton';
    import WindowTopBarButtons from '../containers/WindowTopBarButtons';
    import ns from '../config/css-ns';
    
    
    /**
     * WindowTopBar
     */
    class WindowTopBar extends Component {
      /**
       * render
       * @return
       */
      render() {
        const {
          closeWindow, windowId, classes, toggleWindowSideBar, t, manifestTitle,
        } = this.props;
        return (
          <AppBar position="relative">
            <Toolbar disableGutters className={classNames(classes.reallyDense, ns('window-top-bar'))} variant="dense">
              <IconButton
                aria-label={t('toggleWindowSideBar')}
                color="inherit"
                onClick={toggleWindowSideBar}
              >
                <MenuIcon />
              </IconButton>
              <WindowIcon windowId={windowId} />
              <Typography variant="h3" noWrap color="inherit" className={classes.typographyBody}>
                {manifestTitle}
              </Typography>
              <WindowTopBarButtons windowId={windowId} />
              <WindowTopMenuButton className={ns('window-menu-btn')} windowId={windowId} />
              <IconButton
                color="inherit"
                className={ns('window-close')}
                aria-label={t('closeWindow')}
                onClick={closeWindow}
              >
                <CloseIcon />
              </IconButton>
            </Toolbar>
          </AppBar>
        );
      }
    }
    
    WindowTopBar.propTypes = {
      manifestTitle: PropTypes.string,
      closeWindow: PropTypes.func.isRequired,
      windowId: PropTypes.string.isRequired,
      classes: PropTypes.object.isRequired, // eslint-disable-line react/forbid-prop-types
      toggleWindowSideBar: PropTypes.func.isRequired,
      t: PropTypes.func,
    };
    
    WindowTopBar.defaultProps = {
      manifestTitle: '',
      t: key => key,
    };
    
    const styles = {
      typographyBody: {
        flexGrow: 1,
        fontSize: '1em',
      },
      reallyDense: {
        minHeight: 32,
        paddingLeft: 4,
      },
    };
    
    export default withStyles(styles)(WindowTopBar);