Use the same surface to render both the default and active profile image so transparent pngs don't show the default image behind them

This commit is contained in:
Kevin MacMartin 2018-04-25 01:33:17 -04:00
parent 6afe85c2d9
commit d7f3e449fb
3 changed files with 9 additions and 16 deletions

View file

@ -630,7 +630,8 @@ function userProfileImageInit() {
$upload = $("#profile-image-upload"), $upload = $("#profile-image-upload"),
$delete = $("#profile-image-delete"), $delete = $("#profile-image-delete"),
$token = $("#token"), $token = $("#token"),
$displayInner = $form.find(".image-display-inner").first(); $display = $form.find(".image-display").first(),
defaultImage = $display.data("default");
let file, let file,
submitting = false; submitting = false;
@ -660,7 +661,7 @@ function userProfileImageInit() {
submitting = false; submitting = false;
if (/\.png\?version=/.test(response)) { if (/\.png\?version=/.test(response)) {
$displayInner.css({ backgroundImage: `url(${response})` }); $display.css({ backgroundImage: `url(${response})` });
$delete.removeClass("inactive"); $delete.removeClass("inactive");
} else { } else {
showAlert("Failed to upload image"); showAlert("Failed to upload image");
@ -687,7 +688,7 @@ function userProfileImageInit() {
} }
}).always(function(response) { }).always(function(response) {
if (response === "success") { if (response === "success") {
$displayInner.css({ backgroundImage: "none" }); $display.css({ backgroundImage: `url(${defaultImage})` });
$delete.addClass("inactive"); $delete.addClass("inactive");
} else { } else {
showAlert("Failed to delete profile image"); showAlert("Failed to delete profile image");

View file

@ -820,17 +820,6 @@ body {
background-position: center center; background-position: center center;
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
&-inner {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
}
} }
.image-buttons { .image-buttons {

View file

@ -10,9 +10,12 @@
<div class="col-12 col-md-8"> <div class="col-12 col-md-8">
<form id="user-profile-image" class="edit-item user-profile-image"> <form id="user-profile-image" class="edit-item user-profile-image">
@set('profile_image', $user->profileImage()) @set('profile_image', $user->profileImage())
@set('default_image', App\User::$default_profile_image)
<div class="image-display" style="background-image: url('{{ App\User::$default_profile_image }}')"> <div
<div class="image-display-inner" style="background-image: url('{{ $profile_image !== null ? $profile_image : App\User::$default_profile_image }}')"></div> class="image-display"
style="background-image: url('{{ $profile_image !== null ? $profile_image : $default_image }}')"
data-default="{{ $default_image }}">
</div> </div>
<div class="image-buttons"> <div class="image-buttons">