No OneTemporary
Actions

Authored By

Unknown

Size

45 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
	index f3ab41a25a..b5423a8c0b 100644
	--- a/src/components/font_control/font_control.vue
	+++ b/src/components/font_control/font_control.vue
	@@ -1,146 +1,146 @@
	<template>
	<div
	class="font-control"
	:class="{ custom: isCustom }"
	>
	<label
	:id="name + '-label'"
	:for="preset === 'custom' ? name : name + '-font-switcher'"
	class="label"
	>
	{{ label }}
	</label>
	{{ ' ' }}
	<Checkbox
	v-if="typeof fallback !== 'undefined'"
	:id="name + '-o'"
	:modelValue="present"
	@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
	>
	{{ $t('settings.style.themes3.define') }}
	</Checkbox>
	<p v-if="modelValue?.family">
	<label
	v-if="manualEntry"
	:id="name + '-label'"
	:for="preset === 'custom' ? name : name + '-font-switcher'"
	class="label"
	>
	<i18n-t
	keypath="settings.style.themes3.font.entry"
	tag="span"
	>
	<template #fontFamily>
	<code>font-family</code>
	</template>
	</i18n-t>
	</label>
	<label
	v-else
	:id="name + '-label'"
	:for="preset === 'custom' ? name : name + '-font-switcher'"
	class="label"
	>
	{{ $t('settings.style.themes3.font.select') }}
	</label>
	{{ ' ' }}
	<span
	v-if="manualEntry"
	class="btn-group"
	>
	<button
	class="btn button-default"
	@click="toggleManualEntry"
	:title="$t('settings.style.themes3.font.lookup_local_fonts')"
	>
	<FAIcon
	fixed-width
	icon="font"
	/>
	</button>
	<input
	:id="name"
	:model-value="modelValue.family"
	class="input custom-font"
	type="text"
	@update:modelValue="$emit('update:modelValue', { ...(modelValue \|\| {}), family: $event.target.value })"
	>
	</span>
	<span
	v-else
	class="btn-group"
	>
	<button
	class="btn button-default"
	@click="toggleManualEntry"
	:title="$t('settings.style.themes3.font.enter_manually')"
	>
	<FAIcon
	fixed-width
	icon="keyboard"
	/>
	</button>
	<Select
	:id="name + '-local-font-switcher'"
	:model-value="modelValue.family"
	class="custom-font"
	- @update:modelValue="$emit('update:modelValue', { ...(modelValue \|\| {}), family: $event.target.value })"
	+ @update:modelValue="v => $emit('update:modelValue', { ...(modelValue \|\| {}), family: v })"
	>
	<optgroup
	:label="$t('settings.style.themes3.font.group-builtin')"
	>
	<option
	v-for="option in availableOptions"
	:key="option"
	:value="option"
	:style="{ fontFamily: option === 'inherit' ? null : option }"
	>
	{{ $t('settings.style.themes3.font.builtin.' + option) }}
	</option>
	</optgroup>
	<optgroup
	v-if="localFontsSize > 0"
	:label="$t('settings.style.themes3.font.group-local')"
	>
	<option
	v-for="option in localFontsList"
	:key="option"
	:value="option"
	:style="{ fontFamily: option }"
	>
	{{ option }}
	</option>
	</optgroup>
	<optgroup
	v-else
	:label="$t('settings.style.themes3.font.group-local')"
	>
	<option disabled>
	{{ $t('settings.style.themes3.font.local-unavailable1') }}
	</option>
	<option disabled>
	{{ $t('settings.style.themes3.font.local-unavailable2') }}
	</option>
	</optgroup>
	</Select>
	</span>
	</p>
	</div>
	</template>

	<script src="./font_control.js"></script>

	<style lang="scss">
	.font-control {
	.custom-font {
	min-width: 20em;
	max-width: 20em;
	}
	}

	.invalid-tooltip {
	margin: 0.5em 1em;
	min-width: 10em;
	text-align: center;
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js
	index 7ec22641f3..98d38288ba 100644
	--- a/src/components/settings_modal/tabs/appearance_tab.js
	+++ b/src/components/settings_modal/tabs/appearance_tab.js
	@@ -1,183 +1,195 @@
	import BooleanSetting from '../helpers/boolean_setting.vue'
	import ChoiceSetting from '../helpers/choice_setting.vue'
	import IntegerSetting from '../helpers/integer_setting.vue'
	import FloatSetting from '../helpers/float_setting.vue'
	import UnitSetting, { defaultHorizontalUnits } from '../helpers/unit_setting.vue'

	import FontControl from 'src/components/font_control/font_control.vue'

	import { normalizeThemeData } from 'src/modules/interface'

	import {
	getThemes
	} from 'src/services/style_setter/style_setter.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,
	getScopedVersion
	} from 'src/services/theme_data/css_utils.js'

	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faGlobe
	} from '@fortawesome/free-solid-svg-icons'

	import Preview from './theme_tab/preview.vue'

	library.add(
	faGlobe
	)

	const AppearanceTab = {
	data () {
	return {
	availableStyles: [],
	intersectionObserver: null,
	thirdColumnModeOptions: ['none', 'notifications', 'postform'].map(mode => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.third_column_mode_${mode}`)
	})),
	forcedRoundnessOptions: ['disabled', 'sharp', 'nonsharp', 'round'].map((mode, i) => ({
	key: mode,
	value: i - 1,
	label: this.$t(`settings.style.themes3.hacks.forced_roundness_mode_${mode}`)
	})),
	underlayOverrideModes: ['none', 'opaque', 'transparent'].map((mode, i) => ({
	key: mode,
	value: mode,
	label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`)
	}))
	}
	},
	components: {
	BooleanSetting,
	ChoiceSetting,
	IntegerSetting,
	FloatSetting,
	UnitSetting,
	ProfileSettingIndicator,
	FontControl,
	Preview
	},
	mounted () {
	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,
	{
	name: v.name \|\| v[0],
	key: k,
	data: v
	}
	]
	} else {
	return acc
	}
	}, []))
	.then((themesComplete) => {
	this.availableStyles = themesComplete
	})

	if (window.IntersectionObserver) {
	this.intersectionObserver = new IntersectionObserver((entries, observer) => {
	entries.forEach(({ target, isIntersecting }) => {
	if (!isIntersecting) return
	const theme = this.availableStyles.find(x => x.key === target.dataset.themeKey)
	this.$nextTick(() => {
	if (theme) theme.ready = true
	})
	observer.unobserve(target)
	})
	}, {
	root: this.$refs.themeList
	})
	}
	},
	updated () {
	this.$nextTick(() => {
	this.$refs.themeList.querySelectorAll('.theme-preview').forEach(node => {
	this.intersectionObserver.observe(node)
	})
	})
	},
	computed: {
	noIntersectionObserver () {
	return !window.IntersectionObserver
	},
	horizontalUnits () {
	return defaultHorizontalUnits
	},
	fontsOverride () {
	return this.$store.getters.mergedConfig.fontsOverride
	},
	columns () {
	const mode = this.$store.getters.mergedConfig.thirdColumnMode

	const notif = mode === 'none' ? [] : ['notifs']

	if (this.$store.getters.mergedConfig.sidebarRight \|\| mode === 'postform') {
	return [...notif, 'content', 'sidebar']
	} else {
	return ['sidebar', 'content', ...notif]
	}
	},
	instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
	instanceWallpaperUsed () {
	return this.$store.state.instance.background &&
	!this.$store.state.users.currentUser.background_image
	},
	instanceShoutboxPresent () { return this.$store.state.instance.shoutAvailable },
	language: {
	get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
	set: function (val) {
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	}
	},
	isCustomThemeUsed () {
	const { theme } = this.mergedConfig
	return theme === 'custom' \|\| theme === null
	},
	...SharedComputedObject()
	},
	methods: {
	+ updateFont (key, value) {
	+ console.log(key, value)
	+ this.$store.dispatch('setOption', {
	+ name: 'theme3hacks',
	+ value: {
	+ ...this.mergedConfig.theme3hacks,
	+ fonts: {
	+ ...this.mergedConfig.theme3hacks.fonts,
	+ [key]: value
	+ }
	+ }
	+ })
	+ },
	isThemeActive (key) {
	const { theme } = this.mergedConfig
	- console.log(key, theme)
	return key === theme
	},
	setTheme (name) {
	this.$store.dispatch('setTheme', { themeName: name, saveData: true, recompile: true })
	},
	previewTheme (key, input) {
	const style = normalizeThemeData(input)
	const x = 2
	if (x === 1) return
	const theme2 = convertTheme2To3(style)
	const theme3 = init({
	inputRuleset: theme2,
	ultimateBackgroundColor: '#000000',
	liteMode: true,
	debug: true,
	onlyNormalState: true
	})

	return getScopedVersion(
	getCssRules(theme3.eager),
	'#theme-preview-' + key
	).join('\n')
	}
	}
	}

	export default AppearanceTab
	diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
	index 748a69ce76..3d3655d778 100644
	--- a/src/components/settings_modal/tabs/appearance_tab.vue
	+++ b/src/components/settings_modal/tabs/appearance_tab.vue
	@@ -1,302 +1,302 @@
	<template>
	<div :label="$t('settings.general')">
	<div class="setting-item">
	<h2>{{ $t('settings.theme') }}</h2>
	<ul
	class="theme-list"
	ref="themeList"
	>
	<button
	v-if="isCustomThemeUsed"
	disabled
	class="button-default theme-preview"
	>
	<preview />
	<h4 class="theme-name">{{ $t('settings.style.custom_theme_used') }}</h4>
	</button>
	<button
	v-for="style in availableStyles"
	:data-theme-key="style.key"
	:key="style.key"
	class="button-default theme-preview"
	:class="{ toggled: isThemeActive(style.key) }"
	@click="setTheme(style.key)"
	>
	<!-- eslint-disable vue/no-v-text-v-html-on-component -->
	<component
	:is="'style'"
	v-if="style.ready \|\| noIntersectionObserver"
	v-html="previewTheme(style.key, style.data)"
	/>
	<!-- eslint-enable vue/no-v-text-v-html-on-component -->
	<preview :class="{ placeholder: ready }" :id="'theme-preview-' + style.key"/>
	<h4 class="theme-name">{{ style.name }}</h4>
	</button>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.scale_and_layout') }}</h2>
	<ul class="setting-list">
	<li>
	<UnitSetting
	path="textSize"
	step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 14, 'rem': 1 }"
	timed-apply-mode
	>
	{{ $t('settings.text_size') }}
	</UnitSetting>
	<div>
	<small>
	<i18n-t
	scope="global"
	keypath="settings.text_size_tip"
	tag="span"
	>
	<code>px</code>
	<code>rem</code>
	</i18n-t>
	<br/>
	<i18n-t
	scope="global"
	keypath="settings.text_size_tip2"
	tag="span"
	>
	<code>14px</code>
	</i18n-t>
	</small>
	</div>
	</li>
	<li>
	<h3>{{ $t('settings.style.interface_font_user_override') }}</h3>
	<ul class="setting-list">
	<li>
	<FontControl
	- :model-value="fontsOverride.interface"
	+ :model-value="mergedConfig.theme3hacks.fonts.interface"
	name="ui"
	:label="$t('settings.style.fonts.components.interface')"
	:fallback="{ family: 'sans-serif' }"
	no-inherit="1"
	- @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, interface: v } })"
	+ @update:modelValue="v => updateFont('interface', v)"
	/>
	</li>
	<li>
	<FontControl
	v-if="expertLevel > 0"
	- :model-value="fontsOverride.input"
	+ :model-value="mergedConfig.theme3hacks.fonts.input"
	name="input"
	:fallback="{ family: 'inherit' }"
	:label="$t('settings.style.fonts.components.input')"
	- @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, input: v } })"
	+ @update:modelValue="v => updateFont('input', v)"
	/>
	</li>
	<li>
	<FontControl
	v-if="expertLevel > 0"
	- :model-value="fontsOverride.post"
	+ :model-value="mergedConfig.theme3hacks.fonts.post"
	name="post"
	:fallback="{ family: 'inherit' }"
	:label="$t('settings.style.fonts.components.post')"
	- @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, post: v } })"
	+ @update:modelValue="v => updateFont('post', v)"
	/>
	</li>
	<li>
	<FontControl
	v-if="expertLevel > 0"
	- :model-value="fontsOverride.postCode"
	+ :model-value="mergedConfig.theme3hacks.fonts.monospace"
	name="postCode"
	:fallback="{ family: 'monospace' }"
	- :label="$t('settings.style.fonts.components.postCode')"
	- @update:modelValue="v => $store.dispatch('setOption', { name: 'fontsOverride', value: { ...fontsOverride, postCode: v } })"
	+ :label="$t('settings.style.fonts.components.monospace')"
	+ @update:modelValue="v => updateFont('monospace', v)"
	/>
	</li>
	</ul>
	</li>
	<li>
	<UnitSetting
	path="emojiSize"
	step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 32, 'rem': 2.2 }"
	>
	{{ $t('settings.emoji_size') }}
	</UnitSetting>
	<ul
	class="setting-list suboptions"
	>
	<li>
	<FloatSetting
	v-if="user"
	path="emojiReactionsScale"
	expert="1"
	>
	{{ $t('settings.emoji_reactions_scale') }}
	</FloatSetting>
	</li>
	</ul>
	</li>
	<li>
	<UnitSetting
	path="navbarSize"
	step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 55, 'rem': 3.5 }"
	>
	{{ $t('settings.navbar_size') }}
	</UnitSetting>
	</li>
	<h3>{{ $t('settings.columns') }}</h3>
	<li>
	<UnitSetting
	path="panelHeaderSize"
	step="0.1"
	:units="['px', 'rem']"
	:reset-default="{ 'px': 52, 'rem': 3.2 }"
	timed-apply-mode
	>
	{{ $t('settings.panel_header_size') }}
	</UnitSetting>
	</li>
	<li>
	<BooleanSetting path="sidebarRight">
	{{ $t('settings.right_sidebar') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="navbarColumnStretch">
	{{ $t('settings.navbar_column_stretch') }}
	</BooleanSetting>
	</li>
	<li>
	<ChoiceSetting
	v-if="user"
	id="thirdColumnMode"
	path="thirdColumnMode"
	:options="thirdColumnModeOptions"
	>
	{{ $t('settings.third_column_mode') }}
	</ChoiceSetting>
	</li>
	<li v-if="expertLevel > 0">
	{{ $t('settings.column_sizes') }}
	<div class="column-settings">
	<UnitSetting
	v-for="column in columns"
	:key="column"
	:path="column + 'ColumnWidth'"
	:units="horizontalUnits"
	expert="1"
	>
	{{ $t('settings.column_sizes_' + column) }}
	</UnitSetting>
	</div>
	</li>
	<li>
	<BooleanSetting path="disableStickyHeaders">
	{{ $t('settings.disable_sticky_headers') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="showScrollbars">
	{{ $t('settings.show_scrollbars') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('settings.visual_tweaks') }}</h2>
	<ul class="setting-list">
	<li>
	<ChoiceSetting
	id="forcedRoundness"
	path="forcedRoundness"
	:options="forcedRoundnessOptions"
	>
	{{ $t('settings.style.themes3.hacks.force_interface_roundness') }}
	</ChoiceSetting>
	</li>
	<li>
	<ChoiceSetting
	id="underlayOverride"
	path="theme3hacks.underlay"
	:options="underlayOverrideModes"
	>
	{{ $t('settings.style.themes3.hacks.underlay_overrides') }}
	</ChoiceSetting>
	</li>
	<li v-if="instanceWallpaperUsed">
	<BooleanSetting path="hideInstanceWallpaper">
	{{ $t('settings.hide_wallpaper') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="forceThemeRecompilation"
	:expert="1"
	>
	{{ $t('settings.force_theme_recompilation_debug') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="themeDebug"
	:expert="1"
	>
	{{ $t('settings.theme_debug') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./appearance_tab.js"></script>

	<style lang="scss">
	.column-settings {
	display: flex;
	justify-content: space-evenly;
	flex-wrap: wrap;
	}

	.column-settings .size-label {
	display: block;
	margin-bottom: 0.5em;
	margin-top: 0.5em;
	}

	.theme-list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	margin: -0.5em 0;
	height: 25em;
	overflow-x: hidden;
	overflow-y: auto;
	scrollbar-gutter: stable;
	border-radius: var(--roundness);
	border: 1px solid var(--border);
	padding: 0;

	.theme-preview {
	width: 19rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0.5em;

	&.placeholder {
	opacity: 0.2;
	}

	.preview-container {
	pointer-events: none;
	zoom: 0.5;
	border: none;
	border-radius: var(--roundness);
	text-align: left;
	}
	}
	}
	</style>
	diff --git a/src/modules/config.js b/src/modules/config.js
	index e54a883cbd..88e339cf3a 100644
	--- a/src/modules/config.js
	+++ b/src/modules/config.js
	@@ -1,327 +1,332 @@
	import Cookies from 'js-cookie'
	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]

	/* TODO this is a bit messy.
	* We need to declare settings with their types and also deal with
	* instance-default settings in some way, hopefully try to avoid copy-pasta
	* in general.
	*/
	export const multiChoiceProperties = [
	'postContentType',
	'subjectLineBehavior',
	'conversationDisplay', // tree \| linear
	'conversationOtherRepliesButton', // below \| inside
	'mentionLinkDisplay', // short \| full_for_remote \| full
	'userPopoverAvatarAction' // close \| zoom \| open
	]

	export const defaultState = {
	expertLevel: 0, // used to track which settings to show and hide

	// Theme stuff
	theme: undefined, // Very old theme store, stores preset name, still in use

	// V1
	colors: {}, // VERY old theme store, just colors of V1, probably not even used anymore

	// V2
	customTheme: undefined, // "snapshot", previously was used as actual theme store for V2 so it's still used in case of PleromaFE downgrade event.
	customThemeSource: undefined, // "source", stores original theme data

	// V3
	themeDebug: false, // debug mode that uses computed backgrounds instead of real ones to debug contrast functions
	forceThemeRecompilation: false, // flag that forces recompilation on boot even if cache exists
	palette: null, // not used yet, will be used for V3
	theme3hacks: { // Hacks, user overrides that are independent of theme used
	underlay: 'none',
	- badgeColor: null
	+ badgeColor: null,
	+ fonts: {
	+ interface: undefined,
	+ input: undefined,
	+ post: undefined,
	+ monospace: undefined
	+ }
	},

	hideISP: false,
	hideInstanceWallpaper: false,
	hideShoutbox: false,
	// bad name: actually hides posts of muted USERS
	hideMutedPosts: undefined, // instance default
	hideMutedThreads: undefined, // instance default
	hideWordFilteredPosts: undefined, // instance default
	muteBotStatuses: undefined, // instance default
	muteSensitiveStatuses: undefined, // instance default
	collapseMessageWithSubject: undefined, // instance default
	padEmoji: true,
	hideAttachments: false,
	hideAttachmentsInConv: false,
	hideScrobbles: false,
	hideScrobblesAfter: '2d',
	maxThumbnails: 16,
	hideNsfw: true,
	preloadImage: true,
	loopVideo: true,
	loopVideoSilentOnly: true,
	streaming: false,
	emojiReactionsOnTimeline: true,
	alwaysShowNewPostButton: false,
	autohideFloatingPostButton: false,
	pauseOnUnfocused: true,
	stopGifs: true,
	replyVisibility: 'all',
	thirdColumnMode: 'notifications',
	notificationVisibility: {
	follows: true,
	mentions: true,
	likes: true,
	repeats: true,
	moves: true,
	emojiReactions: true,
	followRequest: true,
	reports: true,
	chatMention: true,
	polls: true
	},
	notificationNative: {
	follows: true,
	mentions: true,
	likes: false,
	repeats: false,
	moves: false,
	emojiReactions: false,
	followRequest: true,
	reports: true,
	chatMention: true,
	polls: true
	},
	webPushNotifications: false,
	webPushAlwaysShowNotifications: false,
	muteWords: [],
	highlight: {},
	interfaceLanguage: browserLocale,
	hideScopeNotice: false,
	useStreamingApi: false,
	sidebarRight: undefined, // instance default
	scopeCopy: undefined, // instance default
	subjectLineBehavior: undefined, // instance default
	alwaysShowSubjectInput: undefined, // instance default
	postContentType: undefined, // instance default
	minimalScopesMode: undefined, // instance default
	// This hides statuses filtered via a word filter
	hideFilteredStatuses: undefined, // instance default
	modalOnRepeat: undefined, // instance default
	modalOnUnfollow: undefined, // instance default
	modalOnBlock: undefined, // instance default
	modalOnMute: undefined, // instance default
	modalOnDelete: undefined, // instance default
	modalOnLogout: undefined, // instance default
	modalOnApproveFollow: undefined, // instance default
	modalOnDenyFollow: undefined, // instance default
	modalOnRemoveUserFromFollowers: undefined, // instance default
	playVideosInModal: false,
	useOneClickNsfw: false,
	useContainFit: true,
	disableStickyHeaders: false,
	showScrollbars: false,
	userPopoverAvatarAction: 'open',
	userPopoverOverlay: false,
	sidebarColumnWidth: '25rem',
	contentColumnWidth: '45rem',
	notifsColumnWidth: '25rem',
	emojiReactionsScale: undefined,
	textSize: undefined, // instance default
	emojiSize: undefined, // instance default
	navbarSize: undefined, // instance default
	panelHeaderSize: undefined, // instance default
	forcedRoundness: undefined, // instance default
	- fontsOverride: undefined, // instance default
	navbarColumnStretch: false,
	greentext: undefined, // instance default
	useAtIcon: undefined, // instance default
	mentionLinkDisplay: undefined, // instance default
	mentionLinkShowTooltip: undefined, // instance default
	mentionLinkShowAvatar: undefined, // instance default
	mentionLinkFadeDomain: undefined, // instance default
	mentionLinkShowYous: undefined, // instance default
	mentionLinkBoldenYou: undefined, // instance default
	hidePostStats: undefined, // instance default
	hideBotIndication: undefined, // instance default
	hideUserStats: undefined, // instance default
	virtualScrolling: undefined, // instance default
	sensitiveByDefault: undefined, // instance default
	conversationDisplay: undefined, // instance default
	conversationTreeAdvanced: undefined, // instance default
	conversationOtherRepliesButton: undefined, // instance default
	conversationTreeFadeAncestors: undefined, // instance default
	showExtraNotifications: undefined, // instance default
	showExtraNotificationsTip: undefined, // instance default
	showChatsInExtraNotifications: undefined, // instance default
	showAnnouncementsInExtraNotifications: undefined, // instance default
	showFollowRequestsInExtraNotifications: undefined, // instance default
	maxDepthInThread: undefined, // instance default
	autocompleteSelect: undefined, // instance default
	closingDrawerMarksAsSeen: undefined, // instance default
	unseenAtTop: undefined, // instance default
	ignoreInactionableSeen: undefined // instance default
	}

	// caching the instance default properties
	export const instanceDefaultProperties = Object.entries(defaultState)
	.filter(([key, value]) => value === undefined)
	.map(([key, value]) => key)

	const config = {
	state: { ...defaultState },
	getters: {
	defaultConfig (state, getters, rootState, rootGetters) {
	const { instance } = rootState
	return {
	...defaultState,
	...Object.fromEntries(
	instanceDefaultProperties.map(key => [key, instance[key]])
	)
	}
	},
	mergedConfig (state, getters, rootState, rootGetters) {
	const { defaultConfig } = rootGetters
	return {
	...defaultConfig,
	// Do not override with undefined
	...Object.fromEntries(Object.entries(state).filter(([k, v]) => v !== undefined))
	}
	}
	},
	mutations: {
	setOptionTemporarily (state, { name, value }) {
	set(state, name, value)
	applyConfig(state)
	},
	setOption (state, { name, value }) {
	set(state, name, value)
	},
	setHighlight (state, { user, color, type }) {
	const data = this.state.config.highlight[user]
	if (color \|\| type) {
	state.highlight[user] = { color: color \|\| data.color, type: type \|\| data.type }
	} else {
	delete state.highlight[user]
	}
	}
	},
	actions: {
	loadSettings ({ dispatch }, data) {
	const knownKeys = new Set(Object.keys(defaultState))
	const presentKeys = new Set(Object.keys(data))
	const intersection = new Set()
	for (const elem of presentKeys) {
	if (knownKeys.has(elem)) {
	intersection.add(elem)
	}
	}

	intersection.forEach(
	name => dispatch('setOption', { name, value: data[name] })
	)
	},
	setHighlight ({ commit, dispatch }, { user, color, type }) {
	commit('setHighlight', { user, color, type })
	},
	setOptionTemporarily ({ commit, dispatch, state, rootState }, { name, value }) {
	if (rootState.interface.temporaryChangesTimeoutId !== null) {
	console.warn('Can\'t track more than one temporary change')
	return
	}
	const oldValue = state[name]

	commit('setOptionTemporarily', { name, value })

	const confirm = () => {
	dispatch('setOption', { name, value })
	commit('clearTemporaryChanges')
	}

	const revert = () => {
	commit('setOptionTemporarily', { name, value: oldValue })
	commit('clearTemporaryChanges')
	}

	commit('setTemporaryChanges', {
	timeoutId: setTimeout(revert, 10000),
	confirm,
	revert
	})
	},
	setThemeV2 ({ commit, dispatch }, { customTheme, customThemeSource }) {
	commit('setOption', { name: 'theme', value: 'custom' })
	commit('setOption', { name: 'customTheme', value: customTheme })
	commit('setOption', { name: 'customThemeSource', value: customThemeSource })
	dispatch('setTheme', { themeData: customThemeSource, recompile: true })
	},
	setOption ({ commit, dispatch, state }, { name, value }) {
	const exceptions = new Set([
	'useStreamingApi'
	])

	if (exceptions.has(name)) {
	switch (name) {
	case 'useStreamingApi': {
	const action = value ? 'enableMastoSockets' : 'disableMastoSockets'

	dispatch(action).then(() => {
	commit('setOption', { name: 'useStreamingApi', value })
	}).catch((e) => {
	console.error('Failed starting MastoAPI Streaming socket', e)
	dispatch('disableMastoSockets')
	dispatch('setOption', { name: 'useStreamingApi', value: false })
	})
	break
	}
	}
	} else {
	commit('setOption', { name, value })
	if (APPEARANCE_SETTINGS_KEYS.has(name)) {
	applyConfig(state)
	}
	if (name.startsWith('theme3hacks')) {
	dispatch('setTheme', { recompile: true })
	}
	switch (name) {
	case 'theme':
	if (value === 'custom') break
	dispatch('setTheme', { themeName: value, recompile: true, saveData: true })
	break
	case 'themeDebug': {
	dispatch('setTheme', { recompile: true })
	break
	}
	case 'interfaceLanguage':
	messages.setLanguage(this.getters.i18n, value)
	dispatch('loadUnicodeEmojiData', value)
	Cookies.set(
	BACKEND_LANGUAGE_COOKIE_NAME,
	localeService.internalToBackendLocaleMulti(value)
	)
	break
	case 'thirdColumnMode':
	dispatch('setLayoutWidth', undefined)
	break
	}
	}
	}
	}
	}

	export default config
	diff --git a/src/modules/interface.js b/src/modules/interface.js
	index 38ee88db2f..206c68a7fd 100644
	--- a/src/modules/interface.js
	+++ b/src/modules/interface.js
	@@ -1,349 +1,389 @@
	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'

	const defaultState = {
	localFonts: null,
	themeApplied: false,
	temporaryChangesTimeoutId: null, // used for temporary options that revert after a timeout
	temporaryChangesConfirm: () => {}, // used for applying temporary options
	temporaryChangesRevert: () => {}, // used for reverting temporary options
	settingsModalState: 'hidden',
	settingsModalLoadedUser: false,
	settingsModalLoadedAdmin: false,
	settingsModalTargetTab: null,
	settingsModalMode: 'user',
	settings: {
	currentSaveStateNotice: null,
	noticeClearTimeout: null,
	notificationPermission: null
	},
	browserSupport: {
	cssFilter: window.CSS && window.CSS.supports && (
	window.CSS.supports('filter', 'drop-shadow(0 0)') \|\|
	window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
	),
	localFonts: typeof window.queryLocalFonts === 'function'
	},
	layoutType: 'normal',
	globalNotices: [],
	layoutHeight: 0,
	lastTimeline: null
	}

	const interfaceMod = {
	state: defaultState,
	mutations: {
	settingsSaved (state, { success, error }) {
	if (success) {
	if (state.noticeClearTimeout) {
	clearTimeout(state.noticeClearTimeout)
	}
	state.settings.currentSaveStateNotice = { error: false, data: success }
	state.settings.noticeClearTimeout = setTimeout(() => delete state.settings.currentSaveStateNotice, 2000)
	} else {
	state.settings.currentSaveStateNotice = { error: true, errorData: error }
	}
	},
	setTemporaryChanges (state, { timeoutId, confirm, revert }) {
	state.temporaryChangesTimeoutId = timeoutId
	state.temporaryChangesConfirm = confirm
	state.temporaryChangesRevert = revert
	},
	clearTemporaryChanges (state) {
	clearTimeout(state.temporaryChangesTimeoutId)
	state.temporaryChangesTimeoutId = null
	state.temporaryChangesConfirm = () => {}
	state.temporaryChangesRevert = () => {}
	},
	setThemeApplied (state) {
	state.themeApplied = true
	},
	setNotificationPermission (state, permission) {
	state.notificationPermission = permission
	},
	setLayoutType (state, value) {
	state.layoutType = value
	},
	closeSettingsModal (state) {
	state.settingsModalState = 'hidden'
	},
	togglePeekSettingsModal (state) {
	switch (state.settingsModalState) {
	case 'minimized':
	state.settingsModalState = 'visible'
	return
	case 'visible':
	state.settingsModalState = 'minimized'
	return
	default:
	throw new Error('Illegal minimization state of settings modal')
	}
	},
	openSettingsModal (state, value) {
	state.settingsModalMode = value
	state.settingsModalState = 'visible'
	if (value === 'user') {
	if (!state.settingsModalLoadedUser) {
	state.settingsModalLoadedUser = true
	}
	} else if (value === 'admin') {
	if (!state.settingsModalLoadedAdmin) {
	state.settingsModalLoadedAdmin = true
	}
	}
	},
	setSettingsModalTargetTab (state, value) {
	state.settingsModalTargetTab = value
	},
	pushGlobalNotice (state, notice) {
	state.globalNotices.push(notice)
	},
	removeGlobalNotice (state, notice) {
	state.globalNotices = state.globalNotices.filter(n => n !== notice)
	},
	setLayoutHeight (state, value) {
	state.layoutHeight = value
	},
	setLayoutWidth (state, value) {
	state.layoutWidth = value
	},
	setLastTimeline (state, value) {
	state.lastTimeline = value
	},
	setFontsList (state, value) {
	state.localFonts = new Set(value.map(font => font.family))
	}
	},
	actions: {
	setPageTitle ({ rootState }, option = '') {
	document.title = `${option} ${rootState.instance.name}`
	},
	settingsSaved ({ commit, dispatch }, { success, error }) {
	commit('settingsSaved', { success, error })
	},
	setNotificationPermission ({ commit }, permission) {
	commit('setNotificationPermission', permission)
	},
	closeSettingsModal ({ commit }) {
	commit('closeSettingsModal')
	},
	openSettingsModal ({ commit }, value = 'user') {
	commit('openSettingsModal', value)
	},
	togglePeekSettingsModal ({ commit }) {
	commit('togglePeekSettingsModal')
	},
	clearSettingsModalTargetTab ({ commit }) {
	commit('setSettingsModalTargetTab', null)
	},
	openSettingsModalTab ({ commit }, value) {
	commit('setSettingsModalTargetTab', value)
	commit('openSettingsModal', 'user')
	},
	pushGlobalNotice (
	{ commit, dispatch, state },
	{
	messageKey,
	messageArgs = {},
	level = 'error',
	timeout = 0
	}) {
	const notice = {
	messageKey,
	messageArgs,
	level
	}
	commit('pushGlobalNotice', notice)
	// Adding a new element to array wraps it in a Proxy, which breaks the comparison
	// TODO: Generate UUID or something instead or relying on !== operator?
	const newNotice = state.globalNotices[state.globalNotices.length - 1]
	if (timeout) {
	setTimeout(() => dispatch('removeGlobalNotice', newNotice), timeout)
	}
	return newNotice
	},
	removeGlobalNotice ({ commit }, notice) {
	commit('removeGlobalNotice', notice)
	},
	setLayoutHeight ({ commit }, value) {
	commit('setLayoutHeight', value)
	},
	// value is optional, assuming it was cached prior
	setLayoutWidth ({ commit, state, rootGetters, rootState }, value) {
	let width = value
	if (value !== undefined) {
	commit('setLayoutWidth', value)
	} else {
	width = state.layoutWidth
	}
	const mobileLayout = width <= 800
	const normalOrMobile = mobileLayout ? 'mobile' : 'normal'
	const { thirdColumnMode } = rootGetters.mergedConfig
	if (thirdColumnMode === 'none' \|\| !rootState.users.currentUser) {
	commit('setLayoutType', normalOrMobile)
	} else {
	const wideLayout = width >= 1300
	commit('setLayoutType', wideLayout ? 'wide' : normalOrMobile)
	}
	},
	queryLocalFonts ({ commit, dispatch, state }) {
	if (state.localFonts !== null) return
	commit('setFontsList', [])
	if (!state.browserSupport.localFonts) {
	return
	}
	window
	.queryLocalFonts()
	.then((fonts) => {
	commit('setFontsList', fonts)
	})
	.catch((e) => {
	dispatch('pushGlobalNotice', {
	messageKey: 'settings.style.themes3.font.font_list_unavailable',
	messageArgs: {
	error: e
	},
	level: 'error'
	})
	})
	},
	setLastTimeline ({ commit }, value) {
	commit('setLastTimeline', value)
	},
	setTheme ({ commit, rootState }, { themeName, themeData, recompile, saveData } = {}) {
	const {
	theme: instanceThemeName
	} = rootState.instance

	const {
	theme: userThemeName,
	customTheme: userThemeSnapshot,
	customThemeSource: userThemeSource,
	forceThemeRecompilation,
	themeDebug,
	theme3hacks
	} = rootState.config

	const actualThemeName = userThemeName \|\| instanceThemeName

	const forceRecompile = forceThemeRecompilation \|\| recompile

	let promise = null

	if (themeData) {
	promise = Promise.resolve(normalizeThemeData(themeData))
	} else if (themeName) {
	promise = getPreset(themeName).then(themeData => normalizeThemeData(themeData))
	} else if (userThemeSource \|\| userThemeSnapshot) {
	if (userThemeSource && userThemeSource.themeEngineVersion === CURRENT_VERSION) {
	promise = Promise.resolve(normalizeThemeData(userThemeSource))
	} else {
	promise = Promise.resolve(normalizeThemeData(userThemeSnapshot))
	}
	} else if (actualThemeName && actualThemeName !== 'custom') {
	promise = getPreset(actualThemeName).then(themeData => {
	const realThemeData = normalizeThemeData(themeData)
	if (actualThemeName === instanceThemeName) {
	// This sole line is the reason why this whole block is above the recompilation check
	commit('setInstanceOption', { name: 'themeData', value: { theme: realThemeData } })
	}
	return realThemeData
	})
	} else {
	throw new Error('Cannot load any theme!')
	}

	// If we're not not forced to recompile try using
	// cache (tryLoadCache return true if load successful)
	if (!forceRecompile && !themeDebug && tryLoadCache()) {
	commit('setThemeApplied')
	return
	}

	promise
	.then(realThemeData => {
	const theme2ruleset = convertTheme2To3(realThemeData)

	if (saveData) {
	commit('setOption', { name: 'theme', value: themeName \|\| actualThemeName })
	commit('setOption', { name: 'customTheme', value: realThemeData })
	commit('setOption', { name: 'customThemeSource', value: realThemeData })
	}
	const hacks = []

	Object.entries(theme3hacks).forEach(([key, value]) => {
	switch (key) {
	+ case 'fonts': {
	+ Object.entries(theme3hacks.fonts).forEach(([fontKey, font]) => {
	+ if (!font?.family) return
	+ switch (fontKey) {
	+ case 'interface':
	+ hacks.push({
	+ component: 'Root',
	+ directives: {
	+ '--font': 'generic \| ' + font.family
	+ }
	+ })
	+ break
	+ case 'input':
	+ hacks.push({
	+ component: 'Input',
	+ directives: {
	+ '--font': 'generic \| ' + font.family
	+ }
	+ })
	+ break
	+ case 'post':
	+ hacks.push({
	+ component: 'RichContent',
	+ directives: {
	+ '--font': 'generic \| ' + font.family
	+ }
	+ })
	+ break
	+ case 'monospace':
	+ hacks.push({
	+ component: 'Root',
	+ directives: {
	+ '--monoFont': 'generic \| ' + font.family
	+ }
	+ })
	+ break
	+ }
	+ })
	+ break
	+ }
	case 'underlay': {
	if (value !== 'none') {
	const newRule = {
	component: 'Underlay',
	directives: {}
	}
	if (value === 'opaque') {
	newRule.directives.opacity = 1
	newRule.directives.background = '--wallpaper'
	}
	if (value === 'transparent') {
	newRule.directives.opacity = 0
	}
	hacks.push(newRule)
	}
	break
	}
	}
	})

	const ruleset = [
	...theme2ruleset,
	...hacks
	]

	applyTheme(
	ruleset,
	() => commit('setThemeApplied'),
	themeDebug
	)
	})

	return promise
	}
	}
	}

	export default interfaceMod

	export const normalizeThemeData = (input) => {
	let themeData = input

	if (Array.isArray(themeData)) {
	themeData = { colors: {} }
	themeData.colors.bg = input[1]
	themeData.colors.fg = input[2]
	themeData.colors.text = input[3]
	themeData.colors.link = input[4]
	themeData.colors.cRed = input[5]
	themeData.colors.cGreen = input[6]
	themeData.colors.cBlue = input[7]
	themeData.colors.cOrange = input[8]
	return generatePreset(themeData).theme
	}

	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
	}

File Metadata

Mime Type: text/x-diff
Expires: Sat, Oct 31, 10:44 PM (19 h, 1 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1801880
Default Alt Text: (45 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions