summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_settings
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/user_settings')
-rw-r--r--web/react/components/user_settings/manage_languages.jsx36
-rw-r--r--web/react/components/user_settings/user_settings_display.jsx159
2 files changed, 104 insertions, 91 deletions
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..3e468e08f 100644
--- a/web/react/components/user_settings/user_settings_display.jsx
+++ b/web/react/components/user_settings/user_settings_display.jsx
@@ -12,46 +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'
- },
- language: {
- id: 'user.settings.display.language',
- defaultMessage: 'Language'
- }
-});
+import {FormattedMessage} from 'mm-intl';
function getDisplayStateFromStores() {
const militaryTime = PreferenceStore.getPreference(Constants.Preferences.CATEGORY_DISPLAY_SETTINGS, 'use_military_time', {value: 'false'});
@@ -65,7 +26,7 @@ function getDisplayStateFromStores() {
};
}
-class UserSettingsDisplay extends React.Component {
+export default class UserSettingsDisplay extends React.Component {
constructor(props) {
super(props);
@@ -119,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;
@@ -181,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}
@@ -189,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 = () => {
@@ -202,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}
/>
@@ -284,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}
@@ -295,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');
@@ -356,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}
@@ -369,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');
@@ -379,19 +394,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 +413,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={() => {
@@ -452,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'/>
@@ -473,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,
@@ -483,5 +492,3 @@ UserSettingsDisplay.propTypes = {
setRequireConfirm: React.PropTypes.func.isRequired,
setEnforceFocus: React.PropTypes.func.isRequired
};
-
-export default injectIntl(UserSettingsDisplay);
generated by cgit v1.2.3-1-g7c22 (git 2.25.1) at 2024-07-04 21:33:23 +0000