refactor: theme options, includes fix bg on firefox with dialog (#3247)
Co-authored-by: dni ⚡ <office@dnilabs.com>
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user