diff options
Diffstat (limited to 'web')
-rw-r--r-- | web/react/.eslintrc.json | 2 | ||||
-rw-r--r-- | web/react/components/user_settings/manage_languages.jsx | 36 | ||||
-rw-r--r-- | web/react/components/user_settings/user_settings_display.jsx | 159 | ||||
-rw-r--r-- | web/static/i18n/en.json | 1 | ||||
-rw-r--r-- | web/static/i18n/es.json | 1 | ||||
-rw-r--r-- | web/static/i18n/pt.json | 1 |
6 files changed, 105 insertions, 95 deletions
diff --git a/web/react/.eslintrc.json b/web/react/.eslintrc.json index 51345113b..bc06643c1 100644 --- a/web/react/.eslintrc.json +++ b/web/react/.eslintrc.json @@ -192,7 +192,7 @@ "react/display-name": [2, { "ignoreTranspilerName": false }], "react/no-deprecated": 2, "react/no-is-mounted": 2, - "react/no-string-refs": 1, + "react/no-string-refs": 0, "react/jsx-pascal-case": 2, "react/jsx-indent": [1, 4], "react/jsx-equals-spacing": [2, "never"], 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); diff --git a/web/static/i18n/en.json b/web/static/i18n/en.json index a80aba130..14ef0fb46 100644 --- a/web/static/i18n/en.json +++ b/web/static/i18n/en.json @@ -1226,7 +1226,6 @@ "user.settings.integrations.outWebhooks": "Outgoing Webhooks", "user.settings.integrations.outWebhooksDescription": "Manage your outgoing webhooks", "user.settings.integrations.title": "Integration Settings", - "user.settings.languages": "Set language", "user.settings.languages.change": "Change interface language", "user.settings.modal.advanced": "Advanced", "user.settings.modal.confirmBtns": "Yes, Discard", diff --git a/web/static/i18n/es.json b/web/static/i18n/es.json index 573cc200f..09abcf530 100644 --- a/web/static/i18n/es.json +++ b/web/static/i18n/es.json @@ -1226,7 +1226,6 @@ "user.settings.integrations.outWebhooks": "Webhooks de salida", "user.settings.integrations.outWebhooksDescription": "Administra tus webhooks de salida", "user.settings.integrations.title": "Configuraciones de Integración", - "user.settings.languages": "Cambiar Idioma", "user.settings.languages.change": "Cambia el idioma con el que se muestra la intefaz de usuario", "user.settings.modal.advanced": "Avanzada", "user.settings.modal.confirmBtns": "Sí, Descartar", diff --git a/web/static/i18n/pt.json b/web/static/i18n/pt.json index 741602017..ef5b9a2ab 100644 --- a/web/static/i18n/pt.json +++ b/web/static/i18n/pt.json @@ -1225,7 +1225,6 @@ "user.settings.integrations.outWebhooks": "Webhooks Saída", "user.settings.integrations.outWebhooksDescription": "Gerencie seus webhooks saída", "user.settings.integrations.title": "Configuração de Integração", - "user.settings.languages": "Definir idioma", "user.settings.languages.change": "Alterar o idioma da interface", "user.settings.modal.advanced": "Avançado", "user.settings.modal.confirmBtns": "Sim, Descartar", |