Skip to content
GitLab
Unverified Commit c9ddd042 authored by Jeremy Letto's avatar Jeremy Letto Committed by GitHub
Browse files

Webatrice: Update nav (#4380) 



* wip: subnav debug

* nav redesign

* remove unnecessary code

* remove subnav

* add leaveRoom button

Co-authored-by: default avatarJeremy Letto <jeremy.letto@datasite.com>
parent da922292
Hide whitespace changes
Inline Side-by-side
webclient/src/components/Header/Header.css
View file @ c9ddd042
......@@ -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 {
......
webclient/src/components/Header/Header.tsx
View file @ c9ddd042
......@@ -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 => ({
......
webclient/src/components/ThreePaneLayout/ThreePaneLayout.css
View file @ c9ddd042
......@@ -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;
}
webclient/src/containers/Room/Room.css
View file @ c9ddd042
.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;
......
webclient/src/containers/Room/Room.tsx
View file @ c9ddd042
......@@ -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>
)}
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>
)}
side={(
<Paper className="room-view__side overflow-scroll">
<div className="room-view__side-label">
Users in this room: {users.length}
<div className="room-view__main">
<ThreePaneLayout
fixedHeight
top={(
<Paper className="room-view__games overflow-scroll">
<Games room={room} />
</Paper>
)}
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>
);
}
......
webclient/src/containers/Server/Server.tsx
View file @ c9ddd042
......@@ -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={(
......
webclient/src/index.css
View file @ c9ddd042
......@@ -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;
}
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment