flash/sakura
flash/sakura
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

image deletion + improved stuff

Browse source
This commit is contained in:
flash 2016-12-11 03:12:43 +01:00
parent e503217482
commit 9a5a559e10
4 changed files with 90 additions and 59 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
resources/assets/less/yuuno/bem/profile.less
View file

@ -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;

42
resources/assets/less/yuuno/bem/uploader.less
View file

@ -1,25 +1,23 @@
.uploader__label {
display: block;
text-align: right;
width: 100%;
height: 100%;
color: #fff;
font-size: 3em;
line-height: 1.4em;
transition: background .2s;
cursor: pointer;
&:hover {
background: fade(#000, 50%);
&:before {
margin: 10px;
font-family: FontAwesome;
content: "\f044";
}
}
}
.uploader {
display: block;
color: #fff;
background: fade(#000, 80%);
position: absolute;
right: 4px;
top: 4px;
padding: 2px;
border-radius: 6px;
font-size: 16px;
&__change {
display: none;
}
&__button {
border-width: 0;
background: transparent;
color: #fff;
cursor: pointer;
padding: 4px;
}
}

8
resources/views/yuuno/macros.twig Normal file
View 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 %}

68
resources/views/yuuno/user/profile.twig
View file

@ -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,11 +157,47 @@
diag.Title = "Error";
diag.Text = result.error;
diag.Display();
} else {
refreshImage(url, query);
}
});
ajax.Start(Sakura.HTTPMethod.POST);
}
cont.style.backgroundImage = "url('" + target + "?" + Date.now() + ")";
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);
});
ajax.Start(Sakura.HTTPMethod.POST);
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 %}
@ -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">