From b00ffa83e7371fa7dd4570130ee8b506943aee01 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 16 Oct 2015 18:06:22 +0500
Subject: Multiple UI Improvements

---
 web/react/components/more_channels.jsx        |  6 +--
 web/react/components/more_direct_channels.jsx | 72 +++++++++++++-------------
 web/react/components/popover_list_members.jsx |  2 +-
 web/react/components/post_info.jsx            |  2 +-
 web/react/components/sidebar.jsx              |  6 +--
 web/react/components/user_profile.jsx         |  2 +-
 web/sass-files/sass/partials/_modal.scss      | 73 +++++++++++++--------------
 web/sass-files/sass/partials/_settings.scss   |  7 ---
 8 files changed, 82 insertions(+), 88 deletions(-)

diff --git a/web/react/components/more_channels.jsx b/web/react/components/more_channels.jsx
index a20c5cad5..a0084ad30 100644
--- a/web/react/components/more_channels.jsx
+++ b/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}
diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index 08b64de8b..a599c1872 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/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,28 +170,26 @@ 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>
         );
     }
 
@@ -213,7 +211,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(<div key='no-users-found'>{'No users found :('}</div>);
         }
 
         let memberString = 'Member';
@@ -232,26 +230,32 @@ 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 className='user-list'>
+                        <table className='more-table table'>
+                            <tbody>
+                                {userEntries}
+                            </tbody>
+                        </table>
                     </div>
-                    <ul className='user-list'>
-                        {userEntries}
-                    </ul>
                 </Modal.Body>
                 <Modal.Footer>
                     <button
diff --git a/web/react/components/popover_list_members.jsx b/web/react/components/popover_list_members.jsx
index 16ae693fa..5ea452830 100644
--- a/web/react/components/popover_list_members.jsx
+++ b/web/react/components/popover_list_members.jsx
@@ -57,7 +57,7 @@ export default class PopoverListMembers extends React.Component {
             <OverlayTrigger
                 trigger='click'
                 placement='bottom'
-                rootClose='true'
+                rootClose={true}
                 overlay={<Popover title='Members'>{popoverHtml}</Popover>}
             >
             <div id='member_popover'>
diff --git a/web/react/components/post_info.jsx b/web/react/components/post_info.jsx
index a95095ff6..36260d77c 100644
--- a/web/react/components/post_info.jsx
+++ b/web/react/components/post_info.jsx
@@ -150,7 +150,7 @@ export default class PostInfo extends React.Component {
             <ul className='post-header post-info'>
                 <li className='post-header-col'>
                     <OverlayTrigger
-                        delayShow='500'
+                        delayShow={500}
                         container={this}
                         placement='top'
                         overlay={tooltip}
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 7a209de2b..6b3dae4cd 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -479,7 +479,7 @@ export default class Sidebar extends React.Component {
         if (handleClose && !badge) {
             closeButton = (
                 <OverlayTrigger
-                    delayShow='1000'
+                    delayShow={1000}
                     placement='top'
                     overlay={removeTooltip}
                 >
@@ -611,7 +611,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 {'Channels'}
                                 <OverlayTrigger
-                                    delayShow='500'
+                                    delayShow={500}
                                     placement='top'
                                     overlay={createChannelTootlip}
                                 >
@@ -644,7 +644,7 @@ export default class Sidebar extends React.Component {
                             <h4>
                                 {'Private Groups'}
                                 <OverlayTrigger
-                                    delayShow='500'
+                                    delayShow={500}
                                     placement='top'
                                     overlay={createGroupTootlip}
                                 >
diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx
index 715161b4f..47d836321 100644
--- a/web/react/components/user_profile.jsx
+++ b/web/react/components/user_profile.jsx
@@ -93,7 +93,7 @@ export default class UserProfile extends React.Component {
             <OverlayTrigger
                 trigger='click'
                 placement='right'
-                rootClose='true'
+                rootClose={true}
                 overlay={<Popover title={this.state.profile.username}>{dataContent}</Popover>}
             >
             <div
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index b942a5a40..344b11e9e 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/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,7 +150,7 @@
 			@include opacity(0.8);
 			margin: 5px 0;
 		}
-		.more-channel-name {
+		.more-name {
 			font-weight: 600;
 			font-size: 0.95em;
 		}
@@ -175,6 +175,9 @@
 						padding: 8px 15px 8px 8px;
 						width: 80px;
 						vertical-align: middle;
+						&.lg {
+							width: 110px;
+						}
 					}
 				}
 			}
@@ -331,47 +334,41 @@
 }
 
 .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;
+	}
 
-            .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;
+	}
 }
diff --git a/web/sass-files/sass/partials/_settings.scss b/web/sass-files/sass/partials/_settings.scss
index 0c2f25eab..3146c16d5 100644
--- a/web/sass-files/sass/partials/_settings.scss
+++ b/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;
 }
-- 
cgit v1.2.3-1-g7c22


From e840cb612f9ddf537a0d9ec7223ea87bc15b0308 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Fri, 16 Oct 2015 18:49:10 +0500
Subject: Fixing more direct channel modal scrolling

---
 web/react/components/more_direct_channels.jsx | 14 +++++++++++++-
 web/sass-files/sass/partials/_modal.scss      |  3 +++
 web/sass-files/sass/partials/_responsive.scss |  7 +++++++
 3 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index a599c1872..e99cdc257 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -193,6 +193,15 @@ export default class MoreDirectChannels extends React.Component {
         );
     }
 
+    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;
@@ -249,7 +258,10 @@ export default class MoreDirectChannels extends React.Component {
                             <span className='member-count'>{count}</span>
                         </div>
                     </div>
-                    <div className='user-list'>
+                    <div
+                        ref='userList'
+                        className='user-list'
+                    >
                         <table className='more-table table'>
                             <tbody>
                                 {userEntries}
diff --git a/web/sass-files/sass/partials/_modal.scss b/web/sass-files/sass/partials/_modal.scss
index 344b11e9e..0e474a1e2 100644
--- a/web/sass-files/sass/partials/_modal.scss
+++ b/web/sass-files/sass/partials/_modal.scss
@@ -153,6 +153,8 @@
 		.more-name {
 			font-weight: 600;
 			font-size: 0.95em;
+			overflow: hidden;
+			text-overflow: ellipsis;
 		}
 		tbody {
 			> tr {
@@ -340,6 +342,7 @@
 		overflow: auto;
 		-webkit-overflow-scrolling: touch;
 		max-height: 500px;
+		position: relative;
 	}
 
 	.table {
diff --git a/web/sass-files/sass/partials/_responsive.scss b/web/sass-files/sass/partials/_responsive.scss
index 09f2c179e..c41199cac 100644
--- a/web/sass-files/sass/partials/_responsive.scss
+++ b/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;
     }
-- 
cgit v1.2.3-1-g7c22


From 2a67116e7158a177ba6ac985a654e2e7c7bd4987 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Sun, 18 Oct 2015 20:03:34 +0500
Subject: Updating userEntries div to tr td

---
 web/react/components/more_direct_channels.jsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/react/components/more_direct_channels.jsx b/web/react/components/more_direct_channels.jsx
index e99cdc257..105199035 100644
--- a/web/react/components/more_direct_channels.jsx
+++ b/web/react/components/more_direct_channels.jsx
@@ -220,7 +220,7 @@ export default class MoreDirectChannels extends React.Component {
         const userEntries = users.map(this.createRowForUser);
 
         if (userEntries.length === 0) {
-            userEntries.push(<div key='no-users-found'>{'No users found :('}</div>);
+            userEntries.push(<tr key='no-users-found'><td>{'No users found :('}</td></tr>);
         }
 
         let memberString = 'Member';
-- 
cgit v1.2.3-1-g7c22


From 13a35539f335c44cebdd285cc6b2e27ffeea3a75 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <Unknowngi@live.com>
Date: Mon, 19 Oct 2015 14:36:31 +0500
Subject: Updating scroll on LHS

---
 web/react/components/sidebar.jsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 889bc0fbd..6e4a53e1b 100644
--- a/web/react/components/sidebar.jsx
+++ b/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();
-- 
cgit v1.2.3-1-g7c22