From b38730bacf8e7d835e175ce1b76b343455847f3f Mon Sep 17 00:00:00 2001
From: Lova ANDRIARIMALALA <43842786+Xpirix@users.noreply.github.com>
Date: Mon, 2 Sep 2024 11:44:46 +0300
Subject: [PATCH] Update plugin upload UI

---
 qgis-app/plugins/forms.py                     |  2 +-
 .../templates/plugins/form_snippet.html       | 94 ++++++++++++++-----
 .../templates/plugins/plugin_upload.html      | 62 ++++++++----
 3 files changed, 113 insertions(+), 45 deletions(-)

diff --git a/qgis-app/plugins/forms.py b/qgis-app/plugins/forms.py
index 9f98f03f..fa13eb8d 100644
--- a/qgis-app/plugins/forms.py
+++ b/qgis-app/plugins/forms.py
@@ -181,7 +181,7 @@ class PackageUploadForm(forms.Form):
         required=False,
         label=_("Experimental"),
         help_text=_(
-            "Please check this box if the plugin is experimental. Please note that this field might be overridden by metadata (if present)."
+            "Please check this box if the plugin is experimental. <br/> Please note that this field might be overridden by metadata (if present)."
         ),
     )
     package = forms.FileField(
diff --git a/qgis-app/plugins/templates/plugins/form_snippet.html b/qgis-app/plugins/templates/plugins/form_snippet.html
index ae794508..52cac3ba 100755
--- a/qgis-app/plugins/templates/plugins/form_snippet.html
+++ b/qgis-app/plugins/templates/plugins/form_snippet.html
@@ -1,27 +1,69 @@
 {% load i18n plugin_utils %}
-    <fieldset>
-{% for field in form %}
-        <div class="fieldWrapper {{ field.css_classes }}">
-            {% if field.field.widget|klass == 'CheckboxInput' %}
-            <label for="{{ field.html_name }}" class="{{ field.css_classes }}">
-                {{ field.label }}
-                {% if field.errors %}
-                <div class="alert alert-error">
-                {{ field.errors }}
-                </div>
-                {% endif %}
-                <input type="checkbox" id="{{ field.html_name }}" name="{{ field.html_name }}" {% if field.value %}checked="checked"{% endif %} />
-            </label>
-            {% else %}
-            {{ field.label_tag }}
-            {% if field.errors %}
-            <div class="alert alert-error">
-            {{ field.errors }}
-            </div>
-            {% endif %}
-            {{ field }}
-            {% endif %}
-            <div class="help">{{ field.help_text }}</div>
-        </div>
-{% endfor %}
-    </fieldset>
+<fieldset>
+  {% for field in form %}
+  <div class="field {{ field.css_classes }}">
+    {% if field.field.widget|klass == 'CheckboxInput' %}
+    <div class="control">
+      <label
+        for="{{ field.html_name }}"
+        class="checkbox label{{ field.css_classes }}"
+      >
+        {% if field.errors %}
+        <p class="help is-danger">{{ field.errors }}</p>
+        {% endif %}
+        <input
+          type="checkbox"
+          id="{{ field.html_name }}"
+          name="{{ field.html_name }}"
+          {%
+          if
+          field.value
+          %}checked="checked"
+          {%
+          endif
+          %}
+        />
+        {{ field.label }}
+      </label>
+    </div>
+    {% elif field.field.widget|klass == 'ClearableFileInput' %}
+    <div class="file has-name">
+      <label class="file-label">
+        <input
+          class="file-input"
+          type="file"
+          name="resume"
+          id="{{ field.html_name }}"
+          name="{{ field.html_name }}"
+        />
+        <span class="file-cta">
+          <span class="file-icon">
+            <i class="fas fa-cloud-upload-alt"></i>
+          </span>
+          <span class="file-label"> {{ field.label }} </span>
+        </span>
+        <span class="file-name" id="filename"> Choose a file… </span>
+      </label>
+    </div>
+    {% else %} {{ field.label_tag }} {% if field.errors %}
+    <p class="help is-danger">{{ field.errors }}</p>
+    {% endif %} {{ field }} {% endif %}
+    <div class="help has-text-grey">{{ field.help_text | safe }}</div>
+  </div>
+  {% endfor %}
+</fieldset>
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const fileInput = document.querySelector(".file-input");
+    const fileName = document.querySelector("#filename");
+
+    fileInput.addEventListener("change", function () {
+      if (fileInput.files.length > 0) {
+        fileName.textContent = fileInput.files[0].name;
+      } else {
+        fileName.textContent = "Choose a file…";
+      }
+    });
+  });
+</script>
diff --git a/qgis-app/plugins/templates/plugins/plugin_upload.html b/qgis-app/plugins/templates/plugins/plugin_upload.html
index c9fac526..49f30f1f 100644
--- a/qgis-app/plugins/templates/plugins/plugin_upload.html
+++ b/qgis-app/plugins/templates/plugins/plugin_upload.html
@@ -1,8 +1,13 @@
 {% extends 'plugins/plugin_base.html' %}{% load i18n %}
 {% block content %}
     <h2>{% trans "Upload a plugin" %}</h2>
-    <p class="help">{% trans "To upload a new plugin or update an existing one, you can specify the zipped file in this form." %}</p>
-    <p>{% trans "Alternatively, to update an existing plugin, you can also open the plugin's details view and add a new version from there." %}</p>
+    
+    <div class="container rich">
+        <div class="cont coloring-6">
+            <p>{% trans "To upload a new plugin or update an existing one, you can specify the zipped file in this form." %}</p>
+            <p>{% trans "Alternatively, to update an existing plugin, you can also open the plugin's details view and add a new version from there." %}</p>
+        </div>
+    </div>
     {% if form.non_field_errors %}
     <div class="alert alert-error">
         <button type="button" class="close" data-dismiss="alert">&times;</button>
@@ -11,19 +16,42 @@ <h2>{% trans "Upload a plugin" %}</h2>
         {% endfor %}
     </div>
     {% endif %}
-    <form action="" method="post" enctype="multipart/form-data" class="horizontal">{% csrf_token %}
-        {% include "plugins/form_snippet.html" %}
-        <div class="alert alert-info">
-        <button type="button" class="close" data-dismiss="alert">&times;</button>
-            {% blocktrans %} 
-                Please note that by uploading a plugin to the official QGIS plugin repository, 
-                you agree that we will use your email to contact you. We will only contact 
-                you for matters relating to the management of plugins and will not make 
-                your email available to third parties for marketing purposes.
-            {% endblocktrans %}
+
+    <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="alert alert-info">
-            <button type="button" class="close" data-dismiss="alert">&times;</button>
+    </div>
+    <div class="m-5">
+    </div>
+    <div class="container rich">
+        <div class="cont coloring-2">
+            <p>
+                {% blocktrans %} 
+                    Please note that by uploading a plugin to the official QGIS plugin repository, 
+                    you agree that we will use your email to contact you. We will only contact 
+                    you for matters relating to the management of plugins and will not make 
+                    your email available to third parties for marketing purposes.
+                {% endblocktrans %}
+
+            </p>
+        </div>
+    </div>
+    <div class="container rich">
+        <div class="cont coloring-2">
+            <p>
                 {% blocktrans %} 
                     By uploading your plugin to the QGIS plugin repository, 
                     you agree to keep your email address current and to be 
@@ -36,10 +64,8 @@ <h2>{% trans "Upload a plugin" %}</h2>
                     where the plugin author is not contactable and there 
                     are issues reported about a plugin.
                 {% endblocktrans %}
+            </p>
         </div>
-        <div class="form-actions">
-            <button class="button is-success" type="submit">{% trans "Upload" %}</button>
-        </div>
-    </form>
+    </div>
 
 {% endblock %}