Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support multiple languages #187

Merged
merged 43 commits into from
Feb 2, 2018
Merged
Changes from 1 commit
Commits
Show all changes
43 commits
Select commit Hold shift + click to select a range
0d7fe7b
Added i18next packages
hql287 Jan 22, 2018
899bf5f
Added i18next to mainWindow
hql287 Jan 22, 2018
93d3181
Allows user to set default language
hql287 Jan 22, 2018
d2d55e3
Added translation
hql287 Jan 22, 2018
d6f525e
Translated components
hql287 Jan 22, 2018
471805f
Converted js to json
hql287 Jan 23, 2018
6adf402
Added & refactored translations
hql287 Jan 24, 2018
7ffa431
Uddated English Translation
hql287 Jan 24, 2018
6361600
Fixed Tests
hql287 Jan 25, 2018
5f6a6a5
Merge branch 'dev' into multiple-languages
hql287 Jan 26, 2018
4d1a665
Removed date-fns, use moment instead.
hql287 Jan 27, 2018
d0bae24
Fixed typos
hql287 Jan 27, 2018
6fd7abf
Added Invoices translation
hql287 Jan 27, 2018
ae7f30d
Translated Invoices & Invoice components
hql287 Jan 27, 2018
5c6422e
Added Fr & Vi translations
hql287 Jan 27, 2018
aa2e7d7
Replaced date-fns with moment
hql287 Jan 27, 2018
1907532
Fixed Tests
hql287 Jan 27, 2018
afb639c
Translated Contacts tab & added empty messages translation
hql287 Jan 29, 2018
05483fe
Keep i18n with moment in sync
hql287 Jan 29, 2018
a862b2e
Refactored Invoices/Invoice component and tests
hql287 Jan 29, 2018
15f5c30
Translated Notifications
hql287 Jan 29, 2018
d775279
Added missing translation for English & French
hql287 Jan 29, 2018
8569bb5
Converted Dialog windows to React component
hql287 Jan 29, 2018
2dafbbd
Updated Webpack Config
hql287 Jan 29, 2018
9e37b61
Removed unused component
hql287 Jan 29, 2018
501278e
Added dialog & common translations
hql287 Jan 29, 2018
265c8bb
Refactored components
hql287 Jan 29, 2018
06301d6
Refactored helpers
hql287 Jan 29, 2018
cf6fba3
Added missing translation
hql287 Jan 29, 2018
3c41aaa
Fixed Tests
hql287 Jan 30, 2018
f0bde11
Added translation for tourWindow & previewWindow
hql287 Jan 31, 2018
4bc4d52
Refactored previewWindow components
hql287 Jan 31, 2018
20593d7
Refactored templates
hql287 Jan 31, 2018
cd2fb73
Refactored tourWindow components
hql287 Jan 31, 2018
8eee3e8
Fixed snapshot
hql287 Jan 31, 2018
0ab2b40
Fixed typos
hql287 Jan 31, 2018
5a490fa
Fixed Typos
hql287 Jan 31, 2018
8fb98de
Merge branch 'dev' into multiple-languages
hql287 Feb 1, 2018
e9aaaff
Fixed typos
hql287 Feb 1, 2018
91d60cf
Fixed test
hql287 Feb 1, 2018
171e7c3
Updated Vietnamese Translation
hql287 Feb 2, 2018
32df196
Updated French translation
hql287 Feb 2, 2018
1658748
Updated English Translation
hql287 Feb 2, 2018
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Refactored previewWindow components
  • Loading branch information
hql287 committed Jan 31, 2018

Verified

This commit was created on GitHub.com and signed with GitHub’s verified signature.
commit 4bc4d529362ce708f8840d42998630aec7eaedd2
2 changes: 1 addition & 1 deletion preview/components/main/Invoice.jsx
Original file line number Diff line number Diff line change
@@ -26,7 +26,6 @@ import Business from '../../templates/business';

// Component
class Invoice extends PureComponent {

renderTemplate() {
switch (this.props.configs.template) {
case 'business': {
@@ -47,6 +46,7 @@ Invoice.propTypes = {
configs: PropTypes.object.isRequired,
invoice: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired,
t: PropTypes.func.isRequired,
};

export default Invoice;
6 changes: 4 additions & 2 deletions preview/components/sidebar/AccentColor.jsx
Original file line number Diff line number Diff line change
@@ -97,17 +97,18 @@ class AccentColor extends PureComponent {
'#dce775',
'#ff8a65',
];
const { t } = this.props;
return (
<Section>
<Label>Accent Color</Label>
<Label>{ t('preview:sidebar:accentColor:name') }</Label>
<label>
<input
type="checkbox"
checked={this.state.useCustom}
onChange={this.handleInputChange}
/>
{'\u00A0'}
Use Custom
{ t('preview:sidebar:accentColor:useCustom') }
</label>
<ColorPicker>
<Swatch onClick={this.handleClick}>
@@ -133,6 +134,7 @@ class AccentColor extends PureComponent {
AccentColor.propTypes = {
accentColor: PropTypes.object.isRequired,
handleAccentColorChange: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};

export default AccentColor;
7 changes: 4 additions & 3 deletions preview/components/sidebar/Actions.jsx
Original file line number Diff line number Diff line change
@@ -5,19 +5,20 @@ import PropTypes from 'prop-types';
import { Section, Label } from '../shared';
import Button from '../../../app/components/shared/Button';

function Actions({ savePDF }) {
function Actions({ t, savePDF }) {
return (
<Section>
<Label>Actions</Label>
<Label>{t('preview:sidebar:actions:name')}</Label>
<Button block primary onClick={savePDF}>
Save As PDF
{t('preview:sidebar:actions:savePDF')}
</Button>
</Section>
);
}

Actions.propTypes = {
savePDF: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};

export default Actions;
11 changes: 6 additions & 5 deletions preview/components/sidebar/Alignment.jsx
Original file line number Diff line number Diff line change
@@ -3,14 +3,14 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Section, Label } from '../shared';

function Alignment({ alignItems, handleInputChange }) {
function Alignment({ t, alignItems, handleInputChange }) {
return (
<Section>
<Label>Align Items</Label>
<Label>{t('preview:sidebar:alignment:name')}</Label>
<select name="alignItems" value={alignItems} onChange={handleInputChange}>
<option value="top">Top</option>
<option value="middle">Middle</option>
<option value="bottom">Bottom</option>
<option value="top">{t('preview:sidebar:alignment:top')}</option>
<option value="middle">{t('preview:sidebar:alignment:middle')}</option>
<option value="bottom">{t('preview:sidebar:alignment:bottom')}</option>
</select>
</Section>
);
@@ -19,6 +19,7 @@ function Alignment({ alignItems, handleInputChange }) {
Alignment.propTypes = {
alignItems: PropTypes.string.isRequired,
handleInputChange: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};

export default Alignment;
5 changes: 3 additions & 2 deletions preview/components/sidebar/FontSize.jsx
Original file line number Diff line number Diff line change
@@ -3,10 +3,10 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Section, Label, Range } from '../shared';

function FontSize({ fontSize, handleInputChange }) {
function FontSize({ t, fontSize, handleInputChange }) {
return (
<Section>
<Label>Font Size</Label>
<Label>{t('preview:sidebar:fontSize')}</Label>
<Range
name="fontSize"
type="range"
@@ -23,6 +23,7 @@ function FontSize({ fontSize, handleInputChange }) {
FontSize.propTypes = {
fontSize: PropTypes.string.isRequired,
handleInputChange: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};

export default FontSize;
10 changes: 4 additions & 6 deletions preview/components/sidebar/Template.jsx
Original file line number Diff line number Diff line change
@@ -5,24 +5,22 @@ import PropTypes from 'prop-types';
// Styling
import { Section, Label } from '../shared';

function Template({ template, handleInputChange }) {
function Template({ t, template, handleInputChange }) {
return (
<Section>
<Label>Template</Label>
<Label>{t('preview:sidebar:template')}</Label>
<select name="template" value={template} onChange={handleInputChange}>
<option value="minimal">Minimal</option>
<option value="business">Business</option>
{/*
<option value="modern">Modern</option>
*/}
</select>
</Section>
);
}

Template.propTypes = {
template: PropTypes.string.isRequired,
handleInputChange: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
template: PropTypes.string.isRequired,
};

export default Template;
11 changes: 6 additions & 5 deletions preview/components/sidebar/Toggler.jsx
Original file line number Diff line number Diff line change
@@ -3,11 +3,11 @@ import React from 'react';
import PropTypes from 'prop-types';
import { Section, Label } from '../shared';

function Toggler({ configs, handleInputChange }) {
function Toggler({ t, configs, handleInputChange }) {
const { showLogo, useSymbol, showRecipient } = configs;
return (
<Section>
<Label>Toggle</Label>
<Label>{ t('preview:sidebar:toggler:name') }</Label>
<label>
<input
name="showLogo"
@@ -16,7 +16,7 @@ function Toggler({ configs, handleInputChange }) {
onChange={handleInputChange}
/>
{'\u00A0'}
Logo
{ t('preview:sidebar:toggler:logo') }
</label>
<label>
<input
@@ -26,7 +26,7 @@ function Toggler({ configs, handleInputChange }) {
onChange={handleInputChange}
/>
{'\u00A0'}
Symbols
{ t('preview:sidebar:toggler:symbol') }
</label>
<label>
<input
@@ -36,7 +36,7 @@ function Toggler({ configs, handleInputChange }) {
onChange={handleInputChange}
/>
{'\u00A0'}
Recipient
{ t('preview:sidebar:toggler:recipient') }
</label>
</Section>
);
@@ -45,6 +45,7 @@ function Toggler({ configs, handleInputChange }) {
Toggler.propTypes = {
configs: PropTypes.object.isRequired,
handleInputChange: PropTypes.func.isRequired,
t: PropTypes.func.isRequired,
};

export default Toggler;
23 changes: 17 additions & 6 deletions preview/containers/MainContent.jsx
Original file line number Diff line number Diff line change
@@ -2,9 +2,11 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { translate } from 'react-i18next';
const ipc = require('electron').ipcRenderer;

import { Notify } from '../helper/notify';

// Actions
import * as ActionsCreator from '../actions';

@@ -50,7 +52,7 @@ class MainContent extends PureComponent {
// Handle click on notification
noti.onclick = () => {
ipc.send('reveal-file', options.location);
}
};
});
}

@@ -63,15 +65,20 @@ class MainContent extends PureComponent {
}

render() {
const { invoice, configs, profile } = this.props;
const { t, invoice, configs, profile } = this.props;
return (
<Wrapper>
{invoice._id ? (
<div className="print-area">
<Invoice configs={configs} invoice={invoice} profile={profile} />
<Invoice
t={t}
configs={configs}
invoice={invoice}
profile={profile}
/>
</div>
) : (
<Message>Choose An Invoice To Preview</Message>
<Message>{t('preview:common:chooseInvoiceToPreview')}</Message>
)}
</Wrapper>
);
@@ -83,6 +90,7 @@ MainContent.propTypes = {
dispatch: PropTypes.func.isRequired,
invoice: PropTypes.object.isRequired,
profile: PropTypes.object.isRequired,
t: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
@@ -91,4 +99,7 @@ const mapStateToProps = state => ({
profile: getProfile(state),
});

export default connect(mapStateToProps)(MainContent);
export default compose(
connect(mapStateToProps),
translate(['common', 'preview'])
)(MainContent);
22 changes: 18 additions & 4 deletions preview/containers/SideBar.jsx
Original file line number Diff line number Diff line change
@@ -2,6 +2,8 @@
import React, { PureComponent } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { compose } from 'recompose';
import { translate } from 'react-i18next';
const ipc = require('electron').ipcRenderer;

// Actions
@@ -68,28 +70,36 @@ class SideBar extends PureComponent {
}

render() {
const { configs } = this.props;
const { t, configs } = this.props;
const { template, alignItems, fontSize, accentColor } = configs;
return (
<Wrapper>
<Template
t={t}
template={template}
handleInputChange={this.handleInputChange}
/>
<Alignment
t={t}
alignItems={alignItems}
handleInputChange={this.handleInputChange}
/>
<FontSize
t={t}
fontSize={fontSize}
handleInputChange={this.handleInputChange}
/>
<Toggler configs={configs} handleInputChange={this.handleInputChange} />
<Toggler
t={t}
configs={configs}
handleInputChange={this.handleInputChange}
/>
<AccentColor
t={t}
accentColor={accentColor}
handleAccentColorChange={this.handleAccentColorChange}
/>
<Actions savePDF={this.savePDF} />
<Actions t={t} savePDF={this.savePDF} />
</Wrapper>
);
}
@@ -99,11 +109,15 @@ SideBar.propTypes = {
configs: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
invoice: PropTypes.object.isRequired,
t: PropTypes.func.isRequired,
};

const mapStateToProps = state => ({
invoice: getInvoice(state),
configs: getConfigs(state),
});

export default connect(mapStateToProps)(SideBar);
export default compose(
connect(mapStateToProps),
translate(['common', 'preview'])
)(SideBar);
1 change: 1 addition & 0 deletions preview/index.jsx
Original file line number Diff line number Diff line change
@@ -7,6 +7,7 @@ import ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { createStore, applyMiddleware, compose } from 'redux';
import { Provider } from 'react-redux';
import i18n from '../i18n/i18n';

// Root Reducer
import combineReducers from './reducers';