From 50256d40d813abd5f64b792db88e9db671687ea3 Mon Sep 17 00:00:00 2001
From: Awilum <awilum@msn.com>
Date: Thu, 23 Jan 2020 00:17:49 +0300
Subject: [PATCH] feat(admin-plugin): update dropdowns for extends #211

---
 .../templates/extends/fieldsets/index.html    | 48 +++++++++----------
 .../templates/extends/plugins/index.html      | 28 +++++------
 .../templates/extends/snippets/index.html     |  2 +-
 .../admin/templates/extends/themes/index.html |  2 +-
 .../extends/themes/templates/index.html       |  4 +-
 5 files changed, 40 insertions(+), 44 deletions(-)

diff --git a/site/plugins/admin/templates/extends/fieldsets/index.html b/site/plugins/admin/templates/extends/fieldsets/index.html
index 32835038..69560d1e 100644
--- a/site/plugins/admin/templates/extends/fieldsets/index.html
+++ b/site/plugins/admin/templates/extends/fieldsets/index.html
@@ -2,7 +2,7 @@
 
 {% block content %}
 {% if fieldsets_list|length > 0 %}
-<table class="table no-margin">
+<table>
     <tbody>
         {% for id, title in fieldsets_list %}
         {% set fieldset_path = PATH_FIELDSETS ~ '/' ~ id ~ '.yaml' %}
@@ -21,30 +21,28 @@
                 <a href="{{ path_for('admin.fieldsets.edit') }}?id={{ id }}">{{ title }}</a>
             </td>
             <td class="text-right">
-                <div class="btn-group">
-                  <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
-                    <i class="fas fa-ellipsis-h"></i>
-                  </button>
-                  <div class="dropdown-menu dropdown-menu-lg-right">
-                    <a class="dropdown-item" href="{{ path_for('admin.fieldsets.edit') }}?id={{ id }}"><i class="fas fa-edit"></i> {{ tr('admin_edit') }}</a>
-                    <a class="dropdown-item" href="{{ path_for('admin.fieldsets.rename') }}?id={{ id }}"><i class="fas fa-font"></i> {{ tr('admin_rename') }}</a>
-                    <form id="duplicate-fieldset-id-{{ id }}" action="{{ path_for('admin.fieldsets.duplicateProcess') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="fieldset-id" value="{{ id }}">
-                    </form>
-                    <a class="dropdown-item" href="javascript:;"
-                       onclick="event.preventDefault();
-                                document.getElementById('duplicate-fieldset-id-{{ id }}').submit();"><i class="fas fa-copy"></i> {{ tr('admin_duplicate') }}</a>
-                    <div class="dropdown-divider"></div>
-                    <form id="delete-fieldset-id-{{ id }}" action="{{ path_for('admin.fieldsets.deleteProcess') }}" method="POST" style="display: none;">
-                        {{ csrf() }}
-                        <input type="hidden" name="fieldset-id" value="{{ id }}">
-                    </form>
-                    <a class="dropdown-item" href="javascript:;"
-                       onclick="event.preventDefault();
-                                document.getElementById('delete-fieldset-id-{{ id }}').submit();"><i class="fas fa-trash-alt"></i> {{ tr('admin_delete') }}</a>
-                  </div>
-                </div>
+              <button type="button" class="js-dropdown-btn">
+                <i class="fas fa-ellipsis-h"></i>
+              </button>
+              <div class="js-dropdown dropdown-menu">
+                <a class="dropdown-menu__item" href="{{ path_for('admin.fieldsets.edit') }}?id={{ id }}"><i class="fas fa-edit dropdown-menu__icon"></i> {{ tr('admin_edit') }}</a>
+                <a class="dropdown-menu__item" href="{{ path_for('admin.fieldsets.rename') }}?id={{ id }}"><i class="fas fa-font dropdown-menu__icon"></i> {{ tr('admin_rename') }}</a>
+                <a class="dropdown-menu__item" href="javascript:;"
+                   onclick="event.preventDefault();
+                            document.getElementById('duplicate-fieldset-id-{{ id }}').submit();"><i class="fas fa-copy dropdown-menu__icon"></i> {{ tr('admin_duplicate') }}</a>
+                <div class="dropdown-menu__divider"></div>
+                <a class="dropdown-menu__item" href="javascript:;"
+                   onclick="event.preventDefault();
+                            document.getElementById('delete-fieldset-id-{{ id }}').submit();"><i class="fas fa-trash-alt dropdown-menu__icon"></i> {{ tr('admin_delete') }}</a>
+                <form id="delete-fieldset-id-{{ id }}" action="{{ path_for('admin.fieldsets.deleteProcess') }}" method="POST" style="display: none;">
+                    {{ csrf() }}
+                    <input type="hidden" name="fieldset-id" value="{{ id }}">
+                </form>
+                <form id="duplicate-fieldset-id-{{ id }}" action="{{ path_for('admin.fieldsets.duplicateProcess') }}" method="POST" style="display: none;">
+                    {{ csrf() }}
+                    <input type="hidden" name="fieldset-id" value="{{ id }}">
+                </form>
+              </div>
             </td>
         </tr>
         {% endfor %}
diff --git a/site/plugins/admin/templates/extends/plugins/index.html b/site/plugins/admin/templates/extends/plugins/index.html
index 0c315d4e..5ee15369 100644
--- a/site/plugins/admin/templates/extends/plugins/index.html
+++ b/site/plugins/admin/templates/extends/plugins/index.html
@@ -15,27 +15,25 @@
           </td>
           <td style="padding-left:0px;"><a href="{{ path_for('admin.plugins.information') }}?id={{ key }}" class="{% if plugin.enabled == false %}opacity-50{% endif %}">{{ plugin.name }}</a></td>
           <td class="text-right">
-              <div class="btn-group">
-                <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
-                  <i class="fas fa-ellipsis-h"></i>
-                </button>
-                <div class="dropdown-menu dropdown-menu-lg-right">
+              <button type="button" class="js-dropdown-btn">
+                <i class="fas fa-ellipsis-h"></i>
+              </button>
+              <div class="js-dropdown dropdown-menu">
+                  <a class="dropdown-menu__item" href="{{ path_for('admin.plugins.information') }}?id={{ key }}"><i class="fas fa-info-circle dropdown-menu__icon"></i> {{ tr('admin_information') }}</a>
+                  <a class="dropdown-menu__item" href="{{ path_for('admin.plugins.settings') }}?id={{ key }}"><i class="fas fa-cog dropdown-menu__icon"></i> {{ tr('admin_settings') }}</a>
+                  {% if key == 'admin' or key == 'site' or key == '' %}
+                     <a class="dropdown-menu__item opacity-50" href="javascript:;"><i class="fas fa-toggle-on dropdown-menu__icon"></i> {{ tr('admin_deactivate') }}</a>
+                  {% else %}
+                     <a class="dropdown-menu__item"
+                        onclick="event.preventDefault(); document.getElementById('update-status-{{ key }}').submit();"
+                        href="javascript:;">{% if plugin.enabled %}<i class="fas fa-toggle-on dropdown-menu__icon"></i> {{ tr('admin_deactivate') }}{% else %}<i class="fas fa-toggle-off dropdown-menu__icon"></i> {{ tr('admin_activate') }}{% endif %}</a>
+                  {% endif %}
                   <form id="update-status-{{ key }}" action="{{ path_for('admin.plugins.update-status') }}" method="POST" style="display: none;">
                         {{ csrf() }}
                         <input type="hidden" name="plugin-key" value="{{ key }}">
                         <input type="hidden" name="plugin-status" value="{% if plugin.enabled %}false{% else %}true{% endif %}">
                   </form>
-                  <a class="dropdown-item" href="{{ path_for('admin.plugins.information') }}?id={{ key }}"><i class="fas fa-info-circle"></i> {{ tr('admin_information') }}</a>
-                  <a class="dropdown-item" href="{{ path_for('admin.plugins.settings') }}?id={{ key }}"><i class="fas fa-cog"></i> {{ tr('admin_settings') }}</a>
-                  {% if key == 'admin' or key == 'site' or key == '' %}
-                     <a class="dropdown-item opacity-50" href="javascript:;"><i class="fas fa-toggle-on"></i> {{ tr('admin_deactivate') }}</a>
-                  {% else %}
-                     <a class="dropdown-item"
-                        onclick="event.preventDefault(); document.getElementById('update-status-{{ key }}').submit();"
-                        href="javascript:;">{% if plugin.enabled %}<i class="fas fa-toggle-on"></i> {{ tr('admin_deactivate') }}{% else %}<i class="fas fa-toggle-off"></i> {{ tr('admin_activate') }}{% endif %}</a>
-                  {% endif %}
                 </div>
-              </div>
           </td>
       </tr>
     {% endfor %}
diff --git a/site/plugins/admin/templates/extends/snippets/index.html b/site/plugins/admin/templates/extends/snippets/index.html
index 874de62a..d8f82051 100644
--- a/site/plugins/admin/templates/extends/snippets/index.html
+++ b/site/plugins/admin/templates/extends/snippets/index.html
@@ -17,7 +17,7 @@
                   <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
                     <i class="fas fa-ellipsis-h"></i>
                   </button>
-                  <div class="dropdown-menu dropdown-menu-lg-right">
+                  <div class="dropdown-menu dropdown-menu-lg-right hidden">
                     <a class="dropdown-item" href="{{ path_for('admin.snippets.edit') }}?id={{ id }}"><i class="fas fa-edit"></i> {{ tr('admin_edit') }}</a>
                     <a class="dropdown-item" href="{{ path_for('admin.snippets.rename') }}?id={{ id }}"><i class="fas fa-font"></i> {{ tr('admin_rename') }}</a>
                     <form id="duplicate-snippet-id-{{ id }}" action="{{ path_for('admin.snippets.duplicateProcess') }}" method="POST" style="display: none;">
diff --git a/site/plugins/admin/templates/extends/themes/index.html b/site/plugins/admin/templates/extends/themes/index.html
index a780d082..35dda01d 100644
--- a/site/plugins/admin/templates/extends/themes/index.html
+++ b/site/plugins/admin/templates/extends/themes/index.html
@@ -15,7 +15,7 @@
                 <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
                   <i class="fas fa-ellipsis-h"></i>
                 </button>
-                <div class="dropdown-menu dropdown-menu-lg-right">
+                <div class="dropdown-menu dropdown-menu-lg-right hidden">
                   <form id="activate-theme-id-{{ key }}" action="{{ path_for('admin.themes.activateProcess') }}" method="POST" style="display: none;">
                     {{ csrf() }}
                     <input type="hidden" name="theme-id" value="{{ key }}">
diff --git a/site/plugins/admin/templates/extends/themes/templates/index.html b/site/plugins/admin/templates/extends/themes/templates/index.html
index df497950..b48264ed 100644
--- a/site/plugins/admin/templates/extends/themes/templates/index.html
+++ b/site/plugins/admin/templates/extends/themes/templates/index.html
@@ -19,7 +19,7 @@
                   <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
                     <i class="fas fa-ellipsis-h"></i>
                   </button>
-                  <div class="dropdown-menu dropdown-menu-lg-right">
+                  <div class="dropdown-menu dropdown-menu-lg-right hidden">
                     <a class="dropdown-item" href="{{ path_for('admin.templates.edit') }}?id={{ template.basename }}&type=template&theme={{ theme }}"><i class="fas fa-edit"></i> {{ tr('admin_edit') }}</a>
                     <a class="dropdown-item" href="{{ path_for('admin.templates.rename') }}?id={{ template.basename }}&type=template&theme={{ theme }}"><i class="fas fa-font"></i> {{ tr('admin_rename') }}</a>
                     <a class="dropdown-item" href="javascript:;"
@@ -63,7 +63,7 @@
                   <button type="button" class="btn dot dropdown-toggle" data-toggle="dropdown" data-display="static" aria-haspopup="true" aria-expanded="false">
                     <i class="fas fa-ellipsis-h"></i>
                   </button>
-                  <div class="dropdown-menu dropdown-menu-lg-right">
+                  <div class="dropdown-menu dropdown-menu-lg-right hidden">
                     <a class="dropdown-item" href="{{ path_for('admin.templates.edit') }}?id={{ partial.basename }}&type=partial&theme={{ theme }}"><i class="fas fa-edit"></i> {{ tr('admin_edit') }}</a>
                     <a class="dropdown-item" href="{{ path_for('admin.templates.rename') }}?id={{ partial.basename }}&type=partial&theme={{ theme }}"><i class="fas fa-font"></i> {{ tr('admin_rename') }}</a>
                     <a class="dropdown-item" href="javascript:;"