From f2390e2803248ba8e37ee5bd50c36051552773e3 Mon Sep 17 00:00:00 2001
From: Yamagishi Kazutoshi <ykzts@desire.sh>
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 a2ed086f1d..da1f550fc2 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 d5c18e1e3d..99eb5ebea8 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;
+ }
}
}
--
GitLab