Fixe design interface instructeur

app/assets/stylesheets/procedure_list.scss

@@ -39,8 +39,42 @@
       }
 
       .notifications {
-        top: 3px;
-        right: 18px;
+        top: 10px;
+        left: 50%;
+        margin-left: 15px;
+      }
+    }
+  }
+}
+
+.procedure-list-item {
+  .fr-btn--tertiary {
+    a {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      position: relative;
+    }
+
+    .notifications {
+      position: absolute;
+      width: 8px;
+      height: 8px;
+      background-color: red;
+      border-radius: 50%;
+      top: 15px;
+      right: 35%;
+    }
+
+    .center.fr-text--bold {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+
+      &::after {
+        content: '';
+        display: inline-block;
+        width: 30px;
       }
     }
   }

app/helpers/tabs_helper.rb

@@ -12,7 +12,7 @@ module TabsHelper
     when 'tous'
       'views.instructeurs.dossiers.tab_steps.total' # i18n-tasks-use t('views.instructeurs.dossiers.tab_steps.total')
     when 'supprimes'
-      'pluralize.dossiers_supprimes'
+      'instructeurs.dossiers.labels.dossiers_supprimes'
     when 'expirant'
       'pluralize.dossiers_close_to_expiration'
     when 'archives'
@@ -22,21 +22,22 @@ module TabsHelper
     end
   end
 
-  def tab_item(label, url, active: false, badge: nil, notification: false)
+  def tab_item(label, url, active: false, badge: nil, notification: false, icon: nil)
     render partial: 'shared/tab_item', locals: {
       label: label,
       url: url,
       active: active,
       badge: badge,
-      notification: notification
+      notification: notification,
+      icon: icon
     }
   end
 
-  def dynamic_tab_item(label, url_or_urls, badge: nil, notification: false)
+  def dynamic_tab_item(label, url_or_urls, badge: nil, notification: false, icon: nil)
     urls = [url_or_urls].flatten
     url = urls.first
     active = urls.any? { |u| current_page?(u) }
 
-    tab_item(label, url, active: active, badge: badge, notification: notification)
+    tab_item(label, url, active: active, badge: badge, notification: notification, icon: icon)
   end
 end

app/views/instructeurs/procedures/_list.html.haml

@@ -42,7 +42,7 @@
           .center.fr-text--bold.fr-text--sm
             = number_with_html_delimiter(dossier_count)
           .center.fr-text--xs
-            = t('pluralize.case', count: dossier_count)
+            = t('instructeurs.dossiers.labels.total')
 
       - if p.procedure_expires_when_termine_enabled
         %li.fr-btn.fr-btn--tertiary.flex.justify-center.fr-enlarge-link.fr-mb-1w
@@ -56,13 +56,13 @@
       %li.fr-btn.fr-btn--tertiary.flex.justify-center.fr-enlarge-link.fr-mb-1w
         = link_to(instructeur_procedure_path(p, statut: 'archives')) do
           .center.fr-text--bold.fr-text--sm
-            %span.fr-icon-folder-2-line
+            %span.fr-icon-folder-2-line.fr-icon--sm
           .center.fr-text--xs
             = t('instructeurs.dossiers.labels.to_archive')
 
       %li.fr-btn.fr-btn--tertiary.flex.justify-center.fr-enlarge-link.fr-mb-1w
         = link_to(instructeur_procedure_path(p, statut: 'supprimes')) do
           .center.fr-text--bold.fr-text--sm
-            %span.fr-icon-delete-line
+            %span.fr-icon-delete-line.fr-icon--sm
           .center.fr-text--xs
             = t('instructeurs.dossiers.labels.dossiers_supprimes')

app/views/instructeurs/procedures/_tabs.html.haml

@@ -22,11 +22,6 @@
       active: statut == 'tous',
       badge: number_with_html_delimiter(tous_count))
 
-    = tab_item(t(tab_i18n_key_from_status('supprimes'), count: supprimes_count),
-      instructeur_procedure_path(procedure, statut: 'supprimes'),
-      active: statut == 'supprimes',
-      badge: number_with_html_delimiter(supprimes_count))
-
     - if procedure.procedure_expires_when_termine_enabled
       = tab_item(t(tab_i18n_key_from_status('expirant'), count: expirant_count),
         instructeur_procedure_path(procedure, statut: 'expirant'),
@@ -36,4 +31,9 @@
     = tab_item(t(tab_i18n_key_from_status('archives'), count: archives_count),
       instructeur_procedure_path(procedure, statut: 'archives'),
       active: statut == 'archives',
-      badge: number_with_html_delimiter(archives_count))
+      icon: 'fr-icon-folder-2-line')
+
+    = tab_item(t(tab_i18n_key_from_status('supprimes'), count: supprimes_count),
+      instructeur_procedure_path(procedure, statut: 'supprimes'),
+      active: statut == 'supprimes',
+      icon: 'fr-icon-delete-line')

app/views/shared/_tab_item.html.haml

@@ -4,4 +4,6 @@
   = link_to(url, 'aria-selected': active ? true : nil, class: 'fr-tabs__tab', role: 'tab' ) do
     - if badge.present?
       %span.fr-badge.fr-badge--blue-ecume.fr-mr-1w= badge
+    - if icon.present?
+      %span.fr-icon--sm.fr-mr-1w{ class: icon, "aria-hidden": true }
     = label

config/locales/en.yml

@@ -876,6 +876,7 @@ en:
           to_follow: to follow
           to_archive: to archive
           dossiers_supprimes: trash
+          total: total
   france_connect:
     particulier:
       choose_email:

config/locales/fr.yml

@@ -878,7 +878,7 @@ fr:
         to_follow: à suivre
         to_archive: à archiver
         dossiers_supprimes: corbeille
-        total: dossiers
+        total: au total
   administrateurs:
     activate:
       new: