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 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
render() {
@ -15,11 +17,15 @@ class LeftMenuLink extends React.Component { // eslint-disable-line react/prefer
// because of the two levels router.
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 (
<li className={styles.item}>
<Link className={`${styles.link} ${isLinkActive ? styles.linkActive : ''}`} to={this.props.destination}>
<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>
</li>
);

View File

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

View File

@ -1,4 +1,10 @@
{
"app.components.ComingSoonPage.comingSoon": "Bientôt disponible",
"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"
}
}