refactor: theme options, includes fix bg on firefox with dialog (#3247)

Co-authored-by: dni  <office@dnilabs.com>
This commit is contained in:
Arc
2025-07-11 12:39:02 +02:00
committed by dni ⚡
co-authored by dni ⚡
parent 6563610b6c
commit b0d0901969
13 changed files with 424 additions and 937 deletions
+28 -28
View File
@@ -368,89 +368,89 @@
</div>
<div class="col-8">
<q-btn
v-if="g.allowedThemes.includes('classic')"
v-if="allowedThemes.includes('classic')"
dense
flat
@click="themeChoiceFunc('classic')"
@click="changeTheme('classic')"
icon="circle"
color="deep-purple"
size="md"
><q-tooltip>classic</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('bitcoin')"
v-if="allowedThemes.includes('bitcoin')"
dense
flat
@click="themeChoiceFunc('bitcoin')"
@click="changeTheme('bitcoin')"
icon="circle"
color="deep-orange"
size="md"
><q-tooltip>bitcoin</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('mint')"
v-if="allowedThemes.includes('mint')"
dense
flat
@click="themeChoiceFunc('mint')"
@click="changeTheme('mint')"
icon="circle"
color="green"
size="md"
><q-tooltip>mint</q-tooltip> </q-btn
><q-btn
v-if="g.allowedThemes.includes('autumn')"
v-if="allowedThemes.includes('autumn')"
dense
flat
@click="themeChoiceFunc('autumn')"
@click="changeTheme('autumn')"
icon="circle"
color="brown"
size="md"
><q-tooltip>autumn</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('monochrome')"
v-if="allowedThemes.includes('monochrome')"
dense
flat
@click="themeChoiceFunc('monochrome')"
@click="changeTheme('monochrome')"
icon="circle"
color="grey"
size="md"
><q-tooltip>monochrome</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('salvador')"
v-if="allowedThemes.includes('salvador')"
dense
flat
@click="themeChoiceFunc('salvador')"
@click="changeTheme('salvador')"
icon="circle"
color="blue-10"
size="md"
><q-tooltip>elSalvador</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('freedom')"
v-if="allowedThemes.includes('freedom')"
dense
flat
@click="themeChoiceFunc('freedom')"
@click="changeTheme('freedom')"
icon="circle"
color="pink-13"
size="md"
><q-tooltip>freedom</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('cyber')"
v-if="allowedThemes.includes('cyber')"
dense
flat
@click="themeChoiceFunc('cyber')"
@click="changeTheme('cyber')"
icon="circle"
color="light-green-9"
size="md"
><q-tooltip>cyber</q-tooltip>
</q-btn>
<q-btn
v-if="g.allowedThemes.includes('flamingo')"
v-if="allowedThemes.includes('flamingo')"
dense
flat
@click="themeChoiceFunc('flamingo')"
@click="changeTheme('flamingo')"
icon="circle"
color="pink-3"
size="md"
@@ -464,9 +464,9 @@
</div>
<div class="col-8">
<q-input
v-model="bgimageSelection"
v-model="bgimageChoice"
:label="$t('background_image')"
@update:model-value="bgimageChoiceFunc"
@update:model-value="applyBackgroundImage"
>
<q-tooltip
><span v-text="$t('background_image')"></span
@@ -479,19 +479,18 @@
<span v-text="$t('gradient_background')"></span>
</div>
<div class="col-8">
<q-btn
<q-toggle
dense
flat
round
@click="toggleGradient"
icon="gradient"
size="sm"
v-model="gradientChoice"
@update:model-value="applyGradient"
>
<q-tooltip
><span v-text="$t('toggle_gradient')"></span
></q-tooltip>
</q-btn>
</q-toggle>
</div>
</div>
@@ -500,10 +499,11 @@
<span v-text="$t('toggle_darkmode')"></span>
</div>
<div class="col-8">
<q-btn
<q-toggle
dense
flat
round
v-model="darkChoice"
@click="toggleDarkMode"
:icon="($q.dark.isActive) ? 'brightness_3' : 'wb_sunny'"
size="sm"
@@ -511,7 +511,7 @@
<q-tooltip
><span v-text="$t('toggle_darkmode')"></span
></q-tooltip>
</q-btn>
</q-toggle>
</div>
</div>
<div class="row q-mb-md">
@@ -520,7 +520,7 @@
</div>
<div class="col-8">
<q-select
v-model="borderSelection"
v-model="borderChoice"
:options="borderOptions"
label="Borders"
@update:model-value="applyBorder"
@@ -548,7 +548,7 @@
</div>
<div class="col-8">
<q-select
v-model="reactionSelection"
v-model="reactionChoice"
:options="reactionOptions"
label="Reactions"
@update:model-value="reactionChoiceFunc"