image deletion + improved stuff

resources/assets/less/yuuno/bem/profile.less

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

resources/assets/less/yuuno/bem/uploader.less

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

resources/views/yuuno/macros.twig

@@ -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 %}

resources/views/yuuno/user/profile.twig

@@ -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) {
+        function handleImageChange(file, url, query) {
-            var ajax = new Sakura.AJAX(),
+            var ajax = new Sakura.AJAX,
-                target = elem.getAttribute('data-target'),
+                formData = new FormData;
-                formData = new FormData(),
-                file = elem.files[0];
 
             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">
+                                {{ pic(route('user.avatar', profile.id), '.avatar') }}
-                                    <input type="file" data-target="{{ route('user.avatar', profile.id) }}" class="uploader" onchange="handleImageChange(this, this.parentElement.parentElement)">
-                                </label>
                             {% endif %}
                         </div>
                         <div class="profile__username">