Fix plugin tags modal

qgis-app/plugins/templates/plugins/plugin_sidebar.html

@@ -104,9 +104,7 @@
 
       <li>
         <div>
-          <a href="">
-            {% include_plugins_tagcloud_modal 'plugins.plugin' %}
-          </a>
+        {% include_plugins_tagcloud_modal 'plugins.plugin' %}
         </div>
       </li>
     </ul>

qgis-app/plugins/templates/plugins/plugin_tags_modal.html

@@ -0,0 +1,59 @@
+{% load i18n plugins_tagcloud %}
+{% trans "Plugin Tags" as tags_title %}
+<div id="pluginTagsModal" class="modal">
+  <div class="modal-background"></div>
+  <div class="modal-card" style="max-height: 50vh; overflow-y: auto">
+    <header class="modal-card-head">
+      <p class="modal-card-title">{{ tags_title }}</p>
+      <button class="delete" aria-label="close"></button>
+    </header>
+    <section class="modal-card-body">
+      {% include_plugins_tagcloud 'plugins.plugin' %}
+    </section>
+  </div>
+</div>
+
+<script>
+  document.addEventListener('DOMContentLoaded', () => {
+    // Functions to open and close a modal
+    function openModal($el) {
+      $el.classList.add('is-active');
+    }
+
+    function closeModal($el) {
+      $el.classList.remove('is-active');
+    }
+
+    function closeAllModals() {
+      (document.querySelectorAll('.modal') || []).forEach(($modal) => {
+        closeModal($modal);
+      });
+    }
+
+    // Add a click event on buttons to open a specific modal
+    (document.querySelectorAll('.tagcloudModalButton') || []).forEach(($trigger) => {
+      const modal = $trigger.dataset.target;
+      const $target = document.getElementById(modal);
+
+      $trigger.addEventListener('click', () => {
+        openModal($target);
+      });
+    });
+
+    // Add a click event on various child elements to close the parent modal
+    (document.querySelectorAll('.modal-background, .modal-close, .modal-card-head .delete, .modal-card-foot .button') || []).forEach(($close) => {
+      const $target = $close.closest('.modal');
+
+      $close.addEventListener('click', () => {
+        closeModal($target);
+      });
+    });
+
+    // Add a keyboard event to close all modals
+    document.addEventListener('keydown', (event) => {
+      if(event.key === "Escape") {
+        closeAllModals();
+      }
+    });
+  });
+</script>

qgis-app/plugins/templates/plugins/plugins_tagcloud_modal_include.html

@@ -2,20 +2,8 @@
 
 {% trans "Plugin Tags" as tags_title %}
 
-<a id="tagcloudModalButton" href="#tagcloudModal" role="button" class="button  btn-link btn-large" data-toggle="modal">
-  <i class="icon-tags icon-white icon-2x"></i>
+<a class="tagcloudModalButton" href="#tagcloudModal" role="button" data-target="pluginTagsModal">
+  <i class="fas fa-tags mr-3"></i>
   {{ tags_title }}
-  <i class="icon-resize-full icon-white"></i>
 </a>
 
-<div id="tagcloudModal" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
-  <div class="tag_cloud_modal">
-    <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-      <h3>{{ tags_title }}</h3>
-    </div>
-    <div class="modal-body">
-    {% include_plugins_tagcloud 'plugins.plugin' %}
-    </div>
-  </div>
-</div>

qgis-app/static/style/style.css

@@ -86,12 +86,3 @@ label.required:after { content:" *"; color: red; }
   }
 }
 
-.modal {
-  /* make modal fullscreen */
-  bottom: 20px;
-}
-
-.modal-header {
-  border-bottom: none;
-  text-align: center;
-}

qgis-app/templates/base.html

@@ -108,6 +108,7 @@
         {{ sustaining_members_section|safe }}
         {% include 'layouts/footer.html' %}
     </div>
+    {% include "plugins/plugin_tags_modal.html" %}
 <script type="text/javascript">
 $('#user-tooltip').tooltip('hide');
 </script>