hodl invoice

lnbits/templates/components/lnbits-payment-list.vue

@@ -487,55 +487,44 @@
               </div>
             </div>
           </lnbits-dialog>
-          <q-dialog v-model="hodlInvoice.show" position="top">
+          <lnbits-dialog
-            <q-card class="q-pa-sm q-pt-xl lnbits__dialog-card">
+            :show="hodlInvoice.show"
-              <q-card-section>
+            :cancel-label="$t('close')"
-                <q-item-label class="text-h6">
+            :action="{
-                  <span v-text="$t('hold_invoice')"></span>
+              handler: () => cancelHoldInvoice(hodlInvoice.payment.payment_hash),
-                </q-item-label>
+              label: $t('cancel_invoice'),
-                <q-item-label class="text-subtitle2">
+              color: 'grey',
-                  <span v-text="$t('hold_invoice_description')"></span>
+              closePopup: true
-                </q-item-label>
+            }"
-              </q-card-section>
+            :secondary-action="{
-              <q-card-section>
+              handler: () => settleHoldInvoice(hodlInvoice.preimage),
-                <q-input
+              label: $t('settle_invoice'),
-                  filled
+              color: 'grey',
-                  :label="$t('preimage')"
+              closePopup: true
-                  :hint="$t('preimage_hint')"
+            }"
-                  v-model="hodlInvoice.preimage"
+            @update:show="hodlInvoice.show = $event"
-                  dense
+          >
-                  autofocus
+            <q-card-section>
-                  @keyup.enter="settleHoldInvoice(hodlInvoice.preimage)"
+              <q-item-label class="text-h6">
-                >
+                <span v-text="$t('hold_invoice')"></span>
-                </q-input>
+              </q-item-label>
-              </q-card-section>
+              <q-item-label class="text-subtitle2">
-              <q-card-section class="row q-gutter-x-sm">
+                <span v-text="$t('hold_invoice_description')"></span>
-                <q-btn
+              </q-item-label>
-                  @click="settleHoldInvoice(hodlInvoice.preimage)"
+            </q-card-section>
-                  outline
+            <q-card-section>
-                  v-close-popup
+              <q-input
-                  color="grey"
+                filled
-                  :label="$t('settle_invoice')"
+                :label="$t('preimage')"
-                >
+                :hint="$t('preimage_hint')"
-                </q-btn>
+                v-model="hodlInvoice.preimage"
-                <q-btn
+                dense
-                  v-close-popup
+                autofocus
-                  outline
+                @keyup.enter="settleHoldInvoice(hodlInvoice.preimage)"
-                  color="grey"
+              >
-                  class="q-ml-sm"
+              </q-input>
-                  @click="cancelHoldInvoice(hodlInvoice.payment.payment_hash)"
+            </q-card-section>
-                  :label="$t('cancel_invoice')"
+          </lnbits-dialog>
-                ></q-btn>
-                <q-btn
-                  v-close-popup
-                  flat
-                  color="grey"
-                  class="q-ml-auto"
-                  :label="$t('close')"
-                ></q-btn>
-              </q-card-section>
-            </q-card>
-          </q-dialog>
         </q-tr>
       </template>
     </q-table>