Add left menu translations

This commit is contained in:
Pierre Burgy 2017-08-17 15:39:09 +02:00
parent 074afb829f
commit a2f0feb29c
8 changed files with 63 additions and 27 deletions

View File

@ -4,10 +4,12 @@
* *
*/ */
import React from 'react';
import styles from './styles.scss';
import { Link } from 'react-router';
import _ from 'lodash'; import _ from 'lodash';
import React from 'react';
import { FormattedMessage } from 'react-intl';
import { Link } from 'react-router';
import styles from './styles.scss';
class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() { render() {
@ -15,11 +17,15 @@ class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer
// because of the two levels router. // because of the two levels router.
const isLinkActive = _.startsWith(window.location.pathname.replace('/admin', ''), this.props.destination); const isLinkActive = _.startsWith(window.location.pathname.replace('/admin', ''), this.props.destination);
// const label = this.props.label.id
// ? <FormattedMessage id={this.props.label.id} className={styles.linkLabel} />
// : <span className={styles.linkLabel}>{this.props.label}</span>;
return ( return (
<li className={styles.item}> <li className={styles.item}>
<Link className={`${styles.link} ${isLinkActive ? styles.linkActive : ''}`} to={this.props.destination}> <Link className={`${styles.link} ${isLinkActive ? styles.linkActive : ''}`} to={this.props.destination}>
<i className={`${styles.linkIcon} fa-${this.props.icon} fa`}></i> <i className={`${styles.linkIcon} fa-${this.props.icon} fa`}></i>
<span className={styles.linkLabel}>{this.props.label}</span> <FormattedMessage id={this.props.label} className={styles.linkLabel} />
</Link> </Link>
</li> </li>
); );

View File

@ -5,8 +5,11 @@
*/ */
import React from 'react'; import React from 'react';
import { FormattedMessage } from 'react-intl';
import LeftMenuLink from 'components/LeftMenuLink'; import LeftMenuLink from 'components/LeftMenuLink';
import styles from './styles.scss'; import styles from './styles.scss';
import messages from './messages.json';
class LeftMenuLinkContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function class LeftMenuLinkContainer extends React.Component { // eslint-disable-line react/prefer-stateless-function
render() { render() {
@ -53,27 +56,27 @@ class LeftMenuLinkContainer extends React.Component { // eslint-disable-line rea
<div className={styles.leftMenuLinkContainer}> <div className={styles.leftMenuLinkContainer}>
{linkSections} {linkSections}
<div> <div>
<p className={styles.title}>Plugins</p> <p className={styles.title}><FormattedMessage {...messages.plugins} /></p>
<ul className={styles.list}> <ul className={styles.list}>
{pluginsLinks} {pluginsLinks}
</ul> </ul>
</div> </div>
<div> <div>
<p className={styles.title}>General</p> <p className={styles.title}><FormattedMessage {...messages.general} /></p>
<ul className={styles.list}> <ul className={styles.list}>
<LeftMenuLink <LeftMenuLink
icon="cubes" icon="cubes"
label="List plugins" label={messages.listPlugins.id}
destination="/list-plugins" destination="/list-plugins"
/> />
<LeftMenuLink <LeftMenuLink
icon="download" icon="download"
label="Install new plugin" label={messages.installNewPlugin.id}
destination="/install-plugin" destination="/install-plugin"
/> />
<LeftMenuLink <LeftMenuLink
icon="gear" icon="gear"
label="Configuration" label={messages.configuration.id}
destination="/configuration" destination="/configuration"
/> />
</ul> </ul>

View File

@ -0,0 +1,22 @@
{
"listPlugins": {
"id": "app.components.LeftMenuLinkContainer.listPlugins",
"defaultMessage": "List plugins"
},
"installNewPlugin": {
"id": "app.components.LeftMenuLinkContainer.installNewPlugin",
"defaultMessage": "Install new plugin"
},
"configuration": {
"id": "app.components.LeftMenuLinkContainer.configuration",
"defaultMessage": "Configuration"
},
"plugins": {
"id": "app.components.LeftMenuLinkContainer.plugins",
"defaultMessage": "Plugins"
},
"general": {
"id": "app.components.LeftMenuLinkContainer.general",
"defaultMessage": "General"
}
}

View File

@ -8,7 +8,7 @@ import React from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import Helmet from 'react-helmet'; import Helmet from 'react-helmet';
import { FormattedMessage } from 'react-intl'; import { FormattedMessage } from 'react-intl';
import messages from './messages'; import messages from './messages.json';
import styles from './styles.scss'; import styles from './styles.scss';
export class ComingSoonPage extends React.Component { // eslint-disable-line react/prefer-stateless-function export class ComingSoonPage extends React.Component { // eslint-disable-line react/prefer-stateless-function
@ -18,7 +18,7 @@ export class ComingSoonPage extends React.Component { // eslint-disable-line rea
<Helmet <Helmet
title="Coming soon" title="Coming soon"
/> />
<p><FormattedMessage {...messages.header} /></p> <p><FormattedMessage {...messages.comingSoon} />.</p>
</div> </div>
); );
} }

View File

@ -1,13 +0,0 @@
/*
* ComingSoonPage Messages
*
* This contains all the text for the ComingSoonPage component.
*/
import { defineMessages } from 'react-intl';
export default defineMessages({
header: {
id: 'app.containers.ComingSoonPage.header',
defaultMessage: 'Coming soon.',
},
});

View File

@ -0,0 +1,6 @@
{
"comingSoon": {
"id": "app.components.ComingSoonPage.comingSoon",
"defaultMessage": "Coming soon"
}
}

View File

@ -1,4 +1,10 @@
{ {
"app.components.LeftMenuFooter.poweredBy": "", "app.components.ComingSoonPage.comingSoon": "Coming soon",
"app.components.LeftMenuFooter.poweredBy": "Proudly powered by",
"app.components.LeftMenuLinkContainer.configuration": "Configuration",
"app.components.LeftMenuLinkContainer.general": "General",
"app.components.LeftMenuLinkContainer.installNewPlugin": "Install new plugin",
"app.components.LeftMenuLinkContainer.listPlugins": "List plugins",
"app.components.LeftMenuLinkContainer.plugins": "Plugins",
"app.components.NotFoundPage.description": "" "app.components.NotFoundPage.description": ""
} }

View File

@ -1,4 +1,10 @@
{ {
"app.components.ComingSoonPage.comingSoon": "Bientôt disponible",
"app.components.LeftMenuFooter.poweredBy": "Propulsé par", "app.components.LeftMenuFooter.poweredBy": "Propulsé par",
"app.components.LeftMenuLinkContainer.configuration": "Configuration",
"app.components.LeftMenuLinkContainer.general": "Général",
"app.components.LeftMenuLinkContainer.installNewPlugin": "Installer un nouveau plugin",
"app.components.LeftMenuLinkContainer.listPlugins": "Liste des plugins",
"app.components.LeftMenuLinkContainer.plugins": "Plugins",
"app.components.NotFoundPage.description": "Page introuvable" "app.components.NotFoundPage.description": "Page introuvable"
} }