357322 Rework Indexes, Tables and filters design

app/assets/stylesheets/application.scss

@@ -754,7 +754,7 @@ body {
     }
   }
 
-  table, .card-islet {
+  .card-islet {
     a:not(.btn):not(.dropdown-item) {
       text-decoration: none;
 
@@ -825,7 +825,7 @@ body {
   }
 
   .ts-dropdown {
-    z-index: 9999;
+    z-index: 8888;
   }
 
   /* Tom-Select fix for bootstrap floating label */

app/assets/stylesheets/components/table_component.scss

@@ -0,0 +1,62 @@
+.table-component {
+  table {
+    --bs-table-hover-bg: rgb(var(--bs-tertiary-bg-rgb));
+    --bs-table-hover-color: var(--bs-link-color);
+
+    th {
+      a {
+        font-size: .9rem;
+        color: var(--bs-tertiary-color);
+
+        &:hover {
+          color: rgb(var(--bs-link-color-rgb));
+        }
+
+        i.bi-caret-down.active::before {
+          content: "\f229";
+        }
+
+        i.bi-caret-up.active::before {
+          content: "\f235";
+        }
+      }
+    }
+
+    tr {
+      td {
+        padding: 1rem .5rem;
+
+        a:not(.btn):not(.dropdown-item) {
+          color: inherit;
+          text-decoration: underline dashed;
+          text-decoration-color: rgba(var(--bs-body-color-rgb), 0.5);
+          text-underline-offset: 0.4em;
+
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+
+        /* &:nth-child(even) {
+          td {
+            background-color: var(--bs-table-color-state);
+          }
+        } */
+
+        &:hover {
+          a:not(.btn):not(.dropdown-item) {
+            &:hover {
+              text-decoration-color: rgba(var(--bs-link-color-rgb), 0.5);
+            }
+          }
+        }
+      }
+
+      &:last-child {
+        td {
+          border: none !important;
+        }
+      }
+    }
+  }
+}

app/components/list/data_table_component.rb

@@ -42,10 +42,10 @@ def call
 
     def render_head_cell(col)
       render(List::TableComponent::TableHeadCell.new) do
+        concat col.title
+
         if (sort_by = col.sort_by)
-          link_to_sort col.title, sort_by
-        else
-          col.title
+          links_to_sort sort_by
         end
       end
     end
@@ -62,28 +62,29 @@ def render_col(col, row)
       col.call(row)
     end
 
-    def link_to_sort(label, attribute)
+    def links_to_sort(attribute)
       current_attribute = params[:sort_by]&.to_sym
-      current_direction = current_attribute == attribute ? params[:sort].to_sym : nil
+      is_current_attribute = current_attribute == attribute
+      current_direction = is_current_attribute ? params[:sort].to_sym : nil
+
+      concat(link_to_sort(attribute, is_current_attribute, :asc, current_direction))
+      concat(link_to_sort(attribute, is_current_attribute, :desc, current_direction))
+    end
 
-      parameters = case current_direction
-                   when nil then { sort_by: attribute, sort: :asc }
-                   when :asc then { sort_by: attribute, sort: :desc }
-                   else { sort_by: nil, sort: nil }
-                   end
+    def link_to_sort(attribute, is_current_attribute, direction, current_direction)
+      caret = direction == :asc ? "caret-up" : "caret-down"
+      is_current_direction = current_direction == direction
 
+      parameters = is_current_direction ? { sort_by: nil, sort: nil } : { sort_by: attribute, sort: direction }
       url = url_for(controller.request.query_parameters.merge(parameters))
 
       link_to(url) do
-        concat label
-        concat " #{sort_caret(current_direction)}" if current_attribute == attribute
+        concat tag.i class: class_names("bi bi-#{caret}",
+                                        "ms-2": direction == :asc,
+                                        active: is_current_direction && is_current_attribute)
       end
     end
 
-    def sort_caret(direction)
-      sanitize(direction == :desc ? "↓" : "↑")
-    end
-
     class DatatableColumn < ApplicationComponent
       attr_reader :title, :sort_by, :html_options
 

app/components/list/table_component.rb

@@ -3,7 +3,7 @@
 module List
   class TableComponent < ApplicationComponent
     erb_template <<~ERB
-      <div class="table-responsive">
+      <div class="table-responsive table-component border border-primary rounded-2 overflow-hidden">
         <%= tag.table(**@html_attributes) do %>
           <% heads.each do |thead| %>
             <%= thead %>
@@ -28,7 +28,7 @@ def initialize(**html_attributes)
       css_classes = html_attributes.delete(:class)
 
       @html_attributes = html_attributes.merge(
-        class: class_names("table table-striped table-bordered table-hover mb-0", css_classes),
+        class: class_names("table mb-0 table-hover p-4", css_classes),
       )
     end
 
@@ -53,7 +53,7 @@ def call
 
     class TableHead < TableTag
       TAG_NAME = :thead.freeze
-      CSS_CLASSES = "".freeze
+      CSS_CLASSES = "text-nowrap text-uppercase".freeze
     end
 
     class TableBody < TableTag
@@ -67,7 +67,7 @@ class TableFoot < TableTag
 
     class TableRow < TableTag
       TAG_NAME = :tr.freeze
-      CSS_CLASSES = "".freeze # FIXME: should be applied only on body
+      CSS_CLASSES = "".freeze
     end
 
     class TableCell < TableTag
@@ -87,6 +87,7 @@ def initialize(text = nil, **html_attributes)
         css_text_align = ALIGN_TYPES[html_attributes.delete(:align)&.to_sym || :left]
 
         @html_attributes = html_attributes.merge(
+          scope: "col",
           class: class_names(
             self.class::CSS_CLASSES,
             css_text_align,
@@ -105,7 +106,7 @@ def content
 
     class TableHeadCell < TableCell
       TAG_NAME = :th.freeze
-      CSS_CLASSES = "".freeze
+      CSS_CLASSES = "bg-primary-subtle".freeze
     end
   end
 end

app/views/rooms/index.html.erb

@@ -18,7 +18,10 @@
 <div class="p-4 border-top d-flex flex-column row-gap-4">
   <%= render FilterComponent.new(@filter) do |c| %>
     <% c.with_form do |f| %>
-      <div class="w-100">
+      <div class="w-100 input-group">
+        <span class="input-group-text">
+          <i class="bi bi-search"></i>
+        </span>
         <fieldset class="form-floating">
           <%= f.text_field :q, class: "form-control", placeholder: t("filters.placeholder.search") %>
           <%= f.label :q %>
@@ -48,7 +51,7 @@
         <% end %>
       <% end %>
 
-      <% table.with_column(Room.human_attribute_name(:position), sort_by: :position) do |room| %>
+      <% table.with_column(Room.human_attribute_name(:position), sort_by: :position, class: "text-end") do |room| %>
         <%= room.position %>
       <% end %>
 

config/locales/activerecord.fr.yml

@@ -55,7 +55,7 @@ fr:
         name: Nom
         position: Position
         content: Contenu
-        display_on_home_page: Afficher sur la page d'accueil
+        display_on_home_page: Afficher sur l'accueil
         site_id: Site
         status: Statut
         surface_area: Superficie