Merge pull request #364 from cosmos/jordan/346-send-button

added send button to balances page
luniehq · Jan 15, 2018 · 650b912 · 650b912
2 parents ce031b0 + 8ef7f9e
commit 650b912
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 50 deletions.
diff --git a/app/src/renderer/components/common/NiListItem.vue b/app/src/renderer/components/common/NiListItem.vue
@@ -25,11 +25,17 @@ transition(name="proposal")
     +ni-li-icon
 
   // dt/dd router-link
-  router-link.ni-li.ni-li-link(v-else-if='dt && to' :to="to"): .ni-li-container
+  router-link.ni-li.ni-li-link(v-else-if="dt && to && !btn" :to="to"): .ni-li-container
     +ni-li-thumb
     +ni-li-dl
     +ni-li-icon
 
+  // button router-link
+  router-link.ni-li.ni-li-link(v-else-if="btn && to" :to="to"): .ni-li-container
+    +ni-li-thumb
+    +ni-li-dl
+    btn(:value="btn" icon="chevron_right" icon-pos="right").btn__primary
+
   // dt/dd text
   .ni-li(v-else-if='dt'): .ni-li-container
     +ni-li-thumb
@@ -57,10 +63,15 @@ transition(name="proposal")
 </template>
 
 <script>
+import Btn from '@nylira/vue-button'
 export default {
   name: 'ni-list-item',
-  props: ['type', 'title', 'subtitle', 'image', 'icon', 'to', 'dt', 'dd', 'href']
+  props: ['type', 'title', 'subtitle', 'image', 'icon', 'to', 'dt', 'dd', 'href', 'btn'],
+  components: {
+    Btn
+  }
 }
+
 </script>
 
 <style lang="stylus">
@@ -112,6 +123,8 @@ export default {
     .ni-li-icon
       i.material-icons
         color mc
+  .ni-btn
+    padding 0 0.75em
 
 .ni-li-container
   display flex

diff --git a/app/src/renderer/components/wallet/PageBalances.vue b/app/src/renderer/components/wallet/PageBalances.vue
@@ -19,6 +19,7 @@ page(title='Balances')
     list-item(
       v-for="i in filteredBalances"
       v-if="wallet.balances.length > 0 && i.amount > 0"
+      :btn="'Send'"
       :key="i.denom"
       :dt="i.denom.toUpperCase()"
       :dd="i.amount"

diff --git a/test/unit/specs/__snapshots__/PageBalances.spec.js.snap b/test/unit/specs/__snapshots__/PageBalances.spec.js.snap
@@ -199,20 +199,25 @@ exports[`PageBalances has the expected html structure 1`] = `
                   456
                 </div>
               </div>
-              <div
-                class="ni-li-icon"
+              <button
+                class="ni-btn btn__primary"
               >
-                <i
-                  class="material-icons inactive"
-                >
-                  chevron_right
-                </i>
-                <i
-                  class="material-icons active"
+                <span
+                  class="ni-btn-container ni-btn-icon-right"
                 >
-                  my_location
-                </i>
-              </div>
+                  <i
+                    aria-hidden="true"
+                    class="ni-btn-icon material-icons"
+                  >
+                    chevron_right
+                  </i>
+                  <span
+                    class="ni-btn-value"
+                  >
+                    Send
+                  </span>
+                </span>
+              </button>
             </div>
           </a>
           <a
@@ -241,20 +246,25 @@ exports[`PageBalances has the expected html structure 1`] = `
                   123
                 </div>
               </div>
-              <div
-                class="ni-li-icon"
+              <button
+                class="ni-btn btn__primary"
               >
-                <i
-                  class="material-icons inactive"
-                >
-                  chevron_right
-                </i>
-                <i
-                  class="material-icons active"
+                <span
+                  class="ni-btn-container ni-btn-icon-right"
                 >
-                  my_location
-                </i>
-              </div>
+                  <i
+                    aria-hidden="true"
+                    class="ni-btn-icon material-icons"
+                  >
+                    chevron_right
+                  </i>
+                  <span
+                    class="ni-btn-value"
+                  >
+                    Send
+                  </span>
+                </span>
+              </button>
             </div>
           </a>
         </main>
@@ -490,20 +500,25 @@ exports[`PageBalances should filter the balances 1`] = `
                   456
                 </div>
               </div>
-              <div
-                class="ni-li-icon"
+              <button
+                class="ni-btn btn__primary"
               >
-                <i
-                  class="material-icons inactive"
-                >
-                  chevron_right
-                </i>
-                <i
-                  class="material-icons active"
+                <span
+                  class="ni-btn-container ni-btn-icon-right"
                 >
-                  my_location
-                </i>
-              </div>
+                  <i
+                    aria-hidden="true"
+                    class="ni-btn-icon material-icons"
+                  >
+                    chevron_right
+                  </i>
+                  <span
+                    class="ni-btn-value"
+                  >
+                    Send
+                  </span>
+                </span>
+              </button>
             </div>
           </a>
           <a
@@ -532,20 +547,25 @@ exports[`PageBalances should filter the balances 1`] = `
                   123
                 </div>
               </div>
-              <div
-                class="ni-li-icon"
+              <button
+                class="ni-btn btn__primary"
               >
-                <i
-                  class="material-icons inactive"
-                >
-                  chevron_right
-                </i>
-                <i
-                  class="material-icons active"
+                <span
+                  class="ni-btn-container ni-btn-icon-right"
                 >
-                  my_location
-                </i>
-              </div>
+                  <i
+                    aria-hidden="true"
+                    class="ni-btn-icon material-icons"
+                  >
+                    chevron_right
+                  </i>
+                  <span
+                    class="ni-btn-value"
+                  >
+                    Send
+                  </span>
+                </span>
+              </button>
             </div>
           </a>
         </main>