Make userlist responsive

client/src/css/style.css

@@ -252,6 +252,15 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   background: #DDD;
 }
 
+.button-userlist {
+  display: none;
+  border-left: 1px solid #DDD;
+}
+
+.chat-server .button-userlist, .chat-private .button-userlist {
+  display: none;
+}
+
 .chat-title {
   margin-left: 15px;
   font-size: 24px;
@@ -309,7 +318,7 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   top: 50px;
   bottom: 50px;
   right: 200px;
-  z-index: 2;
+  z-index: 3;
   background: #f0f0f0;
 }
 
@@ -398,6 +407,9 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   right: 0;
   width: 200px;
   border-left: 1px solid #DDD;
+  background: #f0f0f0;
+  z-index: 2;
+  transition: transform .2s;
 }
 
 .userlist > div {
@@ -492,4 +504,32 @@ i[class^="icon-"]:before, i[class*=" icon-"]:before {
   .chat-title {
     margin-left: 0;
   }
+
+  .userlist-bar {
+    display: none;
+  }
+
+  .userlist {
+    transform: translateX(200px);
+  }
+
+  .userlist.off-canvas {
+    transform: translateX(0);
+  }
+
+  .chat-channel .chat-title-bar, .chat-channel .messagebox {
+    right: 0;
+  }
+
+  .button-userlist {
+    display: inline-block;
+  }
+
+  .chat-topic {
+    display: none;
+  }
+
+  .search {
+    right: 0;
+  }
 }

client/src/js/actions.js

@@ -39,5 +39,6 @@ export const SOCKET_USERS = 'SOCKET_USERS';
 export const TAB_HISTORY_POP = 'TAB_HISTORY_POP';
 export const TOGGLE_MENU = 'TOGGLE_MENU';
 export const TOGGLE_SEARCH = 'TOGGLE_SEARCH';
+export const TOGGLE_USERLIST = 'TOGGLE_USERLIST';
 export const UPLOAD_CERT = 'UPLOAD_CERT';
 export const WHOIS = 'WHOIS';

client/src/js/actions/tab.js

@@ -46,15 +46,3 @@ export function setSelectedUser(server, user = null) {
     user
   };
 }
-
-export function hideMenu() {
-  return {
-    type: actions.HIDE_MENU
-  };
-}
-
-export function toggleMenu() {
-  return {
-    type: actions.TOGGLE_MENU
-  };
-}

client/src/js/actions/ui.js

@@ -0,0 +1,19 @@
+import * as actions from '../actions';
+
+export function hideMenu() {
+  return {
+    type: actions.HIDE_MENU
+  };
+}
+
+export function toggleMenu() {
+  return {
+    type: actions.TOGGLE_MENU
+  };
+}
+
+export function toggleUserList() {
+  return {
+    type: actions.TOGGLE_USERLIST
+  };
+}

client/src/js/components/ChatTitle.js

@@ -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" />

client/src/js/components/Navicon.js

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

client/src/js/components/TabList.js

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

client/src/js/components/UserList.js

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

client/src/js/containers/App.js

@@ -3,13 +3,14 @@ import { connect } from 'react-redux';
 import { pushPath } from 'redux-simple-router';
 import pure from 'pure-render-decorator';
 import TabList from '../components/TabList';
-import * as actions from '../actions/tab';
+import { select } from '../actions/tab';
+import { hideMenu } from '../actions/ui';
 
 @pure
 class App extends Component {
   render() {
-    const { showMenu, children } = this.props;
+    const { showTabList, children } = this.props;
-    const mainClass = showMenu ? 'main-container off-canvas' : 'main-container';
+    const mainClass = showTabList ? 'main-container off-canvas' : 'main-container';
     return (
       <div>
         <TabList {...this.props} />
@@ -26,9 +27,9 @@ function mapStateToProps(state) {
     servers: state.servers,
     channels: state.channels,
     privateChats: state.privateChats,
-    showMenu: state.showMenu,
+    showTabList: state.ui.showTabList,
     selected: state.tab.selected
   };
 }
 
-export default connect(mapStateToProps, { pushPath, ...actions })(App);
+export default connect(mapStateToProps, { pushPath, select, hideMenu })(App);

client/src/js/containers/Chat.js

@@ -15,9 +15,10 @@ import { searchMessages, toggleSearch } from '../actions/search';
 import { select, setSelectedChannel, setSelectedUser } from '../actions/tab';
 import { runCommand, sendMessage } from '../actions/message';
 import { disconnect } from '../actions/server';
-import * as inputHistoryActions from '../actions/inputHistory';
 import { setWrapWidth, setCharWidth } from '../actions/environment';
 import { stringWidth, wrapMessages } from '../util';
+import { toggleUserList } from '../actions/ui';
+import * as inputHistoryActions from '../actions/inputHistory';
 
 function updateSelected({ params, dispatch }) {
   if (params.channel) {
@@ -134,6 +135,7 @@ function mapStateToProps(state) {
     users: channel.get('users', List()),
     history: state.input.index === -1 ? null : state.input.history.get(state.input.index),
     messages: wrappedMessagesSelector(state),
+    showUserList: state.ui.showUserList,
     channel,
     tab
   };
@@ -145,6 +147,7 @@ function mapDispatchToProps(dispatch) {
     ...bindActionCreators({
       select,
       toggleSearch,
+      toggleUserList,
       searchMessages,
       runCommand,
       sendMessage,

client/src/js/containers/DevTools.js

@@ -4,7 +4,7 @@ import DockMonitor from 'redux-devtools-dock-monitor';
 import LogMonitor from 'redux-devtools-log-monitor';
 
 export default createDevTools(
-  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q">
+  <DockMonitor toggleVisibilityKey="ctrl-h" changePositionKey="ctrl-q" defaultIsVisible={false}>
     <LogMonitor theme="tomorrow" />
   </DockMonitor>
 );

client/src/js/reducers/index.js

@@ -8,8 +8,8 @@ import privateChats from './privateChats';
 import search from './search';
 import servers from './servers';
 import settings from './settings';
-import showMenu from './showMenu';
 import tab from './tab';
+import ui from './ui';
 
 export default combineReducers({
   routing: routeReducer,
@@ -21,6 +21,6 @@ export default combineReducers({
   search,
   servers,
   settings,
-  showMenu,
+  tab,
-  tab
+  ui
 });

client/src/js/reducers/showMenu.js

@@ -1,12 +0,0 @@
-import createReducer from '../util/createReducer';
-import * as actions from '../actions';
-
-export default createReducer(false, {
-  [actions.TOGGLE_MENU](state) {
-    return !state;
-  },
-
-  [actions.HIDE_MENU]() {
-    return false;
-  }
-});

client/src/js/reducers/ui.js

@@ -0,0 +1,22 @@
+import { Record } from 'immutable';
+import createReducer from '../util/createReducer';
+import * as actions from '../actions';
+
+const State = Record({
+  showTabList: false,
+  showUserList: false
+});
+
+export default createReducer(new State(), {
+  [actions.TOGGLE_MENU](state) {
+    return state.update('showTabList', show => !show);
+  },
+
+  [actions.HIDE_MENU](state) {
+    return state.set('showTabList', false);
+  },
+
+  [actions.TOGGLE_USERLIST](state) {
+    return state.update('showUserList', show => !show);
+  }
+});