From c0c6805e5cc322d9b218af1a0054354da426fb16 Mon Sep 17 00:00:00 2001
From: shagi <shagi@gisa-elkartea.org>
Date: Wed, 14 Apr 2021 18:21:51 +0200
Subject: [PATCH] Close button for messages

---
 gas/locale/es/LC_MESSAGES/django.po |  6 +++-
 gas/locale/eu/LC_MESSAGES/django.po |  6 +++-
 gas/static/gas/css/gas.css          | 44 +++++++++++++++++++++++++++--
 gas/static/gas/js/gas.js            |  6 ++++
 gas/templates/gas/base.html         |  1 +
 5 files changed, 59 insertions(+), 4 deletions(-)

diff --git a/gas/locale/es/LC_MESSAGES/django.po b/gas/locale/es/LC_MESSAGES/django.po
index 7bf3765..1d0d186 100644
--- a/gas/locale/es/LC_MESSAGES/django.po
+++ b/gas/locale/es/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-03-23 16:58+0000\n"
+"POT-Creation-Date: 2021-04-14 16:22+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -143,6 +143,10 @@ msgstr "Salir"
 msgid "Home"
 msgstr "Inicio"
 
+#: templates/gas/base.html:66
+msgid "Close"
+msgstr "Cerrar"
+
 #: templates/gas/base_form.html:23 templates/gas/delete_confirmation.html:21
 msgid "Cancel"
 msgstr "Cancelar"
diff --git a/gas/locale/eu/LC_MESSAGES/django.po b/gas/locale/eu/LC_MESSAGES/django.po
index c1a3660..187a937 100644
--- a/gas/locale/eu/LC_MESSAGES/django.po
+++ b/gas/locale/eu/LC_MESSAGES/django.po
@@ -8,7 +8,7 @@ msgid ""
 msgstr ""
 "Project-Id-Version: PACKAGE VERSION\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-04-14 15:09+0000\n"
+"POT-Creation-Date: 2021-04-14 16:22+0000\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -143,6 +143,10 @@ msgstr "Irten"
 msgid "Home"
 msgstr "Hasiera"
 
+#: templates/gas/base.html:66
+msgid "Close"
+msgstr "Itxi"
+
 #: templates/gas/base_form.html:23 templates/gas/delete_confirmation.html:21
 msgid "Cancel"
 msgstr "Ezeztatu"
diff --git a/gas/static/gas/css/gas.css b/gas/static/gas/css/gas.css
index 7b3f257..8139682 100644
--- a/gas/static/gas/css/gas.css
+++ b/gas/static/gas/css/gas.css
@@ -1,3 +1,12 @@
+:root {
+    --success-dark: #3f3;
+    --success: #9f9;
+    --error-dark: #f33;
+    --error: #f99;
+    --info-dark: #33f;
+    --info: #99f;
+}
+
 table {
     border-collapse: collapse;
     border: 1px solid gray;
@@ -197,11 +206,42 @@ label {
     font-weight: bold;
 }
 
+.message {
+    position: relative;
+    border: 2px solid;
+    border-radius: 0.5em;
+    padding: 1em;
+}
+
+.message .message-close {
+    position: absolute;
+    top: 1em;
+    right: 1em;
+    background-color: transparent;
+    border: none;
+    color: var(--white);
+    icon: pointer;
+}
+
+.message.success {
+    border-color: var(--success-dark);
+    background-color: var(--success);
+}
+
+.message.error {
+    border-color: var(--error-dark);
+    background-color: var(--error);
+}
+
+.message.info {
+    border-color: var(--info-dark);
+    background-color: var(--info);
+}
+
 #login {
     background: #eee;
 }
 
-
 #login form {
     border: 1px solid gray;
     border-radius: 0.5em;
@@ -209,4 +249,4 @@ label {
     margin: 2em auto;
     width: 20em;
     padding: 1em;
-}       
+}
diff --git a/gas/static/gas/js/gas.js b/gas/static/gas/js/gas.js
index ae713db..4c67f1a 100644
--- a/gas/static/gas/js/gas.js
+++ b/gas/static/gas/js/gas.js
@@ -4,6 +4,12 @@ var GAS = {
             $('.select2').select2({
                 width: 'resolve',
             });
+
+            $('#messages .message-close').click(function(event){
+                event.preventDefault();
+                let $message = $(this).parents('.message');
+                $message.remove();
+            });
         });
 
         var csrftoken = GAS.getCookie('csrftoken');
diff --git a/gas/templates/gas/base.html b/gas/templates/gas/base.html
index 0661946..34a5e9f 100644
--- a/gas/templates/gas/base.html
+++ b/gas/templates/gas/base.html
@@ -63,6 +63,7 @@
                         {% for message in messages %}
                             <div class="message {% if message.tags %} {{ message.tags }}{% endif %}">
                                 {{ message|safe }}
+                                <button class="message-close" type="button"><i class="fas fa-times" title="{% trans "Close" %}"></i></button>
                             </div>
                         {% endfor %}
                     </div>