refactoring(notification-dossiers): Improve display of the number of hidden items

Author: inseo

app/assets/stylesheets/notifications.scss

@@ -45,7 +45,7 @@ span.notifications {
 
 .notification-dossier:not(:last-child)::after {
   content: '';
-  margin: 0 1rem;
+  margin: 0.25rem 1rem 0;
   width: 1px;
   height: 0.875rem;
   background-color: var(--text-default-grey);
@@ -54,15 +54,20 @@ span.notifications {
 .notification-dossier-contenu {
   font-size: 0.875rem;
   line-height: 1.25rem;
+  word-break: break-word;
+}
+
+.notification-dossier-contenu.fr-link {
+  word-break: keep-all;
 }
 
 .notification-indicator {
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding-left: 1rem;
   list-style: none;
-  background-image: linear-gradient(to right,
-  transparent 5%,
-  var(--background-alt-grey) 60%);
+  margin: 0.25rem 0 0;
+  padding: 0;
+}
+
+.notification-dossier:not(.hidden):has(+ .notification-indicator)::after,
+.notification-dossier:not(.hidden) + .notification-indicator {
+  display: none;
 }

app/javascript/controllers/truncate_notifications_controller.ts

@@ -25,7 +25,7 @@ export class TruncateNotificationsController extends ApplicationController {
         if (usedWidth < notificationContainerWidth) {
           visibleCount++;
         } else {
-          const hiddenCount = notificationDossiers.length - visibleCount - 1;
+          const hiddenCount = notificationDossiers.length - visibleCount;
           truncateContainer = this.truncateNotification(
             truncateContainer,
             hiddenCount,
@@ -38,13 +38,11 @@ export class TruncateNotificationsController extends ApplicationController {
   }
 
   private calculateNotificationContainerWidth() {
-    const container = document.querySelector<HTMLElement>(
-      '.notification-container-type'
-    );
     const notificationBadge = document.querySelector<HTMLElement>(
       '.notification-badge'
     );
-    return container!.offsetWidth - notificationBadge!.offsetWidth;
+    // 1168 : `.notification-container-type` width in desktop view
+    return 1168 - notificationBadge!.offsetWidth;
   }
 
   private truncateNotification(
@@ -53,13 +51,11 @@ export class TruncateNotificationsController extends ApplicationController {
     indicator: HTMLElement,
     notification: HTMLElement
   ) {
+    notification.classList.add('hidden');
     if (truncateContainer == false) {
       if (hiddenCount > 0) {
-        indicator!.innerHTML = `<span aria-hidden="true">…</span> +${hiddenCount}`;
+        indicator!.innerHTML = `<span class="notification-dossier-contenu fr-mr-1w" aria-hidden="true">…</span><span class="notification-dossier-contenu fr-text--bold">(+ ${hiddenCount})</span>`;
       }
-      notification.style.overflow = 'hidden';
-    } else {
-      notification.classList.add('hidden');
     }
     return true;
   }

app/views/instructeurs/procedures/_notifications_list_body.html.erb

@@ -13,27 +13,31 @@
 
     <% dossiers_by_notification_type.each do |notification_type, dossiers| %>
       <div class="flex align-start fr-mt-1w notification-container-type">
-        <div class="fr-col-3 fr-pr-1w notification-badge">
+        <div class="fr-col-6 fr-col-sm-3 fr-pr-1w notification-badge">
           <%= tag_notification(notification_type, generic: true) %>
         </div>
 
-        <ul class="fr-col-9 flex wrap notification-dossiers">
-          <% dossiers.each_with_index do |dossier, dossier_index| %>
-            <li class="flex align-center notification-dossier">
-              <% if statut != 'supprimes' %>
-                <%= link_to dossier.id, instructeur_dossier_path(procedure_id, dossier.id), class: "notification-dossier-contenu fr-link" %>
-              <% else %>
-                <span class="notification-dossier-contenu">
-                  <%= dossier.id %>
+        <div class="fr-col-6 fr-col-sm-9 flex">
+          <ul class="flex wrap notification-dossiers">
+            <% dossiers.each_with_index do |dossier, dossier_index| %>
+              <li class="flex align-start notification-dossier">
+                <% if statut != 'supprimes' %>
+                  <%= link_to dossier.id, instructeur_dossier_path(procedure_id, dossier.id), class: "notification-dossier-contenu fr-link" %>
+                <% else %>
+                  <span class="notification-dossier-contenu">
+                    <%= dossier.id %>
+                  </span>
+                <% end %>
+
+                <span class="notification-dossier-contenu fr-ml-1w">
+                  <%= dossier.owner_name %>
                 </span>
-              <% end %>
-              <span class="notification-dossier-contenu fr-ml-1w">
-                <%= dossier.owner_name %>
-              </span>
-            </li>
-          <% end %>
-        </ul>
-        <span class="fr-text--sm fr-text--bold notification-indicator"></span>
+              </li>
+            <% end %>
+
+            <li class="fr-text--sm notification-indicator"></li>
+          </ul>
+        </div>
       </div>
     <% end %>
   <% end %>