Group command buttons into dropdowns

Group related actions in the "commands" section inside a
dropdown button.

Declutters the panel in which the buttons are displayed.

Dropdown button jinja block name is used as prefix for the block names
of inside buttons. For example, for the image dropwdown button:

<button class="...{% block nav_image %}{% endblock %}...">
    {{ _('Image') }}
</button>

Actions such as restore and create will show a jinja block inside class
attr like:

<input class="... dropdown-item{% block nav_image_restore %}{% endblock %}" ...
<input class="... dropdown-item{% block nav_image_create %}{% endblock %}" ...

2 files changed, 68 insertions, 26 deletions

diff --git a/ogcp/templates/actions/setup.html b/ogcp/templates/actions/setup.html
index fc26b31..84f4d4d 100644
--- a/ogcp/templates/actions/setup.html
+++ b/ogcp/templates/actions/setup.html
@@ -1,6 +1,7 @@
 {% extends 'commands.html' %}
 
 {% block nav_setup %} active{% endblock %}
+{% block nav_setup_setup %} active{% endblock %}
 {% block content %}
 
 <h1 class="m-5">{{_('Partition and Format')}}</h1>
diff --git a/ogcp/templates/commands.html b/ogcp/templates/commands.html
index 74d4181..6c98da2 100644
--- a/ogcp/templates/commands.html
+++ b/ogcp/templates/commands.html
@@ -16,32 +16,73 @@
 {% endblock %}
 
 {% block commands %}
-  <input class="btn btn-light{% block nav_wol %}{% endblock %}" type="submit" value="{{ _('Power on (WoL)') }}"
-         form="scopesForm" formaction="{{ url_for('action_wol') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_poweroff %}{% endblock %}" type="submit" value="{{ _('Power off') }}"
-         form="scopesForm" formaction="{{ url_for('action_poweroff') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_reboot %}{% endblock %}" type="submit" value="{{ _('Reboot') }}"
-         form="scopesForm" formaction="{{ url_for('action_reboot') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_refresh %}{% endblock %}" type="submit" value="{{ _('Refresh') }}"
-         form="scopesForm" formaction="{{ url_for('action_refresh') }}" formmethod="post">
-  <input class="btn btn-light{% block nav_hardware %}{% endblock %}" type="submit" value="{{ _('Hardware') }}"
-         form="scopesForm" formaction="{{ url_for('action_hardware') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_software %}{% endblock %}" type="submit" value="{{ _('Software') }}"
-         form="scopesForm" formaction="{{ url_for('action_software') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_session %}{% endblock %}" type="submit" value="{{ _('Start session') }}"
-         form="scopesForm" formaction="{{ url_for('action_session') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_restore_image %}{% endblock %}" type="submit" value="{{ _('Restore Image') }}"
-         form="scopesForm" formaction="{{ url_for('action_image_restore') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_setup %}{% endblock %}" type="submit" value="{{ _('Partition & Format') }}"
-         form="scopesForm" formaction="{{ url_for('action_setup_show') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_client_details %}{% endblock %}" type="submit" value="{{ _('Client details') }}"
-         form="scopesForm" formaction="{{ url_for('action_client_info') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_create_image %}{% endblock %}" type="submit" value="{{ _('Create image') }}"
-         form="scopesForm" formaction="{{ url_for('action_image_create') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_set_bootmode %}{% endblock %}" type="submit" value="{{ _('Set boot mode') }}"
-         form="scopesForm" formaction="{{ url_for('action_mode') }}" formmethod="get">
-  <input class="btn btn-light{% block nav_set_oglive %}{% endblock %}" type="submit" value="{{ _('Set ogLive') }}"
-         form="scopesForm" formaction="{{ url_for('action_oglive') }}" formmethod="get">
+
+  <div class="dropdown btn">
+    <button class="btn btn-secondary btn-light dropdown-toggle{% block nav_client %}{% endblock %}" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+	    {{ _('Client') }}
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <input class="btn btn-light dropdown-item{% block nav_client_refresh %}{% endblock %}" type="submit" value="{{ _('Refresh') }}"
+           form="scopesForm" formaction="{{ url_for('action_refresh') }}" formmethod="post">
+    <input class="btn btn-light dropdown-item{% block nav_client_session %}{% endblock %}" type="submit" value="{{ _('Start session') }}"
+           form="scopesForm" formaction="{{ url_for('action_session') }}" formmethod="get">
+    <input class="btn btn-light dropdown-item{% block nav_client_details %}{% endblock %}" type="submit" value="{{ _('Client details') }}"
+           form="scopesForm" formaction="{{ url_for('action_client_info') }}" formmethod="get">
+    </div>
+  </div>
+
+  <div class="dropdown btn">
+    <button class="btn btn-secondary btn-light dropdown-toggle{% block nav_setup %}{% endblock %}" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+	    {{ _('Setup') }}
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <input class="btn btn-light dropdown-item{% block nav_setup_set_bootmode %}{% endblock %}" type="submit" value="{{ _('Set boot mode') }}"
+           form="scopesForm" formaction="{{ url_for('action_mode') }}" formmethod="get">
+    <input class="btn btn-light dropdown-item{% block nav_setup_set_oglive %}{% endblock %}" type="submit" value="{{ _('Set ogLive') }}"
+           form="scopesForm" formaction="{{ url_for('action_oglive') }}" formmethod="get">
+    <input class="btn btn-light dropdown-item{% block nav_setup_setup %}{% endblock %}" type="submit" value="{{ _('Partition & Format') }}"
+           form="scopesForm" formaction="{{ url_for('action_setup_show') }}" formmethod="get">
+    </div>
+  </div>
+
+  <div class="dropdown btn">
+    <button class="btn btn-secondary btn-light dropdown-toggle{% block nav_power %}{% endblock %}" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+	    {{ _('Power') }}
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <input class="btn btn-light dropdown-item{% block nav_power_wol %}{% endblock %}" type="submit" value="{{ _('Power on (WoL)') }}"
+           form="scopesForm" formaction="{{ url_for('action_wol') }}" formmethod="get">
+    <input class="btn btn-light dropdown-item{% block nav_power_poweroff %}{% endblock %}" type="submit" value="{{ _('Power off') }}"
+           form="scopesForm" formaction="{{ url_for('action_poweroff') }}" formmethod="get">
+    <input class="btn btn-light dropdown-item{% block nav_power_reboot %}{% endblock %}" type="submit" value="{{ _('Reboot') }}"
+           form="scopesForm" formaction="{{ url_for('action_reboot') }}" formmethod="get">
+    </div>
+  </div>
+
+  <div class="dropdown btn">
+    <button class="btn btn-secondary btn-light dropdown-toggle{% block nav_image %}{% endblock %}" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+	    {{ _('Image') }}
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <input class="btn btn-light dropdown-item{% block nav_image_restore %}{% endblock %}" type="submit" value="{{ _('Restore Image') }}"
+           form="scopesForm" formaction="{{ url_for('action_image_restore') }}" formmethod="get">
+    <input class="btn btn-light dropdown-item{% block nav_image_create %}{% endblock %}" type="submit" value="{{ _('Create image') }}"
+           form="scopesForm" formaction="{{ url_for('action_image_create') }}" formmethod="get">
+    </div>
+  </div>
+
+  <div class="dropdown btn">
+    <button class="btn btn-secondary btn-light dropdown-toggle{% block nav_inventory %}{% endblock %}" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
+	    {{ _('Inventory') }}
+    </button>
+    <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
+    <input class="btn btn-light dropdown-item{% block nav_inventory_hardware %}{% endblock %}" type="submit" value="{{ _('Hardware') }}"
+           form="scopesForm" formaction="{{ url_for('action_hardware') }}" formmethod="get">
+    <input class="btn btn-light dropdown-item{% block nav_inventory_software %}{% endblock %}" type="submit" value="{{ _('Software') }}"
+           form="scopesForm" formaction="{{ url_for('action_software') }}" formmethod="get">
+    </div>
+  </div>
+
   <div class="dropdown btn">
     <button class="btn btn-secondary btn-light dropdown-toggle{% block nav_logs %}{% endblock %}" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-expanded="false">
       Logs