PaymentInfoLine: remove recipient hover and click

nimiq · Nov 14, 2019 · 2e86c67 · 2e86c67
1 parent baf0586
commit 2e86c67
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 70 deletions.
diff --git a/src/components/PaymentInfoLine.vue b/src/components/PaymentInfoLine.vue
@@ -18,12 +18,7 @@
         <div class="arrow-runway">
             <ArrowRightSmallIcon/>
         </div>
-        <a href="javascript:void(0)" class="description" @click="merchantInfoClicked">
-            <Account :address="address" :image="shopLogoUrl" :label="originDomain" />
-            <div v-if="!startTime || !endTime" class="info-circle-container">
-                <InfoCircleIcon class="info-circle"/>
-            </div>
-        </a>
+        <Account :address="address" :image="shopLogoUrl" :label="originDomain" />
         <Timer v-if="startTime && endTime" ref="timer" :startTime="startTime" :endTime="endTime" />
     </div>
 </template>
@@ -32,11 +27,11 @@
 // this imports only the type without bundling the library
 type BigInteger = import ('big-integer').BigInteger;
 
-import { Component, Prop, Emit, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from 'vue-property-decorator';
 import Account from './Account.vue';
 import Timer from './Timer.vue';
 import Amount from './Amount.vue';
-import { InfoCircleIcon, ArrowRightSmallIcon } from './Icons';
+import { ArrowRightSmallIcon } from './Icons';
 
 interface AmountInfo {
     amount: number | bigint | BigInteger; // in the smallest unit
@@ -52,7 +47,7 @@ function amountInfoValidator(value: any) {
         && typeof value.decimals === 'number' && Number.isInteger(value.decimals);
 }
 
-@Component({components: {Account, Timer, Amount, InfoCircleIcon, ArrowRightSmallIcon}})
+@Component({components: {Account, Timer, Amount, ArrowRightSmallIcon}})
 export default class PaymentInfoLine extends Vue {
     private get originDomain() {
         return this.origin.split('://')[1];
@@ -71,10 +66,6 @@ export default class PaymentInfoLine extends Vue {
         if (!this.$refs.timer) return;
         (this.$refs.timer as Timer).synchronize(time);
     }
-
-    @Emit()
-    // tslint:disable-next-line no-empty
-    private merchantInfoClicked() {}
 }
 </script>
 
@@ -135,20 +126,6 @@ export default class PaymentInfoLine extends Vue {
         100% { transform: translate3D(3rem, 0, 0); }
     }
 
-    .description {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        color: inherit;
-        text-decoration: none;
-        outline: none;
-    }
-
-    .description:hover,
-    .description:focus {
-        text-decoration: none;
-    }
-
     .account {
         padding: 0;
         width: auto !important;
@@ -165,7 +142,6 @@ export default class PaymentInfoLine extends Vue {
     .account >>> .label {
         padding-left: .75rem;
         margin-bottom: .25rem;
-        transition: opacity .3s ease;
         font-weight: unset;
         opacity: 1 !important;
         /* Remove gradient-fade-out and use text-overflow instead */
@@ -174,43 +150,6 @@ export default class PaymentInfoLine extends Vue {
         text-overflow: fade;
     }
 
-    .info-circle-container {
-        position: relative;
-        opacity: 0.3;
-        margin-left: 1rem;
-        transition: opacity .3s ease;
-    }
-
-    .info-circle-container .nq-icon {
-        display: block;
-    }
-
-    .description:hover .account >>> .label,
-    .description:focus .account >>> .label {
-        opacity: .7;
-    }
-
-    .description:hover .info-circle-container,
-    .description:focus .info-circle-container {
-        opacity: 1;
-    }
-
-    .info-circle-container::after {
-        content: "";
-        position: absolute;
-        left: -0.625rem;
-        top: -0.625rem;
-        right: -0.625rem;
-        bottom: -0.625rem;
-        border: 0.25rem solid rgba(5, 130, 202, 0.5); /* Based on Nimiq Light Blue */
-        border-radius: 50%;
-        opacity: 0;
-    }
-
-    .description:focus .info-circle-container::after {
-        opacity: 1;
-    }
-
     .timer {
         margin: auto -.5rem auto 1rem;
         flex-shrink: 0;

diff --git a/src/stories/index.stories.js b/src/stories/index.stories.js
@@ -718,13 +718,9 @@ storiesOf('Components', module)
         return {
             components: {PaymentInfoLine},
             data: () => ({ cryptoAmount, fiatAmount, origin, address, shopLogo, startTime, expires }),
-            methods: {
-                merchantInfoClicked: action('merchant-info-clicked'),
-            },
             template: `<div style="max-width: 420px">
                 <PaymentInfoLine :cryptoAmount="cryptoAmount" :fiatAmount="fiatAmount"
-                :origin="origin" :address="address" :shopLogoUrl="shopLogo" :startTime="startTime" :expires="expires"
-                @merchant-info-clicked="merchantInfoClicked"/>
+                :origin="origin" :address="address" :shopLogoUrl="shopLogo" :startTime="startTime" :expires="expires" />
             </div>`,
         };
     })