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>
2021-06-15 02:12:04 -05:00 · 2021-06-15 02:12:04 -05:00 · c9ddd042fc
commit c9ddd042fc
parent da9222929b
7 changed files with 205 additions and 115 deletions
--- a/webclient/src/components/Header/Header.css
+++ b/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 {
--- a/webclient/src/components/Header/Header.tsx
+++ b/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 => ({
--- a/webclient/src/components/ThreePaneLayout/ThreePaneLayout.css
+++ b/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;
 }
--- a/webclient/src/containers/Room/Room.css
+++ b/webclient/src/containers/Room/Room.css
@ -1,4 +1,5 @@
 .room-view,
+.room-view__main,
 .room-view__games,
 .room-view__messages,
 .room-view__messages-content,
@ -6,12 +7,17 @@
  height: 100%;
 }

+.room-view,
 .room-view__messages,
 .room-view__side {
  display: flex;
  flex-direction: column;
 }

+.room-view__main {
+  overflow: hidden;
+}
+
 .room-view__messages-sayMessage {
  width: 100%;
  margin: 10px auto 2px;
--- a/webclient/src/containers/Room/Room.tsx
+++ b/webclient/src/containers/Room/Room.tsx
@ -53,45 +53,48 @@ class Room extends Component<any> {
    return (
      <div className="room-view">
        <AuthGuard />
-        <ThreePaneLayout
-          fixedHeight

-          top={(
-            <Paper className="room-view__games overflow-scroll">
-              <Games room={room} />
-            </Paper>    
-          )}
+        <div className="room-view__main">
+          <ThreePaneLayout
+            fixedHeight

-          bottom={(
-            <div className="room-view__messages">
-              <Paper className="room-view__messages-content overflow-scroll">
-                <ScrollToBottomOnChanges changes={messages} content={(
-                  <Messages messages={messages} />
-                )} />
-              </Paper>
-              <Paper className="room-view__messages-sayMessage">
-                <SayMessage onSubmit={this.handleRoomSay} />
-              </Paper>
-            </div>
-          )}
+            top={(
+              <Paper className="room-view__games overflow-scroll">
+                <Games room={room} />
+              </Paper>    
+            )}

-          side={(
-            <Paper className="room-view__side overflow-scroll">
-              <div className="room-view__side-label">
-                Users in this room: {users.length}
+            bottom={(
+              <div className="room-view__messages">
+                <Paper className="room-view__messages-content overflow-scroll">
+                  <ScrollToBottomOnChanges changes={messages} content={(
+                    <Messages messages={messages} />
+                  )} />
+                </Paper>
+                <Paper className="room-view__messages-sayMessage">
+                  <SayMessage onSubmit={this.handleRoomSay} />
+                </Paper>
              </div>
-              <VirtualList
-                className="room-view__side-list"
-                itemKey={(index, data) => users[index].name }
-                items={ users.map(user => (
-                  <ListItem button className="room-view__side-list__item">
-                    <UserDisplay user={user} />
-                  </ListItem>
-                ) ) }
-              />
-            </Paper>
-          )}
-        />
+            )}
+
+            side={(
+              <Paper className="room-view__side overflow-scroll">
+                <div className="room-view__side-label">
+                  Users in this room: {users.length}
+                </div>
+                <VirtualList
+                  className="room-view__side-list"
+                  itemKey={(index, data) => users[index].name }
+                  items={ users.map(user => (
+                    <ListItem button className="room-view__side-list__item">
+                      <UserDisplay user={user} />
+                    </ListItem>
+                  ) ) }
+                />
+              </Paper>
+            )}
+          />
+        </div>
      </div>
    );
  }
--- a/webclient/src/containers/Server/Server.tsx
+++ b/webclient/src/containers/Server/Server.tsx
@ -95,7 +95,9 @@ const ServerRooms = ({ rooms, joinedRooms, history, message, users}) => (
      )}

      bottom={(
-        <Paper className="serverMessage overflow-scroll" dangerouslySetInnerHTML={{ __html: message }} />
+        <Paper className="serverMessage overflow-scroll">
+          <div className="serverMessage__content" dangerouslySetInnerHTML={{ __html: message }} />
+        </Paper>
      )}

      side={(
--- a/webclient/src/index.css
+++ b/webclient/src/index.css
@ -40,6 +40,11 @@ b {
  font-weight: bold;
 }

+a {
+  color: inherit;
+  text-decoration: none;
+}
+
 .overflow-scroll {
  overflow-y: scroll; /* has to be scroll, not auto */
  -webkit-overflow-scrolling: touch;
@ -54,4 +59,8 @@ b {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
+}
+
+.disabled-link {
+  pointer-events: none;
 }