Fix profile picture preview (#26538)
This commit is contained in:
parent
b4a95b46cd
commit
330f7e5e7e
3 changed files with 20 additions and 18 deletions
|
@ -231,8 +231,8 @@ delegate(document, '#account_display_name', 'input', ({ target }) => {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
delegate(document, '#account_avatar', 'change', ({ target }) => {
|
delegate(document, '#edit_profile input[type=file]', 'change', ({ target }) => {
|
||||||
const avatar = document.querySelector('.card .avatar img');
|
const avatar = document.getElementById(target.id + '-preview');
|
||||||
const [file] = target.files || [];
|
const [file] = target.files || [];
|
||||||
const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
|
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, '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 }) => {
|
delegate(document, '#account_locked', 'change', ({ target }) => {
|
||||||
const lock = document.querySelector('.card .display-name i');
|
const lock = document.querySelector('.card .display-name i');
|
||||||
|
|
||||||
|
|
|
@ -309,9 +309,19 @@ code {
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
background: url('images/void.png');
|
background: url('images/void.png');
|
||||||
|
|
||||||
|
&[src$='missing.png'] {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
&:last-child {
|
&:last-child {
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&#account_avatar-preview {
|
||||||
|
width: 90px;
|
||||||
|
height: 90px;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -35,10 +35,10 @@
|
||||||
.fields-group
|
.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))
|
= 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-row__column.fields-row__column-6
|
.fields-group
|
||||||
.fields-group
|
= image_tag @account.avatar.url, class: 'fields-group__thumbnail', id: 'account_avatar-preview'
|
||||||
= image_tag @account.avatar.url, class: 'fields-group__thumbnail', width: 90, height: 90
|
- if @account.avatar.present?
|
||||||
= link_to settings_profile_picture_path('avatar'), data: { method: :delete }, class: 'link-button link-button--destructive' do
|
= link_to settings_profile_picture_path('avatar'), data: { method: :delete }, class: 'link-button link-button--destructive' do
|
||||||
= fa_icon 'trash fw'
|
= fa_icon 'trash fw'
|
||||||
= t('generic.delete')
|
= t('generic.delete')
|
||||||
|
@ -48,10 +48,10 @@
|
||||||
.fields-group
|
.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))
|
= 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-row__column.fields-row__column-6
|
.fields-group
|
||||||
.fields-group
|
= image_tag @account.header.url, class: 'fields-group__thumbnail', id: 'account_header-preview'
|
||||||
= image_tag @account.header.url, class: 'fields-group__thumbnail'
|
- if @account.header.present?
|
||||||
= link_to settings_profile_picture_path('header'), data: { method: :delete }, class: 'link-button link-button--destructive' do
|
= link_to settings_profile_picture_path('header'), data: { method: :delete }, class: 'link-button link-button--destructive' do
|
||||||
= fa_icon 'trash fw'
|
= fa_icon 'trash fw'
|
||||||
= t('generic.delete')
|
= t('generic.delete')
|
||||||
|
|
Loading…
Reference in a new issue