Make userlist responsive

This commit is contained in:
Ken-Håvard Lieng 2016-01-11 23:31:06 +01:00
parent 937560e859
commit 67b83fa3d6
15 changed files with 115 additions and 51 deletions

View file

@ -19,7 +19,7 @@ export default class ChatTitle extends Component {
};
render() {
const { title, tab, channel, toggleSearch } = this.props;
const { title, tab, channel, toggleSearch, toggleUserList } = this.props;
const topic = Autolinker.link(channel.get('topic') || '', { stripPrefix: false });
let leaveTitle;
@ -45,6 +45,7 @@ export default class ChatTitle extends Component {
title={leaveTitle}
onClick={this.handleLeaveClick}
/>
<i className="icon-user button-userlist" onClick={toggleUserList} />
</div>
<div className="userlist-bar">
<i className="icon-user" />

View file

@ -1,7 +1,7 @@
import React, { Component } from 'react';
import { connect } from 'react-redux';
import pure from 'pure-render-decorator';
import { toggleMenu } from '../actions/tab';
import { toggleMenu } from '../actions/ui';
@pure
class Navicon extends Component {

View file

@ -20,8 +20,8 @@ export default class TabList extends Component {
};
render() {
const { channels, servers, privateChats, showMenu, selected } = this.props;
const className = showMenu ? 'tablist off-canvas' : 'tablist';
const { channels, servers, privateChats, showTabList, selected } = this.props;
const className = showTabList ? 'tablist off-canvas' : 'tablist';
const tabs = [];
channels.forEach((server, address) => {

View file

@ -22,7 +22,8 @@ export default class UserList extends Component {
};
render() {
const { tab, openPrivateChat, select } = this.props;
const { tab, openPrivateChat, select, showUserList } = this.props;
const className = showUserList ? 'userlist off-canvas' : 'userlist';
const users = [];
const style = {};
@ -41,7 +42,7 @@ export default class UserList extends Component {
}
return (
<div className="userlist" style={style}>
<div className={className} style={style}>
<Infinite containerHeight={this.state.height} elementHeight={24}>
{users}
</Infinite>