forked from AkkomaGang/akkoma-fe
595 lines
20 KiB
Vue
595 lines
20 KiB
Vue
<template>
|
|
<div class="style-switcher">
|
|
<div class="presets-container">
|
|
<div class="save-load">
|
|
<export-import
|
|
:export-object="exportedTheme"
|
|
:export-label="$t("settings.export_theme")"
|
|
:import-label="$t("settings.import_theme")"
|
|
:import-failed-text="$t("settings.invalid_theme_imported")"
|
|
:on-import="onImport"
|
|
:validator="importValidator"
|
|
>
|
|
<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"
|
|
>
|
|
<option
|
|
v-for="style in availableStyles"
|
|
:key="style.name"
|
|
:value="style"
|
|
:style="{
|
|
backgroundColor: style[1] || style.theme.colors.bg,
|
|
color: style[3] || style.theme.colors.text
|
|
}"
|
|
>
|
|
{{ style[0] || style.name }}
|
|
</option>
|
|
</select>
|
|
<i class="icon-down-open" />
|
|
</label>
|
|
</div>
|
|
</template>
|
|
</export-import>
|
|
</div>
|
|
<div class="save-load-options">
|
|
<span class="keep-option">
|
|
<input
|
|
id="keep-color"
|
|
v-model="keepColor"
|
|
type="checkbox"
|
|
>
|
|
<label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label>
|
|
</span>
|
|
<span class="keep-option">
|
|
<input
|
|
id="keep-shadows"
|
|
v-model="keepShadows"
|
|
type="checkbox"
|
|
>
|
|
<label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label>
|
|
</span>
|
|
<span class="keep-option">
|
|
<input
|
|
id="keep-opacity"
|
|
v-model="keepOpacity"
|
|
type="checkbox"
|
|
>
|
|
<label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label>
|
|
</span>
|
|
<span class="keep-option">
|
|
<input
|
|
id="keep-roundness"
|
|
v-model="keepRoundness"
|
|
type="checkbox"
|
|
>
|
|
<label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label>
|
|
</span>
|
|
<span class="keep-option">
|
|
<input
|
|
id="keep-fonts"
|
|
v-model="keepFonts"
|
|
type="checkbox"
|
|
>
|
|
<label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label>
|
|
</span>
|
|
<p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="preview-container">
|
|
<preview :style="previewRules" />
|
|
</div>
|
|
|
|
<keep-alive>
|
|
<tab-switcher key="style-tweak">
|
|
<div
|
|
:label="$t('settings.style.common_colors._tab_label')"
|
|
class="color-container"
|
|
>
|
|
<div class="tab-header">
|
|
<p>{{ $t('settings.theme_help') }}</p>
|
|
<button
|
|
class="btn"
|
|
@click="clearOpacity"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_opacity') }}
|
|
</button>
|
|
<button
|
|
class="btn"
|
|
@click="clearV1"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<p>{{ $t('settings.theme_help_v2_1') }}</p>
|
|
<h4>{{ $t('settings.style.common_colors.main') }}</h4>
|
|
<div class="color-item">
|
|
<ColorInput
|
|
v-model="bgColorLocal"
|
|
name="bgColor"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="bgOpacityLocal"
|
|
name="bgOpacity"
|
|
:fallback="previewTheme.opacity.bg || 1"
|
|
/>
|
|
<ColorInput
|
|
v-model="textColorLocal"
|
|
name="textColor"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgText" />
|
|
<ColorInput
|
|
v-model="linkColorLocal"
|
|
name="linkColor"
|
|
:label="$t('settings.links')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgLink" />
|
|
</div>
|
|
<div class="color-item">
|
|
<ColorInput
|
|
v-model="fgColorLocal"
|
|
name="fgColor"
|
|
:label="$t('settings.foreground')"
|
|
/>
|
|
<ColorInput
|
|
v-model="fgTextColorLocal"
|
|
name="fgTextColor"
|
|
:label="$t('settings.text')"
|
|
:fallback="previewTheme.colors.fgText"
|
|
/>
|
|
<ColorInput
|
|
v-model="fgLinkColorLocal"
|
|
name="fgLinkColor"
|
|
:label="$t('settings.links')"
|
|
:fallback="previewTheme.colors.fgLink"
|
|
/>
|
|
<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
|
|
</div>
|
|
<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
|
|
<div class="color-item">
|
|
<ColorInput
|
|
v-model="cRedColorLocal"
|
|
name="cRedColor"
|
|
:label="$t('settings.cRed')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgRed" />
|
|
<ColorInput
|
|
v-model="cBlueColorLocal"
|
|
name="cBlueColor"
|
|
:label="$t('settings.cBlue')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgBlue" />
|
|
</div>
|
|
<div class="color-item">
|
|
<ColorInput
|
|
v-model="cGreenColorLocal"
|
|
name="cGreenColor"
|
|
:label="$t('settings.cGreen')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgGreen" />
|
|
<ColorInput
|
|
v-model="cOrangeColorLocal"
|
|
name="cOrangeColor"
|
|
:label="$t('settings.cOrange')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.bgOrange" />
|
|
</div>
|
|
<p>{{ $t('settings.theme_help_v2_2') }}</p>
|
|
</div>
|
|
|
|
<div
|
|
:label="$t('settings.style.advanced_colors._tab_label')"
|
|
class="color-container"
|
|
>
|
|
<div class="tab-header">
|
|
<p>{{ $t('settings.theme_help') }}</p>
|
|
<button
|
|
class="btn"
|
|
@click="clearOpacity"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_opacity') }}
|
|
</button>
|
|
<button
|
|
class="btn"
|
|
@click="clearV1"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
|
|
<ColorInput
|
|
v-model="alertErrorColorLocal"
|
|
name="alertError"
|
|
:label="$t('settings.style.advanced_colors.alert_error')"
|
|
:fallback="previewTheme.colors.alertError"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.alertError" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
|
|
<ColorInput
|
|
v-model="badgeNotificationColorLocal"
|
|
name="badgeNotification"
|
|
:label="$t('settings.style.advanced_colors.badge_notification')"
|
|
:fallback="previewTheme.colors.badgeNotification"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
|
|
<ColorInput
|
|
v-model="panelColorLocal"
|
|
name="panelColor"
|
|
:fallback="fgColorLocal"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="panelOpacityLocal"
|
|
name="panelOpacity"
|
|
:fallback="previewTheme.opacity.panel || 1"
|
|
/>
|
|
<ColorInput
|
|
v-model="panelTextColorLocal"
|
|
name="panelTextColor"
|
|
:fallback="previewTheme.colors.panelText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio
|
|
:contrast="previewContrast.panelText"
|
|
large="1"
|
|
/>
|
|
<ColorInput
|
|
v-model="panelLinkColorLocal"
|
|
name="panelLinkColor"
|
|
:fallback="previewTheme.colors.panelLink"
|
|
:label="$t('settings.links')"
|
|
/>
|
|
<ContrastRatio
|
|
:contrast="previewContrast.panelLink"
|
|
large="1"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
|
|
<ColorInput
|
|
v-model="topBarColorLocal"
|
|
name="topBarColor"
|
|
:fallback="fgColorLocal"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<ColorInput
|
|
v-model="topBarTextColorLocal"
|
|
name="topBarTextColor"
|
|
:fallback="previewTheme.colors.topBarText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.topBarText" />
|
|
<ColorInput
|
|
v-model="topBarLinkColorLocal"
|
|
name="topBarLinkColor"
|
|
:fallback="previewTheme.colors.topBarLink"
|
|
:label="$t('settings.links')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.topBarLink" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
|
|
<ColorInput
|
|
v-model="inputColorLocal"
|
|
name="inputColor"
|
|
:fallback="fgColorLocal"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="inputOpacityLocal"
|
|
name="inputOpacity"
|
|
:fallback="previewTheme.opacity.input || 1"
|
|
/>
|
|
<ColorInput
|
|
v-model="inputTextColorLocal"
|
|
name="inputTextColor"
|
|
:fallback="previewTheme.colors.inputText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.inputText" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
|
|
<ColorInput
|
|
v-model="btnColorLocal"
|
|
name="btnColor"
|
|
:fallback="fgColorLocal"
|
|
:label="$t('settings.background')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="btnOpacityLocal"
|
|
name="btnOpacity"
|
|
:fallback="previewTheme.opacity.btn || 1"
|
|
/>
|
|
<ColorInput
|
|
v-model="btnTextColorLocal"
|
|
name="btnTextColor"
|
|
:fallback="previewTheme.colors.btnText"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ContrastRatio :contrast="previewContrast.btnText" />
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
|
|
<ColorInput
|
|
v-model="borderColorLocal"
|
|
name="borderColor"
|
|
:fallback="previewTheme.colors.border"
|
|
:label="$t('settings.style.common.color')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="borderOpacityLocal"
|
|
name="borderOpacity"
|
|
:fallback="previewTheme.opacity.border || 1"
|
|
/>
|
|
</div>
|
|
<div class="color-item">
|
|
<h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
|
|
<ColorInput
|
|
v-model="faintColorLocal"
|
|
name="faintColor"
|
|
:fallback="previewTheme.colors.faint || 1"
|
|
:label="$t('settings.text')"
|
|
/>
|
|
<ColorInput
|
|
v-model="faintLinkColorLocal"
|
|
name="faintLinkColor"
|
|
:fallback="previewTheme.colors.faintLink"
|
|
:label="$t('settings.links')"
|
|
/>
|
|
<ColorInput
|
|
v-model="panelFaintColorLocal"
|
|
name="panelFaintColor"
|
|
:fallback="previewTheme.colors.panelFaint"
|
|
:label="$t('settings.style.advanced_colors.panel_header')"
|
|
/>
|
|
<OpacityInput
|
|
v-model="faintOpacityLocal"
|
|
name="faintOpacity"
|
|
:fallback="previewTheme.opacity.faint || 0.5"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:label="$t('settings.style.radii._tab_label')"
|
|
class="radius-container"
|
|
>
|
|
<div class="tab-header">
|
|
<p>{{ $t('settings.radii_help') }}</p>
|
|
<button
|
|
class="btn"
|
|
@click="clearRoundness"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<RangeInput
|
|
v-model="btnRadiusLocal"
|
|
name="btnRadius"
|
|
:label="$t('settings.btnRadius')"
|
|
:fallback="previewTheme.radii.btn"
|
|
max="16"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="inputRadiusLocal"
|
|
name="inputRadius"
|
|
:label="$t('settings.inputRadius')"
|
|
:fallback="previewTheme.radii.input"
|
|
max="9"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="checkboxRadiusLocal"
|
|
name="checkboxRadius"
|
|
:label="$t('settings.checkboxRadius')"
|
|
:fallback="previewTheme.radii.checkbox"
|
|
max="16"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="panelRadiusLocal"
|
|
name="panelRadius"
|
|
:label="$t('settings.panelRadius')"
|
|
:fallback="previewTheme.radii.panel"
|
|
max="50"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="avatarRadiusLocal"
|
|
name="avatarRadius"
|
|
:label="$t('settings.avatarRadius')"
|
|
:fallback="previewTheme.radii.avatar"
|
|
max="28"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="avatarAltRadiusLocal"
|
|
name="avatarAltRadius"
|
|
:label="$t('settings.avatarAltRadius')"
|
|
:fallback="previewTheme.radii.avatarAlt"
|
|
max="28"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="attachmentRadiusLocal"
|
|
name="attachmentRadius"
|
|
:label="$t('settings.attachmentRadius')"
|
|
:fallback="previewTheme.radii.attachment"
|
|
max="50"
|
|
hard-min="0"
|
|
/>
|
|
<RangeInput
|
|
v-model="tooltipRadiusLocal"
|
|
name="tooltipRadius"
|
|
:label="$t('settings.tooltipRadius')"
|
|
:fallback="previewTheme.radii.tooltip"
|
|
max="50"
|
|
hard-min="0"
|
|
/>
|
|
</div>
|
|
|
|
<div
|
|
:label="$t('settings.style.shadows._tab_label')"
|
|
class="shadow-container"
|
|
>
|
|
<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"
|
|
>
|
|
<option
|
|
v-for="shadow in shadowsAvailable"
|
|
:key="shadow"
|
|
:value="shadow"
|
|
>
|
|
{{ $t('settings.style.shadows.components.' + shadow) }}
|
|
</option>
|
|
</select>
|
|
<i class="icon-down-open" />
|
|
</label>
|
|
</div>
|
|
<div class="override">
|
|
<label
|
|
for="override"
|
|
class="label"
|
|
>
|
|
{{ $t('settings.style.shadows.override') }}
|
|
</label>
|
|
<input
|
|
id="override"
|
|
v-model="currentShadowOverriden"
|
|
name="override"
|
|
class="input-override"
|
|
type="checkbox"
|
|
>
|
|
<label
|
|
class="checkbox-label"
|
|
for="override"
|
|
/>
|
|
</div>
|
|
<button
|
|
class="btn"
|
|
@click="clearShadows"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<shadow-control
|
|
v-model="currentShadow"
|
|
:ready="!!currentShadowFallback"
|
|
:fallback="currentShadowFallback"
|
|
/>
|
|
<div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'">
|
|
<i18n
|
|
path="settings.style.shadows.filter_hint.always_drop_shadow"
|
|
tag="p"
|
|
>
|
|
<code>filter: drop-shadow()</code>
|
|
</i18n>
|
|
<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
|
|
<i18n
|
|
path="settings.style.shadows.filter_hint.drop_shadow_syntax"
|
|
tag="p"
|
|
>
|
|
<code>drop-shadow</code>
|
|
<code>spread-radius</code>
|
|
<code>inset</code>
|
|
</i18n>
|
|
<i18n
|
|
path="settings.style.shadows.filter_hint.inset_classic"
|
|
tag="p"
|
|
>
|
|
<code>box-shadow</code>
|
|
</i18n>
|
|
<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
:label="$t('settings.style.fonts._tab_label')"
|
|
class="fonts-container"
|
|
>
|
|
<div class="tab-header">
|
|
<p>{{ $t('settings.style.fonts.help') }}</p>
|
|
<button
|
|
class="btn"
|
|
@click="clearFonts"
|
|
>
|
|
{{ $t('settings.style.switcher.clear_all') }}
|
|
</button>
|
|
</div>
|
|
<FontControl
|
|
v-model="fontsLocal.interface"
|
|
name="ui"
|
|
:label="$t('settings.style.fonts.components.interface')"
|
|
:fallback="previewTheme.fonts.interface"
|
|
no-inherit="1"
|
|
/>
|
|
<FontControl
|
|
v-model="fontsLocal.input"
|
|
name="input"
|
|
:label="$t('settings.style.fonts.components.input')"
|
|
:fallback="previewTheme.fonts.input"
|
|
/>
|
|
<FontControl
|
|
v-model="fontsLocal.post"
|
|
name="post"
|
|
:label="$t('settings.style.fonts.components.post')"
|
|
:fallback="previewTheme.fonts.post"
|
|
/>
|
|
<FontControl
|
|
v-model="fontsLocal.postCode"
|
|
name="postCode"
|
|
:label="$t('settings.style.fonts.components.postCode')"
|
|
:fallback="previewTheme.fonts.postCode"
|
|
/>
|
|
</div>
|
|
</tab-switcher>
|
|
</keep-alive>
|
|
|
|
<div class="apply-container">
|
|
<button
|
|
class="btn submit"
|
|
:disabled="!themeValid"
|
|
@click="setCustomTheme"
|
|
>
|
|
{{ $t('general.apply') }}
|
|
</button>
|
|
<button
|
|
class="btn"
|
|
@click="clearAll"
|
|
>
|
|
{{ $t('settings.style.switcher.reset') }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script src="./style_switcher.js"></script>
|
|
|
|
<style src="./style_switcher.scss" lang="scss"></style>
|