From bb23116e8d17b0fa7564a0f713c48753cfba7023 Mon Sep 17 00:00:00 2001 From: Christian Schmidt Date: Fri, 18 Aug 2023 18:24:32 +0200 Subject: [PATCH] Fix profile picture preview (#26538) --- app/javascript/packs/public.jsx | 12 ++---------- app/javascript/styles/mastodon/forms.scss | 10 ++++++++++ app/views/settings/profiles/show.html.haml | 16 ++++++++-------- 3 files changed, 20 insertions(+), 18 deletions(-) diff --git a/app/javascript/packs/public.jsx b/app/javascript/packs/public.jsx index 9e30ecaa01..1d917d60ee 100644 --- a/app/javascript/packs/public.jsx +++ b/app/javascript/packs/public.jsx @@ -231,8 +231,8 @@ delegate(document, '#account_display_name', 'input', ({ target }) => { } }); -delegate(document, '#account_avatar', 'change', ({ target }) => { - const avatar = document.querySelector('.card .avatar img'); +delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => { + const avatar = document.getElementById(target.id + '-preview'); const [file] = target.files || []; const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc; @@ -254,14 +254,6 @@ delegate(document, 'img#profile_page_avatar', 'mouseover', getProfileAvatarAnima delegate(document, 'img#profile_page_avatar', 'mouseout', getProfileAvatarAnimationHandler('data-static')); -delegate(document, '#account_header', 'change', ({ target }) => { - const header = document.querySelector('.card .card__img img'); - const [file] = target.files || []; - const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc; - - header.src = url; -}); - delegate(document, '#account_locked', 'change', ({ target }) => { const lock = document.querySelector('.card .display-name i'); diff --git a/app/javascript/styles/mastodon/forms.scss b/app/javascript/styles/mastodon/forms.scss index f69b699a0a..beb45ab6e9 100644 --- a/app/javascript/styles/mastodon/forms.scss +++ b/app/javascript/styles/mastodon/forms.scss @@ -309,9 +309,19 @@ code { border-radius: 4px; background: url('images/void.png'); + &[src$='missing.png'] { + visibility: hidden; + } + &:last-child { margin-bottom: 0; } + + &#account_avatar-preview { + width: 90px; + height: 90px; + object-fit: cover; + } } } diff --git a/app/views/settings/profiles/show.html.haml b/app/views/settings/profiles/show.html.haml index 92b7f42569..7c13dc7f44 100644 --- a/app/views/settings/profiles/show.html.haml +++ b/app/views/settings/profiles/show.html.haml @@ -35,10 +35,10 @@ .fields-group = f.input :avatar, wrapper: :with_block_label, input_html: { accept: AccountAvatar::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.avatar', dimensions: '400x400', size: number_to_human_size(AccountAvatar::LIMIT)) - - if @account.avatar.present? - .fields-row__column.fields-row__column-6 - .fields-group - = image_tag @account.avatar.url, class: 'fields-group__thumbnail', width: 90, height: 90 + .fields-row__column.fields-row__column-6 + .fields-group + = image_tag @account.avatar.url, class: 'fields-group__thumbnail', id: 'account_avatar-preview' + - if @account.avatar.present? = link_to settings_profile_picture_path('avatar'), data: { method: :delete }, class: 'link-button link-button--destructive' do = fa_icon 'trash fw' = t('generic.delete') @@ -48,10 +48,10 @@ .fields-group = f.input :header, wrapper: :with_block_label, input_html: { accept: AccountHeader::IMAGE_MIME_TYPES.join(',') }, hint: t('simple_form.hints.defaults.header', dimensions: '1500x500', size: number_to_human_size(AccountHeader::LIMIT)) - - if @account.header.present? - .fields-row__column.fields-row__column-6 - .fields-group - = image_tag @account.header.url, class: 'fields-group__thumbnail' + .fields-row__column.fields-row__column-6 + .fields-group + = image_tag @account.header.url, class: 'fields-group__thumbnail', id: 'account_header-preview' + - if @account.header.present? = link_to settings_profile_picture_path('header'), data: { method: :delete }, class: 'link-button link-button--destructive' do = fa_icon 'trash fw' = t('generic.delete')