Dynamicaly change avatar and header bg from account setting (#4289)

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index a2ed086f1da8bea69c2d7b3fc05f67617b6cee34..da1f550fc221ecc372e26e4a5e2974aedd2177cc 100644 (file)
--- 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 d5c18e1e3d4abfd0bc7f8642da0a3d6ef7d56284..99eb5ebea8b89616c7b3e92b0acf21f19319353b 100644 (file)
--- a/app/javascript/styles/accounts.scss
+++ b/app/javascript/styles/accounts.scss
@@ -32,6 +32,10 @@
 
     .avatar {
       margin-bottom: 0;
+
+      img {
+        object-fit: cover;
+      }
     }
   }