feat: harmonize the UI for payment dialog (#2882)

lnbits/core/templates/core/wallet.html

@@ -109,6 +109,7 @@
             <payment-list
               :update="updatePayments"
               :mobile-simple="mobileSimple"
+              :expand-details="expandDetails"
             />
           </q-card-section>
         </q-card>

lnbits/static/css/base.css

@@ -535,12 +535,13 @@ video {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0 auto;
 }
 
 .qrcode__wrapper canvas {
   width: 100% !important;
   height: 100% !important;
-  max-width: 350px;
+  max-width: 320px;
 }
 
 .qrcode__image {

lnbits/static/i18n/en.js

@@ -94,6 +94,7 @@ window.localisation.en = {
   invoice_waiting: 'Invoice waiting to be paid',
   payment_received: 'Payment Received',
   payment_sent: 'Payment Sent',
+  payment_failed: 'Payment Failed',
   receive: 'receive',
   send: 'send',
   outgoing_payment_pending: 'Outgoing payment pending',

lnbits/static/scss/base.scss

@@ -212,11 +212,12 @@ video {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 0 auto;
 }
 .qrcode__wrapper canvas {
   width: 100% !important; // important to override qrcode inline width
   height: 100% !important;
-  max-width: 350px; // default width of <lnbits-qrcode> component
+  max-width: 320px; // default width of <lnbits-qrcode> component
 }
 .qrcode__image {
   position: absolute;

lnbits/templates/components.vue

@@ -202,94 +202,140 @@
 </template>
 
 <template id="lnbits-payment-details">
-  <div v-if="payment" class="q-py-md" style="text-align: left">
+  <q-list separator>
-    <div v-if="payment.tag" class="row justify-center q-mb-md">
+    <q-item v-if="payment.tag">
-      <q-badge v-if="hasTag" color="yellow" text-color="black">
+      <q-item-section>
-        #<span v-text="payment.tag"></span>
+        <q-item-label v-text="$t('created')"></q-item-label>
-      </q-badge>
+        <q-item-label caption v-text="payment.date"></q-item-label>
-    </div>
+      </q-item-section>
 
-    <div class="row">
+      <q-item-section side top>
-      <b v-text="$t('created')"></b>:
+        <q-item-label caption v-text="payment.dateFrom"></q-item-label>
-      <span v-text="payment.date"></span>
+      </q-item-section>
-      (<span v-text="payment.dateFrom"></span>)
+    </q-item>
-    </div>
+    <q-item v-if="payment.expirydate">
+      <q-item-section>
+        <q-item-label v-text="$t('expiry')"></q-item-label>
+        <q-item-label caption v-text="payment.expirydate"></q-item-label>
+      </q-item-section>
 
-    <div class="row" v-if="hasExpiry">
+      <q-item-section side top>
-      <b v-text="$t('expiry')"></b>:
+        <q-item-label caption v-text="payment.expirydateFrom"></q-item-label>
-      <span v-text="payment.expirydate"></span>
+      </q-item-section>
-      (<span v-text="payment.expirydateFrom"></span>)
+    </q-item>
-    </div>
+    <q-item>
-
+      <q-item-section>
-    <div class="row">
+        <q-item-label v-text="$t('amount')"></q-item-label>
-      <b v-text="$t('amount')"></b>:
+        <q-item-label caption>
           <span v-text="(payment.amount / 1000).toFixed(3)"></span>
           <span v-text="LNBITS_DENOMINATION"></span>
-    </div>
+        </q-item-label>
-
+      </q-item-section>
-    <div class="row">
+    </q-item>
-      <b v-text="$t('fee')"></b>:
+    <q-item>
+      <q-item-section>
+        <q-item-label v-text="$t('fee')"></q-item-label>
+        <q-item-label caption>
           <span v-text="(payment.fee / 1000).toFixed(3)"></span>
           <span v-text="LNBITS_DENOMINATION"></span>
-    </div>
+        </q-item-label>
-
+      </q-item-section>
-    <div class="text-wrap">
+    </q-item>
-      <b style="white-space: nowrap" v-text="$t('payment_hash')"></b>:&nbsp;
+    <q-item>
-      <span v-text="payment.payment_hash"></span>
+      <q-item-section>
+        <q-item-label v-text="$t('payment_hash')"></q-item-label>
+        <q-item-label
+          caption
+          v-text="
+            `${payment.payment_hash.slice(0, 12)}...${payment.payment_hash.slice(-12)}`
+          "
+        ></q-item-label>
+      </q-item-section>
+      <q-item-section side>
+        <q-item-label>
           <q-icon
             name="content_copy"
             @click="copyText(payment.payment_hash)"
             size="1em"
             color="grey"
-        class="q-mb-xs cursor-pointer"
+            class="cursor-pointer"
           />
-    </div>
+        </q-item-label>
-
+        <q-tooltip>
-    <div class="text-wrap">
+          <span v-text="payment.payment_hash"></span>
-      <b style="white-space: nowrap" v-text="$t('Invoice')"></b>:&nbsp;
+        </q-tooltip>
+      </q-item-section>
+    </q-item>
+    <q-item>
+      <q-item-section>
+        <q-item-label v-text="$t('Invoice')"></q-item-label>
+        <q-item-label
+          caption
+          v-text="
+            `${payment.bolt11.slice(0, 12)}...${payment.bolt11.slice(-12)}`
+          "
+        ></q-item-label>
+      </q-item-section>
+      <q-item-section side>
+        <q-item-label>
           <q-icon
             name="content_copy"
             @click="copyText(payment.bolt11)"
             size="1em"
             color="grey"
-        class="q-mb-xs cursor-pointer"
+            class="cursor-pointer"
           />
-    </div>
+        </q-item-label>
-
+        <q-tooltip>
-    <div class="text-wrap">
+          <span v-text="payment.bolt11"></span>
-      <b style="white-space: nowrap" v-text="$t('memo')"></b>:&nbsp;
+        </q-tooltip>
-      <span v-text="payment.memo"></span>
+      </q-item-section>
-    </div>
+    </q-item>
-
+    <q-item>
-    <div class="text-wrap" v-if="payment.webhook">
+      <q-item-section>
-      <b style="white-space: nowrap" v-text="$t('webhook')"></b>:&nbsp;
+        <q-item-label v-text="$t('memo')"></q-item-label>
-      <span v-text="payment.webhook"></span>:&nbsp;<q-badge
+        <q-item-label caption v-text="payment.memo"></q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item v-if="payment.webhook">
+      <q-item-section>
+        <q-item-label v-text="$t('webhook')"></q-item-label>
+        <q-item-label caption v-text="payment.webhook"></q-item-label>
+      </q-item-section>
+      <q-item-section side top>
+        <q-item-label caption>
+          <q-badge
             :color="webhookStatusColor"
             text-color="white"
+            v-text="webhookStatusText"
+          ></q-badge>
+        </q-item-label>
+      </q-item-section>
+    </q-item>
+    <q-item v-if="payment.preimage">
+      <q-item-section>
+        <q-item-label v-text="$t('payment_proof')"></q-item-label>
+        <q-item-label caption v-text="payment.preimage"></q-item-label>
+      </q-item-section>
+    </q-item>
+
+    <q-expansion-item
+      expand-separator
+      icon="info"
+      header-class="text-grey-4"
+      label="Extras"
+      v-if="extras.length"
     >
-        <span v-text="webhookStatusText"></span>
+      <template v-for="entry in extras">
-      </q-badge>
+        <q-item v-if="!!entry.value" key="entry.key" class="text-grey-4">
-    </div>
+          <q-item-section>
-
+            <q-item-label v-text="entry.key"></q-item-label>
-    <div class="text-wrap" v-if="hasPreimage">
+            <q-item-label caption v-text="entry.value"></q-item-label>
-      <b style="white-space: nowrap" v-text="$t('payment_proof')"></b>:&nbsp;
+          </q-item-section>
-      <span v-text="payment.preimage"></span>
+        </q-item>
-    </div>
+      </template>
-
+    </q-expansion-item>
-    <div class="row" v-for="entry in extras">
+  </q-list>
-      <q-badge v-if="hasTag" color="secondary" text-color="white">
-        extra
-      </q-badge>
-      <b v-text="entry.key"></b>: <span v-text="entry.value"></span>
-    </div>
-    <div class="row" v-if="hasSuccessAction">
-      <b>Success action</b>:
-      <lnbits-lnurlpay-success-action
-        :payment="payment"
-        :success_action="payment.extra.success_action"
-      ></lnbits-lnurlpay-success-action>
-    </div>
-  </div>
 </template>
 
 <template id="lnbits-dynamic-fields">
@@ -640,7 +686,7 @@
     @request="fetchPayments"
   >
     <template v-slot:header="props">
-      <q-tr :props="props">
+      <q-tr :props="props" class="text-grey-5">
         <q-th auto-width></q-th>
         <q-th
           v-for="col in props.cols"
@@ -689,11 +735,11 @@
               :href="['/', props.row.tag].join('')"
             ></a>
           </q-badge>
-          <span v-text="props.row.memo"></span>
+          <span class="q-ml-sm" v-text="props.row.memo"></span>
           <br />
 
           <i>
-            <span v-text="props.row.dateFrom"></span>
+            <span class="text-grey-5" v-text="props.row.dateFrom"></span>
             <q-tooltip><span v-text="props.row.date"></span></q-tooltip>
           </i>
         </q-td>
@@ -731,25 +777,88 @@
             ></span>
           </i>
         </q-td>
-
         <q-dialog v-model="props.expand" :props="props" position="top">
-          <q-card class="q-pa-lg q-pt-xl lnbits__dialog-card">
+          <q-card class="q-pa-sm q-pt-xl lnbits__dialog-card">
-            <div class="text-center q-mb-lg">
+            <q-card-section class="">
-              <div v-if="props.row.isIn && props.row.isPending">
+              <q-list bordered separator>
-                <q-icon name="settings_ethernet" color="grey"></q-icon>
+                <q-expansion-item
-                <span v-text="$t('invoice_waiting')"></span>
+                  expand-separator
+                  :default-opened="!(props.row.isIn && props.row.isPending)"
+                >
+                  <template v-slot:header>
+                    <q-item-section avatar>
+                      <q-icon
+                        :color="
+                          props.row.isPaid && props.row.isIn
+                            ? 'green'
+                            : props.row.isPaid && props.row.isOut
+                              ? 'pink'
+                              : props.row.isFailed
+                                ? 'yellow'
+                                : 'grey'
+                        "
+                        :name="
+                          props.row.isPaid && props.row.isIn
+                            ? 'call_received'
+                            : props.row.isPaid && props.row.isOut
+                              ? 'call_made'
+                              : props.row.isFailed
+                                ? 'warning'
+                                : 'settings_ethernet'
+                        "
+                      />
+                    </q-item-section>
+
+                    <q-item-section>
+                      <q-item-label
+                        v-text="
+                          props.row.isIn && props.row.isPending
+                            ? $t('invoice_waiting')
+                            : props.row.isOut && props.row.isPending
+                              ? $t('outgoing_payment_pending')
+                              : props.row.isPaid && props.row.isIn
+                                ? $t('payment_received')
+                                : props.row.isPaid && props.row.isOut
+                                  ? $t('payment_sent')
+                                  : props.row.isFailed
+                                    ? $t('payment_failed')
+                                    : ''
+                        "
+                      ></q-item-label>
+                    </q-item-section>
+                    <q-item-section v-if="props.row.tag" side>
+                      <q-badge
+                        v-if="props.row.extra && !!props.row.extra.tag"
+                        color="yellow"
+                        text-color="black"
+                      >
+                        #<span v-text="props.row.tag"></span>
+                      </q-badge>
+                    </q-item-section>
+                  </template>
+                  <q-separator></q-separator>
                   <lnbits-payment-details
                     :payment="props.row"
                   ></lnbits-payment-details>
-                <div v-if="props.row.bolt11" class="text-center q-mb-lg">
+                </q-expansion-item>
+              </q-list>
+              <div
+                v-if="props.row.isIn && props.row.isPending && props.row.bolt11"
+                class="text-center q-my-lg"
+              >
                 <a :href="'lightning:' + props.row.bolt11">
                   <lnbits-qrcode
                     :value="'lightning:' + props.row.bolt11.toUpperCase()"
                   ></lnbits-qrcode>
                 </a>
               </div>
-                <div class="row q-mt-lg">
+            </q-card-section>
+            <q-card-section>
+              <div class="row">
                 <q-btn
+                  v-if="
+                    props.row.isIn && props.row.isPending && props.row.bolt11
+                  "
                   outline
                   color="grey"
                   @click="copyText(props.row.bolt11)"
@@ -763,44 +872,7 @@
                   :label="$t('close')"
                 ></q-btn>
               </div>
-              </div>
+            </q-card-section>
-              <div v-else-if="props.row.isOut && props.row.isPending">
-                <q-icon name="settings_ethernet" color="grey"></q-icon>
-                <span v-text="$t('outgoing_payment_pending')"></span>
-                <lnbits-payment-details
-                  :payment="props.row"
-                ></lnbits-payment-details>
-              </div>
-              <div v-else-if="props.row.isPaid && props.row.isIn">
-                <q-icon
-                  size="18px"
-                  :name="'call_received'"
-                  :color="'green'"
-                ></q-icon>
-                <span v-text="$t('payment_received')"></span>
-                <lnbits-payment-details
-                  :payment="props.row"
-                ></lnbits-payment-details>
-              </div>
-              <div v-else-if="props.row.isPaid && props.row.isOut">
-                <q-icon
-                  size="18px"
-                  :name="'call_made'"
-                  :color="'pink'"
-                ></q-icon>
-                <span v-text="$t('payment_sent')"></span>
-                <lnbits-payment-details
-                  :payment="props.row"
-                ></lnbits-payment-details>
-              </div>
-              <div v-else-if="props.row.isFailed">
-                <q-icon name="warning" color="yellow"></q-icon>
-                <span>Payment failed</span>
-                <lnbits-payment-details
-                  :payment="props.row"
-                ></lnbits-payment-details>
-              </div>
-            </div>
           </q-card>
         </q-dialog>
       </q-tr>