Webatrice: Update nav (#4380)

* wip: subnav debug

* nav redesign

* remove unnecessary code

* remove subnav

* add leaveRoom button

Co-authored-by: Jeremy Letto <jeremy.letto@datasite.com>

webclient/src/components/Header/Header.css

@@ -38,11 +38,74 @@
 .Header-nav {
   width: 100%;
   display: flex;
-  justify-content: flex-end;
+  justify-content: space-between;
 }
 
-.Header-nav__menu {
-  margin-left: 10px;
+.Header-nav__links {
+  width: 100%;
+  display: flex;
+  padding-left: 50px;
+  align-items: center;
+}
+
+.Header-nav__link {
+  position: relative;
+  height: 100%;
+}
+
+.Header-nav__link:hover {
+  background: rgba(0, 0, 0, .125);
+}
+
+.Header-nav__link:hover .Header-nav__link-menu {
+  display: block;
+}
+
+.Header-nav__link-btn {
+  display: flex;
+  height: 100%;
+  width: 100%;
+  align-items: center;
+  padding: 5px 10px;
+  font-weight: bold;
+}
+
+.Header-nav__link-btn__icon {
+  margin-left: 5px;
+}
+
+.Header-nav__link-menu {
+  display: none;
+  position: absolute;
+  bottom: 0;
+  transform: translateY(100%);
+  min-width: 150px;
+  background: #3f51b5;
+  box-shadow: 1px 1px 2px 0px black;
+}
+
+.Header-nav__link-menu__item {
+  padding: 0 !important;
+}
+
+.Header-nav__link-menu__btn {
+  padding: 6px 16px;
+  width: 100%;
+  color: white;
+  display: flex;
+  justify-content: space-between;
+}
+
+.Header-nav__actions {
+  display: flex;
+}
+
+.Header-nav__action {
+
+}
+
+.Header-nav__action button {
+  color: white;
 }
 
 .temp-subnav__rooms {

webclient/src/components/Header/Header.tsx

@@ -2,11 +2,13 @@ import React, { Component } from "react";
 import { connect } from "react-redux";
 import { NavLink, withRouter, generatePath } from "react-router-dom";
 import AppBar from "@material-ui/core/AppBar";
-import Chip from "@material-ui/core/Chip";
 import IconButton from "@material-ui/core/IconButton";
 import Menu from "@material-ui/core/Menu";
 import MenuItem from "@material-ui/core/MenuItem";
 import Toolbar from "@material-ui/core/Toolbar";
+import ArrowDropDownIcon from '@material-ui/icons/ArrowDropDown';
+import CloseIcon from '@material-ui/icons/Close';
+import MailOutlineRoundedIcon from '@material-ui/icons/MailOutline';
 import MenuRoundedIcon from '@material-ui/icons/MenuRounded';
 import * as _ from "lodash";
 
@@ -21,20 +23,18 @@ class Header extends Component<HeaderProps> {
   state: HeaderState;
   options: string[] = [
     'Account',
-    'Decks',
     'Replays',
   ];
 
   constructor(props) {
     super(props);
 
-    this.state = {
-      anchorEl: null,
-    };
+    this.state = { anchorEl: null };
 
-    this.handleMenuClick = this.handleMenuClick.bind(this);
+    this.handleMenuOpen = this.handleMenuOpen.bind(this);
     this.handleMenuItemClick = this.handleMenuItemClick.bind(this);
     this.handleMenuClose = this.handleMenuClose.bind(this);
+    this.leaveRoom = this.leaveRoom.bind(this);
   }
 
   componentDidUpdate(prevProps) {
@@ -47,24 +47,28 @@ class Header extends Component<HeaderProps> {
     }
   }
 
-  handleMenuClick({ target }) {
-    this.setState({ anchorEl: target });
+  handleMenuOpen(event) {
+    this.setState({ anchorEl: event.target });
   }
 
   handleMenuItemClick(option: string) {
     const route = RouteEnum[option.toUpperCase()];
     this.props.history.push(generatePath(route));
-
-    this.handleMenuClose();
   }
 
   handleMenuClose() {
     this.setState({ anchorEl: null });
   }
 
+  leaveRoom(event, roomId) {
+    event.preventDefault();
+    RoomsService.leaveRoom(roomId);
+  };
+
   render() {
-    const { joinedRooms, server, state, user } = this.props;
-    const anchorEl = this.state.anchorEl;
+    const { joinedRooms, state, user } = this.props;
+    const { anchorEl } = this.state;
+
     let options = [ ...this.options ];
 
     if (user && AuthenticationService.isModerator(user)) {
@@ -76,36 +80,70 @@ class Header extends Component<HeaderProps> {
     }
 
     return (
-      <div>
-        {/*<header className="Header">*/}
-        <AppBar position="static">
-          <Toolbar variant="dense">
-            <div className="Header__logo">
-              <NavLink to={RouteEnum.SERVER}>
-                <img src={logo} alt="logo" />
-              </NavLink>
-              { AuthenticationService.isConnected(state) && (
-                <span className="Header-server__indicator"></span>
-              ) }
-            </div>
+      <AppBar className="Header" position="static">
+        <Toolbar variant="dense">
+          <div className="Header__logo">
+            <NavLink to={RouteEnum.SERVER}>
+              <img src={logo} alt="logo" />
+            </NavLink>
             { AuthenticationService.isConnected(state) && (
-              <div className="Header-content">
-                <nav className="Header-nav">
-                  <div className="Header-nav__menu">
-                    <IconButton
-                      aria-label="more"
-                      aria-controls="long-menu"
-                      aria-haspopup="true"
-                      onClick={this.handleMenuClick}
+              <span className="Header-server__indicator"></span>
+            ) }
+          </div>
+          { AuthenticationService.isConnected(state) && (
+            <div className="Header-content">
+              <nav className="Header-nav">
+                <nav className="Header-nav__links">
+                  <div className="Header-nav__link">
+                    <NavLink
+                      className="Header-nav__link-btn"
+                      to={ joinedRooms.length ? generatePath(RouteEnum.ROOM, { roomId: joinedRooms[0].roomId }) : RouteEnum.SERVER }
                     >
-                      <MenuRoundedIcon />
+                      Rooms
+                      <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    </NavLink>
+                    <div className="Header-nav__link-menu">
+                      {joinedRooms.map(({ name, roomId }) => (
+                        <MenuItem className="Header-nav__link-menu__item" key={roomId}>
+                          <NavLink className="Header-nav__link-menu__btn" to={ generatePath(RouteEnum.ROOM, { roomId: roomId }) }>
+                            {name}
+
+                            <IconButton size="small" edge="end" onClick={event => this.leaveRoom(event, roomId)}>
+                              <CloseIcon style={{ fontSize: 10, color: 'white' }} />
+                            </IconButton>
+                          </NavLink>
+                        </MenuItem>
+                      ))}
+                    </div>
+                  </div>
+                  <div className="Header-nav__link">
+                    <NavLink className="Header-nav__link-btn" to={ RouteEnum.GAME }>
+                      Games
+                      <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    </NavLink>
+                  </div>
+                  <div className="Header-nav__link">
+                    <NavLink className="Header-nav__link-btn" to={ RouteEnum.DECKS }>
+                      Decks
+                      <ArrowDropDownIcon className="Header-nav__link-btn__icon" fontSize="small" />
+                    </NavLink>
+                  </div>
+                </nav>
+                <div className="Header-nav__actions">
+                  <div className="Header-nav__action">
+                    <IconButton>
+                      <MailOutlineRoundedIcon style={{ color: 'inherit' }} />
+                    </IconButton>
+                  </div>
+                  <div className="Header-nav__action">
+                    <IconButton onClick={this.handleMenuOpen}>
+                      <MenuRoundedIcon style={{ color: 'inherit' }} />
                     </IconButton>
                     <Menu
-                      id="long-menu"
                       anchorEl={anchorEl}
                       keepMounted
                       open={!!anchorEl}
-                      onClose={this.handleMenuClose}
+                      onClose={() => this.handleMenuClose()}
                       PaperProps={{
                         style: {
                           marginTop: '32px',
@@ -114,55 +152,22 @@ class Header extends Component<HeaderProps> {
                       }}
                     >
                       {options.map((option) => (
-                        <MenuItem key={option} onClick={() => this.handleMenuItemClick(option)}>
+                        <MenuItem key={option} onClick={(event) => this.handleMenuItemClick(option)}>
                           {option}
                         </MenuItem>
                       ))}
                     </Menu>
                   </div>
-                </nav>
-              </div>
-            ) }
-          </Toolbar>
-        </AppBar>
-        <div className="temp-subnav">
-          {
-            !!joinedRooms.length && (
-              <Rooms rooms={joinedRooms} />
-            )
-          }
-          <div className="temp-subnav__games">
-          </div>
-          <div className="temp-subnav__chats">
-          </div>
-        </div>
-      </div>
+                </div>
+              </nav>
+            </div>
+          ) }
+        </Toolbar>
+      </AppBar>
     )
   }
 }
 
-const Rooms = props => {
-
-  const onLeaveRoom = (event, roomId) => {
-    event.preventDefault();
-    RoomsService.leaveRoom(roomId);
-  };
-
-  return <div className="temp-subnav__rooms">
-    <span>Rooms: </span>
-    {
-      _.reduce(props.rooms, (rooms, { name, roomId}) => {
-        rooms.push(
-          <NavLink to={generatePath(RouteEnum.ROOM, { roomId })} className="temp-chip" key={roomId}>
-            <Chip label={name} color="primary" onDelete={(event) => onLeaveRoom(event, roomId)} />
-          </NavLink>
-        );
-        return rooms;
-      }, [])
-    }
-  </div>
-};
-
 interface HeaderProps {
   state: number;
   server: string;
@@ -172,7 +177,7 @@ interface HeaderProps {
 }
 
 interface HeaderState {
-  anchorEl: Element;
+  anchorEl: Element
 }
 
 const mapStateToProps = state => ({

webclient/src/components/ThreePaneLayout/ThreePaneLayout.css

@@ -26,9 +26,11 @@
   height: 100%;
   width: 100%;
   flex-shrink: 1;
+  overflow: hidden;
 }
 
 .three-pane-layout .grid-main__top.fixedHeight,
 .three-pane-layout .grid-main__bottom.fixedHeight {
   height: 50%;
+  overflow: visible;
 }