diff options
Diffstat (limited to 'src/components/style_switcher')
| -rw-r--r-- | src/components/style_switcher/preview.vue | 117 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.js | 758 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.scss | 335 | ||||
| -rw-r--r-- | src/components/style_switcher/style_switcher.vue | 956 |
4 files changed, 0 insertions, 2166 deletions
diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue deleted file mode 100644 index 9d984659..00000000 --- a/src/components/style_switcher/preview.vue +++ /dev/null @@ -1,117 +0,0 @@ -<template> - <div class="preview-container"> - <div class="underlay underlay-preview" /> - <div class="panel dummy"> - <div class="panel-heading"> - <div class="title"> - {{ $t('settings.style.preview.header') }} - <span class="badge badge-notification"> - 99 - </span> - </div> - <span class="faint"> - {{ $t('settings.style.preview.header_faint') }} - </span> - <span class="alert error"> - {{ $t('settings.style.preview.error') }} - </span> - <button class="btn"> - {{ $t('settings.style.preview.button') }} - </button> - </div> - <div class="panel-body theme-preview-content"> - <div class="post"> - <div class="avatar still-image"> - ( ͡° ͜ʖ ͡°) - </div> - <div class="content"> - <h4> - {{ $t('settings.style.preview.content') }} - </h4> - - <i18n path="settings.style.preview.text"> - <code style="font-family: var(--postCodeFont)"> - {{ $t('settings.style.preview.mono') }} - </code> - <a style="color: var(--link)"> - {{ $t('settings.style.preview.link') }} - </a> - </i18n> - - <div class="icons"> - <i - style="color: var(--cBlue)" - class="button-icon icon-reply" - /> - <i - style="color: var(--cGreen)" - class="button-icon icon-retweet" - /> - <i - style="color: var(--cOrange)" - class="button-icon icon-star" - /> - <i - style="color: var(--cRed)" - class="button-icon icon-cancel" - /> - </div> - </div> - </div> - - <div class="after-post"> - <div class="avatar-alt"> - :^) - </div> - <div class="content"> - <i18n - path="settings.style.preview.fine_print" - tag="span" - class="faint" - > - <a style="color: var(--faintLink)"> - {{ $t('settings.style.preview.faint_link') }} - </a> - </i18n> - </div> - </div> - <div class="separator" /> - - <span class="alert error"> - {{ $t('settings.style.preview.error') }} - </span> - <input - :value="$t('settings.style.preview.input')" - type="text" - > - - <div class="actions"> - <span class="checkbox"> - <input - id="preview_checkbox" - checked="very yes" - type="checkbox" - > - <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label> - </span> - <button class="btn"> - {{ $t('settings.style.preview.button') }} - </button> - </div> - </div> - </div> - </div> -</template> - -<style lang="scss"> -.preview-container { - position: relative; -} -.underlay-preview { - position: absolute; - top: 0; - bottom: 0; - left: 10px; - right: 10px; -} -</style> diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js deleted file mode 100644 index a7f586f4..00000000 --- a/src/components/style_switcher/style_switcher.js +++ /dev/null @@ -1,758 +0,0 @@ -import { set, delete as del } from 'vue' -import { - rgb2hex, - hex2rgb, - getContrastRatioLayers -} from '../../services/color_convert/color_convert.js' -import { - DEFAULT_SHADOWS, - generateColors, - generateShadows, - generateRadii, - generateFonts, - composePreset, - getThemes, - shadows2to3, - colors2to3 -} from '../../services/style_setter/style_setter.js' -import { - SLOT_INHERITANCE -} from '../../services/theme_data/pleromafe.js' -import { - CURRENT_VERSION, - OPACITIES, - getLayers, - getOpacitySlot -} from '../../services/theme_data/theme_data.service.js' -import ColorInput from '../color_input/color_input.vue' -import RangeInput from '../range_input/range_input.vue' -import OpacityInput from '../opacity_input/opacity_input.vue' -import ShadowControl from '../shadow_control/shadow_control.vue' -import FontControl from '../font_control/font_control.vue' -import ContrastRatio from '../contrast_ratio/contrast_ratio.vue' -import TabSwitcher from '../tab_switcher/tab_switcher.js' -import Preview from './preview.vue' -import ExportImport from '../export_import/export_import.vue' -import Checkbox from '../checkbox/checkbox.vue' - -// List of color values used in v1 -const v1OnlyNames = [ - 'bg', - 'fg', - 'text', - 'link', - 'cRed', - 'cGreen', - 'cBlue', - 'cOrange' -].map(_ => _ + 'ColorLocal') - -const colorConvert = (color) => { - if (color.startsWith('--') || color === 'transparent') { - return color - } else { - return hex2rgb(color) - } -} - -export default { - data () { - return { - availableStyles: [], - selected: this.$store.getters.mergedConfig.theme, - themeWarning: undefined, - tempImportFile: undefined, - engineVersion: 0, - - previewShadows: {}, - previewColors: {}, - previewRadii: {}, - previewFonts: {}, - - shadowsInvalid: true, - colorsInvalid: true, - radiiInvalid: true, - - keepColor: false, - keepShadows: false, - keepOpacity: false, - keepRoundness: false, - keepFonts: false, - - ...Object.keys(SLOT_INHERITANCE) - .map(key => [key, '']) - .reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}), - - ...Object.keys(OPACITIES) - .map(key => [key, '']) - .reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}), - - shadowSelected: undefined, - shadowsLocal: {}, - fontsLocal: {}, - - btnRadiusLocal: '', - inputRadiusLocal: '', - checkboxRadiusLocal: '', - panelRadiusLocal: '', - avatarRadiusLocal: '', - avatarAltRadiusLocal: '', - attachmentRadiusLocal: '', - tooltipRadiusLocal: '' - } - }, - created () { - const self = this - - getThemes() - .then((promises) => { - return Promise.all( - Object.entries(promises) - .map(([k, v]) => v.then(res => [k, res])) - ) - }) - .then(themes => themes.reduce((acc, [k, v]) => { - if (v) { - return { - ...acc, - [k]: v - } - } else { - return acc - } - }, {})) - .then((themesComplete) => { - self.availableStyles = themesComplete - }) - }, - mounted () { - this.loadThemeFromLocalStorage() - if (typeof this.shadowSelected === 'undefined') { - this.shadowSelected = this.shadowsAvailable[0] - } - }, - computed: { - themeWarningHelp () { - if (!this.themeWarning) return - const t = this.$t - const pre = 'settings.style.switcher.help.' - const { - origin, - themeEngineVersion, - type, - noActionsPossible - } = this.themeWarning - if (origin === 'file') { - // Loaded v2 theme from file - if (themeEngineVersion === 2 && type === 'wrong_version') { - return t(pre + 'v2_imported') - } - if (themeEngineVersion > CURRENT_VERSION) { - return t(pre + 'future_version_imported') + ' ' + - ( - noActionsPossible - ? t(pre + 'snapshot_missing') - : t(pre + 'snapshot_present') - ) - } - if (themeEngineVersion < CURRENT_VERSION) { - return t(pre + 'future_version_imported') + ' ' + - ( - noActionsPossible - ? t(pre + 'snapshot_missing') - : t(pre + 'snapshot_present') - ) - } - } else if (origin === 'localStorage') { - if (type === 'snapshot_source_mismatch') { - return t(pre + 'snapshot_source_mismatch') - } - // FE upgraded from v2 - if (themeEngineVersion === 2) { - return t(pre + 'upgraded_from_v2') - } - // Admin downgraded FE - if (themeEngineVersion > CURRENT_VERSION) { - return t(pre + 'fe_downgraded') + ' ' + - ( - noActionsPossible - ? t(pre + 'migration_snapshot_ok') - : t(pre + 'migration_snapshot_gone') - ) - } - // Admin upgraded FE - if (themeEngineVersion < CURRENT_VERSION) { - return t(pre + 'fe_upgraded') + ' ' + - ( - noActionsPossible - ? t(pre + 'migration_snapshot_ok') - : t(pre + 'migration_snapshot_gone') - ) - } - } - }, - selectedVersion () { - return Array.isArray(this.selected) ? 1 : 2 - }, - currentColors () { - return Object.keys(SLOT_INHERITANCE) - .map(key => [key, this[key + 'ColorLocal']]) - .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {}) - }, - currentOpacity () { - return Object.keys(OPACITIES) - .map(key => [key, this[key + 'OpacityLocal']]) - .reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {}) - }, - currentRadii () { - return { - btn: this.btnRadiusLocal, - input: this.inputRadiusLocal, - checkbox: this.checkboxRadiusLocal, - panel: this.panelRadiusLocal, - avatar: this.avatarRadiusLocal, - avatarAlt: this.avatarAltRadiusLocal, - tooltip: this.tooltipRadiusLocal, - attachment: this.attachmentRadiusLocal - } - }, - preview () { - return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts) - }, - previewTheme () { - if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} } - return this.preview.theme - }, - // This needs optimization maybe - previewContrast () { - try { - if (!this.previewTheme.colors.bg) return {} - const colors = this.previewTheme.colors - const opacity = this.previewTheme.opacity - if (!colors.bg) return {} - const hints = (ratio) => ({ - text: ratio.toPrecision(3) + ':1', - // AA level, AAA level - aa: ratio >= 4.5, - aaa: ratio >= 7, - // same but for 18pt+ texts - laa: ratio >= 3, - laaa: ratio >= 4.5 - }) - const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {}) - - const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => { - const slotIsBaseText = key === 'text' || key === 'link' - const slotIsText = slotIsBaseText || ( - typeof value === 'object' && value !== null && value.textColor - ) - if (!slotIsText) return acc - const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value - const background = variant || layer - const opacitySlot = getOpacitySlot(background) - const textColors = [ - key, - ...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : []) - ] - - const layers = getLayers( - layer, - variant || layer, - opacitySlot, - colorsConverted, - opacity - ) - - return { - ...acc, - ...textColors.reduce((acc, textColorKey) => { - const newKey = slotIsBaseText - ? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1) - : textColorKey - return { - ...acc, - [newKey]: getContrastRatioLayers( - colorsConverted[textColorKey], - layers, - colorsConverted[textColorKey] - ) - } - }, {}) - } - }, {}) - - return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {}) - } catch (e) { - console.warn('Failure computing contrasts', e) - } - }, - previewRules () { - if (!this.preview.rules) return '' - return [ - ...Object.values(this.preview.rules), - 'color: var(--text)', - 'font-family: var(--interfaceFont, sans-serif)' - ].join(';') - }, - shadowsAvailable () { - return Object.keys(DEFAULT_SHADOWS).sort() - }, - currentShadowOverriden: { - get () { - return !!this.currentShadow - }, - set (val) { - if (val) { - set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _))) - } else { - del(this.shadowsLocal, this.shadowSelected) - } - } - }, - currentShadowFallback () { - return (this.previewTheme.shadows || {})[this.shadowSelected] - }, - currentShadow: { - get () { - return this.shadowsLocal[this.shadowSelected] - }, - set (v) { - set(this.shadowsLocal, this.shadowSelected, v) - } - }, - themeValid () { - return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid - }, - exportedTheme () { - const saveEverything = ( - !this.keepFonts && - !this.keepShadows && - !this.keepOpacity && - !this.keepRoundness && - !this.keepColor - ) - - const source = { - themeEngineVersion: CURRENT_VERSION - } - - if (this.keepFonts || saveEverything) { - source.fonts = this.fontsLocal - } - if (this.keepShadows || saveEverything) { - source.shadows = this.shadowsLocal - } - if (this.keepOpacity || saveEverything) { - source.opacity = this.currentOpacity - } - if (this.keepColor || saveEverything) { - source.colors = this.currentColors - } - if (this.keepRoundness || saveEverything) { - source.radii = this.currentRadii - } - - const theme = { - themeEngineVersion: CURRENT_VERSION, - ...this.previewTheme - } - - return { - // To separate from other random JSON files and possible future source formats - _pleroma_theme_version: 2, theme, source - } - } - }, - components: { - ColorInput, - OpacityInput, - RangeInput, - ContrastRatio, - ShadowControl, - FontControl, - TabSwitcher, - Preview, - ExportImport, - Checkbox - }, - methods: { - loadTheme ( - { - theme, - source, - _pleroma_theme_version: fileVersion - }, - origin, - forceUseSource = false - ) { - this.dismissWarning() - if (!source && !theme) { - throw new Error('Can\'t load theme: empty') - } - const version = (origin === 'localStorage' && !theme.colors) - ? 'l1' - : fileVersion - const snapshotEngineVersion = (theme || {}).themeEngineVersion - const themeEngineVersion = (source || {}).themeEngineVersion || 2 - const versionsMatch = themeEngineVersion === CURRENT_VERSION - const sourceSnapshotMismatch = ( - theme !== undefined && - source !== undefined && - themeEngineVersion !== snapshotEngineVersion - ) - // Force loading of source if user requested it or if snapshot - // is unavailable - const forcedSourceLoad = (source && forceUseSource) || !theme - if (!(versionsMatch && !sourceSnapshotMismatch) && - !forcedSourceLoad && - version !== 'l1' && - origin !== 'defaults' - ) { - if (sourceSnapshotMismatch && origin === 'localStorage') { - this.themeWarning = { - origin, - themeEngineVersion, - type: 'snapshot_source_mismatch' - } - } else if (!theme) { - this.themeWarning = { - origin, - noActionsPossible: true, - themeEngineVersion, - type: 'no_snapshot_old_version' - } - } else if (!versionsMatch) { - this.themeWarning = { - origin, - noActionsPossible: !source, - themeEngineVersion, - type: 'wrong_version' - } - } - } - this.normalizeLocalState(theme, version, source, forcedSourceLoad) - }, - forceLoadLocalStorage () { - this.loadThemeFromLocalStorage(true) - }, - dismissWarning () { - this.themeWarning = undefined - this.tempImportFile = undefined - }, - forceLoad () { - const { origin } = this.themeWarning - switch (origin) { - case 'localStorage': - this.loadThemeFromLocalStorage(true) - break - case 'file': - this.onImport(this.tempImportFile, true) - break - } - this.dismissWarning() - }, - forceSnapshot () { - const { origin } = this.themeWarning - switch (origin) { - case 'localStorage': - this.loadThemeFromLocalStorage(false, true) - break - case 'file': - console.err('Forcing snapshout from file is not supported yet') - break - } - this.dismissWarning() - }, - loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) { - const { - customTheme: theme, - customThemeSource: source - } = this.$store.getters.mergedConfig - if (!theme && !source) { - // Anon user or never touched themes - this.loadTheme( - this.$store.state.instance.themeData, - 'defaults', - confirmLoadSource - ) - } else { - this.loadTheme( - { - theme, - source: forceSnapshot ? theme : source - }, - 'localStorage', - confirmLoadSource - ) - } - }, - setCustomTheme () { - this.$store.dispatch('setOption', { - name: 'customTheme', - value: { - themeEngineVersion: CURRENT_VERSION, - ...this.previewTheme - } - }) - this.$store.dispatch('setOption', { - name: 'customThemeSource', - value: { - themeEngineVersion: CURRENT_VERSION, - shadows: this.shadowsLocal, - fonts: this.fontsLocal, - opacity: this.currentOpacity, - colors: this.currentColors, - radii: this.currentRadii - } - }) - }, - updatePreviewColorsAndShadows () { - this.previewColors = generateColors({ - opacity: this.currentOpacity, - colors: this.currentColors - }) - this.previewShadows = generateShadows( - { shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion }, - this.previewColors.theme.colors, - this.previewColors.mod - ) - }, - onImport (parsed, forceSource = false) { - this.tempImportFile = parsed - this.loadTheme(parsed, 'file', forceSource) - }, - importValidator (parsed) { - const version = parsed._pleroma_theme_version - return version >= 1 || version <= 2 - }, - clearAll () { - this.loadThemeFromLocalStorage() - }, - - // Clears all the extra stuff when loading V1 theme - clearV1 () { - Object.keys(this.$data) - .filter(_ => _.endsWith('ColorLocal') || _.endsWith('OpacityLocal')) - .filter(_ => !v1OnlyNames.includes(_)) - .forEach(key => { - set(this.$data, key, undefined) - }) - }, - - clearRoundness () { - Object.keys(this.$data) - .filter(_ => _.endsWith('RadiusLocal')) - .forEach(key => { - set(this.$data, key, undefined) - }) - }, - - clearOpacity () { - Object.keys(this.$data) - .filter(_ => _.endsWith('OpacityLocal')) - .forEach(key => { - set(this.$data, key, undefined) - }) - }, - - clearShadows () { - this.shadowsLocal = {} - }, - - clearFonts () { - this.fontsLocal = {} - }, - - /** - * This applies stored theme data onto form. Supports three versions of data: - * v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity - * v2 (version = 2) - newer version of themes. - * v1 (version = 1) - older version of themes (import from file) - * v1l (version = l1) - older version of theme (load from local storage) - * v1 and v1l differ because of way themes were stored/exported. - * @param {Object} theme - theme data (snapshot) - * @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type - * @param {Object} source - theme source - this will be used if compatible - * @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently - * this allows importing source anyway - */ - normalizeLocalState (theme, version = 0, source, forceSource = false) { - let input - if (typeof source !== 'undefined') { - if (forceSource || source.themeEngineVersion === CURRENT_VERSION) { - input = source - version = source.themeEngineVersion - } else { - input = theme - } - } else { - input = theme - } - - const radii = input.radii || input - const opacity = input.opacity - const shadows = input.shadows || {} - const fonts = input.fonts || {} - const colors = !input.themeEngineVersion - ? colors2to3(input.colors || input) - : input.colors || input - - if (version === 0) { - if (input.version) version = input.version - // Old v1 naming: fg is text, btn is foreground - if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') { - version = 1 - } - // New v2 naming: text is text, fg is foreground - if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') { - version = 2 - } - } - - this.engineVersion = version - - // Stuff that differs between V1 and V2 - if (version === 1) { - this.fgColorLocal = rgb2hex(colors.btn) - this.textColorLocal = rgb2hex(colors.fg) - } - - if (!this.keepColor) { - this.clearV1() - const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : []) - if (version === 1 || version === 'l1') { - keys - .add('bg') - .add('link') - .add('cRed') - .add('cBlue') - .add('cGreen') - .add('cOrange') - } - - keys.forEach(key => { - const color = colors[key] - const hex = rgb2hex(colors[key]) - this[key + 'ColorLocal'] = hex === '#aN' ? color : hex - }) - } - - if (opacity && !this.keepOpacity) { - this.clearOpacity() - Object.entries(opacity).forEach(([k, v]) => { - if (typeof v === 'undefined' || v === null || Number.isNaN(v)) return - this[k + 'OpacityLocal'] = v - }) - } - - if (!this.keepRoundness) { - this.clearRoundness() - Object.entries(radii).forEach(([k, v]) => { - // 'Radius' is kept mostly for v1->v2 localstorage transition - const key = k.endsWith('Radius') ? k.split('Radius')[0] : k - this[key + 'RadiusLocal'] = v - }) - } - - if (!this.keepShadows) { - this.clearShadows() - if (version === 2) { - this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity) - } else { - this.shadowsLocal = shadows - } - this.shadowSelected = this.shadowsAvailable[0] - } - - if (!this.keepFonts) { - this.clearFonts() - this.fontsLocal = fonts - } - } - }, - watch: { - currentRadii () { - try { - this.previewRadii = generateRadii({ radii: this.currentRadii }) - this.radiiInvalid = false - } catch (e) { - this.radiiInvalid = true - console.warn(e) - } - }, - shadowsLocal: { - handler () { - if (Object.getOwnPropertyNames(this.previewColors).length === 1) return - try { - this.updatePreviewColorsAndShadows() - this.shadowsInvalid = false - } catch (e) { - this.shadowsInvalid = true - console.warn(e) - } - }, - deep: true - }, - fontsLocal: { - handler () { - try { - this.previewFonts = generateFonts({ fonts: this.fontsLocal }) - this.fontsInvalid = false - } catch (e) { - this.fontsInvalid = true - console.warn(e) - } - }, - deep: true - }, - currentColors () { - try { - this.updatePreviewColorsAndShadows() - this.colorsInvalid = false - this.shadowsInvalid = false - } catch (e) { - this.colorsInvalid = true - this.shadowsInvalid = true - console.warn(e) - } - }, - currentOpacity () { - try { - this.updatePreviewColorsAndShadows() - } catch (e) { - console.warn(e) - } - }, - selected () { - this.dismissWarning() - if (this.selectedVersion === 1) { - if (!this.keepRoundness) { - this.clearRoundness() - } - - if (!this.keepShadows) { - this.clearShadows() - } - - if (!this.keepOpacity) { - this.clearOpacity() - } - - if (!this.keepColor) { - this.clearV1() - - this.bgColorLocal = this.selected[1] - this.fgColorLocal = this.selected[2] - this.textColorLocal = this.selected[3] - this.linkColorLocal = this.selected[4] - this.cRedColorLocal = this.selected[5] - this.cGreenColorLocal = this.selected[6] - this.cBlueColorLocal = this.selected[7] - this.cOrangeColorLocal = this.selected[8] - } - } else if (this.selectedVersion >= 2) { - this.normalizeLocalState(this.selected.theme, 2, this.selected.source) - } - } - } -} diff --git a/src/components/style_switcher/style_switcher.scss b/src/components/style_switcher/style_switcher.scss deleted file mode 100644 index d2a40d13..00000000 --- a/src/components/style_switcher/style_switcher.scss +++ /dev/null @@ -1,335 +0,0 @@ -@import '../../_variables.scss'; -.style-switcher { - .theme-warning { - display: flex; - align-items: baseline; - margin-bottom: .5em; - .buttons { - .btn { - margin-bottom: .5em; - } - } - } - .preset-switcher { - margin-right: 1em; - } - - .style-control { - display: flex; - align-items: baseline; - margin-bottom: 5px; - - .label { - flex: 1; - } - - &.disabled { - input, select { - opacity: .5 - } - } - - .opt { - margin: .5em; - } - - .color-input { - flex: 0 0 0; - } - - input, select { - min-width: 3em; - margin: 0; - flex: 0; - - &[type=number] { - min-width: 5em; - } - - &[type=range] { - flex: 1; - min-width: 3em; - align-self: flex-start; - } - } - } - - .tab-switcher { - margin: 0 -1em; - } - - .reset-container { - flex-wrap: wrap; - } - - .fonts-container, - .reset-container, - .apply-container, - .radius-container, - .color-container, - { - display: flex; - } - - .fonts-container, - .radius-container { - flex-direction: column; - } - - .color-container{ - > h4 { - width: 99%; - } - flex-wrap: wrap; - justify-content: space-between; - } - - .fonts-container, - .color-container, - .shadow-container, - .radius-container, - .presets-container { - margin: 1em 1em 0; - } - - .tab-header { - display: flex; - justify-content: space-between; - align-items: baseline; - width: 100%; - min-height: 30px; - - .btn { - min-width: 1px; - flex: 0 auto; - padding: 0 1em; - } - - p { - flex: 1; - margin: 0; - margin-right: .5em; - } - - margin-bottom: 1em; - } - - .shadow-selector { - .override { - flex: 1; - margin-left: .5em; - } - .select-container { - margin-top: -4px; - margin-bottom: -3px; - } - } - - .save-load, - .save-load-options { - display: flex; - justify-content: center; - align-items: baseline; - flex-wrap: wrap; - - .presets, - .import-export { - margin-bottom: .5em; - } - - .import-export { - display: flex; - } - - .override { - margin-left: .5em; - } - } - - .save-load-options { - flex-wrap: wrap; - margin-top: .5em; - justify-content: center; - .keep-option { - margin: 0 .5em .5em; - min-width: 25%; - } - } - - .preview-container { - border-top: 1px dashed; - border-bottom: 1px dashed; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - margin: 1em -1em 0; - padding: 1em; - background: var(--body-background-image); - background-size: cover; - background-position: 50% 50%; - - .dummy { - .post { - font-family: var(--postFont); - display: flex; - - .content { - flex: 1; - - h4 { - margin-bottom: .25em; - } - - .icons { - margin-top: .5em; - display: flex; - - i { - margin-right: 1em; - } - } - } - } - - .after-post { - margin-top: 1em; - display: flex; - align-items: center; - } - - .avatar, .avatar-alt{ - background: linear-gradient(135deg, #b8e1fc 0%,#a9d2f3 10%,#90bae4 25%,#90bcea 37%,#90bff0 50%,#6ba8e5 51%,#a2daf5 83%,#bdf3fd 100%); - color: black; - font-family: sans-serif; - text-align: center; - margin-right: 1em; - } - - .avatar-alt { - flex: 0 auto; - margin-left: 28px; - font-size: 12px; - min-width: 20px; - min-height: 20px; - line-height: 20px; - border-radius: $fallback--avatarAltRadius; - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); - } - - .avatar { - flex: 0 auto; - width: 48px; - height: 48px; - font-size: 14px; - line-height: 48px; - } - - .actions { - display: flex; - align-items: baseline; - - .checkbox { - display: inline-flex; - align-items: baseline; - margin-right: 1em; - flex: 1; - } - } - - .separator { - margin: 1em; - border-bottom: 1px solid; - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - } - - .panel-heading { - .badge, .alert, .btn, .faint { - margin-left: 1em; - white-space: nowrap; - } - .faint { - text-overflow: ellipsis; - min-width: 2em; - overflow-x: hidden; - } - .flex-spacer { - flex: 1; - } - } - .btn { - margin-left: 0; - padding: 0 1em; - min-width: 3em; - min-height: 30px; - } - } - } - - .apply-container { - justify-content: center; - } - - .radius-item, - .color-item { - min-width: 20em; - margin: 5px 6px 0 0; - display:flex; - flex-direction: column; - flex: 1 1 0; - - &.wide { - min-width: 60% - } - - &:not(.wide):nth-child(2n+1) { - margin-right: 7px; - - } - - .color, .opacity { - display:flex; - align-items: baseline; - } - } - - .radius-item { - flex-basis: auto; - } - - .theme-radius-rn, - .theme-color-cl { - border: 0; - box-shadow: none; - background: transparent; - color: var(--faint, $fallback--faint); - align-self: stretch; - } - - .theme-color-cl, - .theme-radius-in, - .theme-color-in { - margin-left: 4px; - } - - .theme-radius-in { - min-width: 1em; - } - - .theme-radius-in { - max-width: 7em; - flex: 1; - } - - .theme-radius-lb{ - max-width: 50em; - } - - .theme-preview-content { - padding: 20px; - } - - .btn { - margin-left: .25em; - margin-right: .25em; - } -} diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue deleted file mode 100644 index 62c8e634..00000000 --- a/src/components/style_switcher/style_switcher.vue +++ /dev/null @@ -1,956 +0,0 @@ -<template> - <div class="style-switcher"> - <div class="presets-container"> - <div class="save-load"> - <div - v-if="themeWarning" - class="theme-warning" - > - <div class="alert warning"> - {{ themeWarningHelp }} - </div> - <div class="buttons"> - <template v-if="themeWarning.type === 'snapshot_source_mismatch'"> - <button - class="btn" - @click="forceLoad" - > - {{ $t('settings.style.switcher.use_source') }} - </button> - <button - class="btn" - @click="forceSnapshot" - > - {{ $t('settings.style.switcher.use_snapshot') }} - </button> - </template> - <template v-else-if="themeWarning.noActionsPossible"> - <button - class="btn" - @click="dismissWarning" - > - {{ $t('general.dismiss') }} - </button> - </template> - <template v-else> - <button - class="btn" - @click="forceLoad" - > - {{ $t('settings.style.switcher.load_theme') }} - </button> - <button - class="btn" - @click="dismissWarning" - > - {{ $t('settings.style.switcher.keep_as_is') }} - </button> - </template> - </div> - </div> - <ExportImport - :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 || style.source).colors.bg, - color: style[3] || (style.theme || style.source).colors.text - }" - > - {{ style[0] || style.name }} - </option> - </select> - <i class="icon-down-open" /> - </label> - </div> - </template> - </ExportImport> - </div> - <div class="save-load-options"> - <span class="keep-option"> - <Checkbox v-model="keepColor"> - {{ $t('settings.style.switcher.keep_color') }} - </Checkbox> - </span> - <span class="keep-option"> - <Checkbox v-model="keepShadows"> - {{ $t('settings.style.switcher.keep_shadows') }} - </Checkbox> - </span> - <span class="keep-option"> - <Checkbox v-model="keepOpacity"> - {{ $t('settings.style.switcher.keep_opacity') }} - </Checkbox> - </span> - <span class="keep-option"> - <Checkbox v-model="keepRoundness"> - {{ $t('settings.style.switcher.keep_roundness') }} - </Checkbox> - </span> - <span class="keep-option"> - <Checkbox v-model="keepFonts"> - {{ $t('settings.style.switcher.keep_fonts') }} - </Checkbox> - </span> - <p>{{ $t('settings.style.switcher.save_load_hint') }}</p> - </div> - </div> - - <preview :style="previewRules" /> - - <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" - /> - <ColorInput - v-model="textColorLocal" - name="textColor" - :label="$t('settings.text')" - /> - <ContrastRatio :contrast="previewContrast.bgText" /> - <ColorInput - v-model="accentColorLocal" - name="accentColor" - :fallback="previewTheme.colors.link" - :label="$t('settings.accent')" - :show-optional-tickbox="typeof linkColorLocal !== 'undefined'" - /> - <ColorInput - v-model="linkColorLocal" - name="linkColor" - :fallback="previewTheme.colors.accent" - :label="$t('settings.links')" - :show-optional-tickbox="typeof accentColorLocal !== 'undefined'" - /> - <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.bgCRed" /> - <ColorInput - v-model="cBlueColorLocal" - name="cBlueColor" - :label="$t('settings.cBlue')" - /> - <ContrastRatio :contrast="previewContrast.bgCBlue" /> - </div> - <div class="color-item"> - <ColorInput - v-model="cGreenColorLocal" - name="cGreenColor" - :label="$t('settings.cGreen')" - /> - <ContrastRatio :contrast="previewContrast.bgCGreen" /> - <ColorInput - v-model="cOrangeColorLocal" - name="cOrangeColor" - :label="$t('settings.cOrange')" - /> - <ContrastRatio :contrast="previewContrast.bgCOrange" /> - </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.post') }}</h4> - <ColorInput - v-model="postLinkColorLocal" - name="postLinkColor" - :fallback="previewTheme.colors.accent" - :label="$t('settings.links')" - /> - <ContrastRatio :contrast="previewContrast.postLink" /> - <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" - /> - <ColorInput - v-model="alertErrorTextColorLocal" - name="alertErrorText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.alertErrorText" - /> - <ContrastRatio - :contrast="previewContrast.alertErrorText" - large="true" - /> - <ColorInput - v-model="alertWarningColorLocal" - name="alertWarning" - :label="$t('settings.style.advanced_colors.alert_warning')" - :fallback="previewTheme.colors.alertWarning" - /> - <ColorInput - v-model="alertWarningTextColorLocal" - name="alertWarningText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.alertWarningText" - /> - <ContrastRatio - :contrast="previewContrast.alertWarningText" - large="true" - /> - <ColorInput - v-model="alertNeutralColorLocal" - name="alertNeutral" - :label="$t('settings.style.advanced_colors.alert_neutral')" - :fallback="previewTheme.colors.alertNeutral" - /> - <ColorInput - v-model="alertNeutralTextColorLocal" - name="alertNeutralText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.alertNeutralText" - /> - <ContrastRatio - :contrast="previewContrast.alertNeutralText" - large="true" - /> - <OpacityInput - v-model="alertOpacityLocal" - name="alertOpacity" - :fallback="previewTheme.opacity.alert" - /> - </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" - /> - <ColorInput - v-model="badgeNotificationTextColorLocal" - name="badgeNotificationText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.badgeNotificationText" - /> - <ContrastRatio - :contrast="previewContrast.badgeNotificationText" - large="true" - /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4> - <ColorInput - v-model="panelColorLocal" - name="panelColor" - :fallback="previewTheme.colors.panel" - :label="$t('settings.background')" - /> - <OpacityInput - v-model="panelOpacityLocal" - name="panelOpacity" - :fallback="previewTheme.opacity.panel" - :disabled="panelColorLocal === 'transparent'" - /> - <ColorInput - v-model="panelTextColorLocal" - name="panelTextColor" - :fallback="previewTheme.colors.panelText" - :label="$t('settings.text')" - /> - <ContrastRatio - :contrast="previewContrast.panelText" - large="true" - /> - <ColorInput - v-model="panelLinkColorLocal" - name="panelLinkColor" - :fallback="previewTheme.colors.panelLink" - :label="$t('settings.links')" - /> - <ContrastRatio - :contrast="previewContrast.panelLink" - large="true" - /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4> - <ColorInput - v-model="topBarColorLocal" - name="topBarColor" - :fallback="previewTheme.colors.topBar" - :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="previewTheme.colors.input" - :label="$t('settings.background')" - /> - <OpacityInput - v-model="inputOpacityLocal" - name="inputOpacity" - :fallback="previewTheme.opacity.input" - :disabled="inputColorLocal === 'transparent'" - /> - <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="previewTheme.colors.btn" - :label="$t('settings.background')" - /> - <OpacityInput - v-model="btnOpacityLocal" - name="btnOpacity" - :fallback="previewTheme.opacity.btn" - :disabled="btnColorLocal === 'transparent'" - /> - <ColorInput - v-model="btnTextColorLocal" - name="btnTextColor" - :fallback="previewTheme.colors.btnText" - :label="$t('settings.text')" - /> - <ContrastRatio :contrast="previewContrast.btnText" /> - <ColorInput - v-model="btnPanelTextColorLocal" - name="btnPanelTextColor" - :fallback="previewTheme.colors.btnPanelText" - :label="$t('settings.style.advanced_colors.panel_header')" - /> - <ContrastRatio :contrast="previewContrast.btnPanelText" /> - <ColorInput - v-model="btnTopBarTextColorLocal" - name="btnTopBarTextColor" - :fallback="previewTheme.colors.btnTopBarText" - :label="$t('settings.style.advanced_colors.top_bar')" - /> - <ContrastRatio :contrast="previewContrast.btnTopBarText" /> - <h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5> - <ColorInput - v-model="btnPressedColorLocal" - name="btnPressedColor" - :fallback="previewTheme.colors.btnPressed" - :label="$t('settings.background')" - /> - <ColorInput - v-model="btnPressedTextColorLocal" - name="btnPressedTextColor" - :fallback="previewTheme.colors.btnPressedText" - :label="$t('settings.text')" - /> - <ContrastRatio :contrast="previewContrast.btnPressedText" /> - <ColorInput - v-model="btnPressedPanelTextColorLocal" - name="btnPressedPanelTextColor" - :fallback="previewTheme.colors.btnPressedPanelText" - :label="$t('settings.style.advanced_colors.panel_header')" - /> - <ContrastRatio :contrast="previewContrast.btnPressedPanelText" /> - <ColorInput - v-model="btnPressedTopBarTextColorLocal" - name="btnPressedTopBarTextColor" - :fallback="previewTheme.colors.btnPressedTopBarText" - :label="$t('settings.style.advanced_colors.top_bar')" - /> - <ContrastRatio :contrast="previewContrast.btnPressedTopBarText" /> - <h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5> - <ColorInput - v-model="btnDisabledColorLocal" - name="btnDisabledColor" - :fallback="previewTheme.colors.btnDisabled" - :label="$t('settings.background')" - /> - <ColorInput - v-model="btnDisabledTextColorLocal" - name="btnDisabledTextColor" - :fallback="previewTheme.colors.btnDisabledText" - :label="$t('settings.text')" - /> - <ColorInput - v-model="btnDisabledPanelTextColorLocal" - name="btnDisabledPanelTextColor" - :fallback="previewTheme.colors.btnDisabledPanelText" - :label="$t('settings.style.advanced_colors.panel_header')" - /> - <ColorInput - v-model="btnDisabledTopBarTextColorLocal" - name="btnDisabledTopBarTextColor" - :fallback="previewTheme.colors.btnDisabledTopBarText" - :label="$t('settings.style.advanced_colors.top_bar')" - /> - <h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5> - <ColorInput - v-model="btnToggledColorLocal" - name="btnToggledColor" - :fallback="previewTheme.colors.btnToggled" - :label="$t('settings.background')" - /> - <ColorInput - v-model="btnToggledTextColorLocal" - name="btnToggledTextColor" - :fallback="previewTheme.colors.btnToggledText" - :label="$t('settings.text')" - /> - <ContrastRatio :contrast="previewContrast.btnToggledText" /> - <ColorInput - v-model="btnToggledPanelTextColorLocal" - name="btnToggledPanelTextColor" - :fallback="previewTheme.colors.btnToggledPanelText" - :label="$t('settings.style.advanced_colors.panel_header')" - /> - <ContrastRatio :contrast="previewContrast.btnToggledPanelText" /> - <ColorInput - v-model="btnToggledTopBarTextColorLocal" - name="btnToggledTopBarTextColor" - :fallback="previewTheme.colors.btnToggledTopBarText" - :label="$t('settings.style.advanced_colors.top_bar')" - /> - <ContrastRatio :contrast="previewContrast.btnToggledTopBarText" /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4> - <ColorInput - v-model="tabColorLocal" - name="tabColor" - :fallback="previewTheme.colors.tab" - :label="$t('settings.background')" - /> - <ColorInput - v-model="tabTextColorLocal" - name="tabTextColor" - :fallback="previewTheme.colors.tabText" - :label="$t('settings.text')" - /> - <ContrastRatio :contrast="previewContrast.tabText" /> - <ColorInput - v-model="tabActiveTextColorLocal" - name="tabActiveTextColor" - :fallback="previewTheme.colors.tabActiveText" - :label="$t('settings.text')" - /> - <ContrastRatio :contrast="previewContrast.tabActiveText" /> - </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" - :disabled="borderColorLocal === 'transparent'" - /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4> - <ColorInput - v-model="faintColorLocal" - name="faintColor" - :fallback="previewTheme.colors.faint" - :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" - /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4> - <ColorInput - v-model="underlayColorLocal" - name="underlay" - :label="$t('settings.style.advanced_colors.underlay')" - :fallback="previewTheme.colors.underlay" - /> - <OpacityInput - v-model="underlayOpacityLocal" - name="underlayOpacity" - :fallback="previewTheme.opacity.underlay" - :disabled="underlayOpacityLocal === 'transparent'" - /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.poll') }}</h4> - <ColorInput - v-model="pollColorLocal" - name="poll" - :label="$t('settings.background')" - :fallback="previewTheme.colors.poll" - /> - <ColorInput - v-model="pollTextColorLocal" - name="pollText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.pollText" - /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.icons') }}</h4> - <ColorInput - v-model="iconColorLocal" - name="icon" - :label="$t('settings.style.advanced_colors.icons')" - :fallback="previewTheme.colors.icon" - /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4> - <ColorInput - v-model="highlightColorLocal" - name="highlight" - :label="$t('settings.background')" - :fallback="previewTheme.colors.highlight" - /> - <ColorInput - v-model="highlightTextColorLocal" - name="highlightText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.highlightText" - /> - <ContrastRatio :contrast="previewContrast.highlightText" /> - <ColorInput - v-model="highlightLinkColorLocal" - name="highlightLink" - :label="$t('settings.links')" - :fallback="previewTheme.colors.highlightLink" - /> - <ContrastRatio :contrast="previewContrast.highlightLink" /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.popover') }}</h4> - <ColorInput - v-model="popoverColorLocal" - name="popover" - :label="$t('settings.background')" - :fallback="previewTheme.colors.popover" - /> - <OpacityInput - v-model="popoverOpacityLocal" - name="popoverOpacity" - :fallback="previewTheme.opacity.popover" - :disabled="popoverOpacityLocal === 'transparent'" - /> - <ColorInput - v-model="popoverTextColorLocal" - name="popoverText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.popoverText" - /> - <ContrastRatio :contrast="previewContrast.popoverText" /> - <ColorInput - v-model="popoverLinkColorLocal" - name="popoverLink" - :label="$t('settings.links')" - :fallback="previewTheme.colors.popoverLink" - /> - <ContrastRatio :contrast="previewContrast.popoverLink" /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4> - <ColorInput - v-model="selectedPostColorLocal" - name="selectedPost" - :label="$t('settings.background')" - :fallback="previewTheme.colors.selectedPost" - /> - <ColorInput - v-model="selectedPostTextColorLocal" - name="selectedPostText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.selectedPostText" - /> - <ContrastRatio :contrast="previewContrast.selectedPostText" /> - <ColorInput - v-model="selectedPostLinkColorLocal" - name="selectedPostLink" - :label="$t('settings.links')" - :fallback="previewTheme.colors.selectedPostLink" - /> - <ContrastRatio :contrast="previewContrast.selectedPostLink" /> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4> - <ColorInput - v-model="selectedMenuColorLocal" - name="selectedMenu" - :label="$t('settings.background')" - :fallback="previewTheme.colors.selectedMenu" - /> - <ColorInput - v-model="selectedMenuTextColorLocal" - name="selectedMenuText" - :label="$t('settings.text')" - :fallback="previewTheme.colors.selectedMenuText" - /> - <ContrastRatio :contrast="previewContrast.selectedMenuText" /> - <ColorInput - v-model="selectedMenuLinkColorLocal" - name="selectedMenuLink" - :label="$t('settings.links')" - :fallback="previewTheme.colors.selectedMenuLink" - /> - <ContrastRatio :contrast="previewContrast.selectedMenuLink" /> - </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> - <ShadowControl - 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> |