From c8fa72c791accbd62efc53ce106c30a820920d7a Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Mon, 4 Aug 2025 14:04:28 +0300 Subject: [PATCH] move background to appearance tab --- .../settings_modal/tabs/appearance_tab.js | 56 ++++++++- .../settings_modal/tabs/appearance_tab.scss | 40 +++++++ .../settings_modal/tabs/appearance_tab.vue | 43 +++++++ .../settings_modal/tabs/profile_tab.js | 54 --------- .../settings_modal/tabs/profile_tab.scss | 110 ------------------ .../settings_modal/tabs/profile_tab.vue | 43 ------- src/i18n/en.json | 1 + 7 files changed, 138 insertions(+), 209 deletions(-) diff --git a/src/components/settings_modal/tabs/appearance_tab.js b/src/components/settings_modal/tabs/appearance_tab.js index 838ac6d6c..77204850a 100644 --- a/src/components/settings_modal/tabs/appearance_tab.js +++ b/src/components/settings_modal/tabs/appearance_tab.js @@ -16,6 +16,7 @@ import { } from 'src/services/theme_data/css_utils.js' import { deserialize } from 'src/services/theme_data/iss_deserializer.js' import { createStyleSheet, adoptStyleSheets } from 'src/services/style_setter/style_setter.js' +import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js' import SharedComputedObject from '../helpers/shared_computed_object.js' import ProfileSettingIndicator from '../helpers/profile_setting_indicator.vue' @@ -72,7 +73,10 @@ const AppearanceTab = { key: mode, value: mode, label: this.$t(`settings.style.themes3.hacks.underlay_override_mode_${mode}`) - })) + })), + backgroundUploading: false, + background: null, + backgroundPreview: null, } }, components: { @@ -420,7 +424,55 @@ const AppearanceTab = { ].join('')) sheet.ready = true adoptStyleSheets() - } + }, + uploadFile (slot, e) { + const file = e.target.files[0] + if (!file) { return } + if (file.size > this.$store.state.instance[slot + 'limit']) { + const filesize = fileSizeFormatService.fileSizeFormat(file.size) + const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit']) + useInterfaceStore().pushGlobalNotice({ + messageKey: 'upload.error.message', + messageArgs: [ + this.$t('upload.error.file_too_big', { + filesize: filesize.num, + filesizeunit: filesize.unit, + allowedsize: allowedsize.num, + allowedsizeunit: allowedsize.unit + }) + ], + level: 'error' + }) + return + } + + const reader = new FileReader() + reader.onload = ({ target }) => { + const img = target.result + this[slot + 'Preview'] = img + this[slot] = file + } + reader.readAsDataURL(file) + }, + resetBackground () { + const confirmed = window.confirm(this.$t('settings.reset_background_confirm')) + if (confirmed) { + this.submitBackground('') + } + }, + submitBackground (background) { + if (!this.backgroundPreview && background !== '') { return } + + this.backgroundUploading = true + this.$store.state.api.backendInteractor.updateProfileImages({ background }) + .then((data) => { + this.$store.commit('addNewUsers', [data]) + this.$store.commit('setCurrentUser', data) + this.backgroundPreview = null + }) + .catch(this.displayUploadError) + .finally(() => { this.backgroundUploading = false }) + }, } } diff --git a/src/components/settings_modal/tabs/appearance_tab.scss b/src/components/settings_modal/tabs/appearance_tab.scss index ae8691f16..d786cfa38 100644 --- a/src/components/settings_modal/tabs/appearance_tab.scss +++ b/src/components/settings_modal/tabs/appearance_tab.scss @@ -24,6 +24,46 @@ margin: 0.5em 0; } + input[type="file"] { + padding: 0.25em; + height: auto; + } + + .banner-background-preview { + max-width: 100%; + width: 300px; + position: relative; + + img { + width: 100%; + } + } + + .reset-button { + position: absolute; + top: 0.2em; + right: 0.2em; + border-radius: var(--roundness); + background-color: rgb(0 0 0 / 60%); + opacity: 0.7; + width: 1.5em; + height: 1.5em; + text-align: center; + line-height: 1.5em; + font-size: 1.5em; + cursor: pointer; + + &:hover { + opacity: 1; + } + + svg { + color: white; + } + } + + + .palettes-container { height: 15em; overflow: hidden auto; diff --git a/src/components/settings_modal/tabs/appearance_tab.vue b/src/components/settings_modal/tabs/appearance_tab.vue index cbbb8ff9c..cd54e2c82 100644 --- a/src/components/settings_modal/tabs/appearance_tab.vue +++ b/src/components/settings_modal/tabs/appearance_tab.vue @@ -151,6 +151,49 @@ +
+

{{ $t('settings.background') }}

+ +

{{ $t('settings.set_new_background') }}

+ +
+ +
+ + +

{{ $t('settings.scale_and_layout') }}

diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js index 2b5cf95bb..e6d3e6141 100644 --- a/src/components/settings_modal/tabs/profile_tab.js +++ b/src/components/settings_modal/tabs/profile_tab.js @@ -1,7 +1,6 @@ import UserCard from 'src/components/user_card/user_card.vue' import ImageCropper from 'src/components/image_cropper/image_cropper.vue' import ScopeSelector from 'src/components/scope_selector/scope_selector.vue' -import fileSizeFormatService from 'src/components/../services/file_size_format/file_size_format.js' import ProgressButton from 'src/components/progress_button/progress_button.vue' import EmojiInput from 'src/components/emoji_input/emoji_input.vue' import suggestor from 'src/components/emoji_input/suggestor.js' @@ -20,7 +19,6 @@ import { faPlus, faCircleNotch } from '@fortawesome/free-solid-svg-icons' -import { useInterfaceStore } from 'src/stores/interface' library.add( faTimes, @@ -32,10 +30,6 @@ const ProfileTab = { data () { return { locked: this.$store.state.users.currentUser.locked, - backgroundUploading: false, - background: null, - backgroundPreview: null, - emailLanguage: this.$store.state.users.currentUser.language || [''] } }, components: { @@ -84,54 +78,6 @@ const ProfileTab = { changeVis (visibility) { this.newDefaultScope = visibility }, - uploadFile (slot, e) { - const file = e.target.files[0] - if (!file) { return } - if (file.size > this.$store.state.instance[slot + 'limit']) { - const filesize = fileSizeFormatService.fileSizeFormat(file.size) - const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit']) - useInterfaceStore().pushGlobalNotice({ - messageKey: 'upload.error.message', - messageArgs: [ - this.$t('upload.error.file_too_big', { - filesize: filesize.num, - filesizeunit: filesize.unit, - allowedsize: allowedsize.num, - allowedsizeunit: allowedsize.unit - }) - ], - level: 'error' - }) - return - } - - const reader = new FileReader() - reader.onload = ({ target }) => { - const img = target.result - this[slot + 'Preview'] = img - this[slot] = file - } - reader.readAsDataURL(file) - }, - resetBackground () { - const confirmed = window.confirm(this.$t('settings.reset_background_confirm')) - if (confirmed) { - this.submitBackground('') - } - }, - submitBackground (background) { - if (!this.backgroundPreview && background !== '') { return } - - this.backgroundUploading = true - this.$store.state.api.backendInteractor.updateProfileImages({ background }) - .then((data) => { - this.$store.commit('addNewUsers', [data]) - this.$store.commit('setCurrentUser', data) - this.backgroundPreview = null - }) - .catch(this.displayUploadError) - .finally(() => { this.backgroundUploading = false }) - }, updateProfile () { const params = { locked: this.locked diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss index 7c30be8d2..8f0f7862a 100644 --- a/src/components/settings_modal/tabs/profile_tab.scss +++ b/src/components/settings_modal/tabs/profile_tab.scss @@ -3,122 +3,12 @@ margin: 0; } - input[type="file"] { - padding: 5px; - height: auto; - } - - .banner-background-preview { - max-width: 100%; - width: 300px; - position: relative; - - img { - width: 100%; - } - } - .uploading { font-size: 1.5em; margin: 0.25em; } - .name-changer { - width: 100%; - } - - .current-avatar-container { - position: relative; - width: 150px; - height: 150px; - } - - .current-avatar { - display: block; - width: 100%; - height: 100%; - border-radius: var(--roundness); - } - - .reset-button { - position: absolute; - top: 0.2em; - right: 0.2em; - border-radius: var(--roundness); - background-color: rgb(0 0 0 / 60%); - opacity: 0.7; - width: 1.5em; - height: 1.5em; - text-align: center; - line-height: 1.5em; - font-size: 1.5em; - cursor: pointer; - - &:hover { - opacity: 1; - } - - svg { - color: white; - } - } - - .oauth-tokens { - width: 100%; - - th { - text-align: left; - } - - .actions { - text-align: right; - } - } - - &-usersearch-wrapper { - padding: 1em; - } - - &-bulk-actions { - text-align: right; - padding: 0 1em; - min-height: 2em; - - button { - width: 10em; - } - } - - &-domain-mute-form { - padding: 1em; - display: flex; - flex-direction: column; - - button { - align-self: flex-end; - margin-top: 1em; - width: 10em; - } - } - .setting-subitem { margin-left: 1.75em; } - - .profile-fields { - display: flex; - - & > .emoji-input { - flex: 1 1 auto; - margin: 0 0.2em 0.5em; - min-width: 0; - } - - .delete-field { - width: 20px; - align-self: center; - margin: 0 0.2em 0.5em; - padding: 0 0.5em; - } - } } diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index 461882e32..7be01d689 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -7,49 +7,6 @@ rounded="top" > -
-

{{ $t('settings.profile_background') }}

- -

{{ $t('settings.set_new_profile_background') }}

- -
- -
- - -

{{ $t('settings.account_privacy') }}

    diff --git a/src/i18n/en.json b/src/i18n/en.json index d118ff595..39022866f 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -727,6 +727,7 @@ "minimal_scopes_mode": "Minimize post scope selection options", "set_new_avatar": "Set new avatar", "set_new_profile_background": "Set new profile background", + "set_new_background": "Set new background", "set_new_profile_banner": "Set new profile banner", "reset_avatar": "Reset avatar", "reset_banner": "Reset banner",