mirror of
https://github.com/Cockatrice/Cockatrice.git
synced 2026-04-27 07:48:01 -07:00
Add left nav (#4705)
* Automated translation update ( bf08a04cda )
* Add Layout component wip
* finish layout implementation
* convert header to left nav
* better nav item spacing
* return source files to original glory
* lint fix
* Remove height limit on login screen
* fix top spacing on 3-panel layout
---------
Co-authored-by: github-actions <github-actions@github.com>
Co-authored-by: Brent Clark <brent@backboneiq.com>
This commit is contained in:
Brent Clark
GitHub
parent
cab5f29b57
commit
cef99cba71
18 changed files with 280 additions and 201 deletions
|
|
@ -1,127 +0,0 @@
|
|||
.Header {
|
||||
}
|
||||
|
||||
.Header__logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.Header__logo a {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.Header__logo img {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.Header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.Header-serverDetails {
|
||||
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;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.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 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 10px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.temp-chip {
|
||||
margin-left: 5px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
|
||||
.temp-chip > div {
|
||||
cursor: inherit;
|
||||
}
|
||||
|
||||
|
|
@ -1,196 +0,0 @@
|
|||
import React, { useState, useEffect } from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { NavLink, useNavigate, generatePath } from 'react-router-dom';
|
||||
import AppBar from '@mui/material/AppBar';
|
||||
import IconButton from '@mui/material/IconButton';
|
||||
import Menu from '@mui/material/Menu';
|
||||
import MenuItem from '@mui/material/MenuItem';
|
||||
import Toolbar from '@mui/material/Toolbar';
|
||||
import ArrowDropDownIcon from '@mui/icons-material/ArrowDropDown';
|
||||
import CloseIcon from '@mui/icons-material/Close';
|
||||
import MailOutlineRoundedIcon from '@mui/icons-material/MailOutline';
|
||||
import MenuRoundedIcon from '@mui/icons-material/MenuRounded';
|
||||
import * as _ from 'lodash';
|
||||
|
||||
import { AuthenticationService, RoomsService } from 'api';
|
||||
import { CardImportDialog } from 'dialogs';
|
||||
import { Images } from 'images';
|
||||
import { RoomsSelectors, ServerSelectors } from 'store';
|
||||
import { Room, RouteEnum, User } from 'types';
|
||||
|
||||
import './Header.css';
|
||||
|
||||
const Header = ({ joinedRooms, serverState, user }: HeaderProps) => {
|
||||
const navigate = useNavigate();
|
||||
const [state, setState] = useState<HeaderState>({
|
||||
anchorEl: null,
|
||||
showCardImportDialog: false,
|
||||
options: [],
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
let options: string[] = [
|
||||
'Account',
|
||||
'Replays',
|
||||
];
|
||||
|
||||
if (user && AuthenticationService.isModerator(user)) {
|
||||
options = [
|
||||
...options,
|
||||
'Administration',
|
||||
'Logs'
|
||||
];
|
||||
}
|
||||
|
||||
setState(s => ({ ...s, options }));
|
||||
}, [user]);
|
||||
|
||||
const handleMenuOpen = (event) => {
|
||||
setState(s => ({ ...s, anchorEl: event.target }));
|
||||
}
|
||||
|
||||
const handleMenuItemClick = (option: string) => {
|
||||
const route = RouteEnum[option.toUpperCase()];
|
||||
navigate(generatePath(route));
|
||||
}
|
||||
|
||||
const handleMenuClose = () => {
|
||||
setState(s => ({ ...s, anchorEl: null }));
|
||||
}
|
||||
|
||||
const leaveRoom = (event, roomId) => {
|
||||
event.preventDefault();
|
||||
RoomsService.leaveRoom(roomId);
|
||||
};
|
||||
|
||||
const openImportCardWizard = () => {
|
||||
setState(s => ({ ...s, showCardImportDialog: true }));
|
||||
handleMenuClose();
|
||||
}
|
||||
|
||||
const closeImportCardWizard = () => {
|
||||
setState(s => ({ ...s, showCardImportDialog: false }));
|
||||
}
|
||||
|
||||
return (
|
||||
<AppBar className="Header" position="static">
|
||||
<Toolbar variant="dense">
|
||||
<div className="Header__logo">
|
||||
<NavLink to={RouteEnum.SERVER}>
|
||||
<img src={Images.Logo} alt="logo" />
|
||||
</NavLink>
|
||||
{ AuthenticationService.isConnected(serverState) && (
|
||||
<span className="Header-server__indicator"></span>
|
||||
) }
|
||||
</div>
|
||||
{ AuthenticationService.isConnected(serverState) && (
|
||||
<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.toString() })
|
||||
: RouteEnum.SERVER
|
||||
}
|
||||
>
|
||||
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.toString() }) }>
|
||||
{name}
|
||||
|
||||
<IconButton size="small" edge="end" onClick={event => 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 size="large">
|
||||
<MailOutlineRoundedIcon style={{ color: 'inherit' }} />
|
||||
</IconButton>
|
||||
</div>
|
||||
<div className="Header-nav__action">
|
||||
<IconButton onClick={handleMenuOpen} size="large">
|
||||
<MenuRoundedIcon style={{ color: 'inherit' }} />
|
||||
</IconButton>
|
||||
<Menu
|
||||
anchorEl={state.anchorEl}
|
||||
keepMounted
|
||||
open={!!state.anchorEl}
|
||||
onClose={() => handleMenuClose()}
|
||||
PaperProps={{
|
||||
style: {
|
||||
marginTop: '32px',
|
||||
width: '20ch',
|
||||
},
|
||||
}}
|
||||
>
|
||||
{state.options.map((option) => (
|
||||
<MenuItem key={option} onClick={(event) => handleMenuItemClick(option)}>
|
||||
{option}
|
||||
</MenuItem>
|
||||
))}
|
||||
|
||||
<MenuItem key='Import Cards' onClick={(event) => openImportCardWizard()}>
|
||||
Import Cards
|
||||
</MenuItem>
|
||||
</Menu>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
) }
|
||||
</Toolbar>
|
||||
|
||||
<CardImportDialog
|
||||
isOpen={state.showCardImportDialog}
|
||||
handleClose={closeImportCardWizard}
|
||||
></CardImportDialog>
|
||||
</AppBar>
|
||||
);
|
||||
}
|
||||
|
||||
interface HeaderProps {
|
||||
serverState: number;
|
||||
server: string;
|
||||
user: User;
|
||||
joinedRooms: Room[];
|
||||
}
|
||||
|
||||
interface HeaderState {
|
||||
anchorEl: Element;
|
||||
showCardImportDialog: boolean;
|
||||
options: string[];
|
||||
}
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
serverState: ServerSelectors.getState(state),
|
||||
server: ServerSelectors.getName(state),
|
||||
user: ServerSelectors.getUser(state),
|
||||
joinedRooms: RoomsSelectors.getJoinedRooms(state),
|
||||
});
|
||||
|
||||
export default connect(mapStateToProps)(Header);
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
|
|
@ -33,4 +33,5 @@
|
|||
.three-pane-layout .grid-main__bottom.fixedHeight {
|
||||
height: 50%;
|
||||
overflow: visible;
|
||||
padding: 0 0 16px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,4 @@
|
|||
// eslint-disable-next-line
|
||||
import React, { Component, CElement } from "react";
|
||||
import { Component, CElement } from "react";
|
||||
import { connect } from 'react-redux';
|
||||
import Grid from '@mui/material/Grid';
|
||||
import Hidden from '@mui/material/Hidden';
|
||||
|
|
@ -12,7 +11,7 @@ class ThreePaneLayout extends Component<ThreePaneLayoutProps> {
|
|||
render() {
|
||||
return (
|
||||
<div className="three-pane-layout">
|
||||
<Grid container spacing={2} className="grid">
|
||||
<Grid container rowSpacing={0} columnSpacing={2} className="grid">
|
||||
<Grid item xs={12} md={9} lg={10} className="grid-main">
|
||||
<Grid item className={
|
||||
'grid-main__top'
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@
|
|||
export { default as Card } from './Card/Card';
|
||||
export { default as CardDetails } from './CardDetails/CardDetails';
|
||||
export { default as CountryDropdown } from './CountryDropdown/CountryDropdown';
|
||||
export { default as Header } from './Header/Header';
|
||||
export { default as InputField } from './InputField/InputField';
|
||||
export { default as InputAction } from './InputAction/InputAction';
|
||||
export { default as KnownHosts } from './KnownHosts/KnownHosts';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue