feat(neuron-ui): add a settings icon in the navbar component

nervosnetwork · Sep 17, 2019 · 8d929a3 · 8d929a3
1 parent a12b582
commit 8d929a3
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 24 deletions.
diff --git a/packages/neuron-ui/src/containers/Navbar/index.tsx b/packages/neuron-ui/src/containers/Navbar/index.tsx
@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { createPortal } from 'react-dom'
 import { RouteComponentProps } from 'react-router-dom'
-import { Pivot, PivotItem, PivotLinkFormat, PivotLinkSize, getTheme } from 'office-ui-fabric-react'
+import { Stack, Pivot, PivotItem, PivotLinkFormat, PivotLinkSize, IconButton, getTheme } from 'office-ui-fabric-react'
 import { useTranslation } from 'react-i18next'
 import { useState } from 'states/stateProvider'
 import { StateWithDispatch } from 'states/stateProvider/reducer'
@@ -63,30 +63,44 @@ const Navbar = ({
   }
 
   return (
-    <Pivot
-      selectedKey={selectedKey}
-      onLinkClick={(pivotItem?: PivotItem) => {
-        if (pivotItem && pivotItem.props) {
-          const linkDesc = Object.getOwnPropertyDescriptor(pivotItem.props, 'data-link')
-          if (linkDesc && typeof linkDesc.value === 'string') {
-            history.push(linkDesc.value)
+    <Stack horizontal horizontalAlign="space-between" verticalAlign="stretch">
+      <Pivot
+        selectedKey={selectedKey}
+        onLinkClick={(pivotItem?: PivotItem) => {
+          if (pivotItem && pivotItem.props) {
+            const linkDesc = Object.getOwnPropertyDescriptor(pivotItem.props, 'data-link')
+            if (linkDesc && typeof linkDesc.value === 'string') {
+              history.push(linkDesc.value)
+            }
           }
-        }
-      }}
-      headersOnly
-      linkFormat={PivotLinkFormat.tabs}
-      linkSize={PivotLinkSize.large}
-      styles={styles}
-    >
-      {pivotItems.map(pivotItem => (
-        <PivotItem
-          headerText={t(pivotItem.name)}
-          itemKey={pivotItem.key}
-          key={pivotItem.key}
-          data-link={pivotItem.url}
-        />
-      ))}
-    </Pivot>
+        }}
+        headersOnly
+        linkFormat={PivotLinkFormat.tabs}
+        linkSize={PivotLinkSize.large}
+        styles={styles}
+      >
+        {pivotItems.map(pivotItem => (
+          <PivotItem
+            headerText={t(pivotItem.name)}
+            itemKey={pivotItem.key}
+            key={pivotItem.key}
+            data-link={pivotItem.url}
+          />
+        ))}
+      </Pivot>
+      <IconButton
+        iconProps={{ iconName: 'Settings' }}
+        onClick={() => history.push(Routes.SettingsGeneral)}
+        styles={{
+          root: {
+            height: 'auto',
+          },
+          icon: {
+            height: '20px',
+          },
+        }}
+      />
+    </Stack>
   )
 }
 

diff --git a/packages/neuron-ui/src/theme.tsx b/packages/neuron-ui/src/theme.tsx
@@ -25,6 +25,7 @@ import {
   Nodes as ConnectedIcon,
   Scan as ScanIcon,
   Search as SearchIcon,
+  SettingsOption as SettingsIcon,
   StatusGood as MatchedIcon,
   SubtractCircle as RemoveIcon,
   Update as UpdateIcon,
@@ -87,6 +88,7 @@ registerIcons({
     TransactionPending: <PendingIcon size="14px" style={{ animation: 'rotate360 3s linear infinite' }} />,
     Keystore: <KeystoreIcon color="white" style={{ transform: 'scale(0.6)' }} />,
     Edit: <EditIcon color="#000" size="20px" />,
+    Settings: <SettingsIcon size="20px" />,
   },
 })