Add table toolbar (#83)

* Make the expand/collapse column have fixed width

* Remove fixed header height and fix styling

* Fix alignment in navbar

The skewed positioning is very visible when adding a centered toolbar right below the navbar

* Make table toolbar a separate component

* Add all buttons and display them in the toolbar

* Add on hover popovers with button names

* Add focus ring

* Simplify tooltip

* Add a common modal component for table operations

* Show generic modal on table operation buttons click

* Increase font size in navbar

src/howitz/templates/components/navbar/navbar.html

@@ -1,24 +1,24 @@
 <nav class="bg-slate-950">
-    <div class="max-w-full h-16 flex justify-between items-center px-2 lg:px-4">
+    <div class="max-w-full h-16 grid grid-cols-3 items-center px-2 lg:px-4">
         <a
                 href="/"
                 hx-push-url="/"
-                class="hover:bg-gray-700 p-2 rounded-md"
+                class="hover:bg-gray-700 p-2 rounded-md justify-self-start"
                 aria-current="page">
             {% include "/includes/zino-logo.svg" %}
 
         </a>
-        <div class="flex space-x-1 md:space-x-4 items-center">
+        <div class="flex space-x-1 md:space-x-4 items-center justify-self-center">
             <a
                     href="/events"
                     hx-push-url="/events"
-                    class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-4 py-2 text-base font-normal"
+                    class="text-gray-300 hover:bg-gray-700 hover:text-white block rounded-md px-4 py-2 text-lg font-normal"
                     aria-current="page">
                 Dashboard
             </a>
         </div>
 
-        <div>
+        <div class="justify-self-end p-2">
             {% include "/components/navbar/user-menu-btn.html" %}
             {% include "/components/navbar/user-dropdown-menu-hidden.html" %}
         </div>

src/howitz/templates/components/popups/modals/table-operation-modal.html

@@ -0,0 +1,42 @@
+<div id="{{ modal_id }}"
+     class="invisible fixed inset-0 z-50 flex flex-col items-center justify-center"
+     aria-labelledby="modal-title"
+     role="dialog"
+     aria-modal="true"
+     hx-target-error="body"
+>
+    <div
+            class="modal-underlay inset-0 bg-gray-500 bg-opacity-70 transition-opacity"
+            hx-on:click="htmx.addClass(htmx.find('#{{ modal_id }}'), 'invisible')"
+    ></div>
+
+
+    <div class="w-1/3 flex items-end justify-center p-4 text-center sm:items-center sm:p-0">
+
+        <div class="relative transform overflow-x-auto overflow-y-auto rounded-lg bg-white text-left shadow-xl sm:my-8 sm:w-full sm:max-w-3xl w-fit">
+            <div class="bg-slate-800 px-4 py-4">
+                <h3 class="text-lg font-semibold leading-6 text-center text-teal-200"
+                    id="modal-title">{{ modal_title }}</h3>
+            </div>
+
+            <div class="bg-slate-700 p-4 text-white">
+                {% if path_to_content %}
+                    {% include path_to_content %}
+                {% else %}
+                    <p class="py-6 text-center">
+                        Nothing to display
+                    </p>
+                {% endif %}
+
+            </div>
+
+            <div class="bg-slate-800 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
+                <button
+                        hx-on:click="htmx.addClass(htmx.find('#{{ modal_id }}'), 'invisible')"
+                        class="mt-3 inline-flex w-full justify-center rounded-md bg-slate-800 px-3 py-2 text-sm font-semibold text-teal-200 shadow-sm ring-1 ring-inset ring-teal-200 hover:bg-slate-600 sm:mt-0 sm:w-auto">
+                    Close
+                </button>
+            </div>
+        </div>
+    </div>
+</div>

src/howitz/templates/components/row/collapse-btn.html

@@ -11,7 +11,7 @@
 
     <svg
             id="svg-icon-{{ id }}"
-            class="rotate-180 w-6 h-6 shrink-0"
+            class="rotate-180 w-6 h-6 shrink-0 mx-auto"
             fill="{{ color if (color != '' and color is not none) else 'currentColor' }}" viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg">
 

src/howitz/templates/components/row/expand-btn.html

@@ -12,7 +12,7 @@
 
     <svg
             id="svg-icon-{{ id }}"
-            class="w-6 h-6 shrink-0" fill="{{ color if (color != '' and color is not none) else 'currentColor' }}"
+            class="w-6 h-6 shrink-0 mx-auto" fill="{{ color if (color != '' and color is not none) else 'currentColor' }}"
             viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
         <path fill-rule="evenodd"
               d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"

src/howitz/templates/components/row/row-toggle-spinner.html

@@ -1,4 +1,4 @@
-<span id="row-{{ id }}-indicator" class="htmx-indicator absolute flex w-6 h-6">
+<span id="row-{{ id }}-indicator" class="htmx-indicator absolute w-6 h-6 inset-x-0 mx-auto">
     <span class="animate-ping absolute inline-flex w-full h-full rounded-full bg-current opacity-75"></span>
     <span class="relative inline-flex rounded-full w-6 h-6 bg-transparent">
         <svg class="animate-spin absolute flex w-6 h-6"

src/howitz/templates/components/table/events-table.html

@@ -6,7 +6,7 @@
         hx-trigger="load"
 >
     <thead class="sticky top-0 z-20 text-xs text-center uppercase bg-gray-700 text-gray-100">
-    <tr>
+    <tr class="text-teal-100 text-nowrap">
         <th scope="col" class="border border-slate-600 px-2 py-2"></th>
         <th scope="col" class="border border-slate-600 px-2 py-2">#</th>
         <th scope="col" class="border border-slate-600 px-2 py-2">OP-STATE</th>

src/howitz/templates/components/toolbar/column-toggle-btn.html

@@ -0,0 +1,25 @@
+<div class="relative flex flex-col items-center">
+    <button class="block bg-gray-600/90 hover:bg-gray-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-teal-300"
+            hx-on:mouseenter="htmx.removeClass(htmx.find('#toggle-popover'), 'invisible')"
+            hx-on:mouseleave="htmx.addClass(htmx.find('#toggle-popover'), 'invisible')"
+            hx-on:click="htmx.removeClass(htmx.find('#column-toggle-menu-dropdown'), 'invisible')"
+            aria-describedby="toggle-popover"
+    >
+        <svg class="fill-teal-300/90 hover:fill-teal-300 p-1.5 size-full"
+             xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 576 512">
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path d="M384 128c70.7 0 128 57.3 128 128s-57.3 128-128 128H192c-70.7 0-128-57.3-128-128s57.3-128 128-128H384zM576 256c0-106-86-192-192-192H192C86 64 0 150 0 256S86 448 192 448H384c106 0 192-86 192-192zM192 352a96 96 0 1 0 0-192 96 96 0 1 0 0 192z"/>
+        </svg>
+    </button>
+
+    <p id="toggle-popover" role="tooltip"
+       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-teal-900 transition-opacity duration-300 bg-teal-300 rounded-md px-1 py-0.5"
+    >
+        Toggle columns
+    </p>
+
+    {% with modal_id='column-toggle-menu-dropdown', modal_title='Toggle columns' %}
+        {% include "/components/popups/modals/table-operation-modal.html" %}
+    {% endwith %}
+</div>

src/howitz/templates/components/toolbar/table-filter-btn.html

@@ -0,0 +1,25 @@
+<div class="relative flex flex-col items-center">
+    <button class="block bg-gray-600/90 hover:bg-gray-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-teal-300"
+            hx-on:mouseenter="htmx.removeClass(htmx.find('#filter-popover'), 'invisible')"
+            hx-on:mouseleave="htmx.addClass(htmx.find('#filter-popover'), 'invisible')"
+            hx-on:click="htmx.removeClass(htmx.find('#filter-menu-dropdown'), 'invisible')"
+            aria-describedby="filter-popover"
+    >
+        <svg class="fill-teal-300/90 hover:fill-teal-300 p-1.5 size-full"
+             xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 512 512">
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path d="M3.9 54.9C10.5 40.9 24.5 32 40 32H472c15.5 0 29.5 8.9 36.1 22.9s4.6 30.5-5.2 42.5L320 320.9V448c0 12.1-6.8 23.2-17.7 28.6s-23.8 4.3-33.5-3l-64-48c-8.1-6-12.8-15.5-12.8-25.6V320.9L9 97.3C-.7 85.4-2.8 68.8 3.9 54.9z"/>
+        </svg>
+    </button>
+
+    <p id="filter-popover" role="tooltip"
+       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-teal-900 transition-opacity duration-300 bg-teal-300 rounded-md px-1 py-0.5"
+    >
+        Filter events
+    </p>
+
+    {% with modal_id='filter-menu-dropdown', modal_title='Filter events' %}
+        {% include "/components/popups/modals/table-operation-modal.html" %}
+    {% endwith %}
+</div>

src/howitz/templates/components/toolbar/table-sort-btn.html

@@ -0,0 +1,25 @@
+<div class="relative flex flex-col items-center">
+    <button class="block bg-gray-600/90 hover:bg-gray-500 rounded-md m-1.5 size-9 focus:ring-2 focus:outline-none focus:ring-teal-300"
+            hx-on:mouseenter="htmx.removeClass(htmx.find('#sort-popover'), 'invisible')"
+            hx-on:mouseleave="htmx.addClass(htmx.find('#sort-popover'), 'invisible')"
+            hx-on:click="htmx.removeClass(htmx.find('#sort-menu-dropdown'), 'invisible')"
+            aria-describedby="sort-popover"
+    >
+        <svg class="fill-teal-300/90 hover:fill-teal-300 p-1.5 size-full"
+             xmlns="http://www.w3.org/2000/svg"
+             viewBox="0 0 576 512">
+            <!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.-->
+            <path d="M151.6 469.6C145.5 476.2 137 480 128 480s-17.5-3.8-23.6-10.4l-88-96c-11.9-13-11.1-33.3 2-45.2s33.3-11.1 45.2 2L96 365.7V64c0-17.7 14.3-32 32-32s32 14.3 32 32V365.7l32.4-35.4c11.9-13 32.2-13.9 45.2-2s13.9 32.2 2 45.2l-88 96zM320 480c-17.7 0-32-14.3-32-32s14.3-32 32-32h32c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32h96c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H480c17.7 0 32 14.3 32 32s-14.3 32-32 32H320zm0-128c-17.7 0-32-14.3-32-32s14.3-32 32-32H544c17.7 0 32 14.3 32 32s-14.3 32-32 32H320z"/>
+        </svg>
+    </button>
+
+    <p id="sort-popover" role="tooltip"
+       class="absolute -top-4 h-fit z-40 invisible flow-root w-fit text-xs font-semibold text-nowrap text-teal-900 transition-opacity duration-300 bg-teal-300 rounded-md px-1 py-0.5"
+    >
+        Sort events
+    </p>
+
+    {% with modal_id='sort-menu-dropdown', modal_title='Sort events' %}
+        {% include "/components/popups/modals/table-operation-modal.html" %}
+    {% endwith %}
+</div>

src/howitz/templates/components/toolbar/table-toolbar.html

@@ -0,0 +1,7 @@
+<div class="w-full">
+    <div class="h-11 flex justify-center items-center gap-2">
+        {% include "/components/toolbar/table-sort-btn.html" %}
+        {% include "/components/toolbar/table-filter-btn.html" %}
+        {% include "/components/toolbar/column-toggle-btn.html" %}
+    </div>
+</div>

src/howitz/templates/views/events.html

@@ -12,6 +12,8 @@
     <h1 class="sr-only">Events table</h1>
     <main class="relative shadow-md sm:rounded-lg">
 
+    {% include "/components/toolbar/table-toolbar.html"%}
+
         <div
                 hx-get="events-table.html"
                 hx-swap="outerHTML"