Rendering QR code only if there is data, plus loading indicator

This commit is contained in:
rockstardev 2019-03-09 09:26:09 -06:00
parent c0e28ce66e
commit 470ec3354e
2 changed files with 13 additions and 4 deletions

View file

@ -192,7 +192,7 @@
</form>
</div>
<div class="bp-view payment scan" id="scan">
<div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null }">
<div class="wrapBtnGroup" v-bind:class="{ invisible: lndModel === null || !scanDisplayQr }">
<div class="btnGroupLnd">
<button onclick="lndToggleBolt11()" v-bind:class="{ active: lndModel != null && lndModel.toggle === 0 }"
v-bind:title="$t('BOLT 11 Invoice')">
@ -205,11 +205,18 @@
</div>
</div>
<div class="payment__scan">
<img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon" />
<qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 0, color: {dark:'#000', light:'#f5f5f7'} }">
<img v-bind:src="srvModel.cryptoImage" class="qr_currency_icon"
v-if="scanDisplayQr" />
<qrcode v-bind:value="scanDisplayQr" :options="{ width: 256, margin: 0, color: {dark:'#000', light:'#f5f5f7'} }"
v-if="scanDisplayQr">
</qrcode>
<div class="payment__spinner qr_currency_icon" style="padding-right: 20px;">
<partial name="Checkout-Spinner" />
</div>
</div>
<div class="payment__details__instruction__open-wallet">
<div class="payment__details__instruction__open-wallet" v-if="scanDisplayQr">
<a class="payment__details__instruction__open-wallet__btn action-button" v-bind:href="srvModel.invoiceBitcoinUrl">
<span>{{$t("Open in wallet")}}</span>
</a>

View file

@ -9444,6 +9444,8 @@ strong {
.payment__scan {
position: relative;
text-align: center;
height: 256px;
margin-bottom: 5px;
}
.payment__scan__checkmark-wrapper {