diff --git a/CHANGELOG.md b/CHANGELOG.md index 1ac93820b6..850188f1b5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -18,6 +18,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Fixed custom emoji not working in profile field names - Fixed pinned statuses not appearing in user profiles - Fixed some elements not being keyboard navigation friendly +- Fixed error handling when updating various profile images - Fixed your latest chat messages disappearing when closing chat view and opening it again during the same session - Fixed custom emoji not showing in poll options before voting @@ -25,6 +26,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/). - Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers - Made reply/fav/repeat etc buttons easier to hit - Adjusted timeline menu clickable area to match the visible button +- Moved external source link from status heading to the ellipsis menu - Disabled horizontal textarea resize diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js index 1a8eef7295..b5b29e8a5a 100644 --- a/src/components/extra_buttons/extra_buttons.js +++ b/src/components/extra_buttons/extra_buttons.js @@ -5,7 +5,8 @@ import { faBookmark, faEyeSlash, faThumbtack, - faShareAlt + faShareAlt, + faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons' import { faBookmark as faBookmarkReg @@ -17,7 +18,8 @@ library.add( faBookmarkReg, faEyeSlash, faThumbtack, - faShareAlt + faShareAlt, + faExternalLinkAlt ) const ExtraButtons = { diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue index e687d48735..dc790cad7e 100644 --- a/src/components/extra_buttons/extra_buttons.vue +++ b/src/components/extra_buttons/extra_buttons.vue @@ -1,5 +1,6 @@ @@ -54,7 +58,7 @@ .global-error { background-color: var(--alertPopupError, $fallback--cRed); color: var(--alertPopupErrorText, $fallback--text); - i { + .svg-inline--fa { color: var(--alertPopupErrorText, $fallback--text); } } @@ -62,7 +66,7 @@ .global-warning { background-color: var(--alertPopupWarning, $fallback--cOrange); color: var(--alertPopupWarningText, $fallback--text); - i { + .svg-inline--fa { color: var(--alertPopupWarningText, $fallback--text); } } @@ -70,9 +74,16 @@ .global-info { background-color: var(--alertPopupNeutral, $fallback--fg); color: var(--alertPopupNeutralText, $fallback--text); - i { + .svg-inline--fa { color: var(--alertPopupNeutralText, $fallback--text); } } + + .close-notice { + padding-right: 0.2em; + .svg-inline--fa:hover { + opacity: 0.6; + } + } } diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js index 59e4d07ef5..e8d5ec6de8 100644 --- a/src/components/image_cropper/image_cropper.js +++ b/src/components/image_cropper/image_cropper.js @@ -2,12 +2,10 @@ import Cropper from 'cropperjs' import 'cropperjs/dist/cropper.css' import { library } from '@fortawesome/fontawesome-svg-core' import { - faTimes, faCircleNotch } from '@fortawesome/free-solid-svg-icons' library.add( - faTimes, faCircleNotch ) @@ -53,8 +51,7 @@ const ImageCropper = { cropper: undefined, dataUrl: undefined, filename: undefined, - submitting: false, - submitError: null + submitting: false } }, computed: { @@ -66,9 +63,6 @@ const ImageCropper = { }, cancelText () { return this.cancelButtonLabel || this.$t('image_cropper.cancel') - }, - submitErrorMsg () { - return this.submitError && this.submitError instanceof Error ? this.submitError.toString() : this.submitError } }, methods: { @@ -82,12 +76,8 @@ const ImageCropper = { }, submit (cropping = true) { this.submitting = true - this.avatarUploadError = null this.submitHandler(cropping && this.cropper, this.file) .then(() => this.destroy()) - .catch((err) => { - this.submitError = err - }) .finally(() => { this.submitting = false }) @@ -113,9 +103,6 @@ const ImageCropper = { reader.readAsDataURL(this.file) this.$emit('changed', this.file, reader) } - }, - clearError () { - this.submitError = null } }, mounted () { diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 448461b4d4..8c48a38767 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -37,17 +37,6 @@ icon="circle-notch" /> -
- {{ submitErrorMsg }} - -
diff --git a/src/components/settings_modal/tabs/profile_tab.js b/src/components/settings_modal/tabs/profile_tab.js index a4fed6294f..9709424c9e 100644 --- a/src/components/settings_modal/tabs/profile_tab.js +++ b/src/components/settings_modal/tabs/profile_tab.js @@ -45,9 +45,7 @@ const ProfileTab = { banner: null, bannerPreview: null, background: null, - backgroundPreview: null, - bannerUploadError: null, - backgroundUploadError: null + backgroundPreview: null } }, components: { @@ -162,18 +160,18 @@ const ProfileTab = { 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']) - this[slot + 'UploadError'] = [ - this.$t('upload.error.base'), - this.$t( - 'upload.error.file_too_big', - { + this.$store.dispatch('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 - } - ) - ].join(' ') + }) + ], + level: 'error' + }) return } // eslint-disable-next-line no-undef @@ -213,8 +211,9 @@ const ProfileTab = { that.$store.commit('setCurrentUser', user) resolve() }) - .catch((err) => { - reject(new Error(that.$t('upload.error.base') + ' ' + err.message)) + .catch((error) => { + that.displayUploadError(error) + reject(error) }) } @@ -235,24 +234,27 @@ const ProfileTab = { this.$store.commit('setCurrentUser', user) this.bannerPreview = null }) - .catch((err) => { - this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message - }) - .then(() => { this.bannerUploading = false }) + .catch(this.displayUploadError) + .finally(() => { this.bannerUploading = false }) }, submitBackground (background) { if (!this.backgroundPreview && background !== '') { return } this.backgroundUploading = true - this.$store.state.api.backendInteractor.updateProfileImages({ background }).then((data) => { - if (!data.error) { + this.$store.state.api.backendInteractor.updateProfileImages({ background }) + .then((data) => { this.$store.commit('addNewUsers', [data]) this.$store.commit('setCurrentUser', data) this.backgroundPreview = null - } else { - this.backgroundUploadError = this.$t('upload.error.base') + data.error - } - this.backgroundUploading = false + }) + .catch(this.displayUploadError) + .finally(() => { this.backgroundUploading = false }) + }, + displayUploadError (error) { + this.$store.dispatch('pushGlobalNotice', { + messageKey: 'upload.error.message', + messageArgs: [error.message], + level: 'error' }) } } diff --git a/src/components/settings_modal/tabs/profile_tab.vue b/src/components/settings_modal/tabs/profile_tab.vue index 66275fccb1..b7ef21d77a 100644 --- a/src/components/settings_modal/tabs/profile_tab.vue +++ b/src/components/settings_modal/tabs/profile_tab.vue @@ -229,17 +229,6 @@ > {{ $t('general.submit') }} -
- Error: {{ bannerUploadError }} - -

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

@@ -279,18 +268,6 @@ > {{ $t('general.submit') }} -
- Error: {{ backgroundUploadError }} - -
diff --git a/src/components/status/status.js b/src/components/status/status.js index 142e1fc638..f9c710ab7d 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -26,7 +26,6 @@ import { faTimes, faRetweet, faReply, - faExternalLinkSquareAlt, faPlusSquare, faSmileBeam, faEllipsisH, @@ -44,7 +43,6 @@ library.add( faTimes, faRetweet, faReply, - faExternalLinkSquareAlt, faPlusSquare, faStar, faSmileBeam, diff --git a/src/components/status/status.scss b/src/components/status/status.scss index 70c6d03d6a..58b55bc81b 100644 --- a/src/components/status/status.scss +++ b/src/components/status/status.scss @@ -139,6 +139,20 @@ $status-margin: 0.75em; .heading-right { display: flex; flex-shrink: 0; + + .button-unstyled { + padding: 5px; + margin: -5px; + + &:hover svg { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } + + .svg-inline--fa { + margin-left: 0.25em; + } } .timeago { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 896635ee08..6ee8117f2a 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -184,30 +184,20 @@ :title="status.visibility | capitalize" > - - - @@ -217,8 +207,9 @@ @click.prevent="toggleMute" > diff --git a/src/i18n/en.json b/src/i18n/en.json index c42126fca6..f345021747 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -662,6 +662,7 @@ "unmute_conversation": "Unmute conversation", "status_unavailable": "Status unavailable", "copy_link": "Copy link to status", + "external_source": "External source", "thread_muted": "Thread muted", "thread_muted_and_words": ", has words:", "show_full_subject": "Show full subject", @@ -669,7 +670,8 @@ "show_content": "Show content", "hide_content": "Hide content", "status_deleted": "This post was deleted", - "nsfw": "NSFW" + "nsfw": "NSFW", + "expand": "Expand" }, "user_card": { "approve": "Approve", @@ -759,6 +761,7 @@ "upload": { "error": { "base": "Upload failed.", + "message": "Upload failed: {0}", "file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", "default": "Try again later" }, diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 8da933c41c..f448314905 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -162,7 +162,12 @@ const updateProfileImages = ({ credentials, avatar = null, banner = null, backgr body: form }) .then((data) => data.json()) - .then((data) => parseUser(data)) + .then((data) => { + if (data.error) { + throw new Error(data.error) + } + return parseUser(data) + }) } const updateProfile = ({ credentials, params }) => {