save to localStorage, closes #2130

openethereum · Sep 17, 2016 · dea27a2 · dea27a2
1 parent 9220290
commit dea27a2
Show file tree

Hide file tree

Showing 2 changed files with 63 additions and 4 deletions.
diff --git a/js/src/views/Application/TabBar/tabBar.css b/js/src/views/Application/TabBar/tabBar.css
@@ -80,17 +80,21 @@ button.tabactive:hover {
   margin: 12px -12px;
 }
 
+.settings svg {
+  fill: rgb(0, 151, 167) !important;
+}
+
 svg.optionSelected {
   fill: rgb(250, 250, 250) !important;
 }
 
 svg.optionUnselected  {
-  opacity: 0.25;
+  opacity: 0.1;
 }
 
 .menuEnabled {
 }
 
-.menuDisabled svg.selected {
-  fill: rgb(117, 117, 117) !important;
+.menuDisabled svg.optionSelected {
+  fill: rgba(255, 255, 255, 0.3) !important;
 }
diff --git a/js/src/views/Application/TabBar/tabBar.js b/js/src/views/Application/TabBar/tabBar.js
@@ -36,6 +36,7 @@ const TABMAP = {
   apps: 'app',
   contracts: 'contract'
 };
+const LS_VIEWS = 'views';
 
 export default class TabBar extends Component {
   static contextTypes = {
@@ -57,6 +58,10 @@ export default class TabBar extends Component {
     activeRoute: '/accounts'
   }
 
+  componentDidMount () {
+    this.loadViews();
+  }
+
   render () {
     return (
       <Toolbar
@@ -89,7 +94,7 @@ export default class TabBar extends Component {
 
       return (
         <MenuItem
-          className={ isActive ? styles.menuEnabled : styles.menuDisabled }
+          className={ tab.fixed ? styles.menuDisabled : styles.menuEnabled }
           leftIcon={ icon }
           key={ id }
           data-id={ id }
@@ -207,37 +212,87 @@ export default class TabBar extends Component {
 
     this.setState({
       [toggle]: !isActive
+    }, this.saveViews);
+  }
+
+  getDefaultViews () {
+    const views = {};
+
+    Object.keys(this.tabs).forEach((id) => {
+      const tab = this.tabs[id];
+
+      views[id] = {
+        active: tab.active || false
+      };
+    });
+
+    return views;
+  }
+
+  loadViews () {
+    const defaults = this.getDefaultViews();
+    const state = {};
+    let lsdata;
+
+    try {
+      const json = window.localStorage.getItem(LS_VIEWS) || {};
+
+      lsdata = Object.assign(defaults, JSON.parse(json));
+    } catch (e) {
+      lsdata = defaults;
+    }
+
+    Object.keys(lsdata).forEach((id) => {
+      state[`${id}Visible`] = lsdata[id].active;
     });
+
+    this.setState(state, this.saveViews);
+  }
+
+  saveViews = () => {
+    const lsdata = this.getDefaultViews();
+
+    Object.keys(lsdata).forEach((id) => {
+      lsdata[id].active = this.state[`${id}Visible`];
+    });
+
+    window.localStorage.setItem(LS_VIEWS, JSON.stringify(lsdata));
   }
 
   tabs = {
     accounts: {
+      active: true,
+      fixed: true,
       icon: <ActionAccountBalanceWallet />,
       label: 'Accounts',
       route: '/accounts',
       value: 'account',
       body: <Tooltip className={ styles.tabbarTooltip } text='navigate between the different parts and views of the application, switching between an account view, token view and distributed application view' />
     },
     addresses: {
+      active: true,
       icon: <CommunicationContacts />,
       label: 'Addressbook',
       route: '/addresses',
       value: 'address'
     },
     apps: {
+      active: true,
       icon: <NavigationApps />,
       label: 'Applications',
       route: '/apps',
       value: 'app'
     },
     status: {
+      active: true,
       icon: <ActionTrackChanges />,
       label: 'Status',
       renderLabel: this.renderStatusLabel,
       route: '/status',
       value: 'status'
     },
     signer: {
+      active: true,
       fixed: true,
       icon: <SignerIcon className={ styles.signerIcon } />,
       label: 'Signer',