Merge branch 'master' of git://github.com/Bytom/dashboard into dashboardmaster

[bytom/bytom-electron.git] / src / features / app / components / Navigation / Navigation.jsx

diff --git a/src/features/app/components/Navigation/Navigation.jsx b/src/features/app/components/Navigation/Navigation.jsx
index 92af5a7..4be4ae3 100644 (file)
--- a/src/features/app/components/Navigation/Navigation.jsx
+++ b/src/features/app/components/Navigation/Navigation.jsx
@@ -1,9 +1,11 @@
 import React from 'react'
-import { connect } from 'react-redux'
-import { Link } from 'react-router'
+import {connect} from 'react-redux'
+import {Link} from 'react-router'
 import styles from './Navigation.scss'
-import { navIcon } from '../../utils'
+import {navIcon} from '../../utils'
 import Sync from '../Sync/Sync'
+import appAction from '../../../app/actions'
+import {docsRoot} from '../../../../utility/environment'
 
 class Navigation extends React.Component {
   constructor(props) {
@@ -12,60 +14,98 @@ class Navigation extends React.Component {
     this.openTutorial = this.openTutorial.bind(this)
   }
 
+  componentDidMount() {
+    if(window.ipcRenderer){
+      window.ipcRenderer.on('toggleNavState', (event, arg) => {
+        arg === 'advance'? this.props.showNavAdvanced() : this.props.hideNavAdvanced()
+      })
+    }
+  }
+
   openTutorial(event) {
     event.preventDefault()
     this.props.openTutorial()
   }
 
   render() {
+    const lang = this.props.lang
     return (
       <div className={styles.main}>
         <ul className={styles.navigation}>
+          <li className={styles.navigationTitle}>{lang === 'zh' ? '核心数据' : 'core data'}</li>
           <li>
             <Link to='/transactions' activeClassName={styles.active}>
               {navIcon('transaction', styles)}
-              Transactions
+              {}
+              {lang === 'zh' ? '交易' : 'Transactions'}
             </Link>
           </li>
           <li>
             <Link to='/accounts' activeClassName={styles.active}>
               {navIcon('account', styles)}
-              Accounts
+              {lang === 'zh' ? '账户' : 'Accounts'}
             </Link>
           </li>
           <li>
             <Link to='/assets' activeClassName={styles.active}>
               {navIcon('asset', styles)}
-              Assets
+              {lang === 'zh' ? '资产' : 'Assets'}
             </Link>
           </li>
           <li>
             <Link to='/balances' activeClassName={styles.active}>
               {navIcon('balance', styles)}
-              Balances
+              {lang === 'zh' ? '余额' : 'Balances'}
             </Link>
           </li>
+        </ul>
+
+        <ul className={styles.navigation}>
+          <li className={styles.navigationTitle}>{lang === 'zh' ? '服务' : 'services' }</li>
+          {this.props.mockhsm &&
+          <li>
+            <Link to='/keys' activeClassName={styles.active}>
+              {navIcon('mockhsm', styles)}
+              {lang === 'zh' ? '密钥' : 'Keys'}
+            </Link>
+          </li>
+          }
+        </ul>
+
+        { this.props.showNavAdvance && <ul className={styles.navigation}>
+          <li className={styles.navigationTitle}>{lang === 'zh' ? '高级' : 'advanced' }</li>
           <li>
             <Link to='/unspents' activeClassName={styles.active}>
               {navIcon('unspent', styles)}
-              Unspent outputs
+              {lang === 'zh' ? '未花费输出' : 'Unspent outputs' }
             </Link>
           </li>
+        </ul>}
+
+        <ul className={styles.navigation}>
+          <li className={styles.navigationTitle}>{lang === 'zh' ? '帮助' : 'help' }</li>
+          <li>
+            <a href={docsRoot} target='_blank'>
+              {navIcon('docs', styles)}
+              {lang === 'zh' ? '文档' : 'Documentation'}
+            </a>
+          </li>
         </ul>
 
         <ul className={styles.navigation}>
-          <li className={styles.navigationTitle}>services</li>
-          {this.props.mockhsm &&
+          <li className={styles.navigationTitle}>{lang === 'zh' ? '开发者' : 'Developer' }</li>
           <li>
-            <Link to='/mockhsms' activeClassName={styles.active}>
-              {navIcon('mockhsm', styles)}
-              Keys
-            </Link>
+            <a href='/equity' target='_blank'>
+              {navIcon('transaction', styles)}
+              {lang === 'zh' ? 'Equity 合约' : 'Equity Contract'}
+            </a>
           </li>
-          }
         </ul>
 
-        {<Sync />}
+        <Sync
+          lang={lang}
+        />
+
       </div>
     )
   }
@@ -81,13 +121,23 @@ export default connect(
     }
 
     return {
+      coreData: state.core.coreData,
       routing: state.routing, // required for <Link>s to update active state on navigation
       showSync: state.core.configured && !state.core.generator,
+      lang: state.core.lang,
       mockhsm: true,
-      docVersion
+      docVersion,
+      showNavAdvance: state.app.navAdvancedState === 'advance'
     }
   },
   (dispatch) => ({
-    openTutorial: () => dispatch({ type: 'OPEN_TUTORIAL' })
+    showNavAdvanced: () => dispatch(appAction.showNavAdvanced),
+    hideNavAdvanced: () => dispatch(appAction.hideNavAdvanced),
+    setLang: (event) => {
+      dispatch({
+        type: 'UPDATE_CORE_LANGUAGE',
+        lang: event
+      })
+    }
   })
 )(Navigation)