Merge pull request #2347 from hmhealey/morechannels

Fixed positioning of elements in MoreChannels modal

web/react/components/more_channels.jsx

@@ -1,7 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-import * as utils from '../utils/utils.jsx';
+import * as Utils from '../utils/utils.jsx';
 import * as client from '../utils/client.jsx';
 import * as AsyncClient from '../utils/async_client.jsx';
 import ChannelStore from '../stores/channel_store.jsx';
@@ -24,6 +24,7 @@ export default class MoreChannels extends React.Component {
         this.onListenerChange = this.onListenerChange.bind(this);
         this.handleJoin = this.handleJoin.bind(this);
         this.handleNewChannel = this.handleNewChannel.bind(this);
+        this.createChannelRow = this.createChannelRow.bind(this);
 
         var initState = getStateFromStores();
         initState.channelType = '';
@@ -48,7 +49,7 @@ export default class MoreChannels extends React.Component {
     }
     onListenerChange() {
         var newState = getStateFromStores();
-        if (!utils.areObjectsEqual(newState.channels, this.state.channels)) {
+        if (!Utils.areObjectsEqual(newState.channels, this.state.channels)) {
             this.setState(newState);
         }
     }
@@ -58,7 +59,7 @@ export default class MoreChannels extends React.Component {
             () => {
                 $(ReactDOM.findDOMNode(this.refs.modal)).modal('hide');
                 AsyncClient.getChannel(channel.id);
-                utils.switchChannel(channel);
+                Utils.switchChannel(channel);
                 this.setState({joiningChannel: -1});
             },
             (err) => {
@@ -70,26 +71,9 @@ export default class MoreChannels extends React.Component {
         $(ReactDOM.findDOMNode(this.refs.modal)).modal('hide');
         this.setState({showNewChannelModal: true});
     }
-    render() {
+    createChannelRow(channel, index) {
-        var serverError;
+        let joinButton;
-        if (this.state.serverError) {
+        if (this.state.joiningChannel === index) {
-            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
-        }
-
-        var self = this;
-        var moreChannels;
-
-        if (this.state.channels != null) {
-            var channels = this.state.channels;
-            if (channels.loading) {
-                moreChannels = <LoadingScreen/>;
-            } else if (channels.length) {
-                moreChannels = (
-                    <table className='more-table table'>
-                        <tbody>
-                            {channels.map(function cMap(channel, index) {
-                                var joinButton;
-                                if (self.state.joiningChannel === index) {
             joinButton = (
                 <img
                     className='join-channel-loading-gif'
@@ -99,7 +83,7 @@ export default class MoreChannels extends React.Component {
         } else {
             joinButton = (
                 <button
-                                            onClick={self.handleJoin.bind(self, channel, index)}
+                    onClick={this.handleJoin.bind(self, channel, index)}
                     className='btn btn-primary'
                 >
                     <FormattedMessage
@@ -112,16 +96,40 @@ export default class MoreChannels extends React.Component {
 
         return (
             <tr key={channel.id}>
-                                        <td>
+                <td className='more-row'>
+                    <div className='more-details'>
                         <p className='more-name'>{channel.display_name}</p>
                         <p className='more-description'>{channel.purpose}</p>
-                                        </td>
+                    </div>
-                                        <td className='td--action'>
+                    <div className='more-actions'>
                         {joinButton}
+                    </div>
                 </td>
             </tr>
         );
-                            })}
+    }
+    render() {
+        let maxHeight = 1000;
+        if (Utils.windowHeight() <= 1200) {
+            maxHeight = Utils.windowHeight() - 300;
+        }
+
+        var serverError;
+        if (this.state.serverError) {
+            serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+        }
+
+        var moreChannels;
+
+        if (this.state.channels != null) {
+            var channels = this.state.channels;
+            if (channels.loading) {
+                moreChannels = <LoadingScreen/>;
+            } else if (channels.length) {
+                moreChannels = (
+                    <table className='more-table table'>
+                        <tbody>
+                            {channels.map(this.createChannelRow)}
                         </tbody>
                     </table>
                 );
@@ -192,7 +200,10 @@ export default class MoreChannels extends React.Component {
                                 onModalDismissed={() => this.setState({showNewChannelModal: false})}
                             />
                         </div>
-                        <div className='modal-body'>
+                        <div
+                            className='modal-body'
+                            style={{maxHeight}}
+                        >
                             {moreChannels}
                             {serverError}
                         </div>

web/react/components/user_list_row.jsx

@@ -28,7 +28,6 @@ export default function UserListRow({user, actions}) {
         <tr>
             <td
                 key={user.id}
-                className='direct-channel'
                 style={{display: 'flex'}}
             >
                 <img

web/sass-files/sass/partials/_modal.scss

@@ -23,17 +23,29 @@
 		border-radius: 50px;
 		margin-right: 8px;
 	}
+	.more-row {
+		display: flex;
+
+		.more-details {
+			flex-grow: 1;
+			flex-shrink: 1;
+			overflow: hidden;
+			text-overflow: ellipsis;
+		}
+		.more-actions {
+			flex-grow: 0;
+			flex-shrink: 0;
+		}
+	}
 	.more-name {
 		font-weight: 600;
 		font-size: 0.95em;
-		overflow: hidden;
+		white-space: nowrap;
-		text-overflow: ellipsis;
 	}
 	.more-description {
 		@include opacity(0.7);
 		display: block;
-		overflow: hidden;
+		white-space: nowrap;
-		text-overflow: ellipsis;
 	}
 	tbody {
 		> tr {