Commit 8c815d5d authored by MrMan's avatar MrMan

Basic template-based i18n system, convert app page

parent 165a2a73
......@@ -8,11 +8,13 @@ import TinderSentimentsStore from "../stores/tinder-sentiment";
import Actions from "../actions";
import Constants from "../constants";
import _ from "lodash";
import { generateI18NTemplateFn } from "../i18n";
class AppPage extends React.Component {
constructor(props) {
super(props);
this.unsubFunctions = {};
this.i18n = generateI18NTemplateFn("en-US");
}
componentDidMount() {
......@@ -51,28 +53,28 @@ class AppPage extends React.Component {
return (
<div className={`app-page-container full-height ${appBgClass}`}>
<h1 className="no-vertical-margins slim-text picture-overlay-text">Kindling</h1>
<h4 className="no-vertical-margins slim-text picture-overlay-text">Unofficial Tinder&#8482; client for FirefoxOS</h4>
<h1 className="no-bottom-margin slim-text picture-overlay-text">Find some</h1>
<h1 className="no-vertical-margins slim-text picture-overlay-text">human <strong className="alizarin-face">warmth</strong>.</h1>
<h1 className="no-vertical-margins slim-text picture-overlay-text">{this.i18n`app.name`}</h1>
<h4 className="no-vertical-margins slim-text picture-overlay-text">{this.i18n`app.subtitle`}</h4>
<h1 className="no-bottom-margin slim-text picture-overlay-text">{this.i18n`app.tagline.first`}</h1>
<h1 className="no-vertical-margins slim-text picture-overlay-text alizarin-face">{this.i18n`app.tagline.last`}</h1>
<div className="pinned-to-bottom app-page-controls">
<div className="row landing-wide-button">
<button onClick={this.viewMatches.bind(this)} className="pure-u-1 pure-button button-lg squared button-success">
<i className="fa fa-heart"></i> Matches
<i className="fa fa-heart"></i> {this.i18n`nav.sections.matches`}
</button>
</div>
<div className="row landing-wide-button">
<button onClick={this.goToPreferencesPage.bind(this)} className="pure-u-1 pure-button button-lg squared button-secondary wet-asphalt-bg">
<i className="fa fa-wrench"></i> Preferences
<i className="fa fa-wrench"></i> {this.i18n`nav.sections.preferences`}
</button>
</div>
<div className="row landing-wide-button">
<button onClick={this.doLogout.bind(this)} className="pure-u-1 pure-button button-lg squared button-error">
<i className="fa fa-sign-out"></i> Logout
<i className="fa fa-sign-out"></i> {this.i18n`nav.sections.logout`}
</button>
</div>
</div>
......
import _ from "lodash";
import enUS from "./i18n/languages/en-US";
const KEYPATH_INVALID_MESSAGE = "INVALID KEYPATH: ";
const DEFAULT_LOCALE = "en-US";
const LOCALE_LOOKUP = {
"default": enUS,
"en-US": enUS
};
export function generateI18NTemplateFn(locale=DEFAULT_LOCALE) {
return (args, values) => {
let translations = LOCALE_LOOKUP[locale];
let keypath = _.first(args);
return _.get(translations, keypath, `${KEYPATH_INVALID_MESSAGE} [${keypath}]`);
};
}
export default {
app: {
name: "Kindling",
subtitle: "Unofficial Tinder™ client for FirefoxOS",
tagline: {
first: "Find some",
last: "human warmth"
}
},
nav: {
sections: {
matches: "Matches",
preferences: "Preferences",
logout: "Logout"
}
}
};
Markdown is supported
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