mirror of
https://github.com/lnbits/lnbits.git
synced 2025-10-10 12:32:34 +02:00
step1 wallet card adjust
This commit is contained in:
arcbtc
@@ -34,31 +34,111 @@
|
|||||||
} : ''"
|
} : ''"
|
||||||
>
|
>
|
||||||
<q-card-section>
|
<q-card-section>
|
||||||
<h3 class="q-my-none text-no-wrap">
|
|
||||||
<strong v-text="formattedBalance"></strong>
|
|
||||||
<small> {{LNBITS_DENOMINATION}}</small>
|
|
||||||
<lnbits-update-balance
|
|
||||||
:wallet_id="this.g.wallet.id"
|
|
||||||
@credit-value="handleBalanceUpdate"
|
|
||||||
class="q-ml-md"
|
|
||||||
></lnbits-update-balance>
|
|
||||||
</h3>
|
|
||||||
<div class="row">
|
<div class="row">
|
||||||
<div class="col">
|
<div class="col-1" style="max-width: 30px">
|
||||||
<div v-if="g.wallet.currency">
|
<q-btn
|
||||||
|
v-if="g.wallet.currency"
|
||||||
|
@click="swapBalancePriority"
|
||||||
|
style="height: 50px"
|
||||||
|
class="q-mt-lg"
|
||||||
|
flat
|
||||||
|
dense
|
||||||
|
icon="swap_vert"
|
||||||
|
></q-btn>
|
||||||
|
</div>
|
||||||
|
<div class="col-11">
|
||||||
|
<div
|
||||||
|
class="column"
|
||||||
|
v-if="!isPrioritySwapped"
|
||||||
|
style="height: 100px"
|
||||||
|
>
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto">
|
||||||
|
<div class="text-h3 q-my-none text-no-wrap">
|
||||||
|
<strong v-text="formattedBalance"></strong>
|
||||||
|
<small> {{LNBITS_DENOMINATION}}</small>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<lnbits-update-balance
|
||||||
|
v-if="$q.screen.lt.lg"
|
||||||
|
:wallet_id="this.g.wallet.id"
|
||||||
|
:callback="updateBalanceCallback"
|
||||||
|
:small_btn="true"
|
||||||
|
></lnbits-update-balance>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<div v-if="g.wallet.currency && fiatTracking">
|
||||||
|
<span
|
||||||
|
class="text-h5 text-italic"
|
||||||
|
v-text="formattedFiatAmount"
|
||||||
|
style="opacity: 0.75"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="column"
|
||||||
|
v-if="isPrioritySwapped && fiatTracking"
|
||||||
|
style="height: 100px"
|
||||||
|
>
|
||||||
|
<div class="col-7">
|
||||||
|
<div class="row">
|
||||||
|
<div class="col-auto">
|
||||||
|
<div
|
||||||
|
v-if="g.wallet.currency"
|
||||||
|
class="text-h3 q-my-none text-no-wrap"
|
||||||
|
>
|
||||||
|
<strong
|
||||||
|
v-text="formattedFiatAmount"
|
||||||
|
></strong>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-auto">
|
||||||
|
<lnbits-update-balance
|
||||||
|
v-if="$q.screen.lt.lg"
|
||||||
|
:wallet_id="this.g.wallet.id"
|
||||||
|
:callback="updateBalanceCallback"
|
||||||
|
:small_btn="true"
|
||||||
|
></lnbits-update-balance>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="col-2">
|
||||||
|
<span
|
||||||
|
class="text-h5 text-italic"
|
||||||
|
style="opacity: 0.75"
|
||||||
|
v-text="formattedBalance + ' {{LNBITS_DENOMINATION}}'"
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="absolute-right q-pa-md" v-if="$q.screen.gt.md && g.wallet.currency && fiatTracking">
|
||||||
|
<div class="text-bold text-italic">
|
||||||
|
BTC Price
|
||||||
|
<span
|
||||||
|
:class="{'text-positive q-pl-xs': priceChange > 0, 'text-negative q-pl-xs': priceChange < 0}"
|
||||||
|
v-text="priceChange"
|
||||||
|
></span>
|
||||||
|
</div>
|
||||||
<span
|
<span
|
||||||
class="text-h5 text-italic"
|
class="text-bold text-italic"
|
||||||
v-text="formattedFiatBalance"
|
v-text="formattedExchange"
|
||||||
style="opacity: 0.75"
|
|
||||||
></span>
|
></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div class="col">
|
|
||||||
<q-btn
|
<q-btn
|
||||||
|
v-if="$q.screen.lt.md"
|
||||||
@click="mobileSimple = !mobileSimple"
|
@click="mobileSimple = !mobileSimple"
|
||||||
color="primary"
|
color="primary"
|
||||||
class="float-right lt-md"
|
class="q-ml-xl absolute-right"
|
||||||
|
dense
|
||||||
size="sm"
|
size="sm"
|
||||||
|
style="height: 20px; margin-top: 75px"
|
||||||
flat
|
flat
|
||||||
:icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
|
:icon="mobileSimple ? 'unfold_more' : 'unfold_less'"
|
||||||
:label="mobileSimple ? $t('more') : $t('less')"
|
:label="mobileSimple ? $t('more') : $t('less')"
|
||||||
@@ -71,7 +151,7 @@
|
|||||||
<q-btn
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
color="primary"
|
color="primary"
|
||||||
class="full-width"
|
class="q-mr-md"
|
||||||
@click="showParseDialog"
|
@click="showParseDialog"
|
||||||
:label="$t('paste_request')"
|
:label="$t('paste_request')"
|
||||||
></q-btn>
|
></q-btn>
|
||||||
@@ -80,7 +160,7 @@
|
|||||||
<q-btn
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
color="primary"
|
color="primary"
|
||||||
class="full-width"
|
class="q-mr-md"
|
||||||
@click="showReceiveDialog"
|
@click="showReceiveDialog"
|
||||||
:label="$t('create_invoice')"
|
:label="$t('create_invoice')"
|
||||||
></q-btn>
|
></q-btn>
|
||||||
@@ -89,14 +169,19 @@
|
|||||||
<q-btn
|
<q-btn
|
||||||
unelevated
|
unelevated
|
||||||
color="secondary"
|
color="secondary"
|
||||||
icon="photo_camera"
|
icon="qr_code_scanner"
|
||||||
@click="showCamera"
|
|
||||||
:label="$t('scan')"
|
:label="$t('scan')"
|
||||||
>
|
>
|
||||||
<q-tooltip
|
<q-tooltip
|
||||||
><span v-text="$t('camera_tooltip')"></span
|
><span v-text="$t('camera_tooltip')"></span
|
||||||
></q-tooltip>
|
></q-tooltip>
|
||||||
</q-btn>
|
</q-btn>
|
||||||
|
<lnbits-update-balance
|
||||||
|
v-if="$q.screen.gt.md"
|
||||||
|
:wallet_id="this.g.wallet.id"
|
||||||
|
:callback="updateBalanceCallback"
|
||||||
|
:small_btn="false"
|
||||||
|
></lnbits-update-balance>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</q-card>
|
</q-card>
|
||||||
|
|||||||
Reference in New Issue
Block a user