From bd665871831a43184ceb928bdeb862b0a46386cf Mon Sep 17 00:00:00 2001 From: Asaad Mahmood Date: Thu, 27 Apr 2017 18:40:58 +0500 Subject: 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 | 6 ++++++ webapp/components/searchable_channel_list.jsx | 5 ++++- webapp/components/searchable_user_list/searchable_user_list.jsx | 4 ++++ webapp/sass/layout/_content.scss | 7 ------- webapp/sass/layout/_markdown.scss | 5 +++-- webapp/sass/layout/_post.scss | 5 +++++ webapp/sass/routes/_admin-console.scss | 5 ++++- webapp/utils/utils.jsx | 2 +- 8 files changed, 27 insertions(+), 12 deletions(-) diff --git a/webapp/components/channel_view.jsx b/webapp/components/channel_view.jsx index 9359ff899..d6a931e0b 100644 --- a/webapp/components/channel_view.jsx +++ b/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); diff --git a/webapp/components/searchable_channel_list.jsx b/webapp/components/searchable_channel_list.jsx index 9c89f8dd4..dd633cf58 100644 --- a/webapp/components/searchable_channel_list.jsx +++ b/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' > -
+
{listContent}
diff --git a/webapp/components/searchable_user_list/searchable_user_list.jsx b/webapp/components/searchable_user_list/searchable_user_list.jsx index 5b262bcdf..31db29d6b 100644 --- a/webapp/components/searchable_user_list/searchable_user_list.jsx +++ b/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() { diff --git a/webapp/sass/layout/_content.scss b/webapp/sass/layout/_content.scss index b42818930..2ea0f821f 100644 --- a/webapp/sass/layout/_content.scss +++ b/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; diff --git a/webapp/sass/layout/_markdown.scss b/webapp/sass/layout/_markdown.scss index 7df279f5e..65f50b789 100644 --- a/webapp/sass/layout/_markdown.scss +++ b/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; } diff --git a/webapp/sass/layout/_post.scss b/webapp/sass/layout/_post.scss index 6ffb47c2d..7fc9878bd 100644 --- a/webapp/sass/layout/_post.scss +++ b/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; } diff --git a/webapp/sass/routes/_admin-console.scss b/webapp/sass/routes/_admin-console.scss index 854c84e20..aece76b28 100644 --- a/webapp/sass/routes/_admin-console.scss +++ b/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; diff --git a/webapp/utils/utils.jsx b/webapp/utils/utils.jsx index a252ea646..f56b9bb09 100644 --- a/webapp/utils/utils.jsx +++ b/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)); -- cgit v1.2.3-1-g7c22