feat: add copy, download and write NFC to qrcode components (#3335)

lnbits/templates/components.vue

@@ -617,21 +617,65 @@
 </template>
 
 <template id="lnbits-qrcode">
-  <div class="qrcode__wrapper">
-    <qrcode-vue
-      :value="value"
-      level="Q"
-      render-as="svg"
-      :margin="custom.margin"
-      :size="custom.width"
-      class="rounded-borders"
-    ></qrcode-vue>
-    <img
-      v-if="custom.logo"
-      class="qrcode__image"
-      :src="custom.logo"
-      alt="qrcode icon"
-    />
+  <div
+    class="qrcode__outer"
+    :style="`margin: 13px auto; max-width: ${maxWidth}px`"
+  >
+    <div ref="qrWrapper" class="qrcode__wrapper">
+      <a
+        :href="href"
+        :title="href === '' ? value : href"
+        @click="clickQrCode"
+        class="no-link full-width"
+      >
+        <qrcode-vue
+          ref="qrCode"
+          :value="value"
+          :margin="margin"
+          :size="size"
+          level="Q"
+          render-as="svg"
+          class="rounded-borders q-mb-sm"
+        >
+          <q-tooltip :model-value="href === '' ? value : href"></q-tooltip>
+        </qrcode-vue>
+      </a>
+      <img
+        :src="logo"
+        class="qrcode__image"
+        alt="qrcode icon"
+        style="pointer-events: none"
+      />
+    </div>
+    <div
+      v-if="showButtons"
+      class="qrcode__buttons row q-gutter-x-sm"
+      style="justify-content: flex-end"
+    >
+      <q-btn
+        v-if="nfc && nfcSupported"
+        :disabled="nfcTagWriting"
+        flat
+        dense
+        class="text-grey"
+        icon="nfc"
+        @click="writeNfcTag"
+      >
+        <q-tooltip>Write NFC Tag</q-tooltip>
+      </q-btn>
+      <q-btn flat dense class="text-grey" icon="download" @click="downloadSVG">
+        <q-tooltip>Download SVG</q-tooltip>
+      </q-btn>
+      <q-btn
+        flat
+        dense
+        class="text-grey"
+        @click="copyText(value)"
+        icon="content_copy"
+      >
+        <q-tooltip>Copy</q-tooltip>
+      </q-btn>
+    </div>
   </div>
 </template>
 
@@ -640,17 +684,16 @@
     <q-tabs
       v-model="tab"
       dense
-      class="text-grey q-mb-md"
+      class="text-grey"
       active-color="primary"
       indicator-color="primary"
       align="justify"
-      narrow-indicator
       inline-label
     >
       <q-tab name="bech32" icon="qr_code" label="bech32"></q-tab>
       <q-tab name="lud17" icon="link" label="url (lud17)"></q-tab>
     </q-tabs>
-    <lnbits-qrcode :value="lnurl" class="rounded-borders"></lnbits-qrcode>
+    <lnbits-qrcode :value="lnurl" nfc="true"></lnbits-qrcode>
   </div>
 </template>
 
@@ -1044,42 +1087,22 @@
 
               <div
                 v-if="props.row.isIn && props.row.isPending && props.row.bolt11"
-                class="text-center q-my-lg"
               >
                 <div v-if="props.row.extra.fiat_payment_request">
-                  <a
+                  <lnbits-qrcode
+                    :value="props.row.extra.fiat_payment_request"
                     :href="props.row.extra.fiat_payment_request"
-                    target="_blank"
-                  >
-                    <lnbits-qrcode
-                      :value="props.row.extra.fiat_payment_request"
-                    ></lnbits-qrcode>
-                  </a>
+                    :show-buttons="false"
+                  ></lnbits-qrcode>
                 </div>
                 <div v-else>
-                  <a :href="'lightning:' + props.row.bolt11">
-                    <lnbits-qrcode
-                      :value="'lightning:' + props.row.bolt11.toUpperCase()"
-                    ></lnbits-qrcode>
-                  </a>
+                  <lnbits-qrcode
+                    :value="'lightning:' + props.row.bolt11.toUpperCase()"
+                    :href="'lightning:' + props.row.bolt11"
+                  ></lnbits-qrcode>
                 </div>
               </div>
-            </q-card-section>
-            <q-card-section>
-              <div class="row q-gutter-x-sm">
-                <q-btn
-                  v-if="
-                    props.row.isIn && props.row.isPending && props.row.bolt11
-                  "
-                  outline
-                  color="grey"
-                  @click="
-                    copyText(
-                      props.row.extra.fiat_payment_request || props.row.bolt11
-                    )
-                  "
-                  :label="$t('copy_invoice')"
-                ></q-btn>
+              <div class="row q-mt-md">
                 <q-btn
                   outline
                   color="grey"
@@ -1196,9 +1219,13 @@
           :endpoint="endpoint"
         >
           <template v-slot:actions>
-            <q-btn v-close-popup flat color="grey" class="q-ml-auto"
-              >Close</q-btn
-            >
+            <q-btn
+              v-close-popup
+              flat
+              color="grey"
+              class="q-ml-auto"
+              :label="$t('close')"
+            ></q-btn>
           </template>
         </lnbits-extension-settings-form>
       </q-card>
@@ -1282,10 +1309,10 @@
     <q-dialog v-model="showQRDialog">
       <q-card class="q-pa-md">
         <q-card-section>
-          <lnbits-qrcode :value="qrValue" :size="200"></lnbits-qrcode>
+          <lnbits-qrcode :value="qrValue"></lnbits-qrcode>
         </q-card-section>
         <q-card-actions align="right">
-          <q-btn flat label="Close" v-close-popup />
+          <q-btn flat :label="$t('close')" v-close-popup />
         </q-card-actions>
       </q-card>
     </q-dialog>