highperfocused/lnbits
1
0
Fork 0
mirror of https://github.com/lnbits/lnbits.git synced 2025-03-17 13:21:48 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/backgroundimage' into all_ui_elements

Browse Source
This commit is contained in:
arcbtc 2024-12-20 01:56:18 +00:00
commit 0fa8fca70e
5 changed files with 151 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
lnbits/core/templates/core/account.html
View File

@ -422,6 +422,22 @@
</q-btn>
</div>
</div>
<div class="row q-mb-md">
<div class="col-4">
<span v-text="$t('background_image')"></span>
</div>
<div class="col-8">
<q-input
v-model="backgroundImage"
:label="$t('background_image')"
@update:model-value="backgroundImageFunc"
>
<q-tooltip
><span v-text="$t('background_image')"></span
></q-tooltip>
</q-input>
</div>
</div>
<div class="row q-mb-md">
<div class="col-4">
<span v-text="$t('gradient_background')"></span>

5
lnbits/static/bundle.min.js vendored
View File

File diff suppressed because one or more lines are too long

1
lnbits/static/i18n/en.js
View File

@ -26,6 +26,7 @@ window.localisation.en = {
close_channel: 'Close Channel',
close: 'Close',
restart: 'Restart server',
background_image: 'Background Image',
save: 'Save',
save_tooltip: 'Save your changes',
credit_debit: 'Credit / Debit',

99
lnbits/static/js/account.js
View File

@ -12,7 +12,12 @@ window.app = Vue.createApp({
'confettiFireworks',
'confettiStars'
],
borderOptions: ['retro-border', 'hard-border', 'no-border'],
borderOptions: [
'retro-border',
'hard-border',
'neon-border',
'no-border'
],
tab: 'user',
credentialsData: {
show: false,
@ -40,28 +45,72 @@ window.app = Vue.createApp({
}
},
applyGradient() {
darkBgColor = this.$q.localStorage.getItem('lnbits.darkBgColor')
primaryColor = this.$q.localStorage.getItem('lnbits.primaryColor')
if (this.gradientChoice) {
this.$q.localStorage.set('lnbits.gradientBg', this.gradientChoice)
if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
if (!this.$q.dark.isActive) {
this.toggleDarkMode()
}
this.setColors()
darkBgColor = this.$q.localStorage.getItem('lnbits.darkBgColor')
primaryColor = this.$q.localStorage.getItem('lnbits.primaryColor')
const gradientStyle = `linear-gradient(to bottom right, ${LNbits.utils.hexDarken(String(primaryColor), -70)}, #0a0a0a)`
document.body.style.setProperty(
'background-image',
gradientStyle,
'important'
)
const gradientStyleCards = `background-color: ${LNbits.utils.hexAlpha(String(darkBgColor), 0.4)} !important`
const gradientStyleCards = `background-color: ${LNbits.utils.hexAlpha(String(darkBgColor), 0.55)} !important`
const style = document.createElement('style')
style.innerHTML =
`body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark), body.body${this.$q.dark.isActive ? '--dark' : ''} .q-header, body.body${this.$q.dark.isActive ? '--dark' : ''} .q-drawer { ${gradientStyleCards} }` +
`body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"].body--dark{background: ${LNbits.utils.hexDarken(String(primaryColor), -88)} !important; }` +
`[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card--dark{background: ${String(darkBgColor)} !important;} }`
style.innerHTML = `
body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark),
body.body${this.$q.dark.isActive ? '--dark' : ''} .q-header,
body.body${this.$q.dark.isActive ? '--dark' : ''} .q-drawer,
body.body${this.$q.dark.isActive ? '--dark' : ''} .q-tab-panels {
${gradientStyleCards}
}
body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"].body--dark {
background: ${LNbits.utils.hexDarken(String(primaryColor), -88)} !important;
}
[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card--dark {
background: ${String(darkBgColor)} !important;
}
`
document.head.appendChild(style)
}
},
applyBackgroundImage() {
if (this.backgroundImage) {
this.$q.localStorage.set('lnbits.backgroundImage', this.backgroundImage)
this.gradientChoice = true
this.applyGradient()
}
let bgImage = this.$q.localStorage.getItem('lnbits.backgroundImage')
if (bgImage) {
this.backgroundImage = bgImage
const style = document.createElement('style')
style.innerHTML = `
body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"]::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(${bgImage});
background-size: cover;
filter: blur(8px);
z-index: -1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-page-container {
backdrop-filter: none; /* Ensure the page content is not affected */
}`
document.head.appendChild(style)
this.$q.localStorage.set('lnbits.gradientBg', true)
} else {
this.$q.localStorage.set('lnbits.gradientBg', false)
}
},
applyBorder() {
@ -74,6 +123,9 @@ window.app = Vue.createApp({
if (borderStyle == 'hard-border') {
borderStyleCSS = `box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px #ffffff47; border: none;`
}
if (borderStyle == 'neon-border') {
borderStyleCSS = `border: 2px solid ${this.$q.localStorage.getItem('lnbits.primaryColor')}; box-shadow: none;`
}
if (borderStyle == 'no-border') {
borderStyleCSS = `box-shadow: none; border: none;`
}
@ -87,6 +139,8 @@ window.app = Vue.createApp({
toggleGradient() {
this.gradientChoice = !this.gradientChoice
this.applyGradient()
this.$q.localStorage.set('lnbits.backgroundImage', '')
this.applyBorder()
if (!this.gradientChoice) {
window.location.reload()
}
@ -95,13 +149,17 @@ window.app = Vue.createApp({
reactionChoiceFunc() {
this.$q.localStorage.set('lnbits.reactions', this.reactionChoice)
},
changeColor(newValue) {
backgroundImageFunc() {
this.$q.localStorage.set('lnbits.backgroundImage', this.backgroundImage)
this.applyBackgroundImage()
},
changeColor: function (newValue) {
document.body.setAttribute('data-theme', newValue)
this.$q.localStorage.set('lnbits.theme', newValue)
this.setColors()
if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
this.applyGradient()
}
this.applyGradient()
this.applyBackgroundImage()
this.applyBorder()
},
async updateAccount() {
try {
@ -208,15 +266,12 @@ window.app = Vue.createApp({
} catch (e) {
LNbits.utils.notifyApiError(e)
}
if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
this.applyGradient()
}
if (this.$q.localStorage.getItem('lnbits.border')) {
this.applyBorder()
}
const hash = window.location.hash.replace('#', '')
if (hash) {
this.tab = hash
}
this.applyGradient()
this.applyBackgroundImage()
this.applyBorder()
}
})

57
lnbits/static/js/base.js
View File

@ -456,6 +456,7 @@ window.windowMixin = {
walletFlip: true,
reactionChoice: 'confettiBothSides',
borderChoice: '',
backgroundImage: '',
gradientChoice:
this.$q.localStorage.getItem('lnbits.gradientBg') || false,
isUserAuthorized: false,
@ -499,12 +500,54 @@ window.windowMixin = {
gradientStyle,
'important'
)
const gradientStyleCards = `background-color: ${LNbits.utils.hexAlpha(String(darkBgColor), 0.4)} !important`
const gradientStyleCards = `background-color: ${LNbits.utils.hexAlpha(String(darkBgColor), 0.55)} !important`
const style = document.createElement('style')
style.innerHTML =
`body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark), body.body${this.$q.dark.isActive ? '--dark' : ''} .q-header, body.body${this.$q.dark.isActive ? '--dark' : ''} .q-drawer { ${gradientStyleCards} }` +
`body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"].body--dark{background: ${LNbits.utils.hexDarken(String(primaryColor), -88)} !important; }` +
`[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card--dark{background: ${String(darkBgColor)} !important;} }`
style.innerHTML = `
body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card:not(.q-dialog .q-card, .lnbits__dialog-card, .q-dialog-plugin--dark),
body.body${this.$q.dark.isActive ? '--dark' : ''} .q-header,
body.body${this.$q.dark.isActive ? '--dark' : ''} .q-drawer,
body.body${this.$q.dark.isActive ? '--dark' : ''} .q-tab-panels {
${gradientStyleCards}
}
body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"].body--dark {
background: ${LNbits.utils.hexDarken(String(primaryColor), -88)} !important;
}
[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-card--dark {
background: ${String(darkBgColor)} !important;
}
`
document.head.appendChild(style)
}
},
applyBackgroundImage() {
if (this.backgroundImage) {
this.$q.localStorage.set('lnbits.backgroundImage', this.backgroundImage)
}
let bgImage = this.$q.localStorage.getItem('lnbits.backgroundImage')
if (bgImage) {
const style = document.createElement('style')
style.innerHTML = `
body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"]::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(${bgImage});
background-size: cover;
filter: blur(8px);
z-index: -1;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
body[data-theme="${this.$q.localStorage.getItem('lnbits.theme')}"] .q-page-container {
backdrop-filter: none; /* Ensure the page content is not affected */
}`
document.head.appendChild(style)
}
},
@ -522,6 +565,9 @@ window.windowMixin = {
if (borderStyle == 'hard-border') {
borderStyleCSS = `box-shadow: 0 0 0 1px rgba(0,0,0,.12), 0 0 0 1px #ffffff47; border: none;`
}
if (borderStyle == 'neon-border') {
borderStyleCSS = `border: 2px solid ${this.$q.localStorage.getItem('lnbits.primaryColor')}; box-shadow: none;`
}
if (borderStyle == 'no-border') {
borderStyleCSS = `box-shadow: none; border: none;`
}
@ -698,6 +744,7 @@ window.windowMixin = {
this.applyGradient()
this.applyBorder()
this.applyBackgroundImage()
if (window.user) {
this.g.user = Object.freeze(window.LNbits.map.user(window.user))