From 62e146febb8892d0df45f7ab936a655de0ad987e Mon Sep 17 00:00:00 2001 From: Ivan Diaz Date: Wed, 30 Sep 2015 22:22:06 -0300 Subject: [PATCH] [Ivan Diaz] - Add i18n functionality and styling login widget styling tweaks --- package.json | 1 + src/actions/common-actions.js | 7 +++++ src/app/App.js | 28 +++++++++++++------ .../main-home/main-home-page-login-widget.js | 2 +- .../main-home-page-login-widget.scss | 7 ++++- src/app/main/main-layout-header.js | 6 +++- src/app/main/main-layout.scss | 2 +- src/data/i18n-data.js | 15 ++++++++++ src/data/i18n-keys.js | 4 +++ src/stores/common-store.js | 19 +++++++++++++ src/utils/i18n.js | 15 ++++++++++ 11 files changed, 94 insertions(+), 12 deletions(-) create mode 100644 src/actions/common-actions.js create mode 100644 src/data/i18n-data.js create mode 100644 src/data/i18n-keys.js create mode 100644 src/stores/common-store.js create mode 100644 src/utils/i18n.js diff --git a/package.json b/package.json index bc1f7194..58c0b45c 100644 --- a/package.json +++ b/package.json @@ -46,6 +46,7 @@ "humps": "^0.6.0", "jest-cli": "^0.4.19", "lodash": "^3.10.0", + "messageformat": "^0.2.2", "morgan": "^1.6.1", "react": "^0.13.x", "react-document-title": "^1.0.2", diff --git a/src/actions/common-actions.js b/src/actions/common-actions.js new file mode 100644 index 00000000..4d50c050 --- /dev/null +++ b/src/actions/common-actions.js @@ -0,0 +1,7 @@ +import Reflux from 'reflux'; + +var CommonActions = Reflux.createActions([ + 'changeLanguage' +]); + +export default CommonActions; \ No newline at end of file diff --git a/src/app/App.js b/src/app/App.js index e38ee444..c4a1b1b5 100644 --- a/src/app/App.js +++ b/src/app/App.js @@ -1,17 +1,29 @@ import React from 'react/addons'; +import Reflux from 'reflux'; import {ListenerMixin} from 'reflux'; import {RouteHandler} from 'react-router'; +import CommonActions from 'actions/common-actions'; +import CommonStore from 'stores/common-store'; + var App = React.createClass({ - render() { - return ( -
- -
- ); - } + mixins: [Reflux.listenTo(CommonStore, 'onCommonStoreChanged')], + + render() { + return ( +
+ +
+ ); + }, + + onCommonStoreChanged(change) { + if (change === 'i18n') { + this.forceUpdate(); + } + } }); diff --git a/src/app/main/main-home/main-home-page-login-widget.js b/src/app/main/main-home/main-home-page-login-widget.js index 719f4149..efb87eeb 100644 --- a/src/app/main/main-home/main-home-page-login-widget.js +++ b/src/app/main/main-home/main-home-page-login-widget.js @@ -21,7 +21,7 @@ var MainHomePageLoginWidget = React.createClass({ - + ); }, diff --git a/src/app/main/main-home/main-home-page-login-widget.scss b/src/app/main/main-home/main-home-page-login-widget.scss index 0d9ad1bb..71f5f082 100644 --- a/src/app/main/main-home/main-home-page-login-widget.scss +++ b/src/app/main/main-home/main-home-page-login-widget.scss @@ -6,6 +6,11 @@ margin: 10px 0; } - &--form { + &--inputs { + margin-bottom: 20px; + } + + &--forgot-password { + margin-top: 20px; } } \ No newline at end of file diff --git a/src/app/main/main-layout-header.js b/src/app/main/main-layout-header.js index 39cef6ac..acf387b8 100644 --- a/src/app/main/main-layout-header.js +++ b/src/app/main/main-layout-header.js @@ -1,5 +1,7 @@ import React from 'react/addons'; import Button from 'core-components/button'; +import CommonActions from 'actions/common-actions'; +import i18n from 'utils/i18n'; var MainLayoutHeader = React.createClass({ @@ -7,8 +9,10 @@ var MainLayoutHeader = React.createClass({ return (
- + + +
); diff --git a/src/app/main/main-layout.scss b/src/app/main/main-layout.scss index 8b6966ee..ee3c21f6 100644 --- a/src/app/main/main-layout.scss +++ b/src/app/main/main-layout.scss @@ -4,6 +4,6 @@ .main-layout { margin: 0 auto; background-color: $grey; - width: 1100px; + max-width: 1100px; border-radius: 4px; } diff --git a/src/data/i18n-data.js b/src/data/i18n-data.js new file mode 100644 index 00000000..0b3f54f2 --- /dev/null +++ b/src/data/i18n-data.js @@ -0,0 +1,15 @@ +import keys from 'data/i18n-keys' + +var languages = [ + 'en', + 'es' +]; + + +var i18nData = function (key, lang) { + var langIndex = languages.indexOf(lang); + + return keys[key][langIndex]; +}; + +export default i18nData \ No newline at end of file diff --git a/src/data/i18n-keys.js b/src/data/i18n-keys.js new file mode 100644 index 00000000..5be5ba3a --- /dev/null +++ b/src/data/i18n-keys.js @@ -0,0 +1,4 @@ +export default { + 'SUBMIT': ['Submit', 'Enviar'], + 'LOG_IN': ['Log is', 'Logearse'] +}; \ No newline at end of file diff --git a/src/stores/common-store.js b/src/stores/common-store.js new file mode 100644 index 00000000..a70d1c67 --- /dev/null +++ b/src/stores/common-store.js @@ -0,0 +1,19 @@ +import Reflux from 'reflux'; + +import CommonActions from 'actions/common-actions'; + +var CommonStore = Reflux.createStore({ + + init() { + this.language = 'en'; + + this.listenTo(CommonActions.changeLanguage, this.changeLanguage); + }, + + changeLanguage(lang) { + this.language = lang; + this.trigger('i18n'); + } +}); + +export default CommonStore; \ No newline at end of file diff --git a/src/utils/i18n.js b/src/utils/i18n.js new file mode 100644 index 00000000..5173267f --- /dev/null +++ b/src/utils/i18n.js @@ -0,0 +1,15 @@ +import MessageFormat from 'messageformat'; + +import CommonStore from 'stores/common-store'; +import i18nData from 'data/i18n-data'; + +var mf = new MessageFormat('en'); + +var i18n = function (key, params = null) { + var i18nKey = i18nData(key, CommonStore.language); + var message = mf.compile(i18nKey); + + return message(params); +}; + +export default i18n;