image deletion + improved stuff
This commit is contained in:
parent
e503217482
commit
9a5a559e10
4 changed files with 90 additions and 59 deletions
|
|
@ -17,17 +17,6 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
&:not(:first-child) {
|
||||
// hackjob
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
top: -100%;
|
||||
}
|
||||
|
||||
> * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
@media (max-width: 1064px) {
|
||||
background: rgba(211, 191, 255, .5);
|
||||
flex-flow: column;
|
||||
|
|
|
|||
|
|
@ -1,25 +1,23 @@
|
|||
.uploader__label {
|
||||
.uploader {
|
||||
display: block;
|
||||
text-align: right;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
color: #fff;
|
||||
font-size: 3em;
|
||||
line-height: 1.4em;
|
||||
transition: background .2s;
|
||||
cursor: pointer;
|
||||
background: fade(#000, 80%);
|
||||
position: absolute;
|
||||
right: 4px;
|
||||
top: 4px;
|
||||
padding: 2px;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
|
||||
&:hover {
|
||||
background: fade(#000, 50%);
|
||||
&__change {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:before {
|
||||
margin: 10px;
|
||||
font-family: FontAwesome;
|
||||
content: "\f044";
|
||||
}
|
||||
&__button {
|
||||
border-width: 0;
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.uploader {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
8
resources/views/yuuno/macros.twig
Normal file
8
resources/views/yuuno/macros.twig
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
{% macro profile_image_changer(url, query) %}
|
||||
<div class="uploader">
|
||||
<label class="uploader__button uploader__button--change fa fa-edit">
|
||||
<input type="file" class="uploader__change" onchange="handleImageChange(this.files[0], '{{ url }}', '{{ query }}')">
|
||||
</label>
|
||||
<button class="uploader__button uploader__button--delete fa fa-trash" onclick="handleImageDelete('{{ url }}', '{{ query }}')"></button>
|
||||
</div>
|
||||
{% endmacro %}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{% extends 'master.twig' %}
|
||||
{% from 'macros.twig' import profile_image_changer as pic %}
|
||||
|
||||
{% set profileHidden = profile.id == 0 or not profile.activated and (user.id != profile.id and not (user.perms.isMod or user.perms.isAdmin)) %}
|
||||
{% set noUserpage = profile.userPage|length < 1 %}
|
||||
|
|
@ -138,16 +139,16 @@
|
|||
newMode.className = 'profile-mode-current';
|
||||
}
|
||||
|
||||
function handleImageChange(elem, cont) {
|
||||
var ajax = new Sakura.AJAX(),
|
||||
target = elem.getAttribute('data-target'),
|
||||
formData = new FormData(),
|
||||
file = elem.files[0];
|
||||
function handleImageChange(file, url, query) {
|
||||
var ajax = new Sakura.AJAX,
|
||||
formData = new FormData;
|
||||
|
||||
formData.append('session', Sakura.Config.SessionId);
|
||||
formData.append('file', file, file.name);
|
||||
|
||||
ajax.SetFormData(formData);
|
||||
ajax.SetUrl(target);
|
||||
ajax.SetUrl(url);
|
||||
|
||||
ajax.AddCallback(200, function () {
|
||||
var result = ajax.JSON();
|
||||
|
||||
|
|
@ -156,12 +157,48 @@
|
|||
diag.Title = "Error";
|
||||
diag.Text = result.error;
|
||||
diag.Display();
|
||||
} else {
|
||||
refreshImage(url, query);
|
||||
}
|
||||
|
||||
cont.style.backgroundImage = "url('" + target + "?" + Date.now() + ")";
|
||||
});
|
||||
|
||||
ajax.Start(Sakura.HTTPMethod.POST);
|
||||
}
|
||||
|
||||
function handleImageDelete(url, query) {
|
||||
var confirm = new Sakura.Dialogue;
|
||||
|
||||
confirm.SetType(Sakura.DialogueType.ConfirmNegative);
|
||||
confirm.Title = "Deleting image";
|
||||
confirm.Text = "Are you sure?";
|
||||
|
||||
confirm.AddCallback(Sakura.DialogueButton.Yes, function () {
|
||||
var client = new Sakura.AJAX;
|
||||
client.SetUrl(url + "?session=" + Sakura.Config.SessionId);
|
||||
client.AddCallback(200, function () {
|
||||
refreshImage(url, query);
|
||||
});
|
||||
client.Start(Sakura.HTTPMethod.DELETE);
|
||||
this.Close();
|
||||
});
|
||||
|
||||
confirm.Display();
|
||||
}
|
||||
|
||||
function refreshImage(url, query) {
|
||||
var elements = document.querySelectorAll(query);
|
||||
|
||||
for (var i = 0; i < elements.length; i++) {
|
||||
var element = elements[i],
|
||||
url = url + "?" + Date.now();
|
||||
|
||||
if (element.tagName === "IMG") {
|
||||
element.src = url;
|
||||
} else {
|
||||
element.style.backgroundImage = "url('" + url + ")";
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
|
@ -181,20 +218,19 @@
|
|||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
{% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeBackground) or user.perms.manageProfileImages %}
|
||||
{{ pic(route('user.background', profile.id), '.container') }}
|
||||
{% endif %}
|
||||
<div class="content profile">
|
||||
<div class="profile__container">
|
||||
<div class="profile__header" style="background-image: url({{ route('user.header', profile.id) }});">
|
||||
{% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeHeader) or user.perms.manageProfileImages %}
|
||||
<label class="uploader__label">
|
||||
<input type="file" data-target="{{ route('user.header', profile.id) }}" class="uploader" onchange="handleImageChange(this, this.parentElement.parentElement)">
|
||||
</label>
|
||||
{% endif %}
|
||||
<div class="profile__info">
|
||||
{% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeHeader) or user.perms.manageProfileImages %}
|
||||
{{ pic(route('user.header', profile.id), '.profile__header') }}
|
||||
{% endif %}
|
||||
<div class="avatar avatar--border profile__avatar" style="background-image: url({{ route('user.avatar', profile.id) }}); box-shadow: 0 0 5px #{% if profile.isOnline %}484{% else %}844{% endif %};">
|
||||
{% if (user.id == profile.id and not user.restricted and user.activated and user.perms.changeAvatar) or user.perms.manageProfileImages %}
|
||||
<label class="uploader__label">
|
||||
<input type="file" data-target="{{ route('user.avatar', profile.id) }}" class="uploader" onchange="handleImageChange(this, this.parentElement.parentElement)">
|
||||
</label>
|
||||
{{ pic(route('user.avatar', profile.id), '.avatar') }}
|
||||
{% endif %}
|
||||
</div>
|
||||
<div class="profile__username">
|
||||
|
|
@ -203,21 +239,21 @@
|
|||
</div>
|
||||
<div class="profile__dates">
|
||||
{% spaceless %}
|
||||
<div class="profile__date">
|
||||
<b>Joined</b> <time class="time-ago" datetime="{{ profile.registered|date('r') }}">{{ profile.registered|date(config('general.date_format')) }}</time>
|
||||
</div>
|
||||
<div class="profile__date">
|
||||
{% if profile.lastOnline < 1 %}
|
||||
<b>{{ profile.username }} hasn't logged in yet.</b>
|
||||
{% else %}
|
||||
<b>Last online</b> <time class="time-ago" datetime="{{ profile.lastOnline|date('r') }}">{{ profile.lastOnline|date(config('general.date_format')) }}</time>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if profile.birthday != '0000-00-00' and profile.birthday|split('-')[0] > 0 %}
|
||||
<div class="profile__date">
|
||||
<b>Age</b> <span title="{{ profile.birthday }}">{{ profile.birthday(true) }} years old</span>
|
||||
<b>Joined</b> <time class="time-ago" datetime="{{ profile.registered|date('r') }}">{{ profile.registered|date(config('general.date_format')) }}</time>
|
||||
</div>
|
||||
{% endif %}
|
||||
<div class="profile__date">
|
||||
{% if profile.lastOnline < 1 %}
|
||||
<b>{{ profile.username }} hasn't logged in yet.</b>
|
||||
{% else %}
|
||||
<b>Last online</b> <time class="time-ago" datetime="{{ profile.lastOnline|date('r') }}">{{ profile.lastOnline|date(config('general.date_format')) }}</time>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if profile.birthday != '0000-00-00' and profile.birthday|split('-')[0] > 0 %}
|
||||
<div class="profile__date">
|
||||
<b>Age</b> <span title="{{ profile.birthday }}">{{ profile.birthday(true) }} years old</span>
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endspaceless %}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Reference in a new issue