Organise button for creating dashboard widgets as dropdown

aleksis/core/static/js/main.js

@@ -58,6 +58,9 @@ $(document).ready(function () {
     // Initialize select [MAT]
     $('select').formSelect();
 
+    // Initialize dropdown [MAT]
+    $('.dropdown-trigger').dropdown();
+
     // If JS is activated, the language form will be auto-submitted
     $('.language-field select').change(function () {
 

aleksis/core/templates/core/dashboard_widget/list.html

@@ -10,13 +10,20 @@
 
 {% block content %}
 
-  {% for ct, model in widget_types %}
-    <a class="btn green waves-effect waves-light" href="{% url 'create_dashboard_widget' ct.app_label ct.model  %}">
-      <i class="material-icons left">add</i>
-      {% verbose_name_object model as widget_name %}
-      {% blocktrans with name=widget_name %}Create {{ name }}{% endblocktrans %}
-    </a>
-  {% endfor %}
+  <a class="btn green waves-effect waves-light dropdown-trigger" href="#" data-target="widget-dropdown">
+    <i class="material-icons left">add</i>
+    {% trans "Create dashboard widget" %}
+  </a>
+  <ul id="widget-dropdown" class="dropdown-content">
+    {% for ct, model in widget_types %}
+      <li>
+        <a href="{% url 'create_dashboard_widget' ct.app_label ct.model %}">
+          {% verbose_name_object model as widget_name %}
+          {% blocktrans with name=widget_name %}Create {{ name }}{% endblocktrans %}
+        </a>
+      </li>
+    {% endfor %}
+  </ul>
 
   {% has_perm "core.edit_default_dashboard" user as can_edit_default_dashboard %}
   {% if can_edit_default_dashboard %}