Webatrice: Nav Update (#4367)

webclient/package.json

@@ -5,19 +5,6 @@
   "dependencies": {
     "@material-ui/core": "^4.11.4",
     "@material-ui/icons": "^4.11.2",
-    "@types/jest": "24.0.20",
-    "@types/jquery": "^3.3.31",
-    "@types/lodash": "^4.14.145",
-    "@types/material-ui": "^0.21.8",
-    "@types/node": "12.11.7",
-    "@types/prop-types": "^15.7.3",
-    "@types/protobufjs": "^6.0.0",
-    "@types/react": "16.9.11",
-    "@types/react-dom": "16.9.3",
-    "@types/react-redux": "^7.1.5",
-    "@types/react-router-dom": "^5.1.0",
-    "@types/redux": "^3.6.0",
-    "@types/redux-form": "^8.2.0",
     "jquery": "^3.4.1",
     "lodash": "^4.17.15",
     "prop-types": "^15.7.2",
@@ -31,8 +18,7 @@
     "react-window": "^1.8.5",
     "redux": "^4.0.4",
     "redux-form": "^8.2.6",
-    "redux-thunk": "^2.3.0",
+    "redux-thunk": "^2.3.0"
-    "typescript": "3.6.4"
   },
   "scripts": {
     "postinstall": "echo 'Copying shared files...' && ./copy_shared_files.sh",
@@ -57,7 +43,21 @@
     ]
   },
   "devDependencies": {
+    "@types/jest": "24.0.20",
+    "@types/jquery": "^3.3.31",
+    "@types/lodash": "^4.14.145",
+    "@types/material-ui": "^0.21.8",
+    "@types/node": "12.11.7",
+    "@types/prop-types": "^15.7.3",
+    "@types/protobufjs": "^6.0.0",
+    "@types/react": "16.9.11",
+    "@types/react-dom": "16.9.3",
+    "@types/react-redux": "^7.1.5",
+    "@types/react-router-dom": "^5.1.0",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
-    "@types/react-window": "^1.8.2"
+    "@types/react-window": "^1.8.2",
+    "@types/redux": "^3.6.0",
+    "@types/redux-form": "^8.2.0",
+    "typescript": "3.6.4"
   }
 }

webclient/src/components/Header/Header.css

@@ -3,17 +3,21 @@
 
 .Header__logo {
   display: flex;
+  align-items: center;
+}
+
+.Header__logo a {
+  line-height: 1;
 }
 
 .Header__logo img {
-  height: 40px;
+  height: 32px;
 }
 
 .Header-content {
   display: flex;
   align-items: center;
   width: 100%;
-  padding: 5px;
   color: white;
 }
 
@@ -21,47 +25,26 @@
   font-size: 12px;
 }
 
+.Header-server__indicator {
+  display: inline-block;
+  height: 12px;
+  width: 12px;
+  background: red;
+  border: 1px solid;
+  border-radius: 50%;
+  margin-left: 10px;
+}
+
 .Header-nav {
-  width: 100%;
-  display: flex;
-  align-items: center;
-}
-
-.Header-nav__items {
   width: 100%;
   display: flex;
   justify-content: flex-end;
-  align-items: center;
-}
-
-.Header-nav__item {
-  list-style: none;
-  margin: 0 10px;
 }
 
 .Header-nav__menu {
   margin-left: 10px;
 }
 
-.Header-account {
-  display: flex;
-  align-items: center;
-}
-
-.Header-account__name {
-  margin-right: 10px;
-  font-weight: bold;
-}
-
-.Header-account__indicator {
-  display: inline-block;
-  height: 16px;
-  width: 16px;
-  background: red;
-  border: 2px solid;
-  border-radius: 50%;
-}
-
 .temp-subnav__rooms {
   display: flex;
   align-items: center;

webclient/src/components/Header/Header.tsx

@@ -20,6 +20,7 @@ import logo from "./logo.png";
 class Header extends Component<HeaderProps> {
   state: HeaderState;
   options: string[] = [
+    'Account',
     'Decks',
     'Replays',
   ];
@@ -64,11 +65,14 @@ class Header extends Component<HeaderProps> {
   render() {
     const { joinedRooms, server, state, user } = this.props;
     const anchorEl = this.state.anchorEl;
-    const options = [ ...this.options ];
+    let options = [ ...this.options ];
 
     if (user && AuthenticationService.isModerator(user)) {
-      options.push('Administration');
+      options = [
-      options.push('Logs');
+        ...options,
+        'Administration',
+        'Logs'
+      ];
     }
 
     return (
@@ -76,51 +80,46 @@ class Header extends Component<HeaderProps> {
         {/*<header className="Header">*/}
         <AppBar position="static">
           <Toolbar variant="dense">
-            <NavLink to={RouteEnum.SERVER} className="Header__logo">
+            <div className="Header__logo">
-              <img src={logo} alt="logo" />
+              <NavLink to={RouteEnum.SERVER}>
-            </NavLink>
+                <img src={logo} alt="logo" />
+              </NavLink>
+              { AuthenticationService.isConnected(state) && (
+                <span className="Header-server__indicator"></span>
+              ) }
+            </div>
             { AuthenticationService.isConnected(state) && (
               <div className="Header-content">
                 <nav className="Header-nav">
-                  <ul className="Header-nav__items">
+                  <div className="Header-nav__menu">
-                    <NavLink to={RouteEnum.ACCOUNT} className="plain-link">
+                    <IconButton
-                      <div className="Header-account">
+                      aria-label="more"
-                        <span className="Header-account__name">
+                      aria-controls="long-menu"
-                          {user.name}
+                      aria-haspopup="true"
-                        </span>
+                      onClick={this.handleMenuClick}
-                        <span className="Header-account__indicator"></span>
+                    >
-                      </div>
+                      <MenuRoundedIcon />
-                    </NavLink>
+                    </IconButton>
-                    <div className="Header-nav__menu">
+                    <Menu
-                      <IconButton
+                      id="long-menu"
-                        aria-label="more"
+                      anchorEl={anchorEl}
-                        aria-controls="long-menu"
+                      keepMounted
-                        aria-haspopup="true"
+                      open={!!anchorEl}
-                        onClick={this.handleMenuClick}
+                      onClose={this.handleMenuClose}
-                      >
+                      PaperProps={{
-                        <MenuRoundedIcon fontSize="large" />
+                        style: {
-                      </IconButton>
+                          marginTop: '32px',
-                      <Menu
+                          width: '20ch',
-                        id="long-menu"
+                        },
-                        anchorEl={anchorEl}
+                      }}
-                        keepMounted
+                    >
-                        open={!!anchorEl}
+                      {options.map((option) => (
-                        onClose={this.handleMenuClose}
+                        <MenuItem key={option} onClick={() => this.handleMenuItemClick(option)}>
-                        PaperProps={{
+                          {option}
-                          style: {
+                        </MenuItem>
-                            marginTop: '53px',
+                      ))}
-                            width: '20ch',
+                    </Menu>
-                          },
+                  </div>
-                        }}
-                      >
-                        {options.map((option) => (
-                          <MenuItem key={option} onClick={() => this.handleMenuItemClick(option)}>
-                            {option}
-                          </MenuItem>
-                        ))}
-                      </Menu>
-                    </div>
-                  </ul>
                 </nav>
               </div>
             ) }

webclient/src/containers/Logs/Logs.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line
 import React, { Component } from "react";
 import { connect } from "react-redux";
-import { withRouter } from "react-router-dom";
 import * as _ from "lodash";
 
 import { ModeratorService } from "api";
@@ -96,4 +95,14 @@ const mapStateToProps = state => ({
   logs: ServerSelectors.getLogs(state)
 });
 
-export default withRouter(connect(mapStateToProps)(Logs));
+export default connect(mapStateToProps)(Logs);
+
+
+
+
+
+
+
+
+
+