mirror of
https://github.com/lnbits/lnbits-legend.git
synced 2025-03-15 12:20:21 +01:00
feat: frontend gradient option (#2561)
---------
Co-authored-by: dni ⚡ <office@dnilabs.com>
This commit is contained in:
Arc
GitHub
parent
eb37a064ad
commit
dd90dec768
5 changed files with 116 additions and 1 deletions
|
|
@ -373,6 +373,27 @@
|
|||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row q-mb-md">
|
||||
<div class="col-4">
|
||||
<span v-text="$t('gradient_background')"></span>
|
||||
</div>
|
||||
<div class="col-8">
|
||||
<q-btn
|
||||
dense
|
||||
flat
|
||||
round
|
||||
@click="toggleGradient"
|
||||
icon="gradient"
|
||||
size="sm"
|
||||
v-model="gradientChoice"
|
||||
>
|
||||
<q-tooltip
|
||||
><span v-text="$t('toggle_gradient')"></span
|
||||
></q-tooltip>
|
||||
</q-btn>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row q-mb-md">
|
||||
<div class="col-4">
|
||||
<span v-text="$t('toggle_darkmode')"></span>
|
||||
|
|
|
|||
2
lnbits/static/bundle.min.js
vendored
2
lnbits/static/bundle.min.js
vendored
File diff suppressed because one or more lines are too long
|
|
@ -241,6 +241,8 @@ window.localisation.en = {
|
|||
back: 'Back',
|
||||
logout: 'Logout',
|
||||
look_and_feel: 'Look and Feel',
|
||||
toggle_gradient: 'Toggle Gradient',
|
||||
gradient_background: 'Gradient Background',
|
||||
language: 'Language',
|
||||
color_scheme: 'Color Scheme',
|
||||
extension_cost: 'This release requires a payment of minimum %{cost} sats.',
|
||||
|
|
|
|||
|
|
@ -32,6 +32,42 @@ new Vue({
|
|||
toggleDarkMode: function () {
|
||||
this.$q.dark.toggle()
|
||||
this.$q.localStorage.set('lnbits.darkMode', this.$q.dark.isActive)
|
||||
if (!this.$q.dark.isActive && this.gradientChoice) {
|
||||
this.toggleGradient()
|
||||
}
|
||||
},
|
||||
applyGradient: function () {
|
||||
darkBgColor = this.$q.localStorage.getItem('lnbits.darkBgColor')
|
||||
primaryColor = this.$q.localStorage.getItem('lnbits.primaryColor')
|
||||
if (this.gradientChoice) {
|
||||
if (!this.$q.dark.isActive) {
|
||||
this.toggleDarkMode()
|
||||
}
|
||||
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 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;} }`
|
||||
document.head.appendChild(style)
|
||||
this.$q.localStorage.set('lnbits.gradientBg', true)
|
||||
} else {
|
||||
this.$q.localStorage.set('lnbits.gradientBg', false)
|
||||
}
|
||||
},
|
||||
toggleGradient: function () {
|
||||
this.gradientChoice = !this.gradientChoice
|
||||
this.applyGradient()
|
||||
if (!this.gradientChoice) {
|
||||
window.location.reload()
|
||||
}
|
||||
this.gradientChoice = this.$q.localStorage.getItem('lnbits.gradientBg')
|
||||
},
|
||||
reactionChoiceFunc: function () {
|
||||
this.$q.localStorage.set('lnbits.reactions', this.reactionChoice)
|
||||
|
|
@ -39,6 +75,24 @@ new Vue({
|
|||
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()
|
||||
}
|
||||
},
|
||||
setColors: function () {
|
||||
this.$q.localStorage.set(
|
||||
'lnbits.primaryColor',
|
||||
LNbits.utils.getPaletteColor('primary')
|
||||
)
|
||||
this.$q.localStorage.set(
|
||||
'lnbits.secondaryColor',
|
||||
LNbits.utils.getPaletteColor('secondary')
|
||||
)
|
||||
this.$q.localStorage.set(
|
||||
'lnbits.darkBgColor',
|
||||
LNbits.utils.getPaletteColor('dark')
|
||||
)
|
||||
},
|
||||
updateAccount: async function () {
|
||||
try {
|
||||
|
|
@ -118,5 +172,8 @@ new Vue({
|
|||
} catch (e) {
|
||||
LNbits.utils.notifyApiError(e)
|
||||
}
|
||||
if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
|
||||
this.applyGradient()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -425,6 +425,18 @@ window.LNbits = {
|
|||
converter.setFlavor('github')
|
||||
converter.setOption('simpleLineBreaks', true)
|
||||
return converter.makeHtml(text)
|
||||
},
|
||||
hexToRgb: function (hex) {
|
||||
return Quasar.utils.colors.hexToRgb(hex)
|
||||
},
|
||||
hexDarken: function (hex, percent) {
|
||||
return Quasar.utils.colors.lighten(hex, percent)
|
||||
},
|
||||
hexAlpha: function (hex, alpha) {
|
||||
return Quasar.utils.colors.changeAlpha(hex, alpha)
|
||||
},
|
||||
getPaletteColor: function (color) {
|
||||
return Quasar.utils.colors.getPaletteColor(color)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -435,6 +447,8 @@ window.windowMixin = {
|
|||
return {
|
||||
toggleSubs: true,
|
||||
reactionChoice: 'confettiBothSides',
|
||||
gradientChoice:
|
||||
this.$q.localStorage.getItem('lnbits.gradientBg') || false,
|
||||
isUserAuthorized: false,
|
||||
g: {
|
||||
offline: !navigator.onLine,
|
||||
|
|
@ -454,6 +468,25 @@ window.windowMixin = {
|
|||
document.body.setAttribute('data-theme', newValue)
|
||||
this.$q.localStorage.set('lnbits.theme', newValue)
|
||||
},
|
||||
applyGradient: function () {
|
||||
if (this.$q.localStorage.getItem('lnbits.gradientBg')) {
|
||||
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 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;} }`
|
||||
document.head.appendChild(style)
|
||||
}
|
||||
},
|
||||
copyText: function (text, message, position) {
|
||||
var notify = this.$q.notify
|
||||
Quasar.utils.copyToClipboard(text).then(function () {
|
||||
|
|
@ -517,6 +550,8 @@ window.windowMixin = {
|
|||
this.reactionChoice =
|
||||
this.$q.localStorage.getItem('lnbits.reactions') || 'confettiBothSides'
|
||||
|
||||
this.applyGradient()
|
||||
|
||||
this.g.allowedThemes = window.allowedThemes ?? ['bitcoin']
|
||||
|
||||
let locale = this.$q.localStorage.getItem('lnbits.lang')
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue