Ui improvements (#6198)

* PLT-6306 - Post alignment in compact view

* PLT-6266 - Adjusting spacing for files (compact)

* PLT-6302 - Margins not equal for paragraphs in post

* PLT-6332 - FIxing inline images

* PLT-6134 - Fixing border on emoji picker

* PLT-6323 - Fixing UI for system console user list

* PLT-6375 - Updating emoji picker

* PLT-6327 - Updating more channel/user list

* PLT-6241 - Adding IE detection

* PLT-6332- Fixing inline markdown images

webapp/components/channel_view.jsx

@@ -4,6 +4,7 @@
 import $ from 'jquery';
 import React from 'react';
 
+import * as UserAgent from 'utils/user_agent.jsx';
 import ChannelHeader from 'components/channel_header.jsx';
 import FileUploadOverlay from 'components/file_upload_overlay.jsx';
 import CreatePost from 'components/create_post.jsx';
@@ -40,6 +41,11 @@ export default class ChannelView extends React.Component {
         ChannelStore.addChangeListener(this.updateState);
 
         $('body').addClass('app__body');
+
+        // IE Detection
+        if (UserAgent.isInternetExplorer()) {
+            $('body').addClass('browser--ie');
+        }
     }
     componentWillUnmount() {
         ChannelStore.removeChangeListener(this.updateState);

webapp/components/searchable_channel_list.jsx

@@ -7,6 +7,7 @@ import * as UserAgent from 'utils/user_agent.jsx';
 
 import $ from 'jquery';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import {localizeMessage} from 'utils/utils.jsx';
 import {FormattedMessage} from 'react-intl';
 
@@ -99,11 +100,13 @@ export default class SearchableChannelList extends React.Component {
         this.setState({page: this.state.page + 1, nextDisabled: true});
         this.nextTimeoutId = setTimeout(() => this.setState({nextDisabled: false}), NEXT_BUTTON_TIMEOUT_MILLISECONDS);
         this.props.nextPage(this.state.page + 1);
+        $(ReactDOM.findDOMNode(this.refs.channelListScroll)).scrollTop(0);
     }
 
     previousPage(e) {
         e.preventDefault();
         this.setState({page: this.state.page - 1});
+        $(ReactDOM.findDOMNode(this.refs.channelListScroll)).scrollTop(0);
     }
 
     doSearch() {
@@ -186,7 +189,7 @@ export default class SearchableChannelList extends React.Component {
                     ref='channelList'
                     className='more-modal__list'
                 >
-                    <div>
+                    <div ref='channelListScroll'>
                         {listContent}
                     </div>
                 </div>

webapp/components/searchable_user_list/searchable_user_list.jsx

@@ -1,7 +1,9 @@
 // Copyright (c) 2016-present Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
 import React from 'react';
+import ReactDOM from 'react-dom';
 import {FormattedMessage} from 'react-intl';
 
 import UserList from 'components/user_list.jsx';
@@ -83,12 +85,14 @@ export default class SearchableUserList extends React.Component {
         this.nextTimeoutId = setTimeout(() => this.setState({nextDisabled: false}), NEXT_BUTTON_TIMEOUT);
 
         this.props.nextPage();
+        $(ReactDOM.findDOMNode(this.refs.channelListScroll)).scrollTop(0);
     }
 
     previousPage(e) {
         e.preventDefault();
 
         this.props.previousPage();
+        $(ReactDOM.findDOMNode(this.refs.channelListScroll)).scrollTop(0);
     }
 
     focusSearchBar() {

webapp/sass/layout/_content.scss

@@ -67,13 +67,6 @@
     }
 }
 
-#post-create {
-    @include flex(0 0 auto);
-    background: $white;
-    width: 100%;
-    z-index: 3;
-}
-
 #archive-link-home {
     @include flex(0 0 auto);
     cursor: pointer;

webapp/sass/layout/_markdown.scss

@@ -19,8 +19,9 @@
 #post-list {
     .markdown-inline-img {
         -moz-force-broken-image-icon: 1;
-        height: 500px;
+        margin: 5px 0;
         max-height: 500px;
+        max-width: 500px;
     }
 }
 
@@ -67,7 +68,7 @@
     padding: 4px 10px 5px;
     position: absolute;
     right: 0;
-    top: 5;
+    top: 5px;
     z-index: 5;
 }
 

webapp/sass/layout/_post.scss

@@ -359,6 +359,11 @@
 }
 
 .post-create__container {
+    @include flex(0 0 auto);
+    background: $white;
+    width: 100%;
+    z-index: 1000;
+
     label {
         font-weight: normal;
     }

webapp/sass/routes/_admin-console.scss

@@ -18,6 +18,10 @@
         }
     }
 
+    .filtered-user-list {
+        height: calc(100vh - 120px);
+    }
+
     .Select-value-label {
         white-space: nowrap;
     }
@@ -256,7 +260,6 @@
 
     .member-list-holder {
         background: $white;
-        margin-bottom: 4em;
         overflow: visible;
         padding: 5px 0;
 

webapp/utils/utils.jsx

@@ -671,7 +671,7 @@ export function applyTheme(theme) {
         changeCss('.app__body .emoji-picker', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .emoji-picker-react', 'color:' + theme.centerChannelColor);
         changeCss('.app__body .emoji-picker-bottom', 'color:' + theme.centerChannelColor);
-        changeCss('.app__body .emoji-picker, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
+        changeCss('.app__body .emoji-picker, .app__body .emoji-picker-react, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));
         changeCss('.app__body .emoji-picker-bottom, .app__body .emoji-picker__items .emoji-picker__search-container .emoji-picker__search', 'border-color:' + changeOpacity(theme.centerChannelColor, 0.2));