summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorAsaad Mahmood <asaadmahmood@users.noreply.github.com>2017-04-27 18:40:58 +0500
committerJoram Wilander <jwawilander@gmail.com>2017-04-27 09:40:58 -0400
commitbd665871831a43184ceb928bdeb862b0a46386cf (patch)
tree23b0e9d0b26d95bfabd29d707b40bb2e2c7d0eec /webapp
parent66f538783bfbcb0814bcc7dff3697e84e8554649 (diff)
downloadchat-bd665871831a43184ceb928bdeb862b0a46386cf.tar.gz
chat-bd665871831a43184ceb928bdeb862b0a46386cf.tar.bz2
chat-bd665871831a43184ceb928bdeb862b0a46386cf.zip
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
Diffstat (limited to 'webapp')
-rw-r--r--webapp/components/channel_view.jsx6
-rw-r--r--webapp/components/searchable_channel_list.jsx5
-rw-r--r--webapp/components/searchable_user_list/searchable_user_list.jsx4
-rw-r--r--webapp/sass/layout/_content.scss7
-rw-r--r--webapp/sass/layout/_markdown.scss5
-rw-r--r--webapp/sass/layout/_post.scss5
-rw-r--r--webapp/sass/routes/_admin-console.scss5
-rw-r--r--webapp/utils/utils.jsx2
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'
>
- <div>
+ <div ref='channelListScroll'>
{listContent}
</div>
</div>
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));