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) {