change UI for create invoice dialog

lnbits/core/templates/core/wallet.html

@@ -319,39 +319,67 @@
               <b v-text="receive.lnurl.domain"></b> is requesting an invoice:
             </p>
             {% if LNBITS_DENOMINATION != 'sats' %}
-            <q-input
-              filled
-              dense
-              v-model.number="receive.data.amount"
-              :label="$t('amount')+' ({{LNBITS_DENOMINATION}}) *'"
-              mask="#.##"
-              fill-mask="0"
-              reverse-fill-mask
-              :min="receive.minMax[0]"
-              :max="receive.minMax[1]"
-              :readonly="receive.lnurl && receive.lnurl.fixed"
-            ></q-input>
+            <q-card-section class="flex justify-center q-pa-none q-my-xl">
+              <q-input
+                borderless
+                class="editable-price"
+                v-model.number="receive.data.amount"
+                :hint="$t('amount')+' ({{LNBITS_DENOMINATION}}) *'"
+                mask="#.##"
+                fill-mask="0"
+                reverse-fill-mask
+                :min="receive.minMax[0]"
+                :max="receive.minMax[1]"
+                :readonly="receive.lnurl && receive.lnurl.fixed"
+              ></q-input>
+            </q-card-section>
+            <q-separator></q-separator>
             {% else %}
-            <q-select
-              filled
-              dense
-              v-model="receive.unit"
-              type="text"
-              :label="$t('unit')"
-              :options="receive.units"
-            ></q-select>
-            <q-input
-              ref="setAmount"
-              filled
-              :pattern="receive.unit === 'sat' ? '\\d*' : '\\d*\\.?\\d*'"
-              inputmode="numeric"
-              dense
-              v-model.number="receive.data.amount"
-              :label="$t('amount') + ' (' + receive.unit + ') *'"
-              :min="receive.minMax[0]"
-              :max="receive.minMax[1]"
-              :readonly="receive.lnurl && receive.lnurl.fixed"
-            ></q-input>
+            <q-card-section class="flex justify-center q-pa-none q-my-xl">
+              <div><span v-text="receiveDisplayFormatted"></span></div>
+              <div class="full-width text-center row">
+                <div class="col-2 self-end">
+                  <span
+                    style="font-size: 2.5rem"
+                    class="text-grey-5 text-weight-light"
+                    v-if="receive.unit != 'sat'"
+                    v-text="currencySymbol"
+                  ></span>
+                </div>
+                <q-input
+                  ref="setAmount"
+                  borderless
+                  class="col editable-price"
+                  :pattern="receive.unit === 'sat' ? '\\d*' : '\\d*\\.?\\d*'"
+                  inputmode="numeric"
+                  v-model.number="receive.data.amount"
+                  :hint="$t('amount') + ' (' + receive.unit + ') *'"
+                  :min="receive.minMax[0]"
+                  :max="receive.minMax[1]"
+                  :readonly="receive.lnurl && receive.lnurl.fixed"
+                >
+                </q-input>
+                <div class="col-2 self-end">
+                  <span
+                    style="font-size: 2rem"
+                    class="text-weight-light text-grey-5"
+                    v-if="receive.unit === 'sat'"
+                    >sat</span
+                  >
+                </div>
+              </div>
+            </q-card-section>
+            <q-separator></q-separator>
+            <q-card-section class="q-pa-none q-mt-lg">
+              <q-select
+                dense
+                filled
+                v-model="receive.unit"
+                type="text"
+                :label="$t('unit')"
+                :options="receive.units"
+              ></q-select>
+            </q-card-section>
             {% endif %}
 
             <q-input

lnbits/static/css/base.css

@@ -573,3 +573,15 @@ video {
 .q-dialog__inner--minimized {
   padding: 12px;
 }
+
+.editable-price input {
+  text-align: center;
+  appearance: textfield;
+  -moz-appearance: textfield;
+  font-size: 3rem;
+  margin: 0 auto;
+}
+.editable-price input::-webkit-outer-spin-button,
+.editable-price input ::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+}

lnbits/static/js/wallet.js

@@ -91,6 +91,12 @@ window.WalletPageLogic = {
     },
     wallet() {
       return this.g.wallet
+    },
+    currencySymbol() {
+      return LNbits.utils
+        .formatCurrency(0, this.receive.unit)
+        .replace(/[\d.\s]/g, '')
+        .trim()
     }
   },
   methods: {
@@ -113,10 +119,12 @@ window.WalletPageLogic = {
       this.receive.paymentHash = null
       this.receive.data.amount = null
       this.receive.data.memo = null
-      this.receive.unit = 'sat'
+      this.receive.unit = this.g.wallet.currency ?? 'sat'
       this.receive.minMax = [0, 2100000000000000]
       this.receive.lnurl = null
-      this.focusInput('setAmount')
+      this.$nextTick(() => {
+        this.focusInput('setAmount')
+      })
     },
     onReceiveDialogHide() {
       if (this.hasNfc) {

lnbits/static/scss/base.scss

@@ -246,3 +246,18 @@ video {
 .q-dialog__inner--minimized {
   padding: 12px;
 }
+
+.editable-price {
+  & input {
+    text-align: center;
+    appearance: textfield;
+    -moz-appearance: textfield;
+    font-size: 3rem;
+    margin: 0 auto;
+
+    &::-webkit-outer-spin-button,
+      ::-webkit-inner-spin-button {
+        -webkit-appearance: none;
+      }
+  }
+}