Merge branch 'appearance-tab' into shigusegubu-themes3
This commit is contained in:
Henry Jameson
commit
a81cd7ace0
13 changed files with 326 additions and 236 deletions
0
preview.style.js
Normal file
0
preview.style.js
Normal file
|
|
@ -13,8 +13,7 @@ import VBodyScrollLock from 'src/directives/body_scroll_lock'
|
|||
import { windowWidth, windowHeight } from '../services/window_utils/window_utils'
|
||||
import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js'
|
||||
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
|
||||
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
|
||||
import { applyTheme, applyConfig, tryLoadCache } from '../services/style_setter/style_setter.js'
|
||||
import { applyConfig } from '../services/style_setter/style_setter.js'
|
||||
import FaviconService from '../services/favicon_service/favicon_service.js'
|
||||
import { initServiceWorker, updateFocus } from '../services/sw/sw.js'
|
||||
|
||||
|
|
@ -160,8 +159,6 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => {
|
|||
copyInstanceOption('showFeaturesPanel')
|
||||
copyInstanceOption('hideSitename')
|
||||
copyInstanceOption('sidebarRight')
|
||||
|
||||
return store.dispatch('setTheme', config.theme)
|
||||
}
|
||||
|
||||
const getTOS = async ({ store }) => {
|
||||
|
|
@ -352,29 +349,7 @@ const afterStoreSetup = async ({ store, i18n }) => {
|
|||
store.dispatch('setInstanceOption', { name: 'server', value: server })
|
||||
|
||||
await setConfig({ store })
|
||||
|
||||
const { customTheme, customThemeSource, forceThemeRecompilation, themeDebug } = store.state.config
|
||||
const { theme } = store.state.instance
|
||||
const customThemePresent = customThemeSource || customTheme
|
||||
|
||||
console.log('DEBUG INITIAL', themeDebug, forceThemeRecompilation)
|
||||
|
||||
if (!forceThemeRecompilation && !themeDebug && tryLoadCache()) {
|
||||
store.commit('setThemeApplied')
|
||||
} else {
|
||||
if (customThemePresent) {
|
||||
if (customThemeSource && customThemeSource.themeEngineVersion === CURRENT_VERSION) {
|
||||
applyTheme(customThemeSource, () => {}, themeDebug)
|
||||
} else {
|
||||
applyTheme(customTheme, () => {}, themeDebug)
|
||||
}
|
||||
store.commit('setThemeApplied')
|
||||
} else if (theme) {
|
||||
// do nothing, it will load asynchronously
|
||||
} else {
|
||||
console.error('Failed to load any theme!')
|
||||
}
|
||||
}
|
||||
await store.dispatch('setTheme')
|
||||
|
||||
applyConfig(store.state.config)
|
||||
|
||||
|
|
|
|||
|
|
@ -29,6 +29,11 @@ const AppearanceTab = {
|
|||
key: mode,
|
||||
value: i - 1,
|
||||
label: this.$t(`settings.forced_roundness_mode_${mode}`)
|
||||
})),
|
||||
underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
|
||||
key: mode,
|
||||
value: mode,
|
||||
label: this.$t(`settings.underlay_override_mode_${mode}`)
|
||||
}))
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -182,6 +182,15 @@
|
|||
{{ $t('settings.force_interface_roundness') }}
|
||||
</ChoiceSetting>
|
||||
</li>
|
||||
<li>
|
||||
<ChoiceSetting
|
||||
id="underlayOverride"
|
||||
path="theme3hacks.underlay"
|
||||
:options="underlayOverrideModes"
|
||||
>
|
||||
{{ $t('settings.underlay_overrides') }}
|
||||
</ChoiceSetting>
|
||||
</li>
|
||||
<li v-if="instanceWallpaperUsed">
|
||||
<BooleanSetting path="hideInstanceWallpaper">
|
||||
{{ $t('settings.hide_wallpaper') }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
import {
|
||||
rgb2hex,
|
||||
hex2rgb,
|
||||
getContrastRatioLayers
|
||||
getContrastRatioLayers,
|
||||
relativeLuminance
|
||||
} from 'src/services/color_convert/color_convert.js'
|
||||
import {
|
||||
getThemes
|
||||
|
|
@ -23,10 +24,14 @@ import {
|
|||
generateShadows,
|
||||
generateRadii,
|
||||
generateFonts,
|
||||
composePreset,
|
||||
shadows2to3,
|
||||
colors2to3
|
||||
} from 'src/services/theme_data/theme_data.service.js'
|
||||
|
||||
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
|
||||
import { init } from 'src/services/theme_data/theme_data_3.service.js'
|
||||
import { getCssRules } from 'src/services/theme_data/css_utils.js'
|
||||
|
||||
import ColorInput from 'src/components/color_input/color_input.vue'
|
||||
import RangeInput from 'src/components/range_input/range_input.vue'
|
||||
import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
|
||||
|
|
@ -62,6 +67,7 @@ const colorConvert = (color) => {
|
|||
export default {
|
||||
data () {
|
||||
return {
|
||||
themeV3Preview: [],
|
||||
themeImporter: newImporter({
|
||||
validator: this.importValidator,
|
||||
onImport: this.onImport,
|
||||
|
|
@ -78,10 +84,7 @@ export default {
|
|||
tempImportFile: undefined,
|
||||
engineVersion: 0,
|
||||
|
||||
previewShadows: {},
|
||||
previewColors: {},
|
||||
previewRadii: {},
|
||||
previewFonts: {},
|
||||
previewTheme: {},
|
||||
|
||||
shadowsInvalid: true,
|
||||
colorsInvalid: true,
|
||||
|
|
@ -232,13 +235,6 @@ export default {
|
|||
chatMessage: this.chatMessageRadiusLocal
|
||||
}
|
||||
},
|
||||
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 {
|
||||
|
|
@ -306,14 +302,6 @@ export default {
|
|||
return {}
|
||||
}
|
||||
},
|
||||
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()
|
||||
},
|
||||
|
|
@ -514,6 +502,7 @@ export default {
|
|||
this.$store.dispatch('setOption', {
|
||||
name: 'customTheme',
|
||||
value: {
|
||||
ignore: true,
|
||||
themeFileVersion: this.selectedVersion,
|
||||
themeEngineVersion: CURRENT_VERSION,
|
||||
...this.previewTheme
|
||||
|
|
@ -532,16 +521,24 @@ export default {
|
|||
}
|
||||
})
|
||||
},
|
||||
updatePreviewColorsAndShadows () {
|
||||
this.previewColors = generateColors({
|
||||
updatePreviewColors () {
|
||||
const result = 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
|
||||
)
|
||||
this.previewTheme.colors = result.theme.colors
|
||||
this.previewTheme.opacity = result.theme.opacity
|
||||
},
|
||||
updatePreviewShadows () {
|
||||
this.previewTheme.shadows = generateShadows(
|
||||
{
|
||||
shadows: this.shadowsLocal,
|
||||
opacity: this.previewTheme.opacity,
|
||||
themeEngineVersion: this.engineVersion
|
||||
},
|
||||
this.previewTheme.colors,
|
||||
relativeLuminance(this.previewTheme.colors.bg) < 0.5 ? 1 : -1
|
||||
).theme.shadows
|
||||
},
|
||||
importTheme () { this.themeImporter.importData() },
|
||||
exportTheme () { this.themeExporter.exportData() },
|
||||
|
|
@ -692,6 +689,8 @@ export default {
|
|||
} else {
|
||||
this.shadowsLocal = shadows
|
||||
}
|
||||
this.updatePreviewColors()
|
||||
this.updatePreviewShadows()
|
||||
this.shadowSelected = this.shadowsAvailable[0]
|
||||
}
|
||||
|
||||
|
|
@ -699,12 +698,32 @@ export default {
|
|||
this.clearFonts()
|
||||
this.fontsLocal = fonts
|
||||
}
|
||||
},
|
||||
updateTheme3Preview () {
|
||||
const theme2 = convertTheme2To3(this.previewTheme)
|
||||
const theme3 = init({
|
||||
inputRuleset: theme2,
|
||||
ultimateBackgroundColor: '#000000',
|
||||
liteMode: true
|
||||
})
|
||||
|
||||
this.themeV3Preview = getCssRules(theme3.eager)
|
||||
.map(x => {
|
||||
if (x.startsWith('html')) {
|
||||
return x.replace('html', '#theme-preview')
|
||||
} else if (x.startsWith('#content')) {
|
||||
return x.replace('#content', '#theme-preview')
|
||||
} else {
|
||||
return '#theme-preview > ' + x
|
||||
}
|
||||
})
|
||||
.join('\n')
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
currentRadii () {
|
||||
try {
|
||||
this.previewRadii = generateRadii({ radii: this.currentRadii })
|
||||
this.previewTheme.radii = generateRadii({ radii: this.currentRadii }).theme.radii
|
||||
this.radiiInvalid = false
|
||||
} catch (e) {
|
||||
this.radiiInvalid = true
|
||||
|
|
@ -713,9 +732,8 @@ export default {
|
|||
},
|
||||
shadowsLocal: {
|
||||
handler () {
|
||||
if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
|
||||
try {
|
||||
this.updatePreviewColorsAndShadows()
|
||||
this.updatePreviewShadows()
|
||||
this.shadowsInvalid = false
|
||||
} catch (e) {
|
||||
this.shadowsInvalid = true
|
||||
|
|
@ -727,7 +745,7 @@ export default {
|
|||
fontsLocal: {
|
||||
handler () {
|
||||
try {
|
||||
this.previewFonts = generateFonts({ fonts: this.fontsLocal })
|
||||
this.previewTheme.fonts = generateFonts({ fonts: this.fontsLocal }).theme.fonts
|
||||
this.fontsInvalid = false
|
||||
} catch (e) {
|
||||
this.fontsInvalid = true
|
||||
|
|
@ -738,18 +756,16 @@ export default {
|
|||
},
|
||||
currentColors () {
|
||||
try {
|
||||
this.updatePreviewColorsAndShadows()
|
||||
this.updatePreviewColors()
|
||||
this.colorsInvalid = false
|
||||
this.shadowsInvalid = false
|
||||
} catch (e) {
|
||||
this.colorsInvalid = true
|
||||
this.shadowsInvalid = true
|
||||
console.warn(e)
|
||||
}
|
||||
},
|
||||
currentOpacity () {
|
||||
try {
|
||||
this.updatePreviewColorsAndShadows()
|
||||
this.updatePreviewColors()
|
||||
} catch (e) {
|
||||
console.warn(e)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,5 +1,8 @@
|
|||
<template>
|
||||
<div class="theme-tab">
|
||||
<div class="alert warning">
|
||||
{{ $t("settings.style.themes2_outdated") }}
|
||||
</div>
|
||||
<div class="presets-container">
|
||||
<div class="save-load">
|
||||
<div
|
||||
|
|
@ -120,7 +123,19 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<preview :style="previewRules" />
|
||||
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
|
||||
<component :is="'style'" v-html="themeV3Preview"/>
|
||||
<!-- eslint-enable vue/no-v-text-v-html-on-component -->
|
||||
<preview id="theme-preview"/>
|
||||
|
||||
<div>
|
||||
<button
|
||||
class="btn button-default"
|
||||
@click="updateTheme3Preview"
|
||||
>
|
||||
{{ $t("settings.style.update_preview") }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<keep-alive>
|
||||
<tab-switcher key="style-tweak">
|
||||
|
|
@ -156,7 +171,7 @@
|
|||
<OpacityInput
|
||||
v-model="bgOpacityLocal"
|
||||
name="bgOpacity"
|
||||
:fallback="previewTheme.opacity.bg"
|
||||
:fallback="previewTheme.opacity?.bg"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="textColorLocal"
|
||||
|
|
@ -167,14 +182,14 @@
|
|||
<ColorInput
|
||||
v-model="accentColorLocal"
|
||||
name="accentColor"
|
||||
:fallback="previewTheme.colors.link"
|
||||
:fallback="previewTheme.colors?.link"
|
||||
:label="$t('settings.accent')"
|
||||
:show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="linkColorLocal"
|
||||
name="linkColor"
|
||||
:fallback="previewTheme.colors.accent"
|
||||
:fallback="previewTheme.colors?.accent"
|
||||
:label="$t('settings.links')"
|
||||
:show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
|
||||
/>
|
||||
|
|
@ -190,13 +205,13 @@
|
|||
v-model="fgTextColorLocal"
|
||||
name="fgTextColor"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.fgText"
|
||||
:fallback="previewTheme.colors?.fgText"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="fgLinkColorLocal"
|
||||
name="fgLinkColor"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.fgLink"
|
||||
:fallback="previewTheme.colors?.fgLink"
|
||||
/>
|
||||
<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
|
||||
</div>
|
||||
|
|
@ -256,14 +271,14 @@
|
|||
<ColorInput
|
||||
v-model="postLinkColorLocal"
|
||||
name="postLinkColor"
|
||||
:fallback="previewTheme.colors.accent"
|
||||
:fallback="previewTheme.colors?.accent"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.postLink" />
|
||||
<ColorInput
|
||||
v-model="postGreentextColorLocal"
|
||||
name="postGreentextColor"
|
||||
:fallback="previewTheme.colors.cGreen"
|
||||
:fallback="previewTheme.colors?.cGreen"
|
||||
:label="$t('settings.greentext')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.postGreentext" />
|
||||
|
|
@ -272,13 +287,13 @@
|
|||
v-model="alertErrorColorLocal"
|
||||
name="alertError"
|
||||
:label="$t('settings.style.advanced_colors.alert_error')"
|
||||
:fallback="previewTheme.colors.alertError"
|
||||
:fallback="previewTheme.colors?.alertError"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="alertErrorTextColorLocal"
|
||||
name="alertErrorText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.alertErrorText"
|
||||
:fallback="previewTheme.colors?.alertErrorText"
|
||||
/>
|
||||
<ContrastRatio
|
||||
:contrast="previewContrast.alertErrorText"
|
||||
|
|
@ -288,13 +303,13 @@
|
|||
v-model="alertWarningColorLocal"
|
||||
name="alertWarning"
|
||||
:label="$t('settings.style.advanced_colors.alert_warning')"
|
||||
:fallback="previewTheme.colors.alertWarning"
|
||||
:fallback="previewTheme.colors?.alertWarning"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="alertWarningTextColorLocal"
|
||||
name="alertWarningText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.alertWarningText"
|
||||
:fallback="previewTheme.colors?.alertWarningText"
|
||||
/>
|
||||
<ContrastRatio
|
||||
:contrast="previewContrast.alertWarningText"
|
||||
|
|
@ -304,13 +319,13 @@
|
|||
v-model="alertNeutralColorLocal"
|
||||
name="alertNeutral"
|
||||
:label="$t('settings.style.advanced_colors.alert_neutral')"
|
||||
:fallback="previewTheme.colors.alertNeutral"
|
||||
:fallback="previewTheme.colors?.alertNeutral"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="alertNeutralTextColorLocal"
|
||||
name="alertNeutralText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.alertNeutralText"
|
||||
:fallback="previewTheme.colors?.alertNeutralText"
|
||||
/>
|
||||
<ContrastRatio
|
||||
:contrast="previewContrast.alertNeutralText"
|
||||
|
|
@ -319,7 +334,7 @@
|
|||
<OpacityInput
|
||||
v-model="alertOpacityLocal"
|
||||
name="alertOpacity"
|
||||
:fallback="previewTheme.opacity.alert"
|
||||
:fallback="previewTheme.opacity?.alert"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -328,13 +343,13 @@
|
|||
v-model="badgeNotificationColorLocal"
|
||||
name="badgeNotification"
|
||||
:label="$t('settings.style.advanced_colors.badge_notification')"
|
||||
:fallback="previewTheme.colors.badgeNotification"
|
||||
:fallback="previewTheme.colors?.badgeNotification"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="badgeNotificationTextColorLocal"
|
||||
name="badgeNotificationText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.badgeNotificationText"
|
||||
:fallback="previewTheme.colors?.badgeNotificationText"
|
||||
/>
|
||||
<ContrastRatio
|
||||
:contrast="previewContrast.badgeNotificationText"
|
||||
|
|
@ -346,19 +361,19 @@
|
|||
<ColorInput
|
||||
v-model="panelColorLocal"
|
||||
name="panelColor"
|
||||
:fallback="previewTheme.colors.panel"
|
||||
:fallback="previewTheme.colors?.panel"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="panelOpacityLocal"
|
||||
name="panelOpacity"
|
||||
:fallback="previewTheme.opacity.panel"
|
||||
:fallback="previewTheme.opacity?.panel"
|
||||
:disabled="panelColorLocal === 'transparent'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="panelTextColorLocal"
|
||||
name="panelTextColor"
|
||||
:fallback="previewTheme.colors.panelText"
|
||||
:fallback="previewTheme.colors?.panelText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio
|
||||
|
|
@ -368,7 +383,7 @@
|
|||
<ColorInput
|
||||
v-model="panelLinkColorLocal"
|
||||
name="panelLinkColor"
|
||||
:fallback="previewTheme.colors.panelLink"
|
||||
:fallback="previewTheme.colors?.panelLink"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ContrastRatio
|
||||
|
|
@ -381,20 +396,20 @@
|
|||
<ColorInput
|
||||
v-model="topBarColorLocal"
|
||||
name="topBarColor"
|
||||
:fallback="previewTheme.colors.topBar"
|
||||
:fallback="previewTheme.colors?.topBar"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="topBarTextColorLocal"
|
||||
name="topBarTextColor"
|
||||
:fallback="previewTheme.colors.topBarText"
|
||||
:fallback="previewTheme.colors?.topBarText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.topBarText" />
|
||||
<ColorInput
|
||||
v-model="topBarLinkColorLocal"
|
||||
name="topBarLinkColor"
|
||||
:fallback="previewTheme.colors.topBarLink"
|
||||
:fallback="previewTheme.colors?.topBarLink"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.topBarLink" />
|
||||
|
|
@ -404,19 +419,19 @@
|
|||
<ColorInput
|
||||
v-model="inputColorLocal"
|
||||
name="inputColor"
|
||||
:fallback="previewTheme.colors.input"
|
||||
:fallback="previewTheme.colors?.input"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="inputOpacityLocal"
|
||||
name="inputOpacity"
|
||||
:fallback="previewTheme.opacity.input"
|
||||
:fallback="previewTheme.opacity?.input"
|
||||
:disabled="inputColorLocal === 'transparent'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="inputTextColorLocal"
|
||||
name="inputTextColor"
|
||||
:fallback="previewTheme.colors.inputText"
|
||||
:fallback="previewTheme.colors?.inputText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.inputText" />
|
||||
|
|
@ -426,33 +441,33 @@
|
|||
<ColorInput
|
||||
v-model="btnColorLocal"
|
||||
name="btnColor"
|
||||
:fallback="previewTheme.colors.btn"
|
||||
:fallback="previewTheme.colors?.btn"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="btnOpacityLocal"
|
||||
name="btnOpacity"
|
||||
:fallback="previewTheme.opacity.btn"
|
||||
:fallback="previewTheme.opacity?.btn"
|
||||
:disabled="btnColorLocal === 'transparent'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnTextColorLocal"
|
||||
name="btnTextColor"
|
||||
:fallback="previewTheme.colors.btnText"
|
||||
:fallback="previewTheme.colors?.btnText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnText" />
|
||||
<ColorInput
|
||||
v-model="btnPanelTextColorLocal"
|
||||
name="btnPanelTextColor"
|
||||
:fallback="previewTheme.colors.btnPanelText"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.btnTopBarText"
|
||||
:label="$t('settings.style.advanced_colors.top_bar')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnTopBarText" />
|
||||
|
|
@ -460,27 +475,27 @@
|
|||
<ColorInput
|
||||
v-model="btnPressedColorLocal"
|
||||
name="btnPressedColor"
|
||||
:fallback="previewTheme.colors.btnPressed"
|
||||
:fallback="previewTheme.colors?.btnPressed"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnPressedTextColorLocal"
|
||||
name="btnPressedTextColor"
|
||||
:fallback="previewTheme.colors.btnPressedText"
|
||||
:fallback="previewTheme.colors?.btnPressedText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnPressedText" />
|
||||
<ColorInput
|
||||
v-model="btnPressedPanelTextColorLocal"
|
||||
name="btnPressedPanelTextColor"
|
||||
:fallback="previewTheme.colors.btnPressedPanelText"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.btnPressedTopBarText"
|
||||
:label="$t('settings.style.advanced_colors.top_bar')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
|
||||
|
|
@ -488,52 +503,52 @@
|
|||
<ColorInput
|
||||
v-model="btnDisabledColorLocal"
|
||||
name="btnDisabledColor"
|
||||
:fallback="previewTheme.colors.btnDisabled"
|
||||
:fallback="previewTheme.colors?.btnDisabled"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnDisabledTextColorLocal"
|
||||
name="btnDisabledTextColor"
|
||||
:fallback="previewTheme.colors.btnDisabledText"
|
||||
:fallback="previewTheme.colors?.btnDisabledText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnDisabledPanelTextColorLocal"
|
||||
name="btnDisabledPanelTextColor"
|
||||
:fallback="previewTheme.colors.btnDisabledPanelText"
|
||||
:fallback="previewTheme.colors?.btnDisabledPanelText"
|
||||
:label="$t('settings.style.advanced_colors.panel_header')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnDisabledTopBarTextColorLocal"
|
||||
name="btnDisabledTopBarTextColor"
|
||||
:fallback="previewTheme.colors.btnDisabledTopBarText"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.btnToggled"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="btnToggledTextColorLocal"
|
||||
name="btnToggledTextColor"
|
||||
:fallback="previewTheme.colors.btnToggledText"
|
||||
:fallback="previewTheme.colors?.btnToggledText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnToggledText" />
|
||||
<ColorInput
|
||||
v-model="btnToggledPanelTextColorLocal"
|
||||
name="btnToggledPanelTextColor"
|
||||
:fallback="previewTheme.colors.btnToggledPanelText"
|
||||
: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"
|
||||
:fallback="previewTheme.colors?.btnToggledTopBarText"
|
||||
:label="$t('settings.style.advanced_colors.top_bar')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
|
||||
|
|
@ -543,20 +558,20 @@
|
|||
<ColorInput
|
||||
v-model="tabColorLocal"
|
||||
name="tabColor"
|
||||
:fallback="previewTheme.colors.tab"
|
||||
:fallback="previewTheme.colors?.tab"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="tabTextColorLocal"
|
||||
name="tabTextColor"
|
||||
:fallback="previewTheme.colors.tabText"
|
||||
:fallback="previewTheme.colors?.tabText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.tabText" />
|
||||
<ColorInput
|
||||
v-model="tabActiveTextColorLocal"
|
||||
name="tabActiveTextColor"
|
||||
:fallback="previewTheme.colors.tabActiveText"
|
||||
:fallback="previewTheme.colors?.tabActiveText"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.tabActiveText" />
|
||||
|
|
@ -566,13 +581,13 @@
|
|||
<ColorInput
|
||||
v-model="borderColorLocal"
|
||||
name="borderColor"
|
||||
:fallback="previewTheme.colors.border"
|
||||
:fallback="previewTheme.colors?.border"
|
||||
:label="$t('settings.style.common.color')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="borderOpacityLocal"
|
||||
name="borderOpacity"
|
||||
:fallback="previewTheme.opacity.border"
|
||||
:fallback="previewTheme.opacity?.border"
|
||||
:disabled="borderColorLocal === 'transparent'"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -581,25 +596,25 @@
|
|||
<ColorInput
|
||||
v-model="faintColorLocal"
|
||||
name="faintColor"
|
||||
:fallback="previewTheme.colors.faint"
|
||||
:fallback="previewTheme.colors?.faint"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="faintLinkColorLocal"
|
||||
name="faintLinkColor"
|
||||
:fallback="previewTheme.colors.faintLink"
|
||||
:fallback="previewTheme.colors?.faintLink"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="panelFaintColorLocal"
|
||||
name="panelFaintColor"
|
||||
:fallback="previewTheme.colors.panelFaint"
|
||||
:fallback="previewTheme.colors?.panelFaint"
|
||||
:label="$t('settings.style.advanced_colors.panel_header')"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="faintOpacityLocal"
|
||||
name="faintOpacity"
|
||||
:fallback="previewTheme.opacity.faint"
|
||||
:fallback="previewTheme.opacity?.faint"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -608,12 +623,12 @@
|
|||
v-model="underlayColorLocal"
|
||||
name="underlay"
|
||||
:label="$t('settings.style.advanced_colors.underlay')"
|
||||
:fallback="previewTheme.colors.underlay"
|
||||
:fallback="previewTheme.colors?.underlay"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="underlayOpacityLocal"
|
||||
name="underlayOpacity"
|
||||
:fallback="previewTheme.opacity.underlay"
|
||||
:fallback="previewTheme.opacity?.underlay"
|
||||
:disabled="underlayOpacityLocal === 'transparent'"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -623,7 +638,7 @@
|
|||
v-model="wallpaperColorLocal"
|
||||
name="wallpaper"
|
||||
:label="$t('settings.style.advanced_colors.wallpaper')"
|
||||
:fallback="previewTheme.colors.wallpaper"
|
||||
:fallback="previewTheme.colors?.wallpaper"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -632,13 +647,13 @@
|
|||
v-model="pollColorLocal"
|
||||
name="poll"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.poll"
|
||||
:fallback="previewTheme.colors?.poll"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="pollTextColorLocal"
|
||||
name="pollText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.pollText"
|
||||
:fallback="previewTheme.colors?.pollText"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -647,7 +662,7 @@
|
|||
v-model="iconColorLocal"
|
||||
name="icon"
|
||||
:label="$t('settings.style.advanced_colors.icons')"
|
||||
:fallback="previewTheme.colors.icon"
|
||||
:fallback="previewTheme.colors?.icon"
|
||||
/>
|
||||
</div>
|
||||
<div class="color-item">
|
||||
|
|
@ -656,20 +671,20 @@
|
|||
v-model="highlightColorLocal"
|
||||
name="highlight"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.highlight"
|
||||
:fallback="previewTheme.colors?.highlight"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="highlightTextColorLocal"
|
||||
name="highlightText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.highlightText"
|
||||
:fallback="previewTheme.colors?.highlightText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.highlightText" />
|
||||
<ColorInput
|
||||
v-model="highlightLinkColorLocal"
|
||||
name="highlightLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.highlightLink"
|
||||
:fallback="previewTheme.colors?.highlightLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.highlightLink" />
|
||||
</div>
|
||||
|
|
@ -679,26 +694,26 @@
|
|||
v-model="popoverColorLocal"
|
||||
name="popover"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.popover"
|
||||
:fallback="previewTheme.colors?.popover"
|
||||
/>
|
||||
<OpacityInput
|
||||
v-model="popoverOpacityLocal"
|
||||
name="popoverOpacity"
|
||||
:fallback="previewTheme.opacity.popover"
|
||||
:fallback="previewTheme.opacity?.popover"
|
||||
:disabled="popoverOpacityLocal === 'transparent'"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="popoverTextColorLocal"
|
||||
name="popoverText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.popoverText"
|
||||
:fallback="previewTheme.colors?.popoverText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.popoverText" />
|
||||
<ColorInput
|
||||
v-model="popoverLinkColorLocal"
|
||||
name="popoverLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.popoverLink"
|
||||
:fallback="previewTheme.colors?.popoverLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.popoverLink" />
|
||||
</div>
|
||||
|
|
@ -708,20 +723,20 @@
|
|||
v-model="selectedPostColorLocal"
|
||||
name="selectedPost"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.selectedPost"
|
||||
:fallback="previewTheme.colors?.selectedPost"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="selectedPostTextColorLocal"
|
||||
name="selectedPostText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.selectedPostText"
|
||||
:fallback="previewTheme.colors?.selectedPostText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.selectedPostText" />
|
||||
<ColorInput
|
||||
v-model="selectedPostLinkColorLocal"
|
||||
name="selectedPostLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.selectedPostLink"
|
||||
:fallback="previewTheme.colors?.selectedPostLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.selectedPostLink" />
|
||||
</div>
|
||||
|
|
@ -731,20 +746,20 @@
|
|||
v-model="selectedMenuColorLocal"
|
||||
name="selectedMenu"
|
||||
:label="$t('settings.background')"
|
||||
:fallback="previewTheme.colors.selectedMenu"
|
||||
:fallback="previewTheme.colors?.selectedMenu"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="selectedMenuTextColorLocal"
|
||||
name="selectedMenuText"
|
||||
:label="$t('settings.text')"
|
||||
:fallback="previewTheme.colors.selectedMenuText"
|
||||
:fallback="previewTheme.colors?.selectedMenuText"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.selectedMenuText" />
|
||||
<ColorInput
|
||||
v-model="selectedMenuLinkColorLocal"
|
||||
name="selectedMenuLink"
|
||||
:label="$t('settings.links')"
|
||||
:fallback="previewTheme.colors.selectedMenuLink"
|
||||
:fallback="previewTheme.colors?.selectedMenuLink"
|
||||
/>
|
||||
<ContrastRatio :contrast="previewContrast.selectedMenuLink" />
|
||||
</div>
|
||||
|
|
@ -753,57 +768,57 @@
|
|||
<ColorInput
|
||||
v-model="chatBgColorLocal"
|
||||
name="chatBgColor"
|
||||
:fallback="previewTheme.colors.bg"
|
||||
:fallback="previewTheme.colors?.bg"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
|
||||
<ColorInput
|
||||
v-model="chatMessageIncomingBgColorLocal"
|
||||
name="chatMessageIncomingBgColor"
|
||||
:fallback="previewTheme.colors.bg"
|
||||
:fallback="previewTheme.colors?.bg"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageIncomingTextColorLocal"
|
||||
name="chatMessageIncomingTextColor"
|
||||
:fallback="previewTheme.colors.text"
|
||||
:fallback="previewTheme.colors?.text"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageIncomingLinkColorLocal"
|
||||
name="chatMessageIncomingLinkColor"
|
||||
:fallback="previewTheme.colors.link"
|
||||
:fallback="previewTheme.colors?.link"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageIncomingBorderColorLocal"
|
||||
name="chatMessageIncomingBorderLinkColor"
|
||||
:fallback="previewTheme.colors.fg"
|
||||
:fallback="previewTheme.colors?.fg"
|
||||
:label="$t('settings.style.advanced_colors.chat.border')"
|
||||
/>
|
||||
<h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
|
||||
<ColorInput
|
||||
v-model="chatMessageOutgoingBgColorLocal"
|
||||
name="chatMessageOutgoingBgColor"
|
||||
:fallback="previewTheme.colors.bg"
|
||||
:fallback="previewTheme.colors?.bg"
|
||||
:label="$t('settings.background')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageOutgoingTextColorLocal"
|
||||
name="chatMessageOutgoingTextColor"
|
||||
:fallback="previewTheme.colors.text"
|
||||
:fallback="previewTheme.colors?.text"
|
||||
:label="$t('settings.text')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageOutgoingLinkColorLocal"
|
||||
name="chatMessageOutgoingLinkColor"
|
||||
:fallback="previewTheme.colors.link"
|
||||
:fallback="previewTheme.colors?.link"
|
||||
:label="$t('settings.links')"
|
||||
/>
|
||||
<ColorInput
|
||||
v-model="chatMessageOutgoingBorderColorLocal"
|
||||
name="chatMessageOutgoingBorderLinkColor"
|
||||
:fallback="previewTheme.colors.bg"
|
||||
:fallback="previewTheme.colors?.bg"
|
||||
:label="$t('settings.style.advanced_colors.chat.border')"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -826,7 +841,7 @@
|
|||
v-model="btnRadiusLocal"
|
||||
name="btnRadius"
|
||||
:label="$t('settings.btnRadius')"
|
||||
:fallback="previewTheme.radii.btn"
|
||||
:fallback="previewTheme.radii?.btn"
|
||||
max="16"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -834,7 +849,7 @@
|
|||
v-model="inputRadiusLocal"
|
||||
name="inputRadius"
|
||||
:label="$t('settings.inputRadius')"
|
||||
:fallback="previewTheme.radii.input"
|
||||
:fallback="previewTheme.radii?.input"
|
||||
max="9"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -842,7 +857,7 @@
|
|||
v-model="checkboxRadiusLocal"
|
||||
name="checkboxRadius"
|
||||
:label="$t('settings.checkboxRadius')"
|
||||
:fallback="previewTheme.radii.checkbox"
|
||||
:fallback="previewTheme.radii?.checkbox"
|
||||
max="16"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -850,7 +865,7 @@
|
|||
v-model="panelRadiusLocal"
|
||||
name="panelRadius"
|
||||
:label="$t('settings.panelRadius')"
|
||||
:fallback="previewTheme.radii.panel"
|
||||
:fallback="previewTheme.radii?.panel"
|
||||
max="50"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -858,7 +873,7 @@
|
|||
v-model="avatarRadiusLocal"
|
||||
name="avatarRadius"
|
||||
:label="$t('settings.avatarRadius')"
|
||||
:fallback="previewTheme.radii.avatar"
|
||||
:fallback="previewTheme.radii?.avatar"
|
||||
max="28"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -866,7 +881,7 @@
|
|||
v-model="avatarAltRadiusLocal"
|
||||
name="avatarAltRadius"
|
||||
:label="$t('settings.avatarAltRadius')"
|
||||
:fallback="previewTheme.radii.avatarAlt"
|
||||
:fallback="previewTheme.radii?.avatarAlt"
|
||||
max="28"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -874,7 +889,7 @@
|
|||
v-model="attachmentRadiusLocal"
|
||||
name="attachmentRadius"
|
||||
:label="$t('settings.attachmentRadius')"
|
||||
:fallback="previewTheme.radii.attachment"
|
||||
:fallback="previewTheme.radii?.attachment"
|
||||
max="50"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -882,7 +897,7 @@
|
|||
v-model="tooltipRadiusLocal"
|
||||
name="tooltipRadius"
|
||||
:label="$t('settings.tooltipRadius')"
|
||||
:fallback="previewTheme.radii.tooltip"
|
||||
:fallback="previewTheme.radii?.tooltip"
|
||||
max="50"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -890,7 +905,7 @@
|
|||
v-model="chatMessageRadiusLocal"
|
||||
name="chatMessageRadius"
|
||||
:label="$t('settings.chatMessageRadius')"
|
||||
:fallback="previewTheme.radii.chatMessage || 2"
|
||||
:fallback="previewTheme.radii?.chatMessage || 2"
|
||||
max="50"
|
||||
hard-min="0"
|
||||
/>
|
||||
|
|
@ -996,26 +1011,26 @@
|
|||
v-model="fontsLocal.interface"
|
||||
name="ui"
|
||||
:label="$t('settings.style.fonts.components.interface')"
|
||||
:fallback="previewTheme.fonts.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"
|
||||
:fallback="previewTheme.fonts?.input"
|
||||
/>
|
||||
<FontControl
|
||||
v-model="fontsLocal.post"
|
||||
name="post"
|
||||
:label="$t('settings.style.fonts.components.post')"
|
||||
:fallback="previewTheme.fonts.post"
|
||||
:fallback="previewTheme.fonts?.post"
|
||||
/>
|
||||
<FontControl
|
||||
v-model="fontsLocal.postCode"
|
||||
name="postCode"
|
||||
:label="$t('settings.style.fonts.components.postCode')"
|
||||
:fallback="previewTheme.fonts.postCode"
|
||||
:fallback="previewTheme.fonts?.postCode"
|
||||
/>
|
||||
</div>
|
||||
</tab-switcher>
|
||||
|
|
|
|||
|
|
@ -745,6 +745,8 @@
|
|||
"enable_web_push_always_show_tip": "Some browsers (Chromium, Chrome) require that push messages always result in a notification, otherwise generic 'Website was updated in background' is shown, enable this to prevent this notification from showing, as Chrome seem to hide push notifications if tab is in focus. Can result in showing duplicate notifications on other browsers.",
|
||||
"more_settings": "More settings",
|
||||
"style": {
|
||||
"themes2_outdated": "Editor for Themes V2 is no longer supported and presented here for sake of legacy.",
|
||||
"update_preview": "Update preview",
|
||||
"themes3": {
|
||||
"define": "Override",
|
||||
"font": {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,21 @@
|
|||
import Cookies from 'js-cookie'
|
||||
import { setPreset, applyTheme, applyConfig } from '../services/style_setter/style_setter.js'
|
||||
import { applyConfig } from '../services/style_setter/style_setter.js'
|
||||
import messages from '../i18n/messages'
|
||||
import { set } from 'lodash'
|
||||
import localeService from '../services/locale/locale.service.js'
|
||||
|
||||
const BACKEND_LANGUAGE_COOKIE_NAME = 'userLanguage'
|
||||
const APPEARANCE_SETTINGS_KEYS = new Set([
|
||||
'sidebarColumnWidth',
|
||||
'contentColumnWidth',
|
||||
'notifsColumnWidth',
|
||||
'textSize',
|
||||
'navbarSize',
|
||||
'panelHeaderSize',
|
||||
'forcedRoundness',
|
||||
'emojiSize',
|
||||
'emojiReactionsScale'
|
||||
])
|
||||
|
||||
const browserLocale = (window.navigator.language || 'en').split('-')[0]
|
||||
|
||||
|
|
@ -81,6 +92,11 @@ export const defaultState = {
|
|||
chatMention: true,
|
||||
polls: true
|
||||
},
|
||||
palette: null,
|
||||
theme3hacks: {
|
||||
underlay: 'none',
|
||||
badgeColor: null
|
||||
},
|
||||
webPushNotifications: false,
|
||||
webPushAlwaysShowNotifications: false,
|
||||
muteWords: [],
|
||||
|
|
@ -185,7 +201,6 @@ const config = {
|
|||
applyConfig(state)
|
||||
},
|
||||
setOption (state, { name, value }) {
|
||||
console.log('SET OPTION', state, name, value)
|
||||
set(state, name, value)
|
||||
},
|
||||
setHighlight (state, { user, color, type }) {
|
||||
|
|
@ -261,30 +276,23 @@ const config = {
|
|||
}
|
||||
} else {
|
||||
commit('setOption', { name, value })
|
||||
if (
|
||||
name.startsWith('theme3hacks') ||
|
||||
APPEARANCE_SETTINGS_KEYS.has(name)
|
||||
) {
|
||||
applyConfig(state)
|
||||
}
|
||||
switch (name) {
|
||||
case 'theme':
|
||||
setPreset(value)
|
||||
break
|
||||
case 'sidebarColumnWidth':
|
||||
case 'contentColumnWidth':
|
||||
case 'notifsColumnWidth':
|
||||
case 'textSize':
|
||||
case 'navbarSize':
|
||||
case 'panelHeaderSize':
|
||||
case 'forcedRoundness':
|
||||
case 'emojiSize':
|
||||
case 'emojiReactionsScale':
|
||||
applyConfig(state)
|
||||
dispatch('setTheme', { themeName: value, recompile: true })
|
||||
break
|
||||
case 'customTheme':
|
||||
case 'customThemeSource': {
|
||||
const { themeDebug } = state
|
||||
applyTheme(value, () => {}, themeDebug)
|
||||
if (!value.ignore) dispatch('setTheme', { themeData: value })
|
||||
break
|
||||
}
|
||||
case 'themeDebug': {
|
||||
const { customTheme, customThemeSource } = state
|
||||
applyTheme(customTheme || customThemeSource, () => {}, value)
|
||||
dispatch('setTheme', { recompile: true })
|
||||
break
|
||||
}
|
||||
case 'interfaceLanguage':
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
import { getPreset, applyTheme } from '../services/style_setter/style_setter.js'
|
||||
import { CURRENT_VERSION } from '../services/theme_data/theme_data.service.js'
|
||||
import { getPreset, applyTheme, tryLoadCache } from '../services/style_setter/style_setter.js'
|
||||
import { CURRENT_VERSION, generatePreset } from 'src/services/theme_data/theme_data.service.js'
|
||||
import { convertTheme2To3 } from 'src/services/theme_data/theme2_to_theme3.js'
|
||||
import apiService from '../services/api/api.service.js'
|
||||
import { instanceDefaultProperties } from './config.js'
|
||||
import { langCodeToCldrName, ensureFinalFallback } from '../i18n/languages.js'
|
||||
|
|
@ -286,9 +287,6 @@ const instance = {
|
|||
dispatch('initializeSocket')
|
||||
}
|
||||
break
|
||||
case 'theme':
|
||||
dispatch('setTheme', value)
|
||||
break
|
||||
}
|
||||
},
|
||||
async getStaticEmoji ({ commit }) {
|
||||
|
|
@ -378,25 +376,86 @@ const instance = {
|
|||
}
|
||||
},
|
||||
|
||||
setTheme ({ commit, rootState }, themeName) {
|
||||
commit('setInstanceOption', { name: 'theme', value: themeName })
|
||||
getPreset(themeName)
|
||||
.then(themeData => {
|
||||
commit('setInstanceOption', { name: 'themeData', value: themeData })
|
||||
// No need to apply theme if there's user theme already
|
||||
const { customTheme, themeDebug } = rootState.config
|
||||
const { themeApplied } = rootState.interface
|
||||
if (customTheme || themeApplied) return
|
||||
setTheme ({ commit, state, rootState }, { themeName, themeData, recompile } = {}) {
|
||||
// const {
|
||||
// themeApplied
|
||||
// } = rootState.interface
|
||||
const {
|
||||
theme: instanceThemeName
|
||||
} = state
|
||||
|
||||
// New theme presets don't have 'theme' property, they use 'source'
|
||||
const themeSource = themeData.source
|
||||
if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
|
||||
applyTheme(themeSource, null, themeDebug)
|
||||
const {
|
||||
customTheme: userThemeSnapshot,
|
||||
customThemeSource: userThemeSource,
|
||||
forceThemeRecompilation,
|
||||
themeDebug
|
||||
} = rootState.config
|
||||
|
||||
const forceRecompile = forceThemeRecompilation || recompile
|
||||
|
||||
// If we're not not forced to recompile try using
|
||||
// cache (tryLoadCache return true if load successful)
|
||||
if (!forceRecompile && !themeDebug && tryLoadCache()) {
|
||||
commit('setThemeApplied')
|
||||
}
|
||||
|
||||
const normalizeThemeData = (themeData) => {
|
||||
console.log('NORMAL', themeData)
|
||||
if (themeData.themeFileVerison === 1) {
|
||||
return generatePreset(themeData).theme
|
||||
}
|
||||
// New theme presets don't have 'theme' property, they use 'source'
|
||||
const themeSource = themeData.source
|
||||
|
||||
let out // shout, shout let it all out
|
||||
if (!themeData.theme || (themeSource && themeSource.themeEngineVersion === CURRENT_VERSION)) {
|
||||
out = themeSource || themeData
|
||||
} else {
|
||||
out = themeData.theme
|
||||
}
|
||||
|
||||
// generatePreset here basically creates/updates "snapshot",
|
||||
// while also fixing the 2.2 -> 2.3 colors/shadows/etc
|
||||
return generatePreset(out).theme
|
||||
}
|
||||
|
||||
let promise = null
|
||||
|
||||
if (themeName) {
|
||||
// commit('setInstanceOption', { name: 'theme', value: themeName })
|
||||
promise = getPreset(themeName)
|
||||
.then(themeData => {
|
||||
// commit('setInstanceOption', { name: 'themeData', value: themeData })
|
||||
return normalizeThemeData(themeData)
|
||||
})
|
||||
} else if (themeData) {
|
||||
promise = Promise.resolve(normalizeThemeData(themeData))
|
||||
} else {
|
||||
if (userThemeSource || userThemeSnapshot) {
|
||||
if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
|
||||
promise = Promise.resolve(normalizeThemeData(userThemeSource))
|
||||
} else {
|
||||
applyTheme(themeData.theme, null, themeDebug)
|
||||
promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
|
||||
}
|
||||
commit('setThemeApplied')
|
||||
} else if (instanceThemeName) {
|
||||
promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
|
||||
}
|
||||
}
|
||||
|
||||
promise
|
||||
.then(realThemeData => {
|
||||
console.log('FR FR 1', realThemeData)
|
||||
const ruleset = convertTheme2To3(realThemeData)
|
||||
console.log('FR FR 2', ruleset)
|
||||
|
||||
applyTheme(
|
||||
ruleset,
|
||||
() => commit('setThemeApplied'),
|
||||
themeDebug
|
||||
)
|
||||
})
|
||||
|
||||
return promise
|
||||
},
|
||||
fetchEmoji ({ dispatch, state }) {
|
||||
if (!state.customEmojiFetched) {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
import { hex2rgb } from '../color_convert/color_convert.js'
|
||||
import { generatePreset } from '../theme_data/theme_data.service.js'
|
||||
import { init, getEngineChecksum } from '../theme_data/theme_data_3.service.js'
|
||||
import { convertTheme2To3 } from '../theme_data/theme2_to_theme3.js'
|
||||
import { getCssRules } from '../theme_data/css_utils.js'
|
||||
import { defaultState } from '../../modules/config.js'
|
||||
import { chunk } from 'lodash'
|
||||
|
|
@ -45,25 +43,19 @@ const adoptStyleSheets = (styles) => {
|
|||
// is nothing to do here.
|
||||
}
|
||||
|
||||
export const generateTheme = async (input, callbacks, debug) => {
|
||||
export const generateTheme = async (inputRuleset, callbacks, debug) => {
|
||||
const {
|
||||
onNewRule = (rule, isLazy) => {},
|
||||
onLazyFinished = () => {},
|
||||
onEagerFinished = () => {}
|
||||
} = callbacks
|
||||
|
||||
let extraRules
|
||||
if (input.themeFileVersion === 1) {
|
||||
extraRules = convertTheme2To3(input)
|
||||
} else {
|
||||
const { theme } = generatePreset(input)
|
||||
extraRules = convertTheme2To3(theme)
|
||||
}
|
||||
|
||||
// Assuming that "worst case scenario background" is panel background since it's the most likely one
|
||||
const themes3 = init(extraRules, extraRules[0].directives['--bg'].split('|')[1].trim(), debug)
|
||||
|
||||
console.log('DEBUG 2 IS', debug)
|
||||
const themes3 = init({
|
||||
inputRuleset,
|
||||
ultimateBackgroundColor: inputRuleset[0].directives['--bg'].split('|')[1].trim(),
|
||||
debug
|
||||
})
|
||||
|
||||
getCssRules(themes3.eager, debug).forEach(rule => {
|
||||
// Hacks to support multiple selectors on same component
|
||||
|
|
@ -158,8 +150,6 @@ export const applyTheme = async (input, onFinish = (data) => {}, debug) => {
|
|||
const eagerStyles = createStyleSheet(EAGER_STYLE_ID)
|
||||
const lazyStyles = createStyleSheet(LAZY_STYLE_ID)
|
||||
|
||||
console.log('DEBUG IS', debug)
|
||||
|
||||
const { lazyProcessFunc } = await generateTheme(
|
||||
input,
|
||||
{
|
||||
|
|
@ -212,7 +202,6 @@ const extractStyleConfig = ({
|
|||
textSize
|
||||
}
|
||||
|
||||
console.log(forcedRoundness)
|
||||
switch (forcedRoundness) {
|
||||
case 'disable':
|
||||
break
|
||||
|
|
@ -321,5 +310,3 @@ export const getPreset = (val) => {
|
|||
return { theme: data, source: theme.source }
|
||||
})
|
||||
}
|
||||
|
||||
export const setPreset = (val) => getPreset(val).then(data => applyTheme(data))
|
||||
|
|
|
|||
|
|
@ -265,6 +265,7 @@ export const convertTheme2To3 = (data) => {
|
|||
const newRules = []
|
||||
Object.keys(data.fonts || {}).forEach(key => {
|
||||
if (!fontsKeys.has(key)) return
|
||||
if (!data.fonts[key]) return
|
||||
const originalFont = data.fonts[key].family
|
||||
const rule = { source: '2to3' }
|
||||
|
||||
|
|
|
|||
|
|
@ -149,7 +149,14 @@ const ruleToSelector = genericRuleToSelector(components)
|
|||
|
||||
export const getEngineChecksum = () => engineChecksum
|
||||
|
||||
export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
|
||||
export const init = ({
|
||||
inputRuleset,
|
||||
ultimateBackgroundColor,
|
||||
debug = false,
|
||||
liteMode = false,
|
||||
rootComponentName = 'Root'
|
||||
}) => {
|
||||
if (!inputRuleset) throw new Error('Ruleset is null or undefined!')
|
||||
const staticVars = {}
|
||||
const stacked = {}
|
||||
const computed = {}
|
||||
|
|
@ -158,7 +165,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
|
|||
...Object.values(components)
|
||||
.map(c => (c.defaultRules || []).map(r => ({ component: c.name, ...r, source: 'Built-in' })))
|
||||
.reduce((acc, arr) => [...acc, ...arr], []),
|
||||
...extraRuleset
|
||||
...inputRuleset
|
||||
].map(rule => {
|
||||
normalizeCombination(rule)
|
||||
let currentParent = rule.parent
|
||||
|
|
@ -451,7 +458,7 @@ export const init = (extraRuleset, ultimateBackgroundColor, debug) => {
|
|||
}
|
||||
|
||||
const t0 = performance.now()
|
||||
const combinations = processInnerComponent(components.Root)
|
||||
const combinations = processInnerComponent(components[rootComponentName] ?? components.Root)
|
||||
const t1 = performance.now()
|
||||
console.debug('Tree traveral took ' + (t1 - t0) + ' ms')
|
||||
|
||||
|
|
|
|||
|
|
@ -66,7 +66,7 @@ describe('Theme Data 3', () => {
|
|||
this.timeout(5000)
|
||||
|
||||
it('Test initialization without anything', () => {
|
||||
const out = init([], '#DEADAF')
|
||||
const out = init({ ruleset: [], ultimateBackgroundColor: '#DEADAF' })
|
||||
|
||||
expect(out).to.have.property('eager')
|
||||
expect(out).to.have.property('lazy')
|
||||
|
|
@ -85,13 +85,16 @@ describe('Theme Data 3', () => {
|
|||
})
|
||||
|
||||
it('Test initialization with a basic palette', () => {
|
||||
const out = init([{
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--bg': 'color | #008080',
|
||||
'--fg': 'color | #00C0A0'
|
||||
}
|
||||
}], '#DEADAF')
|
||||
const out = init({
|
||||
ruleset: [{
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--bg': 'color | #008080',
|
||||
'--fg': 'color | #00C0A0'
|
||||
}
|
||||
}],
|
||||
ultimateBackgroundColor: '#DEADAF'
|
||||
})
|
||||
|
||||
expect(out.staticVars).to.have.property('bg').equal('#008080')
|
||||
expect(out.staticVars).to.have.property('fg').equal('#00C0A0')
|
||||
|
|
@ -105,17 +108,20 @@ describe('Theme Data 3', () => {
|
|||
})
|
||||
|
||||
it('Test initialization with opacity', () => {
|
||||
const out = init([{
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--bg': 'color | #008080'
|
||||
}
|
||||
}, {
|
||||
component: 'Panel',
|
||||
directives: {
|
||||
opacity: 0.5
|
||||
}
|
||||
}], '#DEADAF')
|
||||
const out = init({
|
||||
ruleset: [{
|
||||
component: 'Root',
|
||||
directives: {
|
||||
'--bg': 'color | #008080'
|
||||
}
|
||||
}, {
|
||||
component: 'Panel',
|
||||
directives: {
|
||||
opacity: 0.5
|
||||
}
|
||||
}],
|
||||
ultimateBackgroundColor: '#DEADAF'
|
||||
})
|
||||
|
||||
expect(out.staticVars).to.have.property('bg').equal('#008080')
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue