Bug fixes for search and direct messages (#4986)

* PLT-5145 - Fixing search popover on mobile

* PLT-5093 - Fixing direct messages list height

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}
@@ -210,4 +210,4 @@ ChannelMembersModal.propTypes = {
     onModalDismissed: React.PropTypes.func.isRequired,
     showInviteModal: React.PropTypes.func.isRequired,
     channel: React.PropTypes.object.isRequired
-};
+};

webapp/components/more_channels.jsx

@@ -9,7 +9,6 @@ import TeamStore from 'stores/team_store.jsx';
 
 import Constants from 'utils/constants.jsx';
 import * as AsyncClient from 'utils/async_client.jsx';
-import * as ChannelUtils from 'utils/channel_utils.jsx';
 import {joinChannel, searchMoreChannels} from 'actions/channel_actions.jsx';
 
 import React from 'react';
@@ -152,14 +151,19 @@ export default class MoreChannels extends React.Component {
         const isAdmin = TeamStore.isTeamAdminForCurrentTeam() || UserStore.isSystemAdminForCurrentUser();
         const isSystemAdmin = UserStore.isSystemAdminForCurrentUser();
 
-        if (!ChannelUtils.showCreateOption(Constants.OPEN_CHANNEL, isAdmin, isSystemAdmin)) {
+        if (global.window.mm_license.IsLicensed === 'true') {
-            createNewChannelButton = null;
+            if (global.window.mm_config.RestrictPublicChannelManagement === Constants.PERMISSIONS_SYSTEM_ADMIN && !isSystemAdmin) {
-            createChannelHelpText = null;
+                createNewChannelButton = null;
+                createChannelHelpText = null;
+            } else if (global.window.mm_config.RestrictPublicChannelManagement === Constants.PERMISSIONS_TEAM_ADMIN && !isAdmin) {
+                createNewChannelButton = null;
+                createChannelHelpText = null;
+            }
         }
 
         return (
             <Modal
-                dialogClassName='more-modal more-public-channels'
+                dialogClassName='more-modal more-modal--action'
                 show={this.state.show}
                 onHide={this.handleHide}
                 onExited={this.handleExit}
@@ -192,4 +196,4 @@ export default class MoreChannels extends React.Component {
 MoreChannels.propTypes = {
     onModalDismissed: React.PropTypes.func,
     handleNewChannel: React.PropTypes.func
-};
+};

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}
@@ -258,4 +260,4 @@ export default class MoreDirectChannels extends React.Component {
 
 MoreDirectChannels.propTypes = {
     onModalDismissed: React.PropTypes.func
-};
+};

webapp/components/search_bar.jsx

@@ -104,6 +104,7 @@ export default class SearchBar extends React.Component {
         SearchStore.storeSearchTerm(term);
         SearchStore.emitSearchTermChange(false);
         this.setState({searchTerm: term});
+        this.refs.searchOverlay.hide();
     }
 
     handleUserBlur() {
@@ -179,11 +180,6 @@ export default class SearchBar extends React.Component {
             isSearching = <span className={'fa fa-refresh fa-refresh-animate icon--refresh icon--rotate'}/>;
         }
 
-        let helpClass = 'search-help-popover';
-        if (!this.state.searchTerm && this.state.focused) {
-            helpClass += ' visible';
-        }
-
         const recentMentionsTooltip = (
             <Tooltip id='recentMentionsTooltip'>
                 <FormattedMessage
@@ -197,7 +193,7 @@ export default class SearchBar extends React.Component {
             <Popover
                 id='searchbar-help-popup'
                 placement='bottom'
-                className={helpClass}
+                className='search-help-popover'
             >
                 <FormattedHTMLMessage
                     id='search_bar.usage'
@@ -290,12 +286,12 @@ export default class SearchBar extends React.Component {
                 >
                     <span className='fa fa-search sidebar__search-icon'/>
                     <OverlayTrigger
+                        ref='searchOverlay'
                         delayShow={Constants.OVERLAY_TIME_DELAY_SMALL}
                         placement='bottom'
                         overlay={searchPopover}
-                        trigger='focus'
+                        trigger='click'
                         rootClose={true}
-                        className={helpClass}
                     >
                         <SuggestionBox
                             ref='search'

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}
@@ -202,4 +204,4 @@ SearchableChannelList.propTypes = {
     search: React.PropTypes.func.isRequired,
     handleJoin: React.PropTypes.func.isRequired,
     noResultsText: React.PropTypes.object
-};
+};

webapp/sass/components/_modal.scss

@@ -24,6 +24,10 @@
             min-height: 8em;
         }
 
+        .suggestion-list {
+            bottom: -149px;
+        }
+
         .suggestion-list__content {
             max-height: 150px;
         }
@@ -460,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;
@@ -492,7 +482,6 @@
         }
 
         .filter-row {
-            @include clearfix;
             margin: 5px 0 10px;
             width: 300px;
         }
@@ -557,7 +546,11 @@
 .more-modal__list {
     display: flex;
     flex-direction: column;
-    overflow: auto;
+
+    > div {
+        min-height: 100%;
+        overflow: auto;
+    }
 
     .popover & {
         font-size: .95em;
@@ -602,6 +595,7 @@
     .more-modal__actions {
         flex-grow: 0;
         flex-shrink: 0;
+        margin: 5px 0 10px;
         padding-left: 20px;
     }
 
@@ -624,8 +618,7 @@
     .more-modal__row {
         border-bottom: 1px solid $light-gray;
         display: flex;
-        min-height: 70px;
+        padding: 10px 15px;
-        padding: 8px 15px;
     }
 
     p {
@@ -646,16 +639,15 @@
 .filtered-user-list {
     display: flex;
     flex-direction: column;
+    height: calc(90vh - 120px);
     width: 100%;
 
-    .filter-row {
+    > div {
-        flex-grow: 0;
+        flex: 1;
-        flex-shrink: 0;
     }
 
-    .user-list {
+    .more-modal__list {
-        flex-grow: 1;
+        flex-grow: 500;
-        flex-shrink: 1;
     }
 
     .filter-button {
@@ -665,9 +657,6 @@
     }
 
     .filter-controls {
-        @include clearfix;
-        flex-grow: 0;
-        flex-shrink: 0;
         padding: 1em 1.5em 0;
 
         .filter-control__next {
@@ -679,10 +668,4 @@
         margin-left: 0;
         padding-left: 0;
     }
-}
+}
-
-.channel-switch-modal {
-    .modal-body {
-        overflow: visible;
-    }
-}

webapp/sass/components/_popover.scss

@@ -94,10 +94,13 @@
 
 .search-help-popover {
     font-size: em(13px);
-    margin-top: 17px !important;
     max-width: 300px;
     width: 100%;
 
+    &:not(.autocomplete) {
+        margin-top: 17px !important;
+    }
+
     &.autocomplete {
         display: block;
 

webapp/sass/responsive/_mobile.scss

@@ -427,8 +427,14 @@
     }
 
     .search-help-popover {
+        left: 0 !important;
         margin-left: 10px;
-        max-width: calc(100% - 20px);
+        max-width: calc(100% - 80px);
+
+        .focused & {
+            left: 45px !important;
+            margin-top: 50px;
+        }
     }
 
     .modal-direct-channels,
@@ -1085,7 +1091,7 @@
                 .post-error {
                     top: 0;
                     left: 0;
-              }
+                }
             }
         }
 
@@ -1214,6 +1220,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 {
@@ -1221,10 +1237,6 @@
                     max-height: calc(100vh - 62px);
                     padding-bottom: 5px;
                 }
-
-                .more-modal__list {
-                    max-height: calc(100vh - 230px);
-                }
             }
         }
 
@@ -1385,15 +1397,14 @@
 @media screen and (max-width: 550px) {
     .app__body {
         .more-modal {
-            .filter-row {
+            &.more-system-members {
-                width: 100%;
+                .filter-row {
+                    min-height: 80px;
+                    width: 100%;
+                }
             }
 
             &.more-direct-channels {
-                .filter-row {
-                    padding-bottom: 50px;
-                }
-
                 .member-show {
                     display: none;
                 }
@@ -1451,16 +1462,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 {

webapp/sass/routes/_admin-console.scss

@@ -245,38 +245,37 @@
 
     .more-modal__list {
         .filtered-user-list {
-           .filter-controls {
+            .filter-controls {
-            padding-bottom: 1em;
+                padding-bottom: 1em;
+            }
+        }
+
+        .filter-row {
+            margin: 10px 0;
         }
     }
 
-    .filter-row {
+    .member-list-holder {
-        margin: 10px 0;
+        background: $white;
-        overflow: hidden;
+        margin-bottom: 4em;
-    }
-}
-
-.member-list-holder {
-    background: $white;
-    margin-bottom: 4em;
-    overflow: visible;
-    padding: 5px 0;
-
-    .more-modal__list {
         overflow: visible;
-    }
+        padding: 5px 0;
 
-    .more-modal__row {
+        .more-modal__list {
-        &:last-child {
+            overflow: visible;
-            border: none;
+        }
+
+        .more-modal__row {
+            &:last-child {
+                border: none;
+            }
         }
     }
-}
 
-.member-count {
+    .member-count {
-    @include opacity(.7);
+        @include opacity(.7);
-    margin-top: 8px;
+        margin-top: 8px;
-}
+    }
 }
 
 .brand-img {
@@ -469,13 +468,13 @@
 }
 
 .cluster-status {
-    width: 24px;
     height: 24px;
+    width: 24px;
 }
 
 .config-hash {
-    width: 130px;
-    white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 130px;
 }