From f2390e2803248ba8e37ee5bd50c36051552773e3 Mon Sep 17 00:00:00 2001 From: Yamagishi Kazutoshi Date: Fri, 21 Jul 2017 19:47:16 +0900 Subject: [PATCH] Dynamicaly change avatar and header bg from account setting (#4289) --- app/javascript/packs/public.js | 14 ++++++++++++++ app/javascript/styles/accounts.scss | 4 ++++ 2 files changed, 18 insertions(+) diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js index a2ed086f1da..da1f550fc22 100644 --- a/app/javascript/packs/public.js +++ b/app/javascript/packs/public.js @@ -88,6 +88,20 @@ function main() { noteCounter.textContent = 160 - length(target.value); } }); + + delegate(document, '#account_avatar', 'change', ({ target }) => { + const avatar = document.querySelector('.card.compact .avatar img'); + const [file] = target.files || []; + const url = URL.createObjectURL(file); + avatar.src = url; + }); + + delegate(document, '#account_header', 'change', ({ target }) => { + const header = document.querySelector('.card.compact'); + const [file] = target.files || []; + const url = URL.createObjectURL(file); + header.style.backgroundImage = `url(${url})`; + }); } loadPolyfills().then(main).catch(error => { diff --git a/app/javascript/styles/accounts.scss b/app/javascript/styles/accounts.scss index d5c18e1e3d4..99eb5ebea8b 100644 --- a/app/javascript/styles/accounts.scss +++ b/app/javascript/styles/accounts.scss @@ -32,6 +32,10 @@ .avatar { margin-bottom: 0; + + img { + object-fit: cover; + } } }