From 72ae654ce7872d7ad69ab564245bfcf4bbcdced2 Mon Sep 17 00:00:00 2001
From: Eric Leroy-Terquem <eric.leroyterquem@beta.gouv.fr>
Date: Tue, 1 Oct 2024 16:15:06 +0200
Subject: [PATCH] style(pieces jointes): update UI

---
 app/assets/stylesheets/gallery.scss              | 14 +++++++++-----
 .../attachment/gallery_item_component.rb         |  2 +-
 .../gallery_item_component.html.haml             | 16 +++++++++-------
 .../attachment/gallery_item_component_spec.rb    |  6 +++---
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/app/assets/stylesheets/gallery.scss b/app/assets/stylesheets/gallery.scss
index 524535356..3c8331912 100644
--- a/app/assets/stylesheets/gallery.scss
+++ b/app/assets/stylesheets/gallery.scss
@@ -13,10 +13,6 @@
     object-fit: cover;
   }
 
-  .champ-updated {
-    width: 100%;
-  }
-
   .thumbnail {
     position: relative;
     display: flex;
@@ -56,7 +52,15 @@
   flex-wrap: wrap;
 
   .gallery-item {
-    margin: 0 2rem 1.5rem 0;
+    margin: 0 2rem 3rem 0;
+
+    .fr-download {
+      margin-bottom: 0;
+    }
+
+    .fr-text--sm {
+      margin-bottom: 0;
+    }
   }
 }
 
diff --git a/app/components/attachment/gallery_item_component.rb b/app/components/attachment/gallery_item_component.rb
index bc2284efc..748387cf4 100644
--- a/app/components/attachment/gallery_item_component.rb
+++ b/app/components/attachment/gallery_item_component.rb
@@ -62,7 +62,7 @@ class Attachment::GalleryItemComponent < ApplicationComponent
   def badge_updated_class
     class_names(
       "fr-badge fr-badge--sm" => true,
-      "fr-badge--new" => seen_at.present? && updated_at&.>(seen_at)
+      "highlighted" => seen_at.present? && updated_at&.>(seen_at)
     )
   end
 
diff --git a/app/components/attachment/gallery_item_component/gallery_item_component.html.haml b/app/components/attachment/gallery_item_component/gallery_item_component.html.haml
index 10666cb00..2428d5822 100644
--- a/app/components/attachment/gallery_item_component/gallery_item_component.html.haml
+++ b/app/components/attachment/gallery_item_component/gallery_item_component.html.haml
@@ -1,10 +1,6 @@
 .gallery-item
   - if !gallery_demande?
-    .fr-mb-1v
-      .fr-tag
-        = origin
-    .fr-mb-2v.champ-updated{ class: badge_updated_class }
-      = t(updated? ? '.updated_at' : '.created_at', datetime: helpers.try_format_datetime(updated_at, format: :veryshort))
+    %p.fr-tag.fr-tag--sm.fr-mb-3v= origin
   - if displayable_pdf?(blob) || displayable_image?(blob)
     = gallery_link(blob) do
       .thumbnail
@@ -12,13 +8,19 @@
         .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
           Visualiser
     - if !gallery_demande?
-      .champ-libelle
+      .fr-text--sm.fr-mt-2v.fr-mb-1v
         = libelle.truncate(25)
     = render Attachment::ShowComponent.new(attachment:, truncate: true, new_tab: gallery_demande?)
+    - if !gallery_demande?
+      .fr-mt-2v.fr-mb-2v{ class: badge_updated_class }
+        = t(updated? ? '.updated_at' : '.created_at', datetime: helpers.try_format_datetime(updated_at, format: :veryshort))
   - else
     .thumbnail
       = image_tag('apercu-indisponible.png')
     - if !gallery_demande?
-      .champ-libelle
+      .fr-text--sm.fr-mt-2v.fr-mb-1v
         = libelle.truncate(25)
     = render Attachment::ShowComponent.new(attachment:, truncate: true, new_tab: gallery_demande?)
+    - if !gallery_demande?
+      .fr-mt-2v.fr-mb-2v{ class: badge_updated_class }
+        = t(updated? ? '.updated_at' : '.created_at', datetime: helpers.try_format_datetime(updated_at, format: :veryshort))
diff --git a/spec/components/attachment/gallery_item_component_spec.rb b/spec/components/attachment/gallery_item_component_spec.rb
index 0f200a76f..0806f2910 100644
--- a/spec/components/attachment/gallery_item_component_spec.rb
+++ b/spec/components/attachment/gallery_item_component_spec.rb
@@ -36,7 +36,7 @@ RSpec.describe Attachment::GalleryItemComponent, type: :component do
 
     it "displays when gallery item has been added" do
       expect(subject).to have_text('Ajoutée le')
-      expect(subject).not_to have_css('.fr-badge--new')
+      expect(subject).not_to have_css('.highlighted')
       expect(subject).to have_text(component.helpers.try_format_datetime(attachment.record.created_at, format: :veryshort))
     end
 
@@ -78,7 +78,7 @@ RSpec.describe Attachment::GalleryItemComponent, type: :component do
         end
 
         it 'displays datetime in the right style' do
-          expect(subject).to have_css('.fr-badge--new')
+          expect(subject).to have_css('.highlighted')
         end
       end
 
@@ -90,7 +90,7 @@ RSpec.describe Attachment::GalleryItemComponent, type: :component do
         end
 
         it 'displays datetime in the right style' do
-          expect(subject).not_to have_css('.fr-badge--new')
+          expect(subject).not_to have_css('.highlighted')
         end
       end
     end