Use bulma for notification

qgis · Sep 25, 2024 · 2e013f2 · 2e013f2
1 parent fdcffe0
commit 2e013f2
Show file tree

Hide file tree

Showing 15 changed files with 67 additions and 57 deletions.
diff --git a/qgis-app/plugins/templates/plugins/form_snippet.html b/qgis-app/plugins/templates/plugins/form_snippet.html
@@ -45,12 +45,12 @@
         </span>
         <span class="file-name" id="filename"> Choose a file… </span>
       </label>
-        {% if field.errors %}
-          {% for error in field.errors  %}
-            <p class="help is-danger has-text-weight-medium">{{ error }}</p>
-          {% endfor %}
-        {% endif %} 
     </div>
+    {% if field.errors %}
+      {% for error in field.errors  %}
+        <p class="help is-danger has-text-weight-medium">{{ error }}</p>
+      {% endfor %}
+    {% endif %} 
     {% elif field.field.widget|klass == 'Textarea' %}
       <div class="field">
         <label class="label">{{ field.label_tag }}</label>

diff --git a/qgis-app/plugins/templates/plugins/plugin_detail.html b/qgis-app/plugins/templates/plugins/plugin_detail.html
@@ -185,19 +185,19 @@ <h2>
         <div>
             {% if not object.experimental and not object.stable %}
             <div class="notification is-warning">
-                <p>{% trans "This plugin has no public version yet." %}</p>
+                {% trans "This plugin has no public version yet." %}
             </div>
             {% endif %}
 
             {% if not object.created_by.is_active %}
             <div class="notification is-warning">
-                <p>{% trans "The plugin maintainer has been blocked." %}</p>
+                {% trans "The plugin maintainer has been blocked." %}
             </div>
             {% endif %}
 
             {% if object.deprecated %}
             <div class="notification is-danger ">
-                <p class="has-text-white">{% trans "This plugin is deprecated!" %}</p>
+                {% trans "This plugin is deprecated!" %}
             </div>
             {% endif %}
 

diff --git a/qgis-app/plugins/templates/plugins/plugin_feedback.html b/qgis-app/plugins/templates/plugins/plugin_feedback.html
@@ -1,16 +1,16 @@
 {% extends 'plugins/plugin_base.html' %}{% load i18n %}
 {% block content %}
     {% if form.errors %}
-    <div class="alert alert-error">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-        <p>{% trans "The form contains errors and cannot be submitted, please check the fields highlighted in red." %}</p>
+    <div class="notification is-danger">
+        <button class="delete" data-dismiss="alert">&times;</button>
+        {% trans "The form contains errors and cannot be submitted, please check the fields highlighted in red." %}
     </div>
     {% endif %}
     {% if form.non_field_errors %}
-    <div class="alert alert-error">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+    <div class="notification is-danger">
+        <button class="delete" data-dismiss="alert">&times;</button>
         {% for error in form.non_field_errors %}
-            <p>{{ error }}</p>
+            {{ error }} <br/>
         {% endfor %}
     </div>
     {% endif %}

diff --git a/qgis-app/plugins/templates/plugins/plugin_form.html b/qgis-app/plugins/templates/plugins/plugin_form.html
@@ -38,16 +38,16 @@
 {% block content %}
     <h2>{{ form_title }} {{ plugin }}</h2>
     {% if form.errors %}
-    <div class="alert alert-error">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-        <p>{% trans "The form contains errors and cannot be submitted, please check the fields highlighted in red." %}</p>
+    <div class="notification is-danger">
+        <button class="delete" data-dismiss="alert">&times;</button>
+        {% trans "The form contains errors and cannot be submitted, please check the fields highlighted in red." %}
     </div>
     {% endif %}
     {% if form.non_field_errors %}
-    <div class="alert alert-error">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+    <div class="notification is-danger">
+        <button class="delete" data-dismiss="alert">&times;</button>
         {% for error in form.non_field_errors %}
-            <p>{{ error }}</p>
+            {{ error }}<br />
         {% endfor %}
     </div>
     {% endif %}

diff --git a/qgis-app/plugins/templates/plugins/plugin_token_delete_confirm.html b/qgis-app/plugins/templates/plugins/plugin_token_delete_confirm.html
@@ -2,7 +2,7 @@
 {% block content %}
     <h3>Delete token of "{{ username }}"</h3>
     <form action="" method="post">{% csrf_token %}
-        <p class="alert alert-danger">{% trans "You asked to delete a token.<br />The token will be permanently deleted and this action cannot be undone.<br />Please confirm." %}</p>
+        <div class="notification is-danger">{% trans "You asked to delete a token.<br />The token will be permanently deleted and this action cannot be undone.<br />Please confirm." %}</div>
         <p><input type="submit" class="button is-danger" name="delete_confirm" value="{% trans "Ok" %}" /> <a class="button btn-default" href="javascript:history.back()">{% trans "Cancel" %}</a></p>
     </form>
 

diff --git a/qgis-app/plugins/templates/plugins/plugin_token_form.html b/qgis-app/plugins/templates/plugins/plugin_token_form.html
@@ -4,16 +4,16 @@
 <h2>{% trans "Edit token description " %} {{ token.jti }}</h2>
 
 {% if form.errors %}
-<div class="alert alert-error">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
-  <p>{% trans "The form contains errors and cannot be submitted, please check the fields highlighted in red." %}</p>
+<div class="notification is-danger">
+  <button class="delete" data-dismiss="alert">&times;</button>
+  {% trans "The form contains errors and cannot be submitted, please check the fields highlighted in red." %}
 </div>
 {% endif %}
 {% if form.non_field_errors %}
-<div class="alert alert-error">
-  <button type="button" class="close" data-dismiss="alert">&times;</button>
+<div class="notification is-danger">
+  <button class="delete" data-dismiss="alert">&times;</button>
   {% for error in form.non_field_errors %}
-  <p>{{ error }}</p>
+  {{ error }} <br/>
   {% endfor %}
 </div>
 {% endif %}

diff --git a/qgis-app/plugins/templates/plugins/plugin_upload.html b/qgis-app/plugins/templates/plugins/plugin_upload.html
@@ -9,30 +9,28 @@ <h2>{% trans "Upload a plugin" %}</h2>
         </div>
     </div>
     {% if form.non_field_errors %}
-    <div class="alert alert-error">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+    <div class="notification is-danger">
+        <button class="delete" data-dismiss="alert">&times;</button>
         {% for error in form.non_field_errors %}
-            <p>{{ error }}</p>
+            {{ error }}<br />
         {% endfor %}
     </div>
     {% endif %}
 
-    <div class="container rich">
-        <div class="cont coloring-1">
-            <form action="" method="post" enctype="multipart/form-data" class="horizontal">{% csrf_token %}
-                {% include "plugins/form_snippet.html" %}
-                <div class="">
-                    <button class="button is-success" type="submit">
-                        <span class="icon is-small">
-                            <i class="fas fa-upload"></i>
-                        </span>
-                        <span>
-                            {% trans "Upload" %}
-                        </span>
-                    </button>
-                </div>
-            </form>
-        </div>
+    <div class="box-content" style="padding: 50px 70px;">
+        <form action="" method="post" enctype="multipart/form-data" class="horizontal">{% csrf_token %}
+            {% include "plugins/form_snippet.html" %}
+            <div class="">
+                <button class="button is-success" type="submit">
+                    <span class="icon is-small">
+                        <i class="fas fa-upload"></i>
+                    </span>
+                    <span>
+                        {% trans "Upload" %}
+                    </span>
+                </button>
+            </div>
+        </form>
     </div>
     <div class="m-5">
     </div>

diff --git a/qgis-app/plugins/templates/plugins/version_delete_confirm.html b/qgis-app/plugins/templates/plugins/version_delete_confirm.html
@@ -2,7 +2,7 @@
 {% block content %}
     <h3>{% blocktrans with version.version as version and plugin.name as plugin_name %}Delete version "{{ version }}" of "{{ plugin_name }}"{% endblocktrans %}</h3>
     <form action="" method="post">{% csrf_token %}
-        <p class="alert alert-danger">{% trans "You asked to delete one version.<br />The version will be permanently deleted and this action cannot be undone.<br />Please confirm." %}</p>
+        <div class="notification is-danger">{% trans "You asked to delete one version.<br />The version will be permanently deleted and this action cannot be undone.<br />Please confirm." %}</div>
         <p><input type="submit" class="button is-danger" name="delete_confirm" value="{% trans "Ok" %}" /> <a class="button btn-default" href="javascript:history.back()">{% trans "Cancel" %}</a></p>
     </form>
 

diff --git a/qgis-app/plugins/templates/plugins/version_detail.html b/qgis-app/plugins/templates/plugins/version_detail.html
@@ -5,7 +5,7 @@ <h2>{% trans "Version" %}: {{ version }}</h2>
     <div class="pull-right"><a href="{% url "version_download" version.plugin.package_name version.version %}" class="button is-success"><i class="icon-download-alt icon-white"></i> {% trans "Download" %}</a></div>
 
     {% if not version.created_by.is_active and not version.is_from_token %}
-    <div class="alert alert-error">
+    <div class="notification is-danger">
         {% trans "The plugin author has been blocked." %}
     </div>
     {% endif %}

diff --git a/qgis-app/plugins/templates/plugins/version_form.html b/qgis-app/plugins/templates/plugins/version_form.html
@@ -2,10 +2,10 @@
 {% block content %}
     <h2>{{ form_title }} {{ version }}</h2>
     {% if form.non_field_errors %}
-    <div class="alert alert-error">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+    <div class="notification is-danger">
+        <button class="delete" data-dismiss="alert">&times;</button>
         {% for error in form.non_field_errors %}
-            <p>{{ error }}</p>
+            {{ error }} <br/>
         {% endfor %}
     </div>
     {% endif %}

diff --git a/qgis-app/static/js/bulma.js b/qgis-app/static/js/bulma.js
@@ -0,0 +1,11 @@
+document.addEventListener("DOMContentLoaded", () => {
+  (document.querySelectorAll(".notification .delete") || []).forEach(
+    ($delete) => {
+      const $notification = $delete.parentNode;
+
+      $delete.addEventListener("click", () => {
+        $notification.parentNode.removeChild($notification);
+      });
+    }
+  );
+});
diff --git a/qgis-app/static/style/scss/_variables.scss b/qgis-app/static/style/scss/_variables.scss
@@ -36,7 +36,7 @@ $grey-dark: #444444;
 $grey-darker: #363636;
 $grey-light: #d4d4d4;
 $primary: #a7cecb;
-$danger: #ee7913;
+$danger: hsl(348, 100%, 61%);
 $info: #93b023;
 $success: #589632;
 $warning: #EEE766;

diff --git a/qgis-app/templates/base.html b/qgis-app/templates/base.html
@@ -25,6 +25,7 @@
 
     <script type="text/javascript" src="{% static "js/jquery-1.11.1.min.js" %}"></script>
     <script type="text/javascript" src="{% static "bootstrap/js/bootstrap-3.4.1.min.js" %}"></script>
+    <script type="text/javascript" src="{% static "js/bulma.js" %}"></script>
 
     <!-- Cookie disclaimer -->
     <script type="text/javascript" id="cookieinfo" src="{% static 'js/cookieinfo/cookieinfo.min.js' %}" data-bg="#1c2028"

diff --git a/qgis-app/templates/layouts/header.html b/qgis-app/templates/layouts/header.html
@@ -93,7 +93,7 @@
                 </div>
                 <div class="navbar-item">
                     {% if user.is_authenticated %}
-                    <a class="button is-danger is-small" href="{% url "logout" %}">{% trans "Logout" %}</a>
+                    <a class="button is-danger is-small is-outlined" href="{% url "logout" %}">{% trans "Logout" %}</a>
                     {% else %}
                     <a class="button is-info is-small" href="{% url "login" %}">{% trans "Login" %}</a>
                     {% endif %}

diff --git a/qgis-app/templates/registration/login.html b/qgis-app/templates/registration/login.html
@@ -7,13 +7,13 @@
        {% trans 'You can create a new OSGEO id on <a href="http://www.osgeo.org/osgeo_userid">OSGEO web portal.</a>' %}
     </p>
    {% if form.errors or form.non_field_errors %}
-    <div class="alert alert-error">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
+    <div class="notification is-danger">
+        <button class="delete" data-dismiss="alert">&times;</button>
         {% for error in form.non_field_errors %}
-            <p>{{ error }}</p>
+            {{ error }} <br/>
         {% endfor %}
         {% for error in form.field_errors %}
-            <p>{{ error }}</p>
+          {{ error }} <br/>
         {% endfor %}
     </div>
     {% endif %}