feat: improve on lnbits-qrcode-scanner design (#3633)

lnbits/templates/base.html

@@ -34,7 +34,7 @@
     <div id="vue">
       <q-layout view="hHh lpR lfr" v-cloak>
         <lnbits-disclaimer v-if="g.user && !g.isPublicPage"></lnbits-disclaimer>
-        <lnbits-qrcode-scanner @detect="handleScan"></lnbits-qrcode-scanner>
+        <lnbits-qrcode-scanner :callback="g.scanner"></lnbits-qrcode-scanner>
         <lnbits-theme></lnbits-theme>
         <lnbits-header></lnbits-header>
         <lnbits-drawer v-if="g.user && !g.isPublicPage"></lnbits-drawer>

lnbits/templates/components/lnbits-qrcode-scanner.vue

@@ -1,5 +1,5 @@
 <template id="lnbits-qrcode-scanner">
-  <q-dialog v-model="g.showScanner" position="top">
+  <q-dialog v-model="showScanner" position="top">
     <q-card class="q-pa-lg q-pt-xl">
       <div class="text-center q-mb-lg">
         <qrcode-stream
@@ -10,7 +10,7 @@
       </div>
       <div class="row q-mt-lg">
         <q-btn
-          @click="g.showScanner = false"
+          @click="reset"
           flat
           color="grey"
           class="q-ml-auto"

lnbits/templates/pages/wallet.vue

@@ -162,10 +162,9 @@
                 unelevated
                 icon="qr_code_scanner"
                 color="secondary"
-                @click="openScanDialog(decodeQR)"
+                @click="g.scanner = decodeQR"
                 :disable="
-                  !this.g.wallet.canReceivePayments &&
-                  !this.g.wallet.canSendPayments
+                  !g.wallet.canReceivePayments && !g.wallet.canSendPayments
                 "
               >
                 <q-tooltip
@@ -861,7 +860,7 @@
     </q-tabs>
 
     <q-btn
-      @click="openScanDialog(decodeQR)"
+      @click="g.scanner = decodeQR"
       round
       unelevated
       size="35px"