re-render the Navigation part

diff --git a/src/features/app/components/Main/Main.jsx b/src/features/app/components/Main/Main.jsx
index 03fba08..da2e7b3 100644 (file)
--- a/src/features/app/components/Main/Main.jsx
+++ b/src/features/app/components/Main/Main.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import styles from './Main.scss'
+import {DropdownButton, MenuItem} from 'react-bootstrap'
 import { Link } from 'react-router'
 import { connect } from 'react-redux'
 import actions from 'actions'
@@ -31,6 +32,19 @@ class Main extends React.Component {
                 <img src={logo} className={styles.brand_image} />
               </Link>
 
+              <DropdownButton
+                className={styles.languages}
+                bsSize='xsmall'
+                noCaret
+                pullRight
+                id='input-dropdown-addon'
+                title={this.props.lang === 'zh' ? '中' : 'EN'}
+                onSelect={this.props.setLang}
+              >
+                <MenuItem eventKey='zh'>中文</MenuItem>
+                <MenuItem eventKey='en'>ENGLISH</MenuItem>
+              </DropdownButton>
+
               <span>
                 <span className={styles.settings} onClick={this.toggleDropdown}>
                   <img src={require('images/navigation/settings.png')}/>
@@ -57,11 +71,18 @@ class Main extends React.Component {
 export default connect(
   (state) => ({
     canLogOut: state.core.requireClientToken,
+    lang: state.core.lang,
     connected: true,
     showDropwdown: state.app.dropdownState == 'open',
   }),
   (dispatch) => ({
     toggleDropdown: () => dispatch(actions.app.toggleDropdown),
     closeDropdown: () => dispatch(actions.app.closeDropdown),
+    setLang: (event) => {
+      dispatch({
+        type: 'UPDATE_CORE_LANGUAGE',
+        lang: event
+      })
+    }
   })
 )(Main)

diff --git a/src/features/app/components/Main/Main.scss b/src/features/app/components/Main/Main.scss
index ab515e2..8a77e2a 100644 (file)
--- a/src/features/app/components/Main/Main.scss
+++ b/src/features/app/components/Main/Main.scss
@@ -44,7 +44,7 @@
 .settings {
   cursor: pointer;
   line-height: $title-height;
-  padding: 0 20px;
+  padding-right: 10px;
   position: absolute;
   right: 0;
   top: 0;
@@ -55,6 +55,16 @@
   }
 }
 
+.languages {
+  border: none;
+  background-color: transparentize($background-content-color, 0.9);
+  color: $background-content-color;
+  margin: 6px 20px 5px 30px !important;
+  padding: 5px;
+  height: 27px;
+  line-height: 27px !important;
+}
+
 .connectionIssue {
   padding: $gutter-size/2;
   text-align: center;

diff --git a/src/features/app/components/Navigation/Navigation.jsx b/src/features/app/components/Navigation/Navigation.jsx
index 759d3ee..3f6972d 100644 (file)
--- a/src/features/app/components/Navigation/Navigation.jsx
+++ b/src/features/app/components/Navigation/Navigation.jsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import {connect} from 'react-redux'
-import {DropdownButton, MenuItem} from 'react-bootstrap'
 import {Link} from 'react-router'
 import styles from './Navigation.scss'
 import {navIcon} from '../../utils'
@@ -87,7 +86,7 @@ class Navigation extends React.Component {
           {/*</li>*/}
         {/*</ul>*/}
 
-        {/*{<Sync/>}*/}
+        <Sync/>
       </div>
     )
   }

diff --git a/src/features/app/components/Sync/Sync.jsx b/src/features/app/components/Sync/Sync.jsx
index 86f1755..1b40fb5 100644 (file)
--- a/src/features/app/components/Sync/Sync.jsx
+++ b/src/features/app/components/Sync/Sync.jsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import navStyles from '../Navigation/Navigation.scss'
+import styles from './Sync.scss'
 import { chainClient } from 'utility/environment'
 
 class Sync extends React.Component {
@@ -24,7 +25,7 @@ class Sync extends React.Component {
     })
     arr.unshift(<li key='sync-title' className={navStyles.navigationTitle}>Network status</li>)
 
-    return <ul className={`${navStyles.navigation}`}>{arr}</ul>
+    return <ul className={`${navStyles.navigation} ${styles.main}`}>{arr}</ul>
   }
 }