Select the previous tab or redirect to /connect when closing a tab, move some CSS from inline react styles to classes

client/src/js/components/Chat.jsx

@@ -7,10 +7,20 @@ var Search = require('./Search.jsx');
 var MessageBox = require('./MessageBox.jsx');
 var MessageInput = require('./MessageInput.jsx');
 var UserList = require('./UserList.jsx');
+var selectedTabStore = require('../stores/selectedTab');
 var tabActions = require('../actions/tab');
 
 var Chat = React.createClass({
-    mixins: [Router.State],
+    mixins: [
+        Router.State,
+        Reflux.connect(selectedTabStore, 'selectedTab')
+    ],
+
+    getInitialState: function() {
+        return {
+            selectedTab: selectedTabStore.getState()
+        };
+    },
 
     componentWillMount: function() {
         if (!window.loaded) {
@@ -25,8 +35,19 @@ var Chat = React.createClass({
     },
 
     render: function() {
+        var chatClass;
+        var tab = this.state.selectedTab;
+
+        if (!tab.channel) {
+            chatClass = 'chat-server';
+        } else if (tab.channel[0] !== '#') {
+            chatClass = 'chat-private';
+        } else {
+            chatClass = 'chat-channel';
+        }
+
         return (
-            <div>
+            <div className={chatClass}>
                 <ChatTitle />
                 <Search />
                 <MessageBox indent={window.messageIndent} />

client/src/js/components/ChatTitle.jsx

@@ -3,6 +3,7 @@ var Reflux = require('reflux');
 
 var channelStore = require('../stores/channel');
 var selectedTabStore = require('../stores/selectedTab');
+var serverActions = require('../actions/server');
 var channelActions = require('../actions/channel');
 var searchActions = require('../actions/search');
 var privateChatActions = require('../actions/privateChat');
@@ -23,9 +24,11 @@ var ChatTitle = React.createClass({
     handleLeaveClick: function() {
         var tab = this.state.selectedTab;
 
-        if (tab.channel[0] === '#') {
+        if (!tab.channel) {
+            serverActions.disconnect(tab.server);
+        } else if (tab.channel[0] === '#') {
             channelActions.part([tab.channel], tab.server);
-        } else if (tab.channel) {
+        } else {
             privateChatActions.close(tab.server, tab.channel);
         }
     },
@@ -33,26 +36,29 @@ var ChatTitle = React.createClass({
     render: function() {
         var tab = this.state.selectedTab;
         var usercount = channelStore.getUsers(tab.server, tab.channel).length;
-        var iconStyle = {};
-        var userListStyle = {};
+        var leaveTitle;
 
         if (!tab.channel) {
-            iconStyle.display = 'none';
-            userListStyle.display = 'none';
+            leaveTitle = 'Disconnect';
         } else if (tab.channel[0] !== '#') {
-            userListStyle.display = 'none';
+            leaveTitle = 'Close';
+        } else {
+            leaveTitle = 'Leave';
         }
 
         return (
             <div>
                 <div className="chat-title-bar">
                     <span className="chat-title">{tab.name}</span>
-                    <i className="icon-search" title="Search" style={iconStyle} onClick={searchActions.toggle}></i>
-                    <i className="icon-logout button-leave" title="Leave" style={iconStyle} onClick={this.handleLeaveClick}></i>
+                    <i className="icon-search" title="Search" onClick={searchActions.toggle}></i>
+                    <i 
+                        className="icon-logout button-leave" 
+                        title={leaveTitle} 
+                        onClick={this.handleLeaveClick}></i>
                 </div>
                 <div className="userlist-bar">
-                    <i className="icon-user" style={userListStyle}></i>
-                    <span className="chat-usercount" style={userListStyle}>{usercount || null}</span>
+                    <i className="icon-user"></i>
+                    <span className="chat-usercount">{usercount || null}</span>
                 </div>
             </div>
         );

client/src/js/components/MessageBox.jsx

@@ -63,15 +63,10 @@ var MessageBox = React.createClass({
 		var tab = this.state.selectedTab;
 		var dest = tab.channel || tab.server;
 		var lines = [];
-		var style = {};
 		var innerStyle = {
 			paddingLeft: this.props.indent + 'px'
 		};
 
-		if (!tab.channel || tab.channel[0] !== '#') {
-			style.right = 0;
-		}
-
 		for (var j = 0; j < this.state.messages.length; j++) {
 			var message = this.state.messages[j];
 			var messageClass = 'message';
@@ -96,7 +91,7 @@ var MessageBox = React.createClass({
 
 		if (lines.length !== 1) {
 			return (
-				<div className="messagebox" style={style}>
+				<div className="messagebox">
 					<Infinite ref="list" containerHeight={this.state.height} elementHeight={24}>
 						{lines}
 					</Infinite>
@@ -104,7 +99,7 @@ var MessageBox = React.createClass({
 			);
 		} else {
 			return (
-				<div className="messagebox" style={style}>
+				<div className="messagebox">
 					<div ref="list">{lines}</div>
 				</div>
 			);