lint
This commit is contained in:
parent
2eb8e1e095
commit
e876c98d5e
|
@ -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>
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
Loading…
Reference in a new issue