improved tx metadata hints

closes #80
robjtede · Jul 7, 2017 · 3c3f7b2 · 3c3f7b2
1 parent d512b23
commit 3c3f7b2
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 7 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -11,6 +11,12 @@
   "extends": "standard",
   "rules": {
     "quotes": ["error", "single"],
-    "semi": ["error", "never"]
+    "semi": ["error", "never"],
+    "no-unused-vars": [
+      "warn", {
+        "vars": "all",
+        "args": "none"
+      }
+    ]
   }
 }
diff --git a/app/components/transaction-summary/transaction-summary.component.html b/app/components/transaction-summary/transaction-summary.component.html
@@ -67,7 +67,7 @@
       border-radius: 25%;
     }
 
-    .info {
+    .info-wrap {
       flex: 7 3;
 
       display: flex;
@@ -78,19 +78,45 @@
       word-break: break-all;
     }
 
+    .info {
+      display: flex;
+      flex-flow: row wrap;
+      justify-content: left;
+      align-items: flex-start;
+    }
+
     .merchant {
       margin: 0;
 
       font-size: 1rem;
     }
 
-    :host(.pending) .merchant::after {
-      content: '\25f7';
-      padding-left: 0.5em;
+    .meta {
+      margin-left: 1ch;
 
       color: var(--label-grey);
     }
 
+    .meta-pending {
+      display: none;
+    }
+
+    .meta-attachments {
+      display: none;
+    }
+
+    :host(.pending) .meta-pending {
+      display: inline;
+    }
+
+    :host(.attachments) .meta-attachments {
+      display: inline;
+    }
+
+    :host(.attachments) .meta-attachments::after {
+      content: attr(data-attachments);
+    }
+
     .notes {
       display: none;
       margin: 0;
@@ -151,8 +177,14 @@
 
   <div class="icon-wrap"><img class="icon"></div>
 
-  <div class="info">
-    <p class="merchant"></p>
+  <div class="info-wrap">
+    <div class="info">
+      <p class="merchant"></p>
+      <div class="meta">
+        <span class="meta-pending">&#x1f553;</span>
+        <span class="meta-attachments">&#x1f4ce;</span>
+      </div>
+    </div>
     <p class="notes"></p>
   </div>
 

diff --git a/app/components/transaction-summary/transaction-summary.component.js b/app/components/transaction-summary/transaction-summary.component.js
@@ -34,6 +34,8 @@
       const $merchant = this.root.querySelector('.merchant')
       const $notes = this.root.querySelector('.notes')
 
+      const $metaAttachments = this.root.querySelector('.meta-attachments')
+
       $merchant.textContent = this.tx.displayName
 
       if (this.tx.notes.short.trim()) {
@@ -81,6 +83,15 @@
         $notes.classList.add('noted')
         $notes.textContent = this.tx.declineReason
       }
+
+      if (this.tx.attachments.length) {
+        this.classList.add('attachments')
+
+        $metaAttachments.setAttribute(
+          'data-attachments',
+          this.tx.attachments.length
+        )
+      }
     }
 
     get index () {

diff --git a/lib/monzo/Transaction.ts b/lib/monzo/Transaction.ts
@@ -63,6 +63,7 @@ export default class Transaction {
   }
 
   get attachments() {
+    // TODO: this alaways returns an array
     if (this.tx && 'attachments' in this.tx) {
       return this.tx.attachments
     } else {