Multiple UI Improvements

2016-03-29 17:03:46 +05:00
--- 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) {
--- 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);
    }
--- 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() {
--- 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,16 @@ export default class PremadeThemeChooser extends React.Component {
        return (
            <div className='row appearance-section'>
                {premadeThemes}
+                <a
+                    href='http://docs.mattermost.com/help/settings/theme-colors.html#custom-themes'
+                    target='_blank'
+                    className='col-sm-12 padding-bottom x2'
+                >
+                    <FormattedMessage
+                        id='user.settings.display.theme.otherThemes'
+                        defaultMessage='See other themes'
+                    />
+                </a>
            </div>
        );
    }
--- 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);
    }

--- 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);
    }
--- 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;
--- 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() {
--- 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();
--- 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 (
--- a/webapp/i18n/en.json
+++ b/webapp/i18n/en.json
@@ -1238,6 +1238,7 @@
  "user.settings.display.theme.customTheme": "Custom Theme",
  "user.settings.display.theme.describe": "Open to manage your theme",
  "user.settings.display.theme.import": "Import theme colors from Slack",
+  "user.settings.display.theme.otherThemes": "See other themes",
  "user.settings.display.theme.themeColors": "Theme Colors",
  "user.settings.display.theme.title": "Theme",
  "user.settings.display.title": "Display Settings",
--- a/webapp/i18n/es.json
+++ b/webapp/i18n/es.json
@@ -1238,6 +1238,7 @@
  "user.settings.display.theme.customTheme": "Tema Personalizado",
  "user.settings.display.theme.describe": "Abrir para administrar tu tema",
  "user.settings.display.theme.import": "Importar colores del tema desde Slack",
+  "user.settings.display.theme.otherThemes": "Ver otros temas",
  "user.settings.display.theme.themeColors": "Colores del Tema",
  "user.settings.display.theme.title": "Tema",
  "user.settings.display.title": "Configuración de Visualización",
--- a/webapp/i18n/fr.json
+++ b/webapp/i18n/fr.json
@@ -1239,6 +1239,7 @@
  "user.settings.display.theme.customTheme": "Thème personnalisé",
  "user.settings.display.theme.describe": "Ouvrez pour gérer votre thème",
  "user.settings.display.theme.import": "Importer des couleurs de thème depuis Slack",
+  "user.settings.display.theme.otherThemes": "Voir d'autres thèmes",
  "user.settings.display.theme.themeColors": "Couleurs de thème",
  "user.settings.display.theme.title": "Thème",
  "user.settings.display.title": "Paramètres d'affichage",
--- a/webapp/i18n/pt.json
+++ b/webapp/i18n/pt.json
@@ -1238,6 +1238,7 @@
  "user.settings.display.theme.customTheme": "Tema Customizado",
  "user.settings.display.theme.describe": "Abrir para gerenciar seu tema",
  "user.settings.display.theme.import": "Importar tema de cores do Slack",
+  "user.settings.display.theme.otherThemes": "Veja outros temas",
  "user.settings.display.theme.themeColors": "Tema de Cores",
  "user.settings.display.theme.title": "Tema",
  "user.settings.display.title": "Configurações de Exibição",