From 7a14a05a9c1474a1e036f422c4904f83c313a763 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Fri, 30 Dec 2016 21:40:55 +0500
Subject: Ui fixes (#4917)

* PLT-5089 - Updating modal buttons

* PLT-5090 - Full name and position overflow

* PLT-5093 - Updating modal lists
---
 webapp/components/channel_members_modal.jsx   |  2 +-
 webapp/components/more_channels.jsx           |  2 +-
 webapp/components/more_direct_channels.jsx    |  4 ++-
 webapp/components/profile_popover.jsx         | 32 +++++++++++-----------
 webapp/components/searchable_channel_list.jsx |  4 ++-
 webapp/components/setting_item_max.jsx        |  4 +--
 webapp/sass/base/_typography.scss             |  5 ++++
 webapp/sass/components/_modal.scss            | 39 +++++++++------------------
 webapp/sass/responsive/_mobile.scss           | 35 +++++++++++-------------
 9 files changed, 58 insertions(+), 69 deletions(-)

diff --git a/webapp/components/channel_members_modal.jsx b/webapp/components/channel_members_modal.jsx
index 9f6a2a2eb..70547d409 100644
--- a/webapp/components/channel_members_modal.jsx
+++ b/webapp/components/channel_members_modal.jsx
@@ -168,7 +168,7 @@ export default class ChannelMembersModal extends React.Component {
         return (
             <div>
                 <Modal
-                    dialogClassName='more-modal'
+                    dialogClassName='more-modal more-modal--action'
                     show={this.state.show}
                     onHide={this.onHide}
                     onExited={this.props.onModalDismissed}
diff --git a/webapp/components/more_channels.jsx b/webapp/components/more_channels.jsx
index b9b841ad8..b0064f18a 100644
--- a/webapp/components/more_channels.jsx
+++ b/webapp/components/more_channels.jsx
@@ -163,7 +163,7 @@ export default class MoreChannels extends React.Component {
 
         return (
             <Modal
-                dialogClassName='more-modal more-public-channels'
+                dialogClassName='more-modal more-modal--action'
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.handleExit}
diff --git a/webapp/components/more_direct_channels.jsx b/webapp/components/more_direct_channels.jsx
index 1b287b3b2..a3318d0c8 100644
--- a/webapp/components/more_direct_channels.jsx
+++ b/webapp/components/more_direct_channels.jsx
@@ -195,7 +195,9 @@ export default class MoreDirectChannels extends React.Component {
 
     render() {
         let teamToggle;
+        let memberClass = '';
         if (global.window.mm_config.RestrictDirectMessage === 'any') {
+            memberClass = 'more-system-members';
             teamToggle = (
                 <div className='member-select__container'>
                     <select
@@ -226,7 +228,7 @@ export default class MoreDirectChannels extends React.Component {
 
         return (
             <Modal
-                dialogClassName='more-modal more-direct-channels'
+                dialogClassName={'more-modal more-direct-channels ' + memberClass}
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.handleExit}
diff --git a/webapp/components/profile_popover.jsx b/webapp/components/profile_popover.jsx
index a342f312f..8b431b643 100644
--- a/webapp/components/profile_popover.jsx
+++ b/webapp/components/profile_popover.jsx
@@ -152,34 +152,34 @@ export default class ProfilePopover extends React.Component {
         const fullname = Utils.getFullName(this.props.user);
         if (fullname) {
             dataContent.push(
-                <div
-                    data-toggle='tooltip'
-                    title={fullname}
-                    key='user-popover-fullname'
+                <OverlayTrigger
+                    delayShow={Constants.WEBRTC_TIME_DELAY}
+                    placement='top'
+                    overlay={<Tooltip id='fullNameTooltip'>{fullname}</Tooltip>}
                 >
-                    <p
-                        className='text-nowrap'
+                    <div
+                        className='overflow--ellipsis text-nowrap padding-bottom'
                     >
                         {fullname}
-                    </p>
-                </div>
+                    </div>
+                </OverlayTrigger>
             );
         }
 
         if (this.props.user.position) {
             const position = this.props.user.position.substring(0, Constants.MAX_POSITION_LENGTH);
             dataContent.push(
-                <div
-                    data-toggle='tooltip'
-                    title={position}
-                    key='user-popover-position'
+                <OverlayTrigger
+                    delayShow={Constants.WEBRTC_TIME_DELAY}
+                    placement='top'
+                    overlay={<Tooltip id='positionTooltip'>{position}</Tooltip>}
                 >
-                    <p
-                        className='text-nowrap'
+                    <div
+                        className='overflow--ellipsis text-nowrap padding-bottom'
                     >
                         {position}
-                    </p>
-                </div>
+                    </div>
+                </OverlayTrigger>
             );
         }
 
diff --git a/webapp/components/searchable_channel_list.jsx b/webapp/components/searchable_channel_list.jsx
index afd113975..df1fb61f7 100644
--- a/webapp/components/searchable_channel_list.jsx
+++ b/webapp/components/searchable_channel_list.jsx
@@ -180,7 +180,9 @@ export default class SearchableChannelList extends React.Component {
                     ref='channelList'
                     className='more-modal__list'
                 >
-                    {listContent}
+                    <div>
+                        {listContent}
+                    </div>
                 </div>
                 <div className='filter-controls'>
                     {previousButton}
diff --git a/webapp/components/setting_item_max.jsx b/webapp/components/setting_item_max.jsx
index 904e6c8d1..5971ce584 100644
--- a/webapp/components/setting_item_max.jsx
+++ b/webapp/components/setting_item_max.jsx
@@ -49,7 +49,7 @@ export default class SettingItemMax extends React.Component {
             submit = (
                 <input
                     type='submit'
-                    className='btn btn-sm btn-primary'
+                    className='btn btn-sm btn-primary pull-right'
                     href='#'
                     onClick={this.props.submit}
                     value={Utils.localizeMessage('setting_item_max.save', 'Save')}
@@ -88,7 +88,7 @@ export default class SettingItemMax extends React.Component {
                             {clientError}
                             {submit}
                             <a
-                                className='btn btn-sm theme'
+                                className='btn btn-sm pull-right'
                                 href='#'
                                 onClick={this.props.updateSection}
                             >
diff --git a/webapp/sass/base/_typography.scss b/webapp/sass/base/_typography.scss
index f595e0ed9..1d3f1d052 100644
--- a/webapp/sass/base/_typography.scss
+++ b/webapp/sass/base/_typography.scss
@@ -26,6 +26,11 @@ body {
     word-break: break-all;
 }
 
+.overflow--ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .fa {
     &.fa-margin--left {
         margin-left: 2px;
diff --git a/webapp/sass/components/_modal.scss b/webapp/sass/components/_modal.scss
index 4012a4611..e23630c3b 100644
--- a/webapp/sass/components/_modal.scss
+++ b/webapp/sass/components/_modal.scss
@@ -464,24 +464,10 @@
                 float: right;
                 margin-top: 5px;
             }
-
-            .more-modal__list {
-                max-height: calc(100vh - 270px);
-            }
         }
     }
 
     .more-modal {
-        .more-modal__list {
-            height: 100vh;
-            max-height: calc(100vh - 340px);
-        }
-
-        &.more-direct-channels {
-            .more-modal__list {
-                max-height: calc(100vh - 325px);
-            }
-        }
 
         .user-list {
             margin-top: 10px;
@@ -496,7 +482,6 @@
         }
 
         .filter-row {
-            @include clearfix;
             margin: 5px 0 10px;
             width: 300px;
         }
@@ -561,7 +546,11 @@
 .more-modal__list {
     display: flex;
     flex-direction: column;
-    overflow: auto;
+
+    > div {
+        min-height: 100%;
+        overflow: auto;
+    }
 
     .popover & {
         font-size: .95em;
@@ -606,6 +595,7 @@
     .more-modal__actions {
         flex-grow: 0;
         flex-shrink: 0;
+        margin: 5px 0 10px;
         padding-left: 20px;
     }
 
@@ -628,8 +618,7 @@
     .more-modal__row {
         border-bottom: 1px solid $light-gray;
         display: flex;
-        min-height: 70px;
-        padding: 8px 15px;
+        padding: 10px 15px;
     }
 
     p {
@@ -650,16 +639,15 @@
 .filtered-user-list {
     display: flex;
     flex-direction: column;
+    height: calc(90vh - 120px);
     width: 100%;
 
-    .filter-row {
-        flex-grow: 0;
-        flex-shrink: 0;
+    > div {
+        flex: 1;
     }
 
-    .user-list {
-        flex-grow: 1;
-        flex-shrink: 1;
+    .more-modal__list {
+        flex-grow: 500;
     }
 
     .filter-button {
@@ -669,9 +657,6 @@
     }
 
     .filter-controls {
-        @include clearfix;
-        flex-grow: 0;
-        flex-shrink: 0;
         padding: 1em 1.5em 0;
 
         .filter-control__next {
diff --git a/webapp/sass/responsive/_mobile.scss b/webapp/sass/responsive/_mobile.scss
index 16f0d3851..39f2b1a35 100644
--- a/webapp/sass/responsive/_mobile.scss
+++ b/webapp/sass/responsive/_mobile.scss
@@ -1206,6 +1206,16 @@
 }
 
 @media screen and (max-width: 640px) {
+    .filtered-user-list {
+        height: calc(100vh - 80px);
+    }
+
+    .more-modal--action {
+        .filtered-user-list {
+            height: calc(100vh - 110px);
+        }
+    }
+
     .app__body {
         .modal {
             .more-modal {
@@ -1213,10 +1223,6 @@
                     max-height: calc(100vh - 62px);
                     padding-bottom: 5px;
                 }
-
-                .more-modal__list {
-                    max-height: calc(100vh - 230px);
-                }
             }
         }
 
@@ -1377,15 +1383,14 @@
 @media screen and (max-width: 550px) {
     .app__body {
         .more-modal {
-            .filter-row {
-                width: 100%;
-            }
-
-            &.more-direct-channels {
+            &.more-system-members {
                 .filter-row {
-                    padding-bottom: 50px;
+                    min-height: 80px;
+                    width: 100%;
                 }
+            }
 
+            &.more-direct-channels {
                 .member-show {
                     display: none;
                 }
@@ -1443,16 +1448,6 @@
 
     .app__body {
         .modal {
-            &.more-channel__modal {
-                .more-modal__list {
-                    max-height: calc(100vh - 250px);
-                }
-
-                .modal-body {
-                    padding-bottom: 35px;
-                }
-            }
-
             .settings-modal {
                 &.display--content {
                     .modal-body {
-- 
cgit v1.2.3-1-g7c22