therwi/sunkkoma
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Made Select component to make using styled selects easier

Browse source
This commit is contained in:
Henry Jameson 2021-03-11 16:11:44 +02:00
parent 6281241b92
commit c6d4c20982
19 changed files with 240 additions and 317 deletions
Download patch file Download diff file Expand all files Collapse all files

70
src/components/settings_modal/tabs/theme_tab/theme_tab.vue
View file

@ -59,32 +59,23 @@
<template slot="before">
<div class="presets">
{{ $t('settings.presets') }}
<label
for="preset-switcher"
class="select"
<Select
id="preset-switcher"
v-model="selected"
class="preset-switcher"
>
<select
id="preset-switcher"
v-model="selected"
class="preset-switcher"
<option
v-for="style in availableStyles"
:key="style.name"
:value="style"
:style="{
backgroundColor: style[1] || (style.theme || style.source).colors.bg,
color: style[3] || (style.theme || style.source).colors.text
}"
>
<option
v-for="style in availableStyles"
:key="style.name"
:value="style"
:style="{
backgroundColor: style[1] || (style.theme || style.source).colors.bg,
color: style[3] || (style.theme || style.source).colors.text
}"
>
{{ style[0] || style.name }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
{{ style[0] || style.name }}
</option>
</Select>
</div>
</template>
</ExportImport>
@ -902,28 +893,19 @@
<div class="tab-header shadow-selector">
<div class="select-container">
{{ $t('settings.style.shadows.component') }}
<label
for="shadow-switcher"
class="select"
<Select
id="shadow-switcher"
v-model="shadowSelected"
class="shadow-switcher"
>
<select
id="shadow-switcher"
v-model="shadowSelected"
class="shadow-switcher"
<option
v-for="shadow in shadowsAvailable"
:key="shadow"
:value="shadow"
>
<option
v-for="shadow in shadowsAvailable"
:key="shadow"
:value="shadow"
>
{{ $t('settings.style.shadows.components.' + shadow) }}
</option>
</select>
<FAIcon
class="select-down-icon"
icon="chevron-down"
/>
</label>
{{ $t('settings.style.shadows.components.' + shadow) }}
</option>
</Select>
</div>
<div class="override">
<label