diff options
Diffstat (limited to 'webapp')
-rw-r--r-- | webapp/actions/global_actions.jsx | 17 | ||||
-rw-r--r-- | webapp/components/admin_console/admin_sidebar.jsx | 9 | ||||
-rw-r--r-- | webapp/components/admin_console/localization_settings.jsx | 145 | ||||
-rw-r--r-- | webapp/components/admin_console/multiselect_settings.jsx | 80 | ||||
-rw-r--r-- | webapp/components/root.jsx | 8 | ||||
-rw-r--r-- | webapp/components/user_settings/user_settings_display.jsx | 11 | ||||
-rw-r--r-- | webapp/i18n/i18n.jsx | 40 | ||||
-rw-r--r-- | webapp/i18n/pt-BR.json (renamed from webapp/i18n/pt.json) | 0 | ||||
-rw-r--r-- | webapp/package.json | 3 | ||||
-rw-r--r-- | webapp/root.jsx | 7 | ||||
-rw-r--r-- | webapp/sass/styles.scss | 1 | ||||
-rw-r--r-- | webapp/stores/user_store.jsx | 6 |
12 files changed, 306 insertions, 21 deletions
diff --git a/webapp/actions/global_actions.jsx b/webapp/actions/global_actions.jsx index 91b51a9c2..0b264a9b3 100644 --- a/webapp/actions/global_actions.jsx +++ b/webapp/actions/global_actions.jsx @@ -392,8 +392,10 @@ export function newLocalizationSelected(locale) { translations: en }); } else { + const localeInfo = I18n.getLanguageInfo(locale) || I18n.getLanguageInfo(global.window.mm_config.DefaultClientLocale); + Client.getTranslations( - I18n.getLanguageInfo(locale).url, + localeInfo.url, (data, res) => { let translations = data; if (!data && res.text) { @@ -412,16 +414,11 @@ export function newLocalizationSelected(locale) { } } -export function loadBrowserLocale() { - let locale = (navigator.languages && navigator.languages.length > 0 ? navigator.languages[0] : - (navigator.language || navigator.userLanguage)).split('-')[0]; - - const user = UserStore.getCurrentUser(); - if (user) { - locale = user.locale || locale; - } +export function loadDefaultLocale() { + const defaultLocale = global.window.mm_config.DefaultClientLocale; + let locale = global.window.mm_user ? global.window.mm_user.locale || defaultLocale : defaultLocale; - if (!I18n.getLanguages()[locale]) { + if (!I18n.getLanguageInfo(locale)) { locale = 'en'; } return newLocalizationSelected(locale); diff --git a/webapp/components/admin_console/admin_sidebar.jsx b/webapp/components/admin_console/admin_sidebar.jsx index cdb7e29d5..9548a7763 100644 --- a/webapp/components/admin_console/admin_sidebar.jsx +++ b/webapp/components/admin_console/admin_sidebar.jsx @@ -293,6 +293,15 @@ export default class AdminSidebar extends React.Component { } /> <AdminSidebarSection + name='localization' + title={ + <FormattedMessage + id='admin.sidebar.localization' + defaultMessage='Localization' + /> + } + /> + <AdminSidebarSection name='users_and_teams' title={ <FormattedMessage diff --git a/webapp/components/admin_console/localization_settings.jsx b/webapp/components/admin_console/localization_settings.jsx new file mode 100644 index 000000000..6876e0c36 --- /dev/null +++ b/webapp/components/admin_console/localization_settings.jsx @@ -0,0 +1,145 @@ +// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import React from 'react'; + +import * as I18n from 'i18n/i18n.jsx'; + +import AdminSettings from './admin_settings.jsx'; +import {FormattedMessage} from 'react-intl'; +import SettingsGroup from './settings_group.jsx'; +import DropdownSetting from './dropdown_setting.jsx'; +import MultiSelectSetting from './multiselect_settings.jsx'; + +export default class LocalizationSettings extends AdminSettings { + constructor(props) { + super(props); + + this.getConfigFromState = this.getConfigFromState.bind(this); + + this.renderSettings = this.renderSettings.bind(this); + this.canSave = this.canSave.bind(this); + + const locales = I18n.getAllLanguages(); + + this.state = Object.assign(this.state, { + hasErrors: false, + defaultServerLocale: props.config.LocalizationSettings.DefaultServerLocale, + defaultClientLocale: props.config.LocalizationSettings.DefaultClientLocale, + availableLocales: props.config.LocalizationSettings.AvailableLocales.split(','), + languages: Object.keys(locales).map((l) => { + return {value: locales[l].value, text: locales[l].name}; + }) + }); + } + + canSave() { + return this.state.availableLocales.join(',').indexOf(this.state.defaultClientLocale) !== -1; + } + + getConfigFromState(config) { + config.LocalizationSettings.DefaultServerLocale = this.state.defaultServerLocale; + config.LocalizationSettings.DefaultClientLocale = this.state.defaultClientLocale; + config.LocalizationSettings.AvailableLocales = this.state.availableLocales.join(','); + + return config; + } + + renderTitle() { + return ( + <h3> + <FormattedMessage + id='admin.general.title' + defaultMessage='General Settings' + /> + </h3> + ); + } + + renderSettings() { + return ( + <SettingsGroup + header={ + <FormattedMessage + id='admin.general.localization' + defaultMessage='Localization' + /> + } + > + <DropdownSetting + id='defaultServerLocale' + values={this.state.languages} + label={ + <FormattedMessage + id='admin.general.localization.serverLocaleTitle' + defaultMessage='Default Server Language:' + /> + } + value={this.state.defaultServerLocale} + onChange={this.handleChange} + helpText={ + <FormattedMessage + id='admin.general.localization.serverLocaleDescription' + defaultMessage='This setting sets the default language for the system messages and logs. (NEED SERVER RESTART)' + /> + } + /> + <DropdownSetting + id='defaultClientLocale' + values={this.state.languages} + label={ + <FormattedMessage + id='admin.general.localization.clientLocaleTitle' + defaultMessage='Default Client Language:' + /> + } + value={this.state.defaultClientLocale} + onChange={this.handleChange} + helpText={ + <FormattedMessage + id='admin.general.localization.clientLocaleDescription' + defaultMessage="This setting sets the Default language for newly created users and for pages where the user hasn't loggged in." + /> + } + /> + <MultiSelectSetting + id='availableLocales' + values={this.state.languages} + label={ + <FormattedMessage + id='admin.general.localization.availableLocalesTitle' + defaultMessage='Available Languages:' + /> + } + selected={this.state.availableLocales} + mustBePresent={this.state.defaultClientLocale} + onChange={this.handleChange} + helpText={ + <FormattedMessage + id='admin.general.localization.availableLocalesDescription' + defaultMessage='This setting determines the available languages that a user can set using the Account Settings.' + /> + } + noResultText={ + <FormattedMessage + id='admin.general.localization.availableLocalesNoResults' + defaultMessage='No results found' + /> + } + errorText={ + <FormattedMessage + id='admin.general.localization.availableLocalesError' + defaultMessage='There has to be at least one language available' + /> + } + notPresent={ + <FormattedMessage + id='admin.general.localization.availableLocalesNotPresent' + defaultMessage='The default client language must be included in the available list' + /> + } + /> + </SettingsGroup> + ); + } +}
\ No newline at end of file diff --git a/webapp/components/admin_console/multiselect_settings.jsx b/webapp/components/admin_console/multiselect_settings.jsx new file mode 100644 index 000000000..deba983de --- /dev/null +++ b/webapp/components/admin_console/multiselect_settings.jsx @@ -0,0 +1,80 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. +import React from 'react'; +import ReactSelect from 'react-select'; + +import Setting from './setting.jsx'; +import FormError from 'components/form_error.jsx'; + +export default class MultiSelectSetting extends React.Component { + constructor(props) { + super(props); + + this.handleChange = this.handleChange.bind(this); + this.state = {error: false}; + } + + handleChange(newValue) { + const values = newValue.map((n) => { + return n.value; + }); + + if (!newValue || newValue.length === 0) { + this.setState({error: this.props.errorText}); + } else if (this.props.mustBePresent && values.join(',').indexOf(this.props.mustBePresent) === -1) { + this.setState({error: this.props.notPresent}); + } else { + this.props.onChange(this.props.id, values); + this.setState({error: false}); + } + } + + componentWillReceiveProps(newProps) { + if (newProps.mustBePresent && newProps.selected.join(',').indexOf(newProps.mustBePresent) === -1) { + this.setState({error: this.props.notPresent}); + } else { + this.setState({error: false}); + } + } + + render() { + return ( + <Setting + label={this.props.label} + inputId={this.props.id} + helpText={this.props.helpText} + > + <ReactSelect + id={this.props.id} + multi={true} + labelKey='text' + options={this.props.values} + joinValues={true} + disabled={this.props.disabled} + noResultsText={this.props.noResultText} + onChange={this.handleChange} + value={this.props.selected} + /> + <FormError error={this.state.error}/> + </Setting> + ); + } +} + +MultiSelectSetting.defaultProps = { + disabled: false +}; + +MultiSelectSetting.propTypes = { + id: React.PropTypes.string.isRequired, + values: React.PropTypes.array.isRequired, + label: React.PropTypes.node.isRequired, + selected: React.PropTypes.array.isRequired, + mustBePresent: React.PropTypes.string, + onChange: React.PropTypes.func.isRequired, + disabled: React.PropTypes.bool, + helpText: React.PropTypes.node, + noResultText: React.PropTypes.node, + errorText: React.PropTypes.node, + notPresent: React.PropTypes.node +};
\ No newline at end of file diff --git a/webapp/components/root.jsx b/webapp/components/root.jsx index c96499392..abaa05bb5 100644 --- a/webapp/components/root.jsx +++ b/webapp/components/root.jsx @@ -6,6 +6,7 @@ import * as GlobalActions from 'actions/global_actions.jsx'; import LocalizationStore from 'stores/localization_store.jsx'; +import Client from 'utils/web_client.jsx'; import {IntlProvider} from 'react-intl'; @@ -41,7 +42,10 @@ export default class Root extends React.Component { FastClick.attach(document.body); } localizationChanged() { - this.setState({locale: LocalizationStore.getLocale(), translations: LocalizationStore.getTranslations()}); + const locale = LocalizationStore.getLocale(); + + Client.setAcceptLanguage(locale); + this.setState({locale, translations: LocalizationStore.getTranslations()}); } redirectIfNecessary(props) { @@ -67,7 +71,7 @@ export default class Root extends React.Component { LocalizationStore.addChangeListener(this.localizationChanged); // Get our localizaiton - GlobalActions.loadBrowserLocale(); + GlobalActions.loadDefaultLocale(); } componentWillUnmount() { LocalizationStore.removeChangeListener(this.localizationChanged); diff --git a/webapp/components/user_settings/user_settings_display.jsx b/webapp/components/user_settings/user_settings_display.jsx index 16175d4de..98d4ed7da 100644 --- a/webapp/components/user_settings/user_settings_display.jsx +++ b/webapp/components/user_settings/user_settings_display.jsx @@ -641,7 +641,11 @@ export default class UserSettingsDisplay extends React.Component { ); } + const userLocale = this.props.user.locale; if (this.props.activeSection === 'languages') { + if (!I18n.isLanguageAvailable(userLocale)) { + this.props.user.locale = global.window.mm_config.DefaultClientLocale; + } languagesSection = ( <ManageLanguages user={this.props.user} @@ -652,7 +656,12 @@ export default class UserSettingsDisplay extends React.Component { /> ); } else { - var locale = I18n.getLanguageInfo(this.props.user.locale).name; + let locale; + if (I18n.isLanguageAvailable(userLocale)) { + locale = I18n.getLanguageInfo(userLocale).name; + } else { + locale = I18n.getLanguageInfo(global.window.mm_config.DefaultClientLocale).name; + } languagesSection = ( <SettingItemMin diff --git a/webapp/i18n/i18n.jsx b/webapp/i18n/i18n.jsx index 2214fd386..783cef975 100644 --- a/webapp/i18n/i18n.jsx +++ b/webapp/i18n/i18n.jsx @@ -4,7 +4,7 @@ const es = require('!!file?name=i18n/[name].[ext]!./es.json'); const fr = require('!!file?name=i18n/[name].[ext]!./fr.json'); const ja = require('!!file?name=i18n/[name].[ext]!./ja.json'); -const pt = require('!!file?name=i18n/[name].[ext]!./pt.json'); +const pt_BR = require('!!file?name=i18n/[name].[ext]!./pt-BR.json'); //eslint-disable-line camelcase import {addLocaleData} from 'react-intl'; import enLocaleData from 'react-intl/locale-data/en'; @@ -34,19 +34,47 @@ const languages = { name: '日本語 (Beta)', url: ja }, - pt: { - value: 'pt', + 'pt-BR': { + value: 'pt-BR', name: 'Portugues (Beta)', - url: pt + url: pt_BR } }; -export function getLanguages() { +let availableLanguages = null; + +function setAvailableLanguages() { + const available = global.window.mm_config.AvailableLocales.split(','); + + availableLanguages = {}; + + available.forEach((l) => { + if (languages[l]) { + availableLanguages[l] = languages[l]; + } + }); +} + +export function getAllLanguages() { return languages; } +export function getLanguages() { + if (!availableLanguages) { + setAvailableLanguages(); + } + return availableLanguages; +} + export function getLanguageInfo(locale) { - return languages[locale]; + if (!availableLanguages) { + setAvailableLanguages(); + } + return availableLanguages[locale]; +} + +export function isLanguageAvailable(locale) { + return !!availableLanguages[locale]; } export function safariFix(callback) { diff --git a/webapp/i18n/pt.json b/webapp/i18n/pt-BR.json index 7a5821e37..7a5821e37 100644 --- a/webapp/i18n/pt.json +++ b/webapp/i18n/pt-BR.json diff --git a/webapp/package.json b/webapp/package.json index 8e2063c84..2f61faeb9 100644 --- a/webapp/package.json +++ b/webapp/package.json @@ -27,8 +27,9 @@ "react-bootstrap": "0.29.3", "react-custom-scrollbars": "4.0.0-beta.1", "react-dom": "15.0.2", - "react-intl": "2.0.0-rc-1", + "react-intl": "2.1.2", "react-router": "2.4.0", + "react-select": "1.0.0-beta13", "react-textarea-autosize": "4.0.1", "superagent": "1.8.3", "twemoji": "2.0.5", diff --git a/webapp/root.jsx b/webapp/root.jsx index dc2df64ac..40cf351de 100644 --- a/webapp/root.jsx +++ b/webapp/root.jsx @@ -53,6 +53,7 @@ const ActionTypes = Constants.ActionTypes; import AdminConsole from 'components/admin_console/admin_console.jsx'; import SystemAnalytics from 'components/analytics/system_analytics.jsx'; import ConfigurationSettings from 'components/admin_console/configuration_settings.jsx'; +import LocalizationSettings from 'components/admin_console/localization_settings.jsx'; import UsersAndTeamsSettings from 'components/admin_console/users_and_teams_settings.jsx'; import PrivacySettings from 'components/admin_console/privacy_settings.jsx'; import LogSettings from 'components/admin_console/log_settings.jsx'; @@ -142,8 +143,8 @@ function preRenderSetup(callwhendone) { ); function afterIntl() { - I18n.doAddLocaleData(); $.when(d1).done(() => { + I18n.doAddLocaleData(); callwhendone(); }); } @@ -363,6 +364,10 @@ function renderRootComponent() { component={ConfigurationSettings} /> <Route + path='localization' + component={LocalizationSettings} + /> + <Route path='users_and_teams' component={UsersAndTeamsSettings} /> diff --git a/webapp/sass/styles.scss b/webapp/sass/styles.scss index 67e62d023..c42722652 100644 --- a/webapp/sass/styles.scss +++ b/webapp/sass/styles.scss @@ -9,6 +9,7 @@ @import '~perfect-scrollbar/dist/css/perfect-scrollbar.css'; @import '~font-awesome/css/font-awesome.css'; @import '~bootstrap-colorpicker/dist/css/bootstrap-colorpicker.css'; +@import '~react-select/dist/react-select.css'; // styles.scss @import 'utils/module'; diff --git a/webapp/stores/user_store.jsx b/webapp/stores/user_store.jsx index 855222d47..f57ecf1cd 100644 --- a/webapp/stores/user_store.jsx +++ b/webapp/stores/user_store.jsx @@ -4,6 +4,9 @@ import AppDispatcher from '../dispatcher/app_dispatcher.jsx'; import EventEmitter from 'events'; +import * as GlobalActions from 'actions/global_actions.jsx'; +import LocalizationStore from './localization_store.jsx'; + import Constants from 'utils/constants.jsx'; const ActionTypes = Constants.ActionTypes; @@ -100,6 +103,9 @@ class UserStoreClass extends EventEmitter { this.saveProfile(user); this.currentUserId = user.id; global.window.mm_current_user_id = this.currentUserId; + if (LocalizationStore.getLocale() !== user.locale) { + GlobalActions.newLocalizationSelected(user.locale); + } } getCurrentId() { |