Merge pull request #185 from cosmos/peng/improve-copy-buttons

improve copy buttons

app/src/renderer/components/wallet/BtnCopy.vue → app/src/renderer/components/common/NiBtnCopy.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 btn.btn-copy(
-  icon="copy"
+  icon="content_copy"
   @click.native="click"
   :data-clipboard-text="value"
   value="Copy")
@@ -13,21 +13,31 @@ export default {
   components: {
     Btn
   },
+  computed: {
+    notifyTitle () {
+      if (this.title) return this.title
+      else return 'Copy Success!'
+    },
+    notifyBody () {
+      if (this.body) return this.body
+      else return `"${this.trunc(this.value)}" has been copied to your clipboard.`
+    }
+  },
   methods: {
     trunc (value) {
       if (value.length > 20) value = value.substring(0, 10) + '...'
       return value
     },
     click () {
       this.$store.commit('notify', {
-        title: 'Copy Success!',
-        body: `"${this.trunc(this.value)}" has been copied to your clipboard.`
+        title: this.notifyTitle,
+        body: this.notifyBody
       })
     }
   },
   mounted () {
     this.clipboard = new Clipboard('.btn-copy')
   },
-  props: ['value']
+  props: ['value', 'title', 'body']
 }
 </script>

app/src/renderer/components/common/NiLiCopy.vue

@@ -0,0 +1,42 @@
+<template lang="pug">
+.ni-li-copy
+  .value {{ value }}
+  menu
+    btn-copy(:value='value')
+</template>
+
+<script>
+import BtnCopy from 'common/NiBtnCopy'
+export default {
+  name: 'ni-li-copy',
+  components: {
+    BtnCopy
+  },
+  props: ['value']
+}
+</script>
+
+<style lang="stylus">
+@require '~variables'
+
+.ni-li-copy
+  height 3rem
+  display flex
+  align-items center
+  border-bottom px solid bc-dim
+  &:only-child
+    border-bottom none
+
+  .value
+    flex 1
+    padding 0 0.75em
+
+    overflow hidden
+    text-overflow ellipsis
+    white-space nowrap
+
+  menu
+    display flex
+    align-items center
+    padding 0 0.75em
+</style>

app/src/renderer/components/common/PageProfile.vue

@@ -22,15 +22,13 @@ page(title="Profile: CosmosUser01")
 </template>
 
 <script>
-import AnchorCopy from 'common/AnchorCopy'
 import ListItem from 'common/NiListItem'
 import ToolBar from 'common/NiToolBar'
 import Page from 'common/NiPage'
 import Part from 'common/NiPart'
 export default {
   name: 'page-validator',
   components: {
-    AnchorCopy,
     ListItem,
     Page,
     Part,

app/src/renderer/components/monitor/PageValidatorIndex.vue

@@ -4,7 +4,6 @@ page(icon="storage" :title="validator.pub_key.data")
     router-link(to="/validators" exact)
       i.material-icons arrow_back
       .label Back
-    anchor-copy(:value="tmpValidator.pub_key" icon="content_copy" label="Copy Public Key")
 
   part(title="Validator Profile")
     list-item(dt="Total Vote Power" :dd="validator.voting_power"
@@ -19,19 +18,22 @@ page(icon="storage" :title="validator.pub_key.data")
   part(title="Staking")
     list-item(dt="Earn Rate" dd="8.1K ATOM / day")
     list-item(dt="Total Earnings" dd="301.8K ATOM")
+
+  part(title="Public Key")
+    li-copy(:value="tmpValidator.pub_key")
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
+import LiCopy from 'common/NiLiCopy'
 import ListItem from 'common/NiListItem'
 import ToolBar from 'common/NiToolBar'
 import Page from 'common/NiPage'
 import Part from 'common/NiPart'
-import AnchorCopy from 'common/AnchorCopy'
 export default {
   name: 'page-validator-index',
   components: {
-    AnchorCopy,
+    LiCopy,
     ListItem,
     Page,
     Part,

app/src/renderer/components/wallet/PageBalances.vue

@@ -4,15 +4,14 @@ page(title='Balance')
     a(@click='updateBalances()')
       i.material-icons refresh
       .label Refresh
-    anchor-copy(:value="wallet.key.address" icon="content_copy" label="Copy")
     a(@click='setSearch(true)')
       i.material-icons search
       .label Search
 
   modal-search(v-if="filters.balances.search.visible" type="balances")
 
   part(title='Your Address')
-    list-item(dt="Address" :dd="wallet.key.address")
+    li-copy(:value="wallet.key.address")
 
   part(title="Denomination Balances")
     list-item(
@@ -27,8 +26,7 @@ page(title='Balance')
 import { mapGetters } from 'vuex'
 import { includes, orderBy } from 'lodash'
 import Mousetrap from 'mousetrap'
-import AnchorCopy from 'common/AnchorCopy'
-import Btn from '@nylira/vue-button'
+import LiCopy from 'common/NiLiCopy'
 import ListItem from 'common/NiListItem'
 import ModalSearch from 'common/NiModalSearch'
 import Page from 'common/NiPage'
@@ -37,8 +35,7 @@ import ToolBar from 'common/NiToolBar'
 export default {
   name: 'page-balances',
   components: {
-    AnchorCopy,
-    Btn,
+    LiCopy,
     ListItem,
     ModalSearch,
     Page,

test/unit/specs/BtnCopy.spec.js

@@ -1,6 +1,6 @@
 import Vuex from 'vuex'
 import { mount, createLocalVue } from 'vue-test-utils'
-import BtnCopy from 'renderer/components/wallet/BtnCopy'
+import BtnCopy from 'renderer/components/common/NiBtnCopy'
 
 const localVue = createLocalVue()
 localVue.use(Vuex)
@@ -36,4 +36,16 @@ describe('BtnCopy', () => {
     expect(store.commit.mock.calls[0][1].body).not.toContain('123456789012345678901234567890')
     expect(store.commit.mock.calls[0][1].body).toContain('1234567890')
   })
+
+  it('should use a provided title in message', () => {
+    wrapper.setProps({title: 'Title A'})
+    wrapper.trigger('click')
+    expect(store.commit.mock.calls[0][1].title).toBe('Title A')
+  })
+
+  it('should use a provided body in message', () => {
+    wrapper.setProps({body: 'Body A'})
+    wrapper.trigger('click')
+    expect(store.commit.mock.calls[0][1].body).toBe('Body A')
+  })
 })

test/unit/specs/LiCopy.spec.js

@@ -0,0 +1,23 @@
+import { shallow } from 'vue-test-utils'
+import LiCopy from 'renderer/components/common/NiLiCopy'
+
+describe('LiCopy', () => {
+  let wrapper
+  let propsData = {
+    value: 12345678
+  }
+
+  beforeEach(() => {
+    wrapper = shallow(LiCopy, {
+      propsData
+    })
+  })
+
+  it('has the expected html structure', () => {
+    expect(wrapper.vm.$el).toMatchSnapshot()
+  })
+
+  it('has an address from props', () => {
+    expect(wrapper.html()).toContain(propsData.value)
+  })
+})

test/unit/specs/__snapshots__/BtnCopy.spec.js.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`BtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"this is a test\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button>"`;
+exports[`BtnCopy has the expected html structure 1`] = `"<button class=\\"ni-btn btn-copy\\" data-clipboard-text=\\"this is a test\\"><span class=\\"ni-btn-container\\"><i aria-hidden=\\"true\\" class=\\"ni-btn-icon material-icons\\">content_copy</i><span class=\\"ni-btn-value\\">Copy</span></span></button>"`;