commit: e876c98d5e7c3720bbe1977a33eb5cbe53471eee
parent 2eb8e1e09540242506e50d745bb860598595569d
Author: Henry Jameson <me@hjkos.com>
Date: Wed, 2 Oct 2024 16:30:07 +0300
lint
Diffstat:
3 files changed, 41 insertions(+), 32 deletions(-)
diff --git a/src/components/palette_editor/palette_editor.vue b/src/components/palette_editor/palette_editor.vue
@@ -15,14 +15,14 @@
class="btn button-default"
@click="importPalette"
>
- <FAIcon icon="file-import"/>
+ <FAIcon icon="file-import" />
{{ $t('settings.style.themes3.palette.import') }}
</button>
<button
class="btn button-default"
@click="exportPalette"
>
- <FAIcon icon="file-export"/>
+ <FAIcon icon="file-export" />
{{ $t('settings.style.themes3.palette.export') }}
</button>
</div>
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -1,16 +1,19 @@
<template>
- <div class="appearance-tab" :label="$t('settings.general')">
+ <div
+ class="appearance-tab"
+ :label="$t('settings.general')"
+ >
<div class="setting-item">
<h2>{{ $t('settings.theme') }}</h2>
<ul
- class="theme-list"
ref="themeList"
+ class="theme-list"
>
<button
class="button-default theme-preview"
data-theme-key="stock"
- @click="resetTheming"
:class="{ toggled: isStyleActive('stock') }"
+ @click="resetTheming"
>
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
<component
@@ -37,8 +40,8 @@
</button>
<button
v-for="style in availableStyles"
- :data-theme-key="style.key"
:key="style.key"
+ :data-theme-key="style.key"
class="button-default theme-preview"
:class="{ toggled: isThemeActive(style.key) }"
@click="setTheme(style.key)"
@@ -50,7 +53,7 @@
v-html="previewTheme(style.key, style.data)"
/>
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
- <preview :id="'theme-preview-' + style.key"/>
+ <preview :id="'theme-preview-' + style.key" />
<h4 class="theme-name">
{{ style.name }}
<span class="alert neutral version">{{ style.version }}</span>
@@ -61,9 +64,9 @@
<div class="palettes">
<button
v-for="p in availablePalettes"
+ :key="p.name"
class="btn button-default palette-entry"
:class="{ toggled: isPaletteActive(p.key) }"
- :key="p.name"
@click="() => setPalette(p.key)"
>
<label>
@@ -104,7 +107,7 @@
<code>px</code>
<code>rem</code>
</i18n-t>
- <br/>
+ <br>
<i18n-t
scope="global"
keypath="settings.text_size_tip2"
diff --git a/src/components/settings_modal/tabs/style_tab/style_tab.vue b/src/components/settings_modal/tabs/style_tab/style_tab.vue
@@ -58,13 +58,19 @@
{{ ' ' }}
</label>
<Select
- v-model="editedPalette"
id="palette-selector"
+ v-model="editedPalette"
>
- <option key="dark" value="dark">
+ <option
+ key="dark"
+ value="dark"
+ >
{{ $t('settings.style.themes3.palette.dark') }}
</option>
- <option key="light" value="light">
+ <option
+ key="light"
+ value="light"
+ >
{{ $t('settings.style.themes3.palette.light') }}
</option>
</Select>
@@ -78,8 +84,8 @@
{{ ' ' }}
</label>
<Select
- v-model="selectedComponentKey"
id="component-selector"
+ v-model="selectedComponentKey"
>
<option
v-for="key in componentKeys"
@@ -91,8 +97,8 @@
</Select>
</div>
<div
- class="variant-selector"
v-if="selectedComponentVariantsAll.length > 1"
+ class="variant-selector"
>
<label for="variant-selector">
{{ $t('settings.style.themes3.editor.variant_selector') }}
@@ -102,32 +108,32 @@
>
<option
v-for="variant in selectedComponentVariantsAll"
- :value="variant"
:key="'component-variant-' + variant"
+ :value="variant"
>
- {{ fallbackI18n($t(getVariantPath(selectedComponentName, variant)), variant) }}
+ {{ fallbackI18n($t(getVariantPath(selectedComponentName, variant)), variant) }}
</option>
</Select>
</div>
<div
- class="state-selector"
v-if="selectedComponentStates.length > 0"
+ class="state-selector"
>
<label>
{{ $t('settings.style.themes3.editor.states_selector') }}
</label>
<ul
class="state-selector-list"
- >
+ >
<li
v-for="state in selectedStates"
:key="'component-variant-' + state"
- >
+ >
<Checkbox
:value="selectedStates.has(state)"
- @update:modelValue="(v) => updateSelectedStates(state, v)"
- >
- {{ fallbackI18n($t(getStatePath(selectedComponentName, state)), state) }}
+ @update:modelValue="(v) => updateSelectedStates(state, v)"
+ >
+ {{ fallbackI18n($t(getStatePath(selectedComponentName, state)), state) }}
</Checkbox>
</li>
</ul>
@@ -141,10 +147,10 @@
<!-- eslint-enable vue/no-v-html vue/no-v-text-v-html-on-component -->
<ComponentPreview
class="component-preview"
- :showText="componentHas('Text')"
- :shadowControl="isShadowTabOpen"
- :previewClass="previewClass"
- :previewStyle="editorHintStyle"
+ :show-text="componentHas('Text')"
+ :shadow-control="isShadowTabOpen"
+ :preview-class="previewClass"
+ :preview-style="editorHintStyle"
:disabled="!editedSubShadow"
:shadow="editedSubShadow"
@update:shadow="({ axis, value }) => updateSubShadow(axis, value)"
@@ -156,9 +162,9 @@
:on-switch="onTabSwitch"
>
<div
+ key="main"
class="editor-tab"
:label="$t('settings.style.themes3.editor.main_tab')"
- key="main"
>
<ColorInput
v-model="editedBackgroundColor"
@@ -177,10 +183,10 @@
<Checkbox v-model="isOpacityPresent" />
</Tooltip>
<ColorInput
+ v-if="componentHas('Text')"
v-model="editedTextColor"
:label="$t('settings.style.themes3.editor.text_color')"
:disabled="!isTextColorPresent"
- v-if="componentHas('Text')"
/>
<Tooltip
v-if="componentHas('Text')"
@@ -225,10 +231,10 @@
<!-- spacer for missing checkbox -->
</div>
<ColorInput
+ v-if="componentHas('Link')"
v-model="editedLinkColor"
:label="$t('settings.style.themes3.editor.link_color')"
:disabled="!isLinkColorPresent"
- v-if="componentHas('Link')"
/>
<Tooltip
v-if="componentHas('Link')"
@@ -237,10 +243,10 @@
<Checkbox v-model="isLinkColorPresent" />
</Tooltip>
<ColorInput
+ v-if="componentHas('Icon')"
v-model="editedIconColor"
:label="$t('settings.style.themes3.editor.icon_color')"
:disabled="!isIconColorPresent"
- v-if="componentHas('Icon')"
/>
<Tooltip
v-if="componentHas('Icon')"
@@ -250,13 +256,13 @@
</Tooltip>
</div>
<div
+ key="shadow"
class="editor-tab shadow-tab"
:label="$t('settings.style.themes3.editor.shadows_tab')"
- key="shadow"
>
<Checkbox
- class="style-control"
v-model="isShadowPresent"
+ class="style-control"
>
{{ $t('settings.style.themes3.editor.include_in_rule') }}
</checkbox>
