Merge pull request #400 from cosmos/peng/382-delegates-page

peng/328 delegates page

app/src/renderer/components/staking/LiDelegate.vue

@@ -1,8 +1,5 @@
 <template lang='pug'>
 .li-delegate(:class='styles'): .li-delegate__values
-  .li-delegate__value.checkbox
-    i.fa.fa-check-square-o(v-if='inCart' @click='rm(delegate)')
-    i.fa.fa-square-o(v-else @click='add(delegate)')
   .li-delegate__value.name
     span
       router-link(v-if="config.devMode" :to="{ name: 'delegate', params: { delegate: delegate.id }}")  {{ ' ' + delegate.moniker }}
@@ -14,6 +11,10 @@
     .bar(:style='vpStyles')
   .li-delegate__value.bonded_by_you
     span {{ num.prettyInt(amountBonded(delegate.id)) }}
+  .li-delegate__value.checkbox#remove-from-cart(v-if="inCart" @click='rm(delegate)')
+    i.material-icons check_box
+  .li-delegate__value.checkbox#add-to-cart(v-else @click='add(delegate)')
+    i.material-icons check_box_outline_blank
 </template>
 
 <script>
@@ -78,8 +79,9 @@ export default {
   &:nth-of-type(2n-1)
     background app-fg
   &.li-delegate-active
-    .li-delegate__value i.fa
-      color mc
+    background alpha(hover, 17.5%)
+    .li-delegate__value i
+      color link
 
 .li-delegate__values
   display flex
@@ -91,16 +93,12 @@ export default {
   align-items center
   min-width 0
 
-  &:first-child
+  &:last-child
     flex 0.5
 
-  &.number_of_votes
+  &.name
     flex 2
 
-  &.id span
-    i.fa
-      margin-right 0.25rem
-
   &.bar
     position relative
     span

app/src/renderer/components/staking/PageBond.vue

@@ -40,7 +40,7 @@ page.page-bond(title="Bond Atoms")
       :class="bondGroupClass(delta(d.atoms, d.oldAtoms))")
       .bond-group__fields
         .bond-bar
-          label.bond-bar__label Delegate – {{ d.delegate.description.moniker }}
+          label.bond-bar__label {{ d.delegate.description.moniker }}
           .bond-bar__input
             .bond-bar-old__outer
               .bond-bar-old__inner(:style="styleBondBarInner(d.oldAtoms)")
@@ -455,7 +455,7 @@ export default {
     height 2rem - 0.25rem - 0.125rem
     background txt
     border-radius 1rem
-    z-index z(toolBar)
+    z-index z(listItem)
 
     display flex
     align-items center

app/src/renderer/components/staking/PageDelegates.vue

@@ -69,11 +69,11 @@ export default {
       property: 'shares',
       order: 'desc',
       properties: [
-        { id: 0, title: '', value: '' },
-        { id: 1, title: 'Name', value: 'description.moniker', class: 'name' },
-        { id: 2, title: '% of Vote', value: 'shares', class: 'percent_of_vote' },
-        { id: 3, title: '# of Votes', value: 'voting_power', class: 'number_of_votes' },
-        { id: 4, title: 'Bonded by You', value: 'bonded', class: 'bonded_by_you' }
+        { id: 0, title: 'Name', value: 'description.moniker', class: 'name' },
+        { id: 1, title: 'Vote %', value: 'shares', class: 'percent_of_vote' },
+        { id: 2, title: 'Votes', value: 'voting_power', class: 'number_of_votes' },
+        { id: 3, title: 'Your Votes', value: 'bonded', class: 'bonded_by_you' },
+        { id: 4, title: '', value: '', class: 'action' }
       ]
     }
   }),
@@ -100,17 +100,32 @@ export default {
 @require '~variables'
 
 .delegates-container
-  flex 1
+  padding-bottom 6rem
 
 .fixed-button-bar
-  width 100%
-  padding 1rem
-  background app-fg
+  padding 0.5rem 1rem
+  background alpha(app-bg, 90%)
   display flex
   justify-content space-between
+  position fixed
+  bottom 3rem + px
+  left 0
+  right 0
+  z-index z(toolBar)
   .label
     color bright
     line-height 2rem
     strong
       font-weight bold
+
+@media screen and (min-width: 768px)
+  .delegates-container
+    padding-bottom 7rem
+
+  .fixed-button-bar
+    padding 1rem
+
+@media screen and (min-width: 1024px)
+  .fixed-button-bar
+    margin-left width-side
 </style>

app/src/renderer/components/staking/PanelSort.vue

@@ -53,8 +53,6 @@ export default {
   position relative
   min-width 0
 
-  &:first-child
-    flex 0.5
 
   .label
     font-size sm
@@ -86,9 +84,12 @@ export default {
     &:after
       color txt
 
-  &.number_of_votes
+  &.name
     flex 2
 
+  &.action
+    flex 0.5
+
 @media screen and (max-width: 768px)
   .sort-by
     &.id

test/unit/specs/components/staking/LiDelegate.spec.js

@@ -69,7 +69,7 @@ describe('LiDelegate', () => {
     expect(wrapper.vm.shoppingCart).toEqual([])
     expect(wrapper.vm.inCart).toBeFalsy()
     expect(wrapper.html()).not.toContain('li-delegate-active')
-    wrapper.find('.fa-square-o').trigger('click')
+    wrapper.find('#add-to-cart').trigger('click')
     expect(wrapper.vm.inCart).toBeTruthy()
     expect(store.commit).toHaveBeenCalledWith('addToCart', store.state.delegates[0])
     expect(wrapper.html()).toContain('li-delegate-active')
@@ -79,7 +79,7 @@ describe('LiDelegate', () => {
     store.commit('addToCart', store.state.delegates[0])
     wrapper.update()
     expect(wrapper.vm.inCart).toBeTruthy()
-    wrapper.find('.fa-check-square-o').trigger('click')
+    wrapper.find('#remove-from-cart').trigger('click')
     expect(store.commit).toHaveBeenCalledWith('removeFromCart', delegate.id)
     expect(wrapper.vm.shoppingCart).toEqual([])
     expect(wrapper.vm.inCart).toBeFalsy()

test/unit/specs/components/staking/__snapshots__/LiDelegate.spec.js.snap

@@ -7,13 +7,6 @@ exports[`LiDelegate has the expected html structure 1`] = `
   <div
     class="li-delegate__values"
   >
-    <div
-      class="li-delegate__value checkbox"
-    >
-      <i
-        class="fa fa-square-o"
-      />
-    </div>
     <div
       class="li-delegate__value name"
     >
@@ -51,6 +44,16 @@ exports[`LiDelegate has the expected html structure 1`] = `
         0
       </span>
     </div>
+    <div
+      class="li-delegate__value checkbox"
+      id="add-to-cart"
+    >
+      <i
+        class="material-icons"
+      >
+        check_box_outline_blank
+      </i>
+    </div>
   </div>
 </div>
 `;

test/unit/specs/components/staking/__snapshots__/PageBond.spec.js.snap

@@ -191,7 +191,7 @@ exports[`PageBond has the expected html structure 1`] = `
                       <label
                         class="bond-bar__label"
                       >
-                        Delegate – someValidator
+                        someValidator
                       </label>
                       <div
                         class="bond-bar__input"
@@ -261,7 +261,7 @@ exports[`PageBond has the expected html structure 1`] = `
                       <label
                         class="bond-bar__label"
                       >
-                        Delegate – someOtherValidator
+                        someOtherValidator
                       </label>
                       <div
                         class="bond-bar__input"

test/unit/specs/components/staking/__snapshots__/PageDelegates.spec.js.snap

@@ -43,39 +43,36 @@ exports[`PageDelegates has the expected html structure 1`] = `
    <div class=\\"delegates-container\\">
       <div class=\\"panel-sort\\">
          <div class=\\"panel-sort-container\\">
-            <div class=\\"sort-by\\">
-               <div class=\\"label\\"></div>
-</div>
-   <div class=\\"sort-by name\\">
-      <div class=\\"label\\">
-         Name
-      </div>
+            <div class=\\"sort-by name\\">
+               <div class=\\"label\\">
+                  Name
+               </div>
 </div>
    <div class=\\"sort-by percent_of_vote\\">
       <div class=\\"label\\">
-         % of Vote
+         Vote %
       </div>
 </div>
    <div class=\\"sort-by number_of_votes\\">
       <div class=\\"label\\">
-         # of Votes
+         Votes
       </div>
 </div>
    <div class=\\"sort-by bonded_by_you\\">
       <div class=\\"label\\">
-         Bonded by You
+         Your Votes
       </div>
+</div>
+   <div class=\\"sort-by action\\">
+      <div class=\\"label\\"></div>
 </div>
 </div>
 </div>
    <div class=\\"li-delegate\\">
       <div class=\\"li-delegate__values\\">
-         <div class=\\"li-delegate__value checkbox\\">
-            <i class=\\"fa fa-square-o\\"></i>
+         <div class=\\"li-delegate__value name\\">
+            <span><a href=\\"#/staking/delegates/pubkeyY\\" class=\\"\\">  candidateY</a></span>
          </div>
-   <div class=\\"li-delegate__value name\\">
-      <span><a href=\\"#/staking/delegates/pubkeyY\\" class=\\"\\">  candidateY</a></span>
-   </div>
    <div class=\\"li-delegate__value percent_of_vote\\">
       <span>75%</span>
    </div>
@@ -86,16 +83,16 @@ exports[`PageDelegates has the expected html structure 1`] = `
    <div class=\\"li-delegate__value bonded_by_you\\">
       <span>0</span>
    </div>
+   <div id=\\"add-to-cart\\" class=\\"li-delegate__value checkbox\\">
+      <i class=\\"material-icons\\">check_box_outline_blank</i>
+   </div>
 </div>
 </div>
    <div class=\\"li-delegate\\">
       <div class=\\"li-delegate__values\\">
-         <div class=\\"li-delegate__value checkbox\\">
-            <i class=\\"fa fa-square-o\\"></i>
+         <div class=\\"li-delegate__value name\\">
+            <span><a href=\\"#/staking/delegates/pubkeyX\\" class=\\"\\">  candidateX</a></span>
          </div>
-   <div class=\\"li-delegate__value name\\">
-      <span><a href=\\"#/staking/delegates/pubkeyX\\" class=\\"\\">  candidateX</a></span>
-   </div>
    <div class=\\"li-delegate__value percent_of_vote\\">
       <span>25%</span>
    </div>
@@ -106,6 +103,9 @@ exports[`PageDelegates has the expected html structure 1`] = `
    <div class=\\"li-delegate__value bonded_by_you\\">
       <span>0</span>
    </div>
+   <div id=\\"add-to-cart\\" class=\\"li-delegate__value checkbox\\">
+      <i class=\\"material-icons\\">check_box_outline_blank</i>
+   </div>
 </div>
 </div>
 </div>
@@ -259,48 +259,48 @@ exports[`PageDelegates should filter the delegates 1`] = `
           class="panel-sort-container"
         >
           <div
-            class="sort-by"
+            class="sort-by name"
           >
             <div
               class="label"
             >
-              
+              Name
             </div>
           </div>
           <div
-            class="sort-by name"
+            class="sort-by percent_of_vote"
           >
             <div
               class="label"
             >
-              Name
+              Vote %
             </div>
           </div>
           <div
-            class="sort-by percent_of_vote"
+            class="sort-by number_of_votes"
           >
             <div
               class="label"
             >
-              % of Vote
+              Votes
             </div>
           </div>
           <div
-            class="sort-by number_of_votes"
+            class="sort-by bonded_by_you"
           >
             <div
               class="label"
             >
-              # of Votes
+              Your Votes
             </div>
           </div>
           <div
-            class="sort-by bonded_by_you"
+            class="sort-by action"
           >
             <div
               class="label"
             >
-              Bonded by You
+              
             </div>
           </div>
         </div>
@@ -311,13 +311,6 @@ exports[`PageDelegates should filter the delegates 1`] = `
         <div
           class="li-delegate__values"
         >
-          <div
-            class="li-delegate__value checkbox"
-          >
-            <i
-              class="fa fa-square-o"
-            />
-          </div>
           <div
             class="li-delegate__value name"
           >
@@ -355,6 +348,16 @@ exports[`PageDelegates should filter the delegates 1`] = `
               0
             </span>
           </div>
+          <div
+            class="li-delegate__value checkbox"
+            id="add-to-cart"
+          >
+            <i
+              class="material-icons"
+            >
+              check_box_outline_blank
+            </i>
+          </div>
         </div>
       </div>
     </div>