Michilis/lnbits
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI improvements (#2926)

Browse Source
This commit is contained in:
Tiago Vasconcelos
2025-02-07 10:09:15 +02:00
committed by GitHub
parent 9a1d707f54
commit 53b00c6d41
9 changed files with 121 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lnbits/templates/base.html
+90 -16
View File
@@ -16,6 +16,13 @@
src: url("{{ static_url_for('static', 'fonts/material-icons-v50.woff2') }}")
format('woff2');
}
.wallet-list-card {
margin-top: 1px;
margin-right: 1rem;
}
.wallet-list-card:first-child {
margin-left: 1px;
}
</style>
<title>{% block title %}{{ SITE_TITLE }}{% endblock %}</title>
<meta charset="utf-8" />
@@ -100,9 +107,8 @@
</q-badge>
<q-btn-dropdown
v-if="isUserAuthorized"
dense
flat
round
rounded
size="sm"
class="q-pl-sm"
>
@@ -171,18 +177,31 @@
show-if-above
:elevated="$q.screen.lt.md"
>
<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>
<q-item>
<q-item-section>
<q-item-label
:style="$q.dark.isActive ? 'color:rgba(255, 255, 255, 0.64)' : ''"
class="q-item__label q-item__label--header q-pa-none"
header
v-text="$t('wallets')"
></q-item-label>
</q-item-section>
<q-item-section side>
<q-btn
flat
:icon=" walletFlip ? 'view_list' : 'view_column'"
color="grey"
class=""
@click="flipWallets($q.screen.lt.md)"
>
<q-tooltip
><span
v-text="walletFlip ? $t('view_list') : $t('view_column')"
></span
></q-tooltip>
</q-btn>
</q-item-section>
</q-item>
<lnbits-wallet-list
v-if="!walletFlip"
:balance="balance"
@@ -207,9 +226,62 @@
width: 100%;
overflow-x: auto;
overflow-y: hidden;
mask-image: linear-gradient(
to right,
hsl(0 0% 0% / 1) 80%,
hsl(0 0% 0% / 0)
);
"
>
<div class="row no-wrap q-gutter-md q-pr-md">
<div class="row no-wrap q-pr-md">
<q-card class="wallet-list-card">
<q-card-section
class="flex flex-center column full-height text-center"
>
<div>
<q-btn
round
color="primary"
icon="add"
@click="showAddWalletDialog.show = true"
>
<q-tooltip
><span v-text="$t('add_wallet')"></span
></q-tooltip>
</q-btn>
<q-dialog
v-model="showAddWalletDialog.show"
persistent
@hide="showAddWalletDialog = {show: false}"
>
<q-card style="min-width: 350px">
<q-card-section>
<div class="text-h6">Wallet name</div>
</q-card-section>
<q-card-section class="q-pt-none">
<q-input
dense
v-model="showAddWalletDialog.name"
autofocus
@keyup.enter="submitAddWallet()"
></q-input>
</q-card-section>
<q-card-actions align="right" class="text-primary">
<q-btn flat label="Cancel" v-close-popup></q-btn>
<q-btn
flat
label="Add wallet"
v-close-popup
@click="submitAddWallet()"
></q-btn>
</q-card-actions>
</q-card>
</q-dialog>
</div>
</q-card-section>
</q-card>
<q-card
v-for="wallet in g.user.wallets"
:key="wallet.id"
@@ -219,7 +291,9 @@
style="text-decoration: none"
:style="
g.wallet && g.wallet.id === wallet.id
? `width: 250px; text-decoration: none; cursor: pointer;`
? `width: 250px; text-decoration: none; cursor: pointer; background-color: ${
$q.dark.isActive ? 'rgba(255, 255, 255, 0.08)' : 'rgba(0, 0, 0, 0.08)'
} !important;`
: 'width: 250px; text-decoration: none; border: 0px; cursor: pointer;'
"
:class="{