Add an arrow to identicon/bank selection buttons, to indicate interac…

…tivity (#73)

* Add an arrow to identicon/bank selection buttons, to indicate interactivity
* Improve triangle positioning
* Add transitions

src/components/BankIconButton.vue

@@ -1,40 +1,56 @@
 <template>
  <button class="reset bank-icon-button flex-column" v-on="$listeners">
  <BankIcon/>
+ <TriangleDownIcon/>
  <label>{{ bankName || '' }}</label>
  </button>
 </template>
 
 <script lang="ts">
 import { defineComponent } from '@vue/composition-api';
 import BankIcon from './icons/BankIcon.vue';
+import TriangleDownIcon from './icons/TriangleDownIcon.vue';
 
 export default defineComponent({
  props: {
  bankName: String,
  },
  components: {
  BankIcon,
+ TriangleDownIcon,
  },
 });
 </script>
 
 <style lang="scss" scoped>
 .bank-icon-button {
+ position: relative;
  align-items: center;
  width: 18rem;
  border-radius: 0.75rem;
  padding: 1rem;
+ transition: background var(--attr-duration) var(--nimiq-ease);
+
+ ::v-deep svg.triangle-down-icon {
+ position: absolute;
+ right: 4rem;
+ top: 8rem;
+ opacity: 0.25;
+ transition: opacity var(--attr-duration) var(--nimiq-ease);
+ }
 
  &:hover,
  &:focus {
  background: var(--nimiq-highlight-bg);
+
+ ::v-deep svg.triangle-down-icon {
+ opacity: 0.4;
+ }
  }
 
- svg {
- height: 9rem;
+ svg.bank-icon {
+ height: 8.25rem;
  width: auto;
- margin-top: -.5rem;
  }
 
  label {

src/components/IdenticonStack.vue

@@ -1,5 +1,10 @@
 <template>
- <button class="reset identicon-stack flex-column" v-on="$listeners" :class="{ interactive }">
+ <button class="reset identicon-stack flex-column" v-on="$listeners" :class="{
+ interactive,
+ 'triangle-indented': (!hasBitcoinAddresses && backgroundAddresses.length === 1)
+ || (hasBitcoinAddresses && backgroundAddresses.length === 0)
+ || (activeCurrency === CryptoCurrency.BTC && backgroundAddresses.length === 1),
+ }">
  <Identicon class="secondary"
  v-if="backgroundAddresses[0]" :address="backgroundAddresses[0]"/>
 
@@ -16,6 +21,9 @@
 
  <BitcoinIcon class="primary"
  v-else-if="activeCurrency === CryptoCurrency.BTC" />
+
+ <TriangleDownIcon v-if="backgroundAddresses.length || hasBitcoinAddresses"/>
+
  <label>
  {{ activeCurrency === CryptoCurrency.BTC ? 'Bitcoin' : activeAddressInfo.label }}
  </label>
@@ -29,6 +37,7 @@ import { CryptoCurrency } from '../lib/Constants';
 import { useAccountStore } from '../stores/Account';
 import { useAddressStore } from '../stores/Address';
 import BitcoinIcon from './icons/BitcoinIcon.vue';
+import TriangleDownIcon from './icons/TriangleDownIcon.vue';
 
 export default defineComponent({
  props: {
@@ -61,6 +70,7 @@ export default defineComponent({
  components: {
  Identicon,
  BitcoinIcon,
+ TriangleDownIcon,
  },
 });
 </script>
@@ -126,6 +136,18 @@ export default defineComponent({
  }
  }
 
+ ::v-deep svg.triangle-down-icon {
+ position: absolute;
+ right: 2.5rem;
+ top: 8rem;
+ opacity: 0.25;
+ transition: opacity var(--attr-duration) var(--nimiq-ease);
+ }
+
+ &.triangle-indented ::v-deep svg.triangle-down-icon {
+ right: 3.75rem;
+ }
+
  &.interactive {
  &:hover,
  &:focus {
@@ -140,6 +162,10 @@ export default defineComponent({
  transform: translateX(0.375rem) scale(1.05);
  opacity: 0.5;
  }
+
+ ::v-deep svg.triangle-down-icon {
+ opacity: 0.4;
+ }
  }
 
  label {

src/components/icons/TriangleDownIcon.vue

@@ -0,0 +1,12 @@
+<template functional>
+ <svg class="triangle-down-icon" width="10" height="8" viewBox="0 0 10 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+ <path d="M8.56 0a.8.8 0 0 1 .67 1.22l-3.55 5.7a.8.8 0 0 1-1.36 0L.76 1.21A.8.8 0 0 1 1.44 0h7.12Z"/>
+ </svg>
+</template>
+
+<style scoped>
+.triangle-down-icon {
+ width: 1.25rem;
+ height: 1rem;
+}
+</style>

src/components/modals/SendModal.vue

@@ -100,10 +100,13 @@
  >{{ $t('Set Amount') }}</PageHeader>
  <PageBody class="page__amount-input flex-column">
  <section class="identicon-section flex-row">
- <button class="reset identicon-stack flex-column" @click="addressListOpened = true">
+ <button class="reset identicon-stack flex-column" @click="addressListOpened = true" :class="{
+ 'triangle-indented': backgroundAddresses.length === 1,
+ }">
  <Identicon class="secondary" v-if="backgroundAddresses[0]" :address="backgroundAddresses[0]"/>
  <Identicon class="secondary" v-if="backgroundAddresses[1]" :address="backgroundAddresses[1]"/>
  <Identicon class="primary" :address="activeAddressInfo.address"/>
+ <TriangleDownIcon v-if="backgroundAddresses.length"/>
  <label>{{ activeAddressInfo.label }}</label>
  </button>
  <div class="separator-wrapper">
@@ -248,6 +251,7 @@ import Modal, { disableNextModalTransition } from './Modal.vue';
 import ContactShortcuts from '../ContactShortcuts.vue';
 import ContactBook from '../ContactBook.vue';
 import IdenticonButton from '../IdenticonButton.vue';
+import TriangleDownIcon from '../icons/TriangleDownIcon.vue';
 import AddressList from '../AddressList.vue';
 import AmountInput from '../AmountInput.vue';
 import AmountMenu from '../AmountMenu.vue';
@@ -759,6 +763,7 @@ export default defineComponent({
  Copyable,
  AddressDisplay,
  IdenticonButton,
+ TriangleDownIcon,
  AddressList,
  AmountInput,
  AmountMenu,
@@ -981,6 +986,7 @@ export default defineComponent({
  padding: 1rem;
  position: relative;
  width: 14rem;
+ transition: background var(--attr-duration) var(--nimiq-ease);
 
  .primary {
  position: relative;
@@ -1008,6 +1014,18 @@ export default defineComponent({
  }
  }
 
+ ::v-deep svg.triangle-down-icon {
+ position: absolute;
+ right: 0.375rem;
+ top: 8rem;
+ opacity: 0.25;
+ transition: opacity var(--attr-duration) var(--nimiq-ease);
+ }
+
+ &.triangle-indented ::v-deep svg.triangle-down-icon {
+ right: 2rem;
+ }
+
  &:hover,
  &:focus {
  background: var(--nimiq-highlight-bg);
@@ -1021,6 +1039,10 @@ export default defineComponent({
  transform: translateX(0.375rem) scale(1.05);
  opacity: 0.5;
  }
+
+ ::v-deep svg.triangle-down-icon {
+ opacity: 0.4;
+ }
  }
 
  label {