Ui improvements (mattermost#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
mattermost-build · Apr 27, 2017 · 0209975 · 0209975
1 parent 5065c90
commit 0209975
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 12 deletions.
diff --git a/components/channel_view.jsx b/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);

diff --git a/components/searchable_channel_list.jsx b/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>

diff --git a/components/searchable_user_list/searchable_user_list.jsx b/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() {

diff --git a/sass/layout/_content.scss b/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;

diff --git a/sass/layout/_markdown.scss b/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;
 }
 

diff --git a/sass/layout/_post.scss b/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;
  }

diff --git a/sass/routes/_admin-console.scss b/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;
 

diff --git a/utils/utils.jsx b/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));