[Ivan Diaz] - Added images to langauge dropdown
|
@ -10,7 +10,7 @@ import Checkbox from 'core-components/checkbox';
|
|||
import Widget from 'core-components/widget';
|
||||
import DropDown from 'core-components/drop-down';
|
||||
|
||||
var dropDownItems = ['English', 'Spanish', 'German', 'Portuguese', 'Japanese'];
|
||||
var dropDownItems = [{content: 'English'}, {content: 'Spanish'}, {content: 'German'}, {content: 'Portuguese'}, {content: 'Japanese'}];
|
||||
|
||||
var DemoPage = React.createClass({
|
||||
|
||||
|
|
|
@ -6,9 +6,15 @@ import CommonActions from 'actions/common-actions';
|
|||
import Button from 'core-components/button';
|
||||
import DropDown from 'core-components/drop-down';
|
||||
|
||||
var MainLayoutHeader = React.createClass({
|
||||
var languageList = ['English', 'Spanish', 'Portuguese', 'German'];
|
||||
var codeLanguages = {
|
||||
'English': 'en',
|
||||
'Spanish': 'es',
|
||||
'Portuguese': 'pt',
|
||||
'German': 'de'
|
||||
};
|
||||
|
||||
languageList: ['English', 'Spanish', 'Portuguese', 'German'],
|
||||
var MainLayoutHeader = React.createClass({
|
||||
|
||||
render() {
|
||||
return (
|
||||
|
@ -17,19 +23,25 @@ var MainLayoutHeader = React.createClass({
|
|||
<Button type="clean" route={{to:'/app'}}>{i18n('LOG_IN')}</Button>
|
||||
<Button type="clean" route={{to:'/app/signup'}}>{i18n('SIGN_UP')}</Button>
|
||||
</div>
|
||||
<DropDown className="main-layout-header--languages" items={this.languageList} onChange={this.changeLanguage}/>
|
||||
<DropDown className="main-layout-header--languages" items={this.getLanguageList()} onChange={this.changeLanguage}/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
|
||||
changeLanguage(event) {
|
||||
var codeLanguages = {
|
||||
'English': 'en',
|
||||
'Spanish': 'es',
|
||||
'Portuguese': 'pt',
|
||||
'German': 'de'
|
||||
getLanguageList() {
|
||||
return languageList.map((item) => {
|
||||
return {
|
||||
content: (
|
||||
<span>
|
||||
<img src={`../images/icons/${codeLanguages[item]}.png`} />{item}
|
||||
</span>
|
||||
)
|
||||
};
|
||||
var language = this.languageList[event.index];
|
||||
});
|
||||
},
|
||||
|
||||
changeLanguage(event) {
|
||||
var language = languageList[event.index];
|
||||
|
||||
CommonActions.changeLanguage(codeLanguages[language]);
|
||||
}
|
||||
|
|
After Width: | Height: | Size: 643 B |
After Width: | Height: | Size: 408 B |
After Width: | Height: | Size: 604 B |
After Width: | Height: | Size: 591 B |
After Width: | Height: | Size: 643 B |
After Width: | Height: | Size: 600 B |
After Width: | Height: | Size: 497 B |
After Width: | Height: | Size: 488 B |
After Width: | Height: | Size: 428 B |
After Width: | Height: | Size: 506 B |
After Width: | Height: | Size: 647 B |
After Width: | Height: | Size: 403 B |
After Width: | Height: | Size: 673 B |
After Width: | Height: | Size: 524 B |
After Width: | Height: | Size: 663 B |
After Width: | Height: | Size: 589 B |
After Width: | Height: | Size: 593 B |
After Width: | Height: | Size: 585 B |
After Width: | Height: | Size: 504 B |
After Width: | Height: | Size: 449 B |
After Width: | Height: | Size: 497 B |
After Width: | Height: | Size: 462 B |
After Width: | Height: | Size: 457 B |
After Width: | Height: | Size: 675 B |
After Width: | Height: | Size: 486 B |
After Width: | Height: | Size: 611 B |
After Width: | Height: | Size: 639 B |
After Width: | Height: | Size: 500 B |
After Width: | Height: | Size: 593 B |
After Width: | Height: | Size: 526 B |
After Width: | Height: | Size: 631 B |
After Width: | Height: | Size: 512 B |
After Width: | Height: | Size: 443 B |
After Width: | Height: | Size: 514 B |
After Width: | Height: | Size: 600 B |
After Width: | Height: | Size: 628 B |
After Width: | Height: | Size: 398 B |
After Width: | Height: | Size: 625 B |
After Width: | Height: | Size: 528 B |
After Width: | Height: | Size: 614 B |
After Width: | Height: | Size: 521 B |
After Width: | Height: | Size: 367 B |
After Width: | Height: | Size: 453 B |
After Width: | Height: | Size: 586 B |
After Width: | Height: | Size: 450 B |
After Width: | Height: | Size: 525 B |
After Width: | Height: | Size: 472 B |
After Width: | Height: | Size: 483 B |
After Width: | Height: | Size: 477 B |
After Width: | Height: | Size: 439 B |
After Width: | Height: | Size: 563 B |
After Width: | Height: | Size: 529 B |
After Width: | Height: | Size: 608 B |
After Width: | Height: | Size: 428 B |
After Width: | Height: | Size: 476 B |
After Width: | Height: | Size: 545 B |
After Width: | Height: | Size: 572 B |
After Width: | Height: | Size: 495 B |
After Width: | Height: | Size: 620 B |
After Width: | Height: | Size: 508 B |
After Width: | Height: | Size: 582 B |
After Width: | Height: | Size: 500 B |
After Width: | Height: | Size: 429 B |
After Width: | Height: | Size: 465 B |
After Width: | Height: | Size: 508 B |
After Width: | Height: | Size: 496 B |
After Width: | Height: | Size: 653 B |
After Width: | Height: | Size: 469 B |
After Width: | Height: | Size: 592 B |
After Width: | Height: | Size: 479 B |
After Width: | Height: | Size: 532 B |
After Width: | Height: | Size: 489 B |
After Width: | Height: | Size: 610 B |
After Width: | Height: | Size: 648 B |
After Width: | Height: | Size: 552 B |
After Width: | Height: | Size: 474 B |
After Width: | Height: | Size: 545 B |
After Width: | Height: | Size: 489 B |
After Width: | Height: | Size: 599 B |
After Width: | Height: | Size: 637 B |
After Width: | Height: | Size: 594 B |
After Width: | Height: | Size: 545 B |
After Width: | Height: | Size: 490 B |
After Width: | Height: | Size: 463 B |
After Width: | Height: | Size: 470 B |
After Width: | Height: | Size: 493 B |
After Width: | Height: | Size: 480 B |
After Width: | Height: | Size: 488 B |
After Width: | Height: | Size: 537 B |
After Width: | Height: | Size: 487 B |
After Width: | Height: | Size: 630 B |
After Width: | Height: | Size: 493 B |
After Width: | Height: | Size: 509 B |
After Width: | Height: | Size: 516 B |
After Width: | Height: | Size: 645 B |
After Width: | Height: | Size: 527 B |