Commit e5dbf8b2 authored by Benjamin Bouvier's avatar Benjamin Bouvier
Browse files

Move locale selector to the settings, in the Customization tab;

This tab is the themes tab recycled to be more general. This commit also
enhances the theme texts, and adds labels to make it easier to click
selects.
parent 3206600e
......@@ -6,7 +6,7 @@ import URL from '../../urls';
import NewBankForm from '../settings/bank-accesses/form';
import ImportModule from '../settings/backup/import';
import LocaleSelector from '../menu/locale-selector';
import LocaleSelector from '../settings/customization/locale-selector';
import WeboobInstallReadme from './weboob-readme';
......
......@@ -6,7 +6,7 @@ import { get } from '../../store';
import { translate as $t, MIN_WEBOOB_VERSION as minVersion } from '../../helpers';
import ExternalLink from '../ui/external-link';
import LocaleSelector from '../menu/locale-selector';
import LocaleSelector from '../settings/customization/locale-selector';
import { repository } from '../../../package.json';
......
......@@ -4,7 +4,9 @@ import { connect } from 'react-redux';
import { translate as $t } from '../../../helpers';
import { get, actions } from '../../../store';
const ThemesSection = connect(
import LocaleSelector from './locale-selector';
const CustomizationOptions = connect(
state => {
return {
themes: get.themes(state),
......@@ -21,35 +23,45 @@ const ThemesSection = connect(
)(props => {
let handleThemeChange = event => props.changeTheme(event.target.value);
let maybeWarning = null;
let themes = null;
if (props.themes.length < 2) {
maybeWarning = <p className="alerts warning">{$t('client.settings.themes.none')}</p>;
}
let options = props.themes.map(t => {
return (
<option value={t} key={t}>
{t}
</option>
);
});
return (
<form className="settings-form settings-container">
{maybeWarning}
themes = <p className="alerts warning">{$t('client.settings.customization.no_themes')}</p>;
} else {
let options = props.themes.map(t => {
return (
<option value={t} key={t}>
{t}
</option>
);
});
themes = (
<p>
<label>{$t('client.settings.themes.choose')}</label>
<label htmlFor="theme-selector">
{$t('client.settings.customization.choose_theme')}
</label>
<select
id="theme-selector"
className="form-element-block"
defaultValue={props.currentTheme}
onChange={handleThemeChange}>
{options}
</select>
</p>
);
}
return (
<form className="settings-form settings-container">
<p>
<label htmlFor="locale-selector">
{$t('client.settings.customization.locale')}
</label>
<LocaleSelector className="form-element-block" id="locale-selector" />
</p>
{themes}
</form>
);
});
export default ThemesSection;
export default CustomizationOptions;
import React from 'react';
import { connect } from 'react-redux';
import { get, actions } from '../../store';
import { get, actions } from '../../../store';
const LocaleSelector = props => {
let handleChange = e => {
props.setLocale(e.target.value);
class LocaleSelector extends React.Component {
handleChange = e => {
this.props.setLocale(e.target.value);
};
return (
<select
className="locale-selector"
onChange={handleChange}
defaultValue={props.currentLocale}>
<option value="fr">FR</option>
<option value="en">EN</option>
</select>
);
};
render() {
let className = `locale-selector ${this.props.className || ''}`;
let id = this.props.id || '';
return (
<select
id={id}
className={className}
onChange={this.handleChange}
defaultValue={this.props.currentLocale}>
<option value="fr">Français</option>
<option value="en">English</option>
</select>
);
}
}
export default connect(
state => {
......
......@@ -4,12 +4,12 @@ import PropTypes from 'prop-types';
import URL from '../../urls';
import { translate as $t } from '../../helpers';
import BankAccountsList from './bank-accesses';
import BackupParameters from './backup';
import BankAccountsList from './bank-accesses';
import CustomizationParameters from './customization';
import EmailsParameters from './emails';
import WeboobParameters from './weboob';
import ThemesParameters from './themes';
import LogsSection from './logs';
import WeboobParameters from './weboob';
import TabsContainer from '../ui/tabs.js';
......@@ -33,9 +33,9 @@ const SettingsComponents = props => {
name: $t('client.settings.tab_weboob'),
component: WeboobParameters
});
tabs.set(URL.settings.url('themes', currentAccountId), {
name: $t('client.settings.tab_themes'),
component: ThemesParameters
tabs.set(URL.settings.url('customization', currentAccountId), {
name: $t('client.settings.tab_customization'),
component: CustomizationParameters
});
tabs.set(URL.settings.url('logs', currentAccountId), {
name: $t('client.settings.tab_logs'),
......
......@@ -24,7 +24,6 @@ import Settings from './components/settings';
import AccountWizard from './components/init/account-wizard';
import LocaleSelector from './components/menu/locale-selector';
import Menu from './components/menu';
import Loading from './components/ui/loading';
......@@ -144,14 +143,10 @@ class BaseApp extends React.Component {
<button className="menu-toggle" onClick={this.handleMenuToggle}>
<span className="fa fa-navicon" />
</button>
<h1>
<Link to="/">{$t('client.KRESUS')}</Link>
</h1>
<Route path={URL.sections.pattern} render={this.makeSectionTitle} />
<LocaleSelector />
</header>
<main>
......
......@@ -283,7 +283,7 @@
"tab_backup": "Backup / restore data",
"tab_alerts": "Alerts",
"tab_weboob": "Weboob management",
"tab_themes": "Themes",
"tab_customization": "Customization",
"tab_logs": "Logs",
"erase_account": "This will erase the \"%{title}\" account, and all its transactions. If this is the last account bound to this bank, the bank will be erased as well. Are you sure about this?",
"erase_access": "This will erase the \"%{name}\" bank, and all its associated accounts and transactions. Are you sure about this?",
......@@ -343,9 +343,10 @@
"emails_not_enabled": "Emails haven't been enabled by your administrator. Thus, it is not possible to set any email reports or alerts at this time.",
"limit_is_empty": "Please enter a threshold value."
},
"themes": {
"choose": "Select the theme to use",
"none": "No additional themes available. Ask your administrator to install one!"
"customization": {
"choose_theme": "Theme",
"no_themes": "No additional themes available. Ask your administrator to install one!",
"locale": "Language"
},
"logs": {
"refresh": "Refresh",
......
......@@ -283,7 +283,7 @@
"tab_backup": "Sauvegarde et restauration",
"tab_alerts": "Alertes",
"tab_weboob": "Gestion de Weboob",
"tab_themes": "Thèmes",
"tab_customization": "Personnalisation",
"tab_logs": "Journaux",
"erase_account": "Cela va supprimer le compte '%{title}' et toutes les opérations bancaires qu'il contient. Si c'est le dernier compte lié à cette banque, le lien bancaire sera supprimé. Êtes-vous sûr⋅e de vouloir supprimer ce compte ?",
"erase_access": "Cela va supprimer la banque nommée '%{name}', tous les comptes et toutes les opérations liées à cette banque. Êtes-vous sûr⋅e de vouloir supprimer cette banque et tous ses comptes liés ?",
......@@ -343,9 +343,10 @@
"emails_not_enabled": "Les emails n'ont pas été activés par votre administrateur : il n'est donc pas possible d'envoyer des rapports emails ou des alertes pour le moment.",
"limit_is_empty": "La valeur de seuil est obligatoire."
},
"themes": {
"choose": "Sélectionnez le thème à utiliser",
"none": "Aucun thème additionnel disponible. Demandez à votre administrateur d'en installer !"
"customization": {
"choose_theme": "Thème",
"no_themes": "Aucun thème additionnel disponible. Demandez à votre administrateur d'en installer !",
"locale": "Langue"
},
"logs": {
"refresh": "Rafraîchir",
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment