From 8d2fd204db6de4dae3bed5bc609e874c72f4bb56 Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Thu, 3 Mar 2016 10:26:50 -0500
Subject: Changed submit button of ManageLanguage to match other settings

---
 .../components/user_settings/manage_languages.jsx  | 36 +++++++++++++---------
 .../user_settings/user_settings_display.jsx        | 23 +++++---------
 2 files changed, 28 insertions(+), 31 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/user_settings/manage_languages.jsx b/web/react/components/user_settings/manage_languages.jsx
index fee6d9da2..2d1c74717 100644
--- a/web/react/components/user_settings/manage_languages.jsx
+++ b/web/react/components/user_settings/manage_languages.jsx
@@ -1,6 +1,8 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+import SettingItemMax from '../setting_item_max.jsx';
+
 import * as Client from '../../utils/client.jsx';
 import * as Utils from '../../utils/utils.jsx';
 
@@ -69,7 +71,7 @@ export default class ManageLanguage extends React.Component {
                 </option>);
         });
 
-        return (
+        const input = (
             <div key='changeLanguage'>
                 <br/>
                 <label className='control-label'>
@@ -88,24 +90,28 @@ export default class ManageLanguage extends React.Component {
                         {options}
                     </select>
                     {serverError}
-                    <div className='padding-top'>
-                        <a
-                            className={'btn btn-sm btn-primary'}
-                            href='#'
-                            onClick={this.changeLanguage}
-                        >
-                            <FormattedMessage
-                                id='user.settings.languages'
-                                defaultMessage='Set language'
-                            />
-                        </a>
-                    </div>
                 </div>
             </div>
         );
+
+        return (
+            <SettingItemMax
+                title={
+                    <FormattedMessage
+                        id='user.settings.display.language'
+                        defaultMessage='Language'
+                    />
+                }
+                width='medium'
+                submit={this.changeLanguage}
+                inputs={[input]}
+                updateSection={this.props.updateSection}
+            />
+        );
     }
 }
 
 ManageLanguage.propTypes = {
-    user: React.PropTypes.object
-};
\ No newline at end of file
+    user: React.PropTypes.object.isRequired,
+    updateSection: React.PropTypes.func.isRequired
+};
diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index 5f23a8995..62c469e32 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -46,10 +46,6 @@ const holders = defineMessages({
     fontTitle: {
         id: 'user.settings.display.fontTitle',
         defaultMessage: 'Display Font'
-    },
-    language: {
-        id: 'user.settings.display.language',
-        defaultMessage: 'Language'
     }
 });
 
@@ -379,19 +375,9 @@ class UserSettingsDisplay extends React.Component {
         }
 
         if (this.props.activeSection === 'languages') {
-            var inputs = [];
-            inputs.push(
+            languagesSection = (
                 <ManageLanguages
                     user={this.props.user}
-                    key='languages-ui'
-                />
-            );
-
-            languagesSection = (
-                <SettingItemMax
-                    title={formatMessage(holders.language)}
-                    width='medium'
-                    inputs={inputs}
                     updateSection={(e) => {
                         this.updateSection('');
                         e.preventDefault();
@@ -408,7 +394,12 @@ class UserSettingsDisplay extends React.Component {
 
             languagesSection = (
                 <SettingItemMin
-                    title={formatMessage(holders.language)}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.language'
+                            defaultMessage='Language'
+                        />
+                    }
                     width='medium'
                     describe={locale}
                     updateSection={() => {
-- 
cgit v1.2.3-1-g7c22


From 3b8376b76d53e1444f94bcf9f83fc6fed5f6753b Mon Sep 17 00:00:00 2001
From: Harrison Healey <harrisonmhealey@gmail.com>
Date: Thu, 3 Mar 2016 10:41:30 -0500
Subject: Removed injectIntl from UserSettingsDisplay

---
 .../user_settings/user_settings_display.jsx        | 136 ++++++++++++---------
 1 file changed, 76 insertions(+), 60 deletions(-)

(limited to 'web/react/components')

diff --git a/web/react/components/user_settings/user_settings_display.jsx b/web/react/components/user_settings/user_settings_display.jsx
index 62c469e32..3e468e08f 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -12,42 +12,7 @@ import * as Utils from '../../utils/utils.jsx';
 import Constants from '../../utils/constants.jsx';
 
 import {savePreferences} from '../../utils/client.jsx';
-import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'mm-intl';
-
-const holders = defineMessages({
-    normalClock: {
-        id: 'user.settings.display.normalClock',
-        defaultMessage: '12-hour clock (example: 4:00 PM)'
-    },
-    militaryClock: {
-        id: 'user.settings.display.militaryClock',
-        defaultMessage: '24-hour clock (example: 16:00)'
-    },
-    clockDisplay: {
-        id: 'user.settings.display.clockDisplay',
-        defaultMessage: 'Clock Display'
-    },
-    teammateDisplay: {
-        id: 'user.settings.display.teammateDisplay',
-        defaultMessage: 'Teammate Name Display'
-    },
-    showNickname: {
-        id: 'user.settings.display.showNickname',
-        defaultMessage: 'Show nickname if one exists, otherwise show first and last name'
-    },
-    showUsername: {
-        id: 'user.settings.display.showUsername',
-        defaultMessage: 'Show username (team default)'
-    },
-    showFullname: {
-        id: 'user.settings.display.showFullname',
-        defaultMessage: 'Show first and last name'
-    },
-    fontTitle: {
-        id: 'user.settings.display.fontTitle',
-        defaultMessage: 'Display Font'
-    }
-});
+import {FormattedMessage} from 'mm-intl';
 
 function getDisplayStateFromStores() {
     const militaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'});
@@ -61,7 +26,7 @@ function getDisplayStateFromStores() {
     };
 }
 
-class UserSettingsDisplay extends React.Component {
+export default class UserSettingsDisplay extends React.Component {
     constructor(props) {
         super(props);
 
@@ -115,7 +80,6 @@ class UserSettingsDisplay extends React.Component {
         this.updateState();
     }
     render() {
-        const {formatMessage} = this.props.intl;
         const serverError = this.state.serverError || null;
         let clockSection;
         let nameFormatSection;
@@ -177,7 +141,12 @@ class UserSettingsDisplay extends React.Component {
 
             clockSection = (
                 <SettingItemMax
-                    title={formatMessage(holders.clockDisplay)}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.clockDisplay'
+                            defaultMessage='Clock Display'
+                        />
+                    }
                     inputs={inputs}
                     submit={this.handleSubmit}
                     server_error={serverError}
@@ -185,11 +154,21 @@ class UserSettingsDisplay extends React.Component {
                 />
             );
         } else {
-            let describe = '';
+            let describe;
             if (this.state.militaryTime === 'true') {
-                describe = formatMessage(holders.militaryClock);
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.display.militaryClock'
+                        defaultMessage='24-hour clock (example: 16:00)'
+                    />
+                );
             } else {
-                describe = formatMessage(holders.normalClock);
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.display.normalClock'
+                        defaultMessage='12-hour clock (example: 4:00 PM)'
+                    />
+                );
             }
 
             const handleUpdateClockSection = () => {
@@ -198,7 +177,12 @@ class UserSettingsDisplay extends React.Component {
 
             clockSection = (
                 <SettingItemMin
-                    title={formatMessage(holders.clockDisplay)}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.clockDisplay'
+                            defaultMessage='Clock Display'
+                        />
+                    }
                     describe={describe}
                     updateSection={handleUpdateClockSection}
                 />
@@ -280,7 +264,12 @@ class UserSettingsDisplay extends React.Component {
 
             nameFormatSection = (
                 <SettingItemMax
-                    title={formatMessage(holders.teammateDisplay)}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.teammateDisplay'
+                            defaultMessage='Teammate Name Display'
+                        />
+                    }
                     inputs={inputs}
                     submit={this.handleSubmit}
                     server_error={serverError}
@@ -291,18 +280,38 @@ class UserSettingsDisplay extends React.Component {
                 />
             );
         } else {
-            let describe = '';
+            let describe;
             if (this.state.nameFormat === 'username') {
-                describe = formatMessage(holders.showUsername);
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.display.showUsername'
+                        defaultMessage='Show username (team default)'
+                    />
+                );
             } else if (this.state.nameFormat === 'full_name') {
-                describe = formatMessage(holders.showFullname);
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.display.showFullname'
+                        defaultMessage='Show first and last name'
+                    />
+                );
             } else {
-                describe = formatMessage(holders.showNickname);
+                describe = (
+                    <FormattedMessage
+                        id='user.settings.display.showNickname'
+                        defaultMessage='Show nickname if one exists, otherwise show first and last name'
+                    />
+                );
             }
 
             nameFormatSection = (
                 <SettingItemMin
-                    title={formatMessage(holders.teammateDisplay)}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.teammateDisplay'
+                            defaultMessage='Teammate Name Display'
+                        />
+                    }
                     describe={describe}
                     updateSection={() => {
                         this.props.updateSection('name_format');
@@ -352,7 +361,12 @@ class UserSettingsDisplay extends React.Component {
 
             fontSection = (
                 <SettingItemMax
-                    title={formatMessage(holders.fontTitle)}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.fontTitle'
+                            defaultMessage='Display Font'
+                        />
+                    }
                     inputs={inputs}
                     submit={this.handleSubmit}
                     server_error={serverError}
@@ -365,7 +379,12 @@ class UserSettingsDisplay extends React.Component {
         } else {
             fontSection = (
                 <SettingItemMin
-                    title={formatMessage(holders.fontTitle)}
+                    title={
+                        <FormattedMessage
+                            id='user.settings.display.fontTitle'
+                            defaultMessage='Display Font'
+                        />
+                    }
                     describe={this.state.selectedFont}
                     updateSection={() => {
                         this.props.updateSection('font');
@@ -443,12 +462,12 @@ class UserSettingsDisplay extends React.Component {
                         />
                     </h3>
                     <div className='divider-dark first'/>
-                        <ThemeSetting
-                            selected={this.props.activeSection === 'theme'}
-                            updateSection={this.updateSection}
-                            setRequireConfirm={this.props.setRequireConfirm}
-                            setEnforceFocus={this.props.setEnforceFocus}
-                        />
+                    <ThemeSetting
+                        selected={this.props.activeSection === 'theme'}
+                        updateSection={this.updateSection}
+                        setRequireConfirm={this.props.setRequireConfirm}
+                        setEnforceFocus={this.props.setEnforceFocus}
+                    />
                     <div className='divider-dark'/>
                     {fontSection}
                     <div className='divider-dark'/>
@@ -464,7 +483,6 @@ class UserSettingsDisplay extends React.Component {
 }
 
 UserSettingsDisplay.propTypes = {
-    intl: intlShape.isRequired,
     user: React.PropTypes.object,
     updateSection: React.PropTypes.func,
     updateTab: React.PropTypes.func,
@@ -474,5 +492,3 @@ UserSettingsDisplay.propTypes = {
     setRequireConfirm: React.PropTypes.func.isRequired,
     setEnforceFocus: React.PropTypes.func.isRequired
 };
-
-export default injectIntl(UserSettingsDisplay);
-- 
cgit v1.2.3-1-g7c22