Jordan/1603 sidebar links (#1633)

* cleaned up sidebar and fixed active classes * updated snaperoos * proposals and validators cleanup * fixed tests and snaperoos * fixed errors in tm-balance * cleaned up page wallet * fixed tests * changelog * lint and tests * remove old snaperoo * fixed errors * update snaps
luniehq · Nov 23, 2018 · 9d8e369 · 9d8e369
1 parent e3a4d4b
commit 9d8e369
Show file tree

Hide file tree

Showing 30 changed files with 509 additions and 911 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -88,6 +88,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 - [\#1617](https://github.com/cosmos/voyager/pull/1617) Fixed my validators not showing @faboweb
 - [\#1617](https://github.com/cosmos/voyager/pull/1617) Fixed send buttons not clickable @faboweb
 - [\#1303](https://github.com/cosmos/voyager/issues/1303) Fixed spamming of setSubscription @faboweb
+- [\#1603](https://github.com/cosmos/voyager/issues/1603) Fixed inactive sidebar links @jbibla
 
 ## [0.10.7] - 2018-10-10
 

diff --git a/app/src/renderer/components/common/AppHeader.vue b/app/src/renderer/components/common/AppHeader.vue
@@ -3,7 +3,7 @@ nav#app-header(v-bind:class="{ mobile: !config.desktop, windows: isWin }"): .con
   template(v-if="!config.desktop")
     .header-item
 
-  router-link.header-item.header-item-logo(to="/")
+  .header-item.header-item-logo
     img#logo-black(v-if="themes.active == 'light'"
       src="~@/assets/images/cosmos-wordmark-black.svg")
     img#logo-white(v-else

diff --git a/app/src/renderer/components/common/AppMenu.vue b/app/src/renderer/components/common/AppMenu.vue
@@ -1,27 +1,33 @@
 <template lang="pug">
 menu.app-menu
   .app-menu-main
-    tm-list-item#app-menu__wallet(
+    router-link.app-menu-item#app-menu__wallet(
       to="/"
       exact
       @click.native="close"
       title="Wallet")
-    tm-list-item#app-menu__transactions(
-      to="/wallet/transactions"
+      h2.app-menu-title Wallet
+      i.material-icons chevron_right
+    router-link.app-menu-item#app-menu__transactions(
+      v-if="config.devMode || mockedConnector"
+      to="/transactions"
       exact
       @click.native="close"
-      title="Transactions"
-      v-if="config.devMode || mockedConnector")
-    tm-list-item#app-menu__staking(
+      title="Transactions")
+      h2.app-menu-title Transactions
+      i.material-icons chevron_right
+    router-link.app-menu-item#app-menu__staking(
       to="/staking"
-      exact
-      @click.native="close" title="Staking"
-      v-bind:class="{ 'active': isValidatorPage }")
-    tm-list-item#app-menu__proposals(
+      @click.native="close"
+      title="Staking")
+      h2.app-menu-title Staking
+      i.material-icons chevron_right
+    router-link.app-menu-item#app-menu__proposals(
       to="/governance"
-      exact @click.native="close"
-      title="Governance"
-      v-if="config.devMode || mockedConnector")
+      @click.native="close"
+      title="Governance")
+      h2.app-menu-title Governance
+      i.material-icons chevron_right
   connected-network
 </template>
 
@@ -31,22 +37,17 @@ import PerfectScrollbar from "perfect-scrollbar"
 import noScroll from "no-scroll"
 import ConnectedNetwork from "common/TmConnectedNetwork"
 import { TmListItem } from "@tendermint/ui"
-import UserPane from "common/TmUserPane"
 export default {
   name: `app-menu`,
   components: {
     ConnectedNetwork,
-    TmListItem,
-    UserPane
+    TmListItem
   },
   data: () => ({
     ps: {}
   }),
   computed: {
-    ...mapGetters([`validators`, `config`, `lastHeader`, `mockedConnector`]),
-    isValidatorPage() {
-      return this.$route.params.validator
-    }
+    ...mapGetters([`validators`, `config`, `lastHeader`, `mockedConnector`])
   },
   mounted() {
     this.ps = new PerfectScrollbar(this.$el.querySelector(`.app-menu-main`))
@@ -74,45 +75,27 @@ export default {
     flex 1
     position relative // for perfect-scrollbar
 
-    .tm-li
-      border-bottom 1px solid var(--bc-dim)
-
-  .tm-user
-    border-top 1px solid var(--bc)
-    padding 1rem
+  .app-menu-item
     display flex
+    justify-content space-between
+    align-items center
+    border-bottom 1px solid var(--bc-dim)
+    padding 1rem
+    color var(--dim)
 
-    .tm-user-info
-      flex 1
-      display flex
-
-    .avatar
-      background var(--link)
-      width 2rem
-      height 2rem
-      border-radius 1rem
-      display flex
-      align-items center
-      justify-content center
-
-      i
-        color var(--txt)
-
-    .text
-      padding 0 0.5rem
-
-    .title
-      color var(--txt)
+    &:hover
+      color var(--bright)
+      background var(--hover-bg)
 
-    .subtitle
-      font-size xs
-      color var(--dim)
+  .router-link-active
+    background var(--hover-bg)
 
-    .tm-btn
-      margin-right 0.5rem
+    i
+      color var(--tertiary)
 
-.tm-li.tm-li-link.router-link-exact-active
-  color var(--tertiary)
+    h2
+      color var(--bright)
+      font-weight 500
 
 @media screen and (max-width: 1023px)
   .app-menu

diff --git a/app/src/renderer/components/common/TmBalance.vue b/app/src/renderer/components/common/TmBalance.vue
@@ -9,14 +9,6 @@
       .unbonded-atoms.top-section(v-if="unbondedAtoms")
         h3 Available {{bondingDenom}}
         h2 {{unbondedAtoms}}
-      .total-earnings.top-section(v-if="totalEarnings")
-        h3 Total Earnings
-        h2 {{totalEarnings}}
-      .total-rewards.top-section(v-if="totalRewards")
-        h3 Total Rewards
-        .group
-          h2 {{totalRewards}}
-          router-link(to="claim") Claim
 
     short-bech32(:address="user.address")
 
@@ -39,17 +31,9 @@ export default {
     ShortBech32
   },
   props: {
-    totalEarnings: {
-      type: [String, Number],
-      required: true
-    },
-    totalRewards: {
-      type: [String, Number],
-      required: true
-    },
     tabs: {
       type: Array,
-      required: true
+      default: () => []
     }
   },
   data() {

diff --git a/app/src/renderer/components/governance/LiProposal.vue b/app/src/renderer/components/governance/LiProposal.vue
@@ -1,10 +1,15 @@
 <template lang="pug">
 tr.li-proposal
   td.li-proposal__value
-    span.validator-profile__status(v-bind:class="status.color" v-tooltip.top="status.message")
-    h2
-      router-link(:to="{ name: 'Proposal', params: { proposalId: proposal.proposal_id, proposal, status }}") {{ proposal.title }}
-    p {{ description }}
+    .li-proposal__title-container
+      span.material-icons(
+        v-if="proposal.proposal_status === `Passed`"
+        v-tooltip.top="status.message"
+        v-bind:class="status.color") checkmark
+      span.validator-profile__status(v-else v-bind:class="status.color" v-tooltip.top="status.message")
+      h2
+        router-link(:to="{ name: 'Proposal', params: { proposalId: proposal.proposal_id, proposal, status }}") {{ proposal.title }}
+      p.li-proposal__description {{ description }}
   td {{ `#` + proposal.proposal_id }}
   td.li-proposal__value.yes {{ proposal.tally_result.yes }}
   td.li-proposal__value.no {{ proposal.tally_result.no }}
@@ -26,8 +31,7 @@ export default {
       if (this.proposal.proposal_status === `Passed`)
         return {
           button: null,
-          message: `This proposal has passed`,
-          color: `green`
+          message: `This proposal has passed`
         }
       if (this.proposal.proposal_status === `Rejected`)
         return {
@@ -45,7 +49,7 @@ export default {
         return {
           button: `vote`,
           message: `Voting for this proposal is open`,
-          color: `blue`
+          color: `green`
         }
       else
         return {
@@ -75,16 +79,36 @@ export default {
   &:hover
     background var(--hover-bg)
 
+  &__description
+    font-size 14px
+    padding 0.25rem 0 0 1rem
+    min-width 284px
+    color var(--dim)
+
   .validator-profile__status
-    position relative
-    left 1px
-    top -2px
+    position absolute
+    left 0
+    top 9px
     display inline-block
 
   h2
     display inline-block
-    padding-left 0.25rem
+    font-size 16px
+    padding-left 1rem
 
   td
     padding 1rem 0.5rem
+
+.li-proposal__title-container
+  position relative
+
+  .material-icons
+    display inline-block
+    position absolute
+    width 1rem
+    height 1rem
+    overflow hidden
+    top 4px
+    left -4px
+    color var(--success)
 </style>
diff --git a/app/src/renderer/components/governance/TableProposals.vue b/app/src/renderer/components/governance/TableProposals.vue
@@ -171,12 +171,12 @@ table tr td:first-child::before
   left -3rem
 
 table th
-  min-width 130px
+  min-width 122px
   width 100%
   padding 0.5rem
 
 table td
-  min-width 130px
+  min-width 122px
   width 100%
   padding 0 0.5rem
   position relative

diff --git a/app/src/renderer/components/staking/LiValidator.vue b/app/src/renderer/components/staking/LiValidator.vue
@@ -117,7 +117,7 @@ export default {
 
   .validator-profile__status
     left 0
-    top 0.5rem
+    top 9px
 
 .li-validator__name-container
   position relative
@@ -130,6 +130,7 @@ export default {
   display flex
   align-items center
   width 100%
+  min-width 284px
 
 .li-validator__moniker
   max-width 200px

diff --git a/app/src/renderer/components/staking/TabMyDelegations.vue b/app/src/renderer/components/staking/TabMyDelegations.vue
@@ -1,10 +1,6 @@
 <template lang="pug">
   div
     div(v-if="yourValidators.length > 0")
-      h3.tab-header
-        | Active Delegations
-        |
-        i.material-icons.info-button(v-tooltip.top="bondInfo") info_outline
       table-validators(:validators="yourValidators")
 
     tm-data-msg(v-if="yourValidators.length < 1", icon="info_outline")
@@ -16,7 +12,7 @@
       |
       router-link(:to="{name: 'Validators'}") the validator list
       |
-      | to spread some of your Atoms around.
+      | to find other validators to delegate to.
 
     div(v-if="undelegatedValidators.length")
       h3.tab-header

diff --git a/app/src/renderer/components/staking/TableValidators.vue b/app/src/renderer/components/staking/TableValidators.vue
@@ -210,12 +210,12 @@ table tr td:first-child::before
   left -3rem
 
 table th
-  min-width 130px
+  min-width 122px
   width 100%
   padding 0.5rem
 
 table td
-  min-width 130px
+  min-width 122px
   width 100%
   padding 0 0.5rem
   position relative

diff --git a/app/src/renderer/components/wallet/LiCoin.vue b/app/src/renderer/components/wallet/LiCoin.vue
@@ -90,4 +90,5 @@ export default {
         vertical-align middle
         font-size lg
         color var(--bright)
+        font-weight 500
 </style>