Merge pull request #1087 from asaadmahmoodspin/ui-improvements

Improving direct messages modal and some improvements for popovers

web/react/components/more_channels.jsx

@@ -83,7 +83,7 @@ export default class MoreChannels extends React.Component {
                 moreChannels = <LoadingScreen />;
             } else if (channels.length) {
                 moreChannels = (
-                    <table className='more-channel-table table'>
+                    <table className='more-table table'>
                         <tbody>
                             {channels.map(function cMap(channel, index) {
                                 var joinButton;
@@ -108,8 +108,8 @@ export default class MoreChannels extends React.Component {
                                 return (
                                     <tr key={channel.id}>
                                         <td>
-                                            <p className='more-channel-name'>{channel.display_name}</p>
-                                            <p className='more-channel-description'>{channel.description}</p>
+                                            <p className='more-name'>{channel.display_name}</p>
+                                            <p className='more-description'>{channel.description}</p>
                                         </td>
                                         <td className='td--action'>
                                             {joinButton}

web/react/components/more_direct_channels.jsx

@@ -140,12 +140,12 @@ export default class MoreDirectChannels extends React.Component {
         if (user.nickname) {
             const separator = fullName ? ' - ' : '';
             details.push(
-                <span
+                <p
                     key={`${user.nickname}__nickname`}
-                    className='nickname'
+                    className='more-description'
                 >
                     {separator + user.nickname}
-                </span>
+                </p>
             );
         }
 
@@ -170,31 +170,38 @@ export default class MoreDirectChannels extends React.Component {
         }
 
         return (
-            <li
-                key={user.id}
-                className='direct-channel'
-            >
-                <div className='col-xs-1 image-div'>
+            <tr>
+                <td
+                    key={user.id}
+                    className='direct-channel'
+                >
                     <img
-                        className='profile-image'
+                        className='profile-img pull-left'
+                        width='38'
+                        height='38'
                         src={`/api/v1/users/${user.id}/image?time=${user.update_at}`}
                     />
-                </div>
-                <div className='col-xs-9'>
-                    <div className='username'>
+                    <div className='more-name'>
                         {user.username}
                     </div>
-                    <div>
-                        {details}
-                    </div>
-                </div>
-                <div className='col-xs-2 btn-div'>
+                    {details}
+                </td>
+                <td className='td--action lg'>
                     {joinButton}
-                </div>
-            </li>
+                </td>
+            </tr>
         );
     }
 
+    componentDidUpdate(prevProps) {
+        if (!prevProps.show && this.props.show) {
+            $(ReactDOM.findDOMNode(this.refs.userList)).css('max-height', $(window).height() - 300);
+            if ($(window).width() > 768) {
+                $(ReactDOM.findDOMNode(this.refs.userList)).perfectScrollbar();
+            }
+        }
+    }
+
     render() {
         if (!this.props.show) {
             return null;
@@ -213,7 +220,7 @@ export default class MoreDirectChannels extends React.Component {
         const userEntries = users.map(this.createRowForUser);
 
         if (userEntries.length === 0) {
-            userEntries.push(<li key='no-users-found'>{'No users found :('}</li>);
+            userEntries.push(<tr key='no-users-found'><td>{'No users found :('}</td></tr>);
         }
 
         let memberString = 'Member';
@@ -232,26 +239,35 @@ export default class MoreDirectChannels extends React.Component {
             <Modal
                 className='modal-direct-channels'
                 show={this.props.show}
-                bsSize='large'
                 onHide={this.handleHide}
             >
                 <Modal.Header closeButton={true}>
-                    <Modal.Title>{'More Direct Messages'}</Modal.Title>
+                    <Modal.Title>{'Team Directory'}</Modal.Title>
                 </Modal.Header>
                 <Modal.Body>
-                    <div>
-                        <input
-                            ref='filter'
-                            className='form-control filter-textbox'
-                            placeholder='Search members'
-                            onInput={this.handleFilterChange}
-                            style={{width: '200px', display: 'inline'}}
-                        />
-                        <span className='member-count pull-right'>{count}</span>
+                    <div className='row filter-row'>
+                        <div className='col-sm-6'>
+                            <input
+                                ref='filter'
+                                className='form-control filter-textbox'
+                                placeholder='Search members'
+                                onInput={this.handleFilterChange}
+                            />
+                        </div>
+                        <div className='col-sm-6'>
+                            <span className='member-count'>{count}</span>
+                        </div>
+                    </div>
+                    <div
+                        ref='userList'
+                        className='user-list'
+                    >
+                        <table className='more-table table'>
+                            <tbody>
+                                {userEntries}
+                            </tbody>
+                        </table>
                     </div>
-                    <ul className='user-list'>
-                        {userEntries}
-                    </ul>
                 </Modal.Body>
                 <Modal.Footer>
                     <button

web/react/components/sidebar.jsx

@@ -132,7 +132,9 @@ export default class Sidebar extends React.Component {
         SocketStore.addChangeListener(this.onSocketChange);
         PreferenceStore.addChangeListener(this.onChange);
 
-        $('.nav-pills__container').perfectScrollbar();
+        if ($(window).width() > 768) {
+            $('.nav-pills__container').perfectScrollbar();
+        }
 
         this.updateTitle();
         this.updateUnreadIndicators();

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

@@ -140,7 +140,7 @@
 			padding: 0;
 		}
 	}
-	.more-channel-table {
+	.more-table {
 		margin: 0;
 		table-layout: fixed;
 		p {
@@ -150,9 +150,11 @@
 			@include opacity(0.8);
 			margin: 5px 0;
 		}
-		.more-channel-name {
+		.more-name {
 			font-weight: 600;
 			font-size: 0.95em;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 		tbody {
 			> tr {
@@ -175,6 +177,9 @@
 						padding: 8px 15px 8px 8px;
 						width: 80px;
 						vertical-align: middle;
+						&.lg {
+							width: 110px;
+						}
 					}
 				}
 			}
@@ -331,47 +336,42 @@
 }
 
 .modal-direct-channels {
-    .user-list {
-        list-style-type: none;
-        margin: 15px 0px 0px;
-        max-height: 600px;
-        padding: 0px;
-        overflow: auto;
 
-        li {
-            border-bottom: 1px solid #ddd;
-            height: 60px;
-            padding: 10px 0px;
+	.user-list {
+		margin-top: 20px;
+		overflow: auto;
+		-webkit-overflow-scrolling: touch;
+		max-height: 500px;
+		position: relative;
+	}
 
-            .image-div {
-                padding: 0px;
+	.table {
+		margin-top: 10px;
+	}
 
-                .profile-image {
-                    width: 40px;
-                    height: 40px;
-                    @include border-radius(20px);
-                }
-            }
+	.modal-body {
+		padding: 20px 0 0;
+		@include clearfix;
+	}
 
-            .username {
-                font-weight: bold;
-            }
+	.filter-row {
+		padding: 0 15px;
+	}
 
-            .nickname {
-                color: #888;
-            }
+	.member-count {
+		margin-top: 5px;
+		float: right;
+		@include opacity(0.8);
+	}
 
-            .btn-div {
-                padding: 0px;
-                .btn-message {
-                    position: relative;
-                    top: 5px;
-                }
-            }
+	.more-description {
+		@include opacity(0.7);
+	}
 
-            &:last-child {
-                border-bottom: 0px;
-            }
-        }
-    }
+	.profile-img {
+		-moz-border-radius: 50px;
+		-webkit-border-radius: 50px;
+		border-radius: 50px;
+		margin-right: 8px;
+	}
 }

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

@@ -270,6 +270,13 @@
             height: auto;
         }
     }
+    .modal-direct-channels {
+        .member-count {
+            float: none;
+            margin-top: 10px;
+            display: block;
+        }
+    }
     .center-file-overlay {
         font-size: 1.3em;
     }

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

@@ -230,13 +230,6 @@
     font-weight:500;
 }
 
-.profile-img {
-    width:128px;
-    height:128px;
-    margin-bottom: 10px;
-    @include border-radius(128px);
-}
-
 .sel-btn {
     margin-right:5px;
 }