UI improvements (#2926)

This commit is contained in:
Tiago Vasconcelos 2025-02-07 08:09:15 +00:00 committed by GitHub
parent 9a1d707f54
commit 53b00c6d41
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
9 changed files with 121 additions and 23 deletions

View file

@ -60,10 +60,10 @@
<br />
<q-item tag="label" v-ripple>
<q-item-section>
<q-item-label v-text="$t('allow_creation_users')"></q-item-label>
<q-item-label v-text="$t('allow_creation_user')"></q-item-label>
<q-item-label
caption
v-text="$t('allow_creation_users_desc')"
v-text="$t('allow_creation_user_desc')"
></q-item-label>
</q-item-section>
<q-item-section avatar>

View file

@ -221,8 +221,8 @@
color="grey-5"
text-color="black"
size="xs"
icon="add"
style="position: relative; left: -20px; bottom: -10px"
icon="edit"
style="position: relative; left: -15px; bottom: -10px"
></q-btn>
<div class="text-subtitle1 q-mt-none q-mb-none">
{{ SITE_TITLE }} Wallet:

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -532,6 +532,9 @@ video {
word-break: break-word;
}
.q-card {
border-radius: 10px;
}
.q-card code {
overflow-wrap: break-word;
}

View file

@ -512,5 +512,7 @@ window.localisation.en = {
payments_count_in_out_chart: 'Count In/Out Chart',
reset_wallet_keys: 'Reset Keys',
reset_wallet_keys_desc:
'Reset the API keys for this wallet. This will invalidate the current keys and generate new ones.'
'Reset the API keys for this wallet. This will invalidate the current keys and generate new ones.',
view_list: 'View wallets as list',
view_column: 'View wallets as rows'
}

View file

@ -471,6 +471,7 @@ window.windowMixin = {
toggleSubs: true,
mobileSimple: true,
walletFlip: true,
showAddWalletDialog: {show: false},
borderSelection: null,
gradientSelection: null,
themeSelection: null,
@ -506,6 +507,23 @@ window.windowMixin = {
}
this.$q.localStorage.set('lnbits.walletFlip', this.walletFlip)
},
submitAddWallet() {
if (
this.showAddWalletDialog.name &&
this.showAddWalletDialog.name.length > 0
) {
LNbits.api.createWallet(
this.g.user.wallets[0],
this.showAddWalletDialog.name
)
this.showAddWalletDialog = {show: false}
} else {
this.$q.notify({
message: 'Please enter a name for the wallet',
color: 'negative'
})
}
},
simpleMobile() {
this.$q.localStorage.set('lnbits.mobileSimple', !this.mobileSimple)
this.refreshRoute()

View file

@ -207,6 +207,7 @@ video {
}
.q-card {
border-radius: 10px;
code {
overflow-wrap: break-word;
}

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>
<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"
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 ? 'keyboard_arrow_right' : 'keyboard_arrow_down'"
class="absolute-top-right"
:icon=" walletFlip ? 'view_list' : 'view_column'"
color="grey"
class=""
@click="flipWallets($q.screen.lt.md)"
></q-btn>
>
<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="{