diff --git a/src/App.js b/src/App.js
index 9fb4d32e5..36df2d84e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -149,13 +149,16 @@ export default {
userBackground() {
return this.currentUser.background_image
},
+ foreignProfileBackground() {
+ return useMergedConfigStore().mergedConfig.allowForeignUserBackground && useInterfaceStore().foreignProfileBackground
+ },
instanceBackground() {
return useMergedConfigStore().mergedConfig.hideInstanceWallpaper
? null
: this.instanceBackgroundUrl
},
background() {
- return this.userBackground || this.instanceBackground
+ return this.foreignProfileBackground || this.userBackground || this.instanceBackground
},
bgStyle() {
if (this.background) {
diff --git a/src/App.scss b/src/App.scss
index 56fef9d11..952af5b47 100644
--- a/src/App.scss
+++ b/src/App.scss
@@ -200,6 +200,7 @@ nav {
background-color: var(--wallpaper);
background-image: var(--body-background-image);
background-position: 50%;
+ transition: background-image 1s;
}
.underlay {
diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue
index f0ccf71f3..1343a36d5 100644
--- a/src/components/settings_modal/tabs/appearance_tab.vue
+++ b/src/components/settings_modal/tabs/appearance_tab.vue
@@ -263,6 +263,11 @@
{{ $t('settings.hide_wallpaper') }}
+
+
+ {{ $t('settings.foreign_user_background') }}
+
+
{{ $t('settings.compact_profiles') }}
diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js
index 17d69f49b..ed574d7bb 100644
--- a/src/components/user_profile/user_profile.js
+++ b/src/components/user_profile/user_profile.js
@@ -11,6 +11,7 @@ import Timeline from '../timeline/timeline.vue'
import UserCard from '../user_card/user_card.vue'
import { useInstanceStore } from 'src/stores/instance.js'
+import { useInterfaceStore } from 'src/stores/interface.js'
import { useInstanceCapabilitiesStore } from 'src/stores/instance_capabilities.js'
import { useMergedConfigStore } from 'src/stores/merged_config.js'
@@ -56,9 +57,14 @@ const UserProfile = {
const routeParams = this.$route.params
this.load({ name: routeParams.name, id: routeParams.id })
this.tab = get(this.$route, 'query.tab', defaultTabKey)
+ useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
+ },
+ updated() {
+ useInterfaceStore().setForeignProfileBackground(this.user?.background_image)
},
unmounted() {
this.stopFetching()
+ useInterfaceStore().setForeignProfileBackground(null)
},
computed: {
timeline() {
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 95f02507b..e03e21403 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -636,6 +636,7 @@
"navbar_column_stretch": "Stretch navbar to columns width",
"always_show_post_button": "Always show floating New Post button",
"hide_wallpaper": "Hide instance wallpaper",
+ "foreign_user_background": "Allow other user's profiles to override wallpaper",
"preload_images": "Preload images",
"use_one_click_nsfw": "Open NSFW attachments with just one click",
"hide_post_stats": "Hide post statistics (e.g. the number of favorites)",
diff --git a/src/modules/default_config_state.js b/src/modules/default_config_state.js
index 233e15ca1..61743c426 100644
--- a/src/modules/default_config_state.js
+++ b/src/modules/default_config_state.js
@@ -140,6 +140,10 @@ export const INSTANCE_DEFAULT_CONFIG_DEFINITIONS = {
description: 'Hide Instance-specific panel',
default: false,
},
+ allowForeignUserBackground: {
+ description: 'Allow other user\'s profiles to override wallpaper',
+ default: true,
+ },
hideInstanceWallpaper: {
description: 'Hide Instance default background',
default: false,
diff --git a/src/stores/interface.js b/src/stores/interface.js
index 111700fbb..01ff07533 100644
--- a/src/stores/interface.js
+++ b/src/stores/interface.js
@@ -60,6 +60,7 @@ export const useInterfaceStore = defineStore('interface', {
globalNotices: [],
layoutHeight: 0,
lastTimeline: null,
+ foreignProfileBackground: null,
}),
actions: {
setTemporaryChanges({ confirm, revert }) {
@@ -96,6 +97,9 @@ export const useInterfaceStore = defineStore('interface', {
console.error(`${error}`)
}
},
+ setForeignProfileBackground(url) {
+ this.foreignProfileBackground = url
+ },
settingsSaved({ success, error }) {
if (success) {
if (this.noticeClearTimeout) {