Merge pull request #2556 from asaadmahmoodspin/ui-improvements

Multiple UI improvements

13 files changed, 34 insertions, 4 deletions

diff --git a/webapp/components/channel_notifications_modal.jsx b/webapp/components/channel_notifications_modal.jsx
index cc1162b77..564776876 100644
--- a/webapp/components/channel_notifications_modal.jsx
+++ b/webapp/components/channel_notifications_modal.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
 import {Modal} from 'react-bootstrap';
 import SettingItemMin from './setting_item_min.jsx';
 import SettingItemMax from './setting_item_max.jsx';
@@ -33,6 +34,7 @@ export default class ChannelNotificationsModal extends React.Component {
         };
     }
     updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
         this.setState({activeSection: section});
     }
     componentWillReceiveProps(nextProps) {
diff --git a/webapp/components/post_info.jsx b/webapp/components/post_info.jsx
index 0aa71edd7..2d41b0e54 100644
--- a/webapp/components/post_info.jsx
+++ b/webapp/components/post_info.jsx
@@ -22,7 +22,7 @@ export default class PostInfo extends React.Component {
     }
     dropdownPosition(e) {
         var position = $('#post-list').height() - $(e.target).offset().top;
-        var dropdown = $(e.target).next('.dropdown-menu');
+        var dropdown = $(e.target).closest('.col__reply').find('.dropdown-menu');
         if (position < dropdown.height()) {
             dropdown.addClass('bottom');
         }
diff --git a/webapp/components/posts_view.jsx b/webapp/components/posts_view.jsx
index 8b4b0c662..e034a592e 100644
--- a/webapp/components/posts_view.jsx
+++ b/webapp/components/posts_view.jsx
@@ -570,7 +570,9 @@ function FloatingTimestamp({isScrolling, post}) {
 
     return (
         <div className={className}>
-            <span>{dateString}</span>
+            <div>
+                <span>{dateString}</span>
+            </div>
         </div>
     );
 }
diff --git a/webapp/components/team_general_tab.jsx b/webapp/components/team_general_tab.jsx
index 776c84b48..c27e8ca59 100644
--- a/webapp/components/team_general_tab.jsx
+++ b/webapp/components/team_general_tab.jsx
@@ -84,6 +84,7 @@ class GeneralTab extends React.Component {
     }
 
     updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
         this.setState(this.setupInitialState(this.props));
         this.props.updateSection(section);
     }
diff --git a/webapp/components/team_settings_modal.jsx b/webapp/components/team_settings_modal.jsx
index c19787993..657643367 100644
--- a/webapp/components/team_settings_modal.jsx
+++ b/webapp/components/team_settings_modal.jsx
@@ -62,6 +62,7 @@ class TeamSettingsModal extends React.Component {
         }
     }
     updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
         this.setState({activeSection: section});
     }
     render() {
diff --git a/webapp/components/textbox.jsx b/webapp/components/textbox.jsx
index 371c581e5..63d5486a4 100644
--- a/webapp/components/textbox.jsx
+++ b/webapp/components/textbox.jsx
@@ -131,7 +131,7 @@ export default class Textbox extends React.Component {
         const helpText = (
             <div
                 style={{visibility: hasText ? 'visible' : 'hidden', opacity: hasText ? '0.5' : '0'}}
-                className='help_format_text'
+                className='help__format-text'
             >
                 <b>
                     <FormattedMessage
@@ -208,8 +208,8 @@ export default class Textbox extends React.Component {
                     dangerouslySetInnerHTML={{__html: this.state.preview ? TextFormatting.formatText(this.props.messageText) : ''}}
                 >
                 </div>
-                {helpText}
                 <div className='help__text'>
+                    {helpText}
                     {previewLink}
                     <a
                         target='_blank'
diff --git a/webapp/components/user_settings/premade_theme_chooser.jsx b/webapp/components/user_settings/premade_theme_chooser.jsx
index c35748b41..326120957 100644
--- a/webapp/components/user_settings/premade_theme_chooser.jsx
+++ b/webapp/components/user_settings/premade_theme_chooser.jsx
@@ -7,6 +7,8 @@ import Constants from 'utils/constants.jsx';
 
 import React from 'react';
 
+import {FormattedMessage} from 'react-intl';
+
 export default class PremadeThemeChooser extends React.Component {
     constructor(props) {
         super(props);
@@ -50,6 +52,17 @@ export default class PremadeThemeChooser extends React.Component {
         return (
             <div className='row appearance-section'>
                 {premadeThemes}
+                <div className='col-sm-12 padding-bottom x2'>
+                    <a
+                        href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-themes'
+                        target='_blank'
+                    >
+                        <FormattedMessage
+                            id='user.settings.display.theme.otherThemes'
+                            defaultMessage='See other themes'
+                        />
+                    </a>
+                </div>
             </div>
         );
     }
diff --git a/webapp/components/user_settings/user_settings_advanced.jsx b/webapp/components/user_settings/user_settings_advanced.jsx
index 4fcdc9a41..61e0e1dad 100644
--- a/webapp/components/user_settings/user_settings_advanced.jsx
+++ b/webapp/components/user_settings/user_settings_advanced.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
 import * as AsyncClient from 'utils/async_client.jsx';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
@@ -151,6 +152,7 @@ class AdvancedSettingsDisplay extends React.Component {
     }
 
     updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
         this.props.updateSection(section);
     }
 
diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx
index e56156049..d815bd371 100644
--- a/webapp/components/user_settings/user_settings_display.jsx
+++ b/webapp/components/user_settings/user_settings_display.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import ManageLanguages from './manage_languages.jsx';
@@ -83,6 +84,7 @@ export default class UserSettingsDisplay extends React.Component {
         this.setState({selectedFont});
     }
     updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
         this.updateState();
         this.props.updateSection(section);
     }
diff --git a/webapp/components/user_settings/user_settings_general.jsx b/webapp/components/user_settings/user_settings_general.jsx
index 2129847aa..87cce9dc0 100644
--- a/webapp/components/user_settings/user_settings_general.jsx
+++ b/webapp/components/user_settings/user_settings_general.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import SettingPicture from '../setting_picture.jsx';
@@ -286,6 +287,7 @@ class UserSettingsGeneralTab extends React.Component {
         }
     }
     updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
         const emailChangeInProgress = this.state.emailChangeInProgress;
         this.setState(Object.assign({}, this.setupInitialState(this.props), {emailChangeInProgress, clientError: '', serverError: '', emailError: ''}));
         this.submitActive = false;
diff --git a/webapp/components/user_settings/user_settings_integrations.jsx b/webapp/components/user_settings/user_settings_integrations.jsx
index 94fc184bd..9061e34df 100644
--- a/webapp/components/user_settings/user_settings_integrations.jsx
+++ b/webapp/components/user_settings/user_settings_integrations.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
 import ManageIncomingHooks from './manage_incoming_hooks.jsx';
@@ -47,6 +48,7 @@ class UserSettingsIntegrationsTab extends React.Component {
         this.state = {};
     }
     updateSection(section) {
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
         this.props.updateSection(section);
     }
     render() {
diff --git a/webapp/components/user_settings/user_settings_notifications.jsx b/webapp/components/user_settings/user_settings_notifications.jsx
index fe2db6727..b119c42f9 100644
--- a/webapp/components/user_settings/user_settings_notifications.jsx
+++ b/webapp/components/user_settings/user_settings_notifications.jsx
@@ -1,6 +1,7 @@
 // Copyright (c) 2015 Mattermost, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import $ from 'jquery';
 import ReactDOM from 'react-dom';
 import SettingItemMin from '../setting_item_min.jsx';
 import SettingItemMax from '../setting_item_max.jsx';
@@ -162,6 +163,7 @@ class NotificationsTab extends React.Component {
         this.updateState();
         this.props.updateSection('');
         e.preventDefault();
+        $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
     }
     updateSection(section) {
         this.updateState();
diff --git a/webapp/components/user_settings/user_settings_security.jsx b/webapp/components/user_settings/user_settings_security.jsx
index f937844ec..b34fa8582 100644
--- a/webapp/components/user_settings/user_settings_security.jsx
+++ b/webapp/components/user_settings/user_settings_security.jsx
@@ -204,6 +204,7 @@ class SecurityTab extends React.Component {
                 this.props.updateSection('');
                 this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null});
                 e.preventDefault();
+                $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update');
             }.bind(this);
 
             return (