Merge branch 'card_flip' into all_ui_elements

This commit is contained in:
arcbtc
2024-12-20 01:43:08 +00:00
6 changed files with 103 additions and 75 deletions
-62
View File
@@ -25,68 +25,6 @@
} : ''"
>
{% endif %}
<q-scroll-area
v-if="!mobileSimple"
style="
height: 115px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
"
>
<div class="row no-wrap q-gutter-md q-pr-md">
<q-card
v-for="wallet in g.user.wallets"
:key="wallet.id"
class="wallet-list-card"
bordered
tag="a"
:href="wallet.url"
:style="
g.wallet && g.wallet.id === wallet.id
? `border: 1px solid ${primaryColor}; width: 250px; text-decoration: none;`
: 'width: 250px; text-decoration: none;'
"
:class="{
'active-wallet-card': g.wallet && g.wallet.id === wallet.id
}"
>
<q-card-section>
<div class="row items-center">
<q-avatar
size="lg"
:color="
g.wallet && g.wallet.id === wallet.id
? $q.dark.isActive
? 'primary'
: 'primary'
: 'grey-5'
"
>
<q-icon
name="flash_on"
:size="$q.dark.isActive ? '21px' : '20px'"
:color="$q.dark.isActive ? 'black' : 'grey-3'"
></q-icon>
</q-avatar>
<div
class="text-h6 q-pl-md"
:class="{
'text-bold': g.wallet && g.wallet.id === wallet.id
}"
v-text="wallet.name"
></div>
</div>
<div class="row items-center q-pt-sm">
<h6 class="q-my-none text-no-wrap">
<strong v-text="wallet.fsat"></strong>
<small> {{LNBITS_DENOMINATION}}</small>
</h6>
</div>
</q-card-section>
</q-card>
</div>
</q-scroll-area>
<div class="row">
<div class="col-lg-9 col-12">
<q-card
+9 -9
View File
File diff suppressed because one or more lines are too long
+14
View File
@@ -453,6 +453,7 @@ window.windowMixin = {
data() {
return {
toggleSubs: true,
walletFlip: true,
reactionChoice: 'confettiBothSides',
borderChoice: '',
gradientChoice:
@@ -472,6 +473,17 @@ window.windowMixin = {
},
methods: {
flipWallets(smallScreen) {
this.walletFlip = !this.walletFlip
if (this.walletFlip && smallScreen) {
this.g.visibleDrawer = false
}
this.$q.localStorage.set('lnbits.walletFlip', this.walletFlip)
},
simpleMobile() {
this.mobileSimple = !this.mobileSimple
this.$q.localStorage.set('lnbits.mobileSimple', this.mobileSimple)
},
changeColor(newValue) {
document.body.setAttribute('data-theme', newValue)
this.$q.localStorage.set('lnbits.theme', newValue)
@@ -700,6 +712,8 @@ window.windowMixin = {
}
await this.checkUsrInUrl()
this.themeParams()
this.walletFlip = this.$q.localStorage.getItem('lnbits.walletFlip')
this.mobileSimple = this.$q.localStorage.getItem('lnbits.mobileSimple')
}
}
+1 -1
View File
@@ -7,6 +7,7 @@ window.app = Vue.createApp({
origin: window.location.origin,
wallet: LNbits.map.wallet(window.wallet),
user: LNbits.map.user(window.user),
mobileSimple: false,
exportUrl: `${window.location.origin}/wallet?usr=${window.user.id}&wal=${window.wallet.id}`,
baseUrl: `${window.location.protocol}//${window.location.host}/`,
receive: {
@@ -50,7 +51,6 @@ window.app = Vue.createApp({
},
balance: parseInt(wallet.balance_msat / 1000),
fiatBalance: 0,
mobileSimple: false,
update: {
name: null,
currency: null
+79 -1
View File
@@ -158,7 +158,22 @@
show-if-above
:elevated="$q.screen.lt.md"
>
<lnbits-wallet-list :balance="balance"></lnbits-wallet-list>
<q-item-label
:style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
class="q-item__label q-item__label--header"
header
v-text="$t('wallets')"
></q-item-label>
<q-btn
flat
:icon=" walletFlip ? 'keyboard_arrow_right' : 'keyboard_arrow_down'"
class="absolute-top-right"
@click="flipWallets($q.screen.lt.md)"
></q-btn>
<lnbits-wallet-list
v-if="!walletFlip"
:balance="balance"
></lnbits-wallet-list>
<lnbits-manage
:show-admin="'{{LNBITS_ADMIN_UI}}' == 'True'"
@@ -172,6 +187,69 @@
{% endblock %} {% block page_container %}
<q-page-container>
<q-page class="q-px-md q-py-lg" :class="{'q-px-lg': $q.screen.gt.xs}">
<q-scroll-area
v-if="walletFlip"
style="
height: 130px;
width: 100%;
overflow-x: auto;
overflow-y: hidden;
"
>
<div class="row no-wrap q-gutter-md q-pr-md">
<q-card
v-for="wallet in g.user.wallets"
:key="wallet.id"
class="wallet-list-card"
bordered
tag="a"
:href="wallet.url"
:style="
g.wallet && g.wallet.id === wallet.id
? `border: 1px solid ${primaryColor}; width: 250px; text-decoration: none;`
: 'width: 250px; text-decoration: none;'
"
:class="{
'active-wallet-card': g.wallet && g.wallet.id === wallet.id
}"
>
<q-card-section>
<div class="row items-center">
<q-avatar
size="lg"
:color="
g.wallet && g.wallet.id === wallet.id
? $q.dark.isActive
? 'primary'
: 'primary'
: 'grey-5'
"
>
<q-icon
name="flash_on"
:size="$q.dark.isActive ? '21px' : '20px'"
:color="$q.dark.isActive ? 'black' : 'grey-3'"
></q-icon>
</q-avatar>
<div
class="text-h6 q-pl-md"
:class="{
'text-bold': g.wallet && g.wallet.id === wallet.id
}"
v-text="wallet.name"
></div>
</div>
<div class="row items-center q-pt-sm">
<h6 class="q-my-none text-no-wrap">
<strong v-text="wallet.fsat"></strong>
<small> {{LNBITS_DENOMINATION}}</small>
</h6>
</div>
</q-card-section>
</q-card>
</div>
</q-scroll-area>
{% block page %}{% endblock %}
</q-page>
</q-page-container>
-2
View File
@@ -4,7 +4,6 @@
dense
class="lnbits-drawer__q-list"
>
<q-item-label header v-text="$t('wallets')"></q-item-label>
<q-item
v-for="wallet in wallets"
:key="wallet.id"
@@ -53,7 +52,6 @@
side
v-show="activeWallet && activeWallet.id === wallet.id"
>
<q-icon name="chevron_right" color="grey-5" size="md"></q-icon>
</q-item-section>
</q-item>
<q-item clickable @click="showForm = !showForm">