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.

Sign up for GitHub

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

Translation of settings page #191

Closed
wants to merge 2 commits into from
Closed

Translation of settings page #191

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
a608f67
Translation of settings page
Jan 23, 2018
4ef3284
Closes hql287/Manta#190, Closes hql287/Manta#173
Jan 23, 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
27 changes: 14 additions & 13 deletions app/components/settings/General.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,25 +26,26 @@ class General extends Component {
}

render() {
const { t } = this.props;
return (
<div>
<div className="row">
<div className="col-md-6">
<div className="pageItem">
<label className="itemLabel">Sound</label>
<label className="itemLabel">{t('settings:general:sound:heading')}</label>
<select
name="sound"
value={this.state.sound}
onChange={this.handleInputChange}
>
<option value="default">Default</option>
<option value="cs">Counter Strike</option>
<option value="default">{t('settings:general:sound:default')}</option>
<option value="cs">{t('settings:general:sound:counterstrike')}</option>
</select>
</div>
</div>
<div className="col-md-6">
<div className="pageItem">
<label className="itemLabel">Mute Sound?</label>
<label className="itemLabel">{t('settings:general:sound:mute')}</label>
<label className="switch">
<input
name="muted"
Expand All @@ -60,20 +61,20 @@ class General extends Component {
<div className="row">
<div className="col-md-6">
<div className="pageItem">
<label className="itemLabel">Auto Check For Update</label>
<label className="itemLabel">{t('settings:general:checkupdates:heading')}</label>
<select
name="checkUpdate"
value={this.state.checkUpdate}
onChange={this.handleInputChange}
>
<option value="daily">Everyday (Recommended)</option>
<option value="weekly">Once A Week</option>
<option value="daily">{t('settings:general:checkupdates:daily')}</option>
<option value="weekly">{t('settings:general:checkupdates:weekly')}</option>
</select>
</div>
</div>
<div className="col-md-6">
<div className="pageItem">
<label className="itemLabel">Auto Preview PDF</label>
<label className="itemLabel">{t('settings:general:autopreviewpdf')}</label>
<label className="switch">
<input
name="previewPDF"
Expand All @@ -89,16 +90,16 @@ class General extends Component {
<div className="row">
<div className="col-md-6">
<div className="pageItem">
<label className="itemLabel">Language</label>
<label className="itemLabel">{t('settings:general:language:heading')}</label>
<select
name="language"
value={this.state.language}
onChange={this.handleInputChange}
>
<option value="en">English</option>
<option value="de">German</option>
<option value="fr">French</option>
<option value="vi">Vietnamese</option>
<option value="en">{t('settings:general:language:english')}</option>
<option value="de">{t('settings:general:language:german')}</option>
<option value="fr">{t('settings:general:language:french')}</option>
<option value="vi">{t('settings:general:language:vietnamese')}</option>
</select>
</div>
</div>
Expand Down
45 changes: 23 additions & 22 deletions app/components/settings/Invoice.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,14 +42,15 @@ class Invoice extends Component {
this.handleInputChange = this.handleInputChange.bind(this);
this.handleTaxChange = this.handleTaxChange.bind(this);
this.handleVisibilityChange = this.handleVisibilityChange.bind(this);
this.t = this.props.t;
}

componentDidMount() {
ipc.on('no-access-directory', (event, message) => {
openDialog({
type: 'warning',
title: 'No Access Permisison',
message: `${message}. Please choose a different directory!`,
title: this.t('settings:invoice:noaccess:title'),
message: message + this.t('settings:invoice:noaccess:message'),
});
});

Expand Down Expand Up @@ -146,23 +147,23 @@ class Invoice extends Component {
} = this.state;
return (
<div>
<label className="itemLabel">Tax Settings</label>
<label className="itemLabel">{this.t('settings:invoice:tax:heading')}</label>
<Section>
<Row>
<Field>
<label className="itemLabel">Tax ID</label>
<label className="itemLabel">{this.t('settings:invoice:tax:taxid')}</label>
<input
name="tin"
type="text"
value={tax.tin}
onChange={this.handleTaxChange}
placeholder="Registration Number"
placeholder={this.t('settings:invoice:tax:taxidplaceholder')}
/>
</Field>
</Row>
<Row>
<Field>
<label className="itemLabel">Tax Amount</label>
<label className="itemLabel">{this.t('settings:invoice:tax:amount')}</label>
<input
name="amount"
type="number"
Expand All @@ -173,24 +174,24 @@ class Invoice extends Component {
/>
</Field>
<Field>
<label className="itemLabel">Tax Method</label>
<label className="itemLabel">{this.t('settings:invoice:tax:method:heading')}</label>
<select
name="method"
value={tax.method}
onChange={this.handleTaxChange}
>
<option value="default">Default</option>
<option value="reverse">Reverse Charge</option>
<option value="default">{this.t('settings:invoice:tax:method:default')}</option>
<option value="reverse">{this.t('settings:invoice:tax:method:reverse')}</option>
</select>
</Field>
</Row>
</Section>

<label className="itemLabel">Required Fields</label>
<label className="itemLabel">{this.t('settings:invoice:reqfields:heading')}</label>
<Section>
<Row>
<Field>
<label className="itemLabel">Due Date</label>
<label className="itemLabel">{this.t('settings:invoice:reqfields:duedate')}</label>
<label className="switch">
<input
name="dueDate"
Expand All @@ -202,7 +203,7 @@ class Invoice extends Component {
</label>
</Field>
<Field>
<label className="itemLabel">Currency</label>
<label className="itemLabel">{this.t('settings:common:currency')}</label>
<label className="switch">
<input
name="currency"
Expand All @@ -215,7 +216,7 @@ class Invoice extends Component {
</Field>

<Field>
<label className="itemLabel">Discount</label>
<label className="itemLabel">{this.t('settings:invoice:reqfields:discount')}</label>
<label className="switch">
<input
name="discount"
Expand All @@ -227,7 +228,7 @@ class Invoice extends Component {
</label>
</Field>
<Field>
<label className="itemLabel">Tax</label>
<label className="itemLabel">{this.t('settings:invoice:reqfields:tax')}</label>
<label className="switch">
<input
name="tax"
Expand All @@ -239,7 +240,7 @@ class Invoice extends Component {
</label>
</Field>
<Field>
<label className="itemLabel">Note</label>
<label className="itemLabel">{this.t('settings:invoice:reqfields:note')}</label>
<label className="switch">
<input
name="note"
Expand All @@ -253,11 +254,11 @@ class Invoice extends Component {
</Row>
</Section>

<label className="itemLabel">Other</label>
<label className="itemLabel">{this.t('settings:invoice:other:heading')}</label>
<Section>
<Row>
<Field>
<label className="itemLabel">Currency</label>
<label className="itemLabel">{this.t('settings:common:currency')}</label>
<select
name="currency"
value={currency}
Expand All @@ -267,20 +268,20 @@ class Invoice extends Component {
</select>
</Field>
<Field>
<label className="itemLabel">Template</label>
<label className="itemLabel">{this.t('settings:invoice:other:template:heading')}</label>
<select
name="template"
value={template}
onChange={this.handleInputChange}
>
<option value="minimal">Minimal</option>
<option value="business">Business</option>
<option value="minimal">{this.t('settings:invoice:other:template:minimal')}</option>
<option value="business">{this.t('settings:invoice:other:template:business')}</option>
</select>
</Field>
</Row>
<Row>
<Field>
<label className="itemLabel">Date Format</label>
<label className="itemLabel">{this.t('settings:invoice:other:dateformat')}</label>
<select
name="dateFormat"
value={dateFormat}
Expand Down Expand Up @@ -315,7 +316,7 @@ class Invoice extends Component {
</select>
</Field>
<Field>
<label className="itemLabel">PDF Export Directory</label>
<label className="itemLabel">{this.t('settings:invoice:other:exportdir')}</label>
<div className="input-group">
<input
className="form-control"
Expand Down
17 changes: 9 additions & 8 deletions app/components/settings/Profile.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,19 +42,20 @@ class Profile extends Component {
}

render() {
const { t } = this.props;
return (
<div>
<div className="pageItem">
<label className="itemLabel">Logo</label>
<Hint>Accepts PNG, JPEG & SVG</Hint>
<label className="itemLabel">{t('settings:profile:logo')}</label>
<Hint>{t('settings:profile:filetypes')}</Hint>
<Logo
logo={this.state.logo}
handleLogoChange={this.handleLogoChange}
/>
</div>
<div className="row">
<div className="pageItem col-md-6">
<label className="itemLabel">Full Name</label>
<label className="itemLabel">{t('settings:profile:fullname')}</label>
<input
name="fullname"
type="text"
Expand All @@ -64,7 +65,7 @@ class Profile extends Component {
</div>

<div className="pageItem col-md-6">
<label className="itemLabel">Company</label>
<label className="itemLabel">{t('settings:profile:company')}</label>
<input
name="company"
type="text"
Expand All @@ -76,7 +77,7 @@ class Profile extends Component {

<div className="row">
<div className="pageItem col-md-6">
<label className="itemLabel">Address</label>
<label className="itemLabel">{t('settings:profile:address')}</label>
<input
name="address"
type="text"
Expand All @@ -86,7 +87,7 @@ class Profile extends Component {
</div>

<div className="pageItem col-md-6">
<label className="itemLabel">Email</label>
<label className="itemLabel">{t('settings:profile:email')}</label>
<input
name="email"
type="text"
Expand All @@ -98,7 +99,7 @@ class Profile extends Component {

<div className="row">
<div className="pageItem col-md-6">
<label className="itemLabel">Phone Number</label>
<label className="itemLabel">{t('settings:profile:phone')}</label>
<input
name="phone"
type="text"
Expand All @@ -108,7 +109,7 @@ class Profile extends Component {
</div>

<div className="pageItem col-md-6">
<label className="itemLabel">Website</label>
<label className="itemLabel">{t('settings:profile:website')}</label>
<input
name="website"
type="text"
Expand Down
20 changes: 12 additions & 8 deletions app/containers/Settings.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
import { compose } from 'recompose';
import { connect } from 'react-redux';
import { isEqual } from 'lodash';
import { translate } from 'react-i18next';

// Selectors
import {
Expand Down Expand Up @@ -59,14 +60,16 @@ class Settings extends Component {
renderSettingsContent() {
const { profile, general, invoice } = this.props.currentSettings;
const { updateSettings } = this.props.boundActionCreators;
// Translation
const { t } = this.props;
return (
<PageWrapper>
<PageHeader>
<PageHeaderTitle>Settings</PageHeaderTitle>
<PageHeaderTitle>{t('settings:general:heading')}</PageHeaderTitle>
{!this.settingsSaved() && (
<PageHeaderActions>
<Button primary onClick={this.saveSettingsState}>
Save
{t('settings:general:btns:save')}
</Button>
</PageHeaderActions>
)}
Expand All @@ -78,32 +81,32 @@ class Settings extends Component {
className={this.state.visibleTab === 1 ? 'active' : ''}
onClick={() => this.changeTab(1)}
>
Profile
{t('settings:profile:heading')}
</Tab>
<Tab
href="#"
className={this.state.visibleTab === 2 ? 'active' : ''}
onClick={() => this.changeTab(2)}
>
Invoice
{t('settings:invoice:heading')}
</Tab>
<Tab
href="#"
className={this.state.visibleTab === 3 ? 'active' : ''}
onClick={() => this.changeTab(3)}
>
General
{t('settings:general:heading')}
</Tab>
</Tabs>
<TabContent>
{this.state.visibleTab === 1 && (
<Profile profile={profile} updateSettings={updateSettings} />
<Profile profile={profile} updateSettings={updateSettings} t={t} />
)}
{this.state.visibleTab === 2 && (
<Invoice invoice={invoice} updateSettings={updateSettings} />
<Invoice invoice={invoice} updateSettings={updateSettings} t={t} />
)}
{this.state.visibleTab === 3 && (
<General general={general} updateSettings={updateSettings} />
<General general={general} updateSettings={updateSettings} t={t} />
)}
</TabContent>
</PageContent>
Expand Down Expand Up @@ -139,5 +142,6 @@ const mapStateToProps = state => ({

export default compose(
connect(mapStateToProps, mapDispatchToProps),
translate('settings'),
_withFadeInAnimation
)(Settings);
Loading