gitea-mirror/Cockatrice
1
0
Fork 0
mirror of https://github.com/Cockatrice/Cockatrice.git synced 2026-01-15 22:42:37 -08:00
Code Issues Packages Projects Releases 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
5 changed files with 270 additions and 2538 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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>
) }