aly/servatrice
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Webatrice: Nav Update (#4367)

Browse source
This commit is contained in:
Jeremy Letto 2021-06-01 19:47:19 -05:00 committed by GitHub
parent 0d05f9097d
commit fac7bfaa92
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 270 additions and 2538 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2625
webclient/package-lock.json generated
View file

File diff suppressed because it is too large Load diff

32
webclient/package.json
View file

@ -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",
"typescript": "3.6.4"
"redux-thunk": "^2.3.0"
},
"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"
}
}

49
webclient/src/components/Header/Header.css
View file

@ -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;

89
webclient/src/components/Header/Header.tsx
View file

@ -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.push('Logs');
options = [
...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">
<img src={logo} alt="logo" />
</NavLink>
<div className="Header__logo">
<NavLink to={RouteEnum.SERVER}>
<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">
<NavLink to={RouteEnum.ACCOUNT} className="plain-link">
<div className="Header-account">
<span className="Header-account__name">
{user.name}
</span>
<span className="Header-account__indicator"></span>
</div>
</NavLink>
<div className="Header-nav__menu">
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={this.handleMenuClick}
>
<MenuRoundedIcon fontSize="large" />
</IconButton>
<Menu
id="long-menu"
anchorEl={anchorEl}
keepMounted
open={!!anchorEl}
onClose={this.handleMenuClose}
PaperProps={{
style: {
marginTop: '53px',
width: '20ch',
},
}}
>
{options.map((option) => (
<MenuItem key={option} onClick={() => this.handleMenuItemClick(option)}>
{option}
</MenuItem>
))}
</Menu>
</div>
</ul>
<div className="Header-nav__menu">
<IconButton
aria-label="more"
aria-controls="long-menu"
aria-haspopup="true"
onClick={this.handleMenuClick}
>
<MenuRoundedIcon />
</IconButton>
<Menu
id="long-menu"
anchorEl={anchorEl}
keepMounted
open={!!anchorEl}
onClose={this.handleMenuClose}
PaperProps={{
style: {
marginTop: '32px',
width: '20ch',
},
}}
>
{options.map((option) => (
<MenuItem key={option} onClick={() => this.handleMenuItemClick(option)}>
{option}
</MenuItem>
))}
</Menu>
</div>
</nav>
</div>
) }

13
webclient/src/containers/Logs/Logs.tsx
View file

@ -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);