Merge pull request #10389 from demarches-simplifiees/update-gallery-demande-ui

ETQ instructeur et usager : mise à jour UI de la galerie

app/assets/stylesheets/gallery.scss

@@ -33,16 +33,18 @@
       color: var(--text-active-blue-france);
       border: 1px solid var(--border-active-blue-france);
       padding: 0.25rem 0.75rem;
+      display: none;
+    }
+  }
 
-      &:hover {
+  a.gallery-link:hover .fr-btn,
+  a.gallery-link:active .fr-btn {
+    display: flex;
+  }
+
+  a.gallery-link:active .fr-btn {
     background-color: var(--hover-tint);
   }
-
-      &:active {
-        background-color: var(--active-tint);
-      }
-    }
-  }
 }
 
 .gallery-pieces-jointes {
@@ -52,17 +54,16 @@
   .gallery-item {
     margin: 0 2rem 1.5rem 0;
   }
-
-  img {
-    height: 200px;
-    width: 200px;
-  }
 }
 
 .gallery-demande {
-  img {
-    height: 150px;
-    width: 150px;
+  .gallery-items-list {
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .gallery-item {
+    margin: 0.5rem 2rem 1rem 0;
   }
 
   .fr-download {
@@ -71,7 +72,7 @@
 
   .thumbnail {
     width: fit-content;
-    margin-bottom: 1rem;
+    margin-bottom: 0.5rem;
   }
 }
 

app/javascript/controllers/lightbox_controller.ts

@@ -4,6 +4,7 @@ import { LightGallery } from 'lightgallery/lightgallery';
 import lgThumbnail from 'lightgallery/plugins/thumbnail';
 import lgZoom from 'lightgallery/plugins/zoom';
 import lgRotate from 'lightgallery/plugins/rotate';
+import lgHash from 'lightgallery/plugins/hash';
 import 'lightgallery/css/lightgallery-bundle.css';
 
 export default class extends Controller {
@@ -11,7 +12,7 @@ export default class extends Controller {
 
   connect(): void {
     const options = {
-      plugins: [lgZoom, lgThumbnail, lgRotate],
+      plugins: [lgZoom, lgThumbnail, lgRotate, lgHash],
       flipVertical: false,
       flipHorizontal: false,
       animateThumb: false,
@@ -21,6 +22,14 @@ export default class extends Controller {
       selector: '.gallery-link'
     };
 
+    const gallery = document.querySelector('.gallery');
+
+    if (gallery != null) {
+      gallery.addEventListener('lgBeforeOpen', () => {
+        window.history.pushState({}, 'Gallery opened');
+      });
+    }
+
     this.lightGallery = lightGallery(this.element as HTMLElement, options);
 
     const downloadIcon = document.querySelector('.lg-download');

app/models/champs/piece_justificative_champ.rb

@@ -2,7 +2,6 @@ class Champs::PieceJustificativeChamp < Champ
   FILE_MAX_SIZE = 200.megabytes
 
   has_many_attached :piece_justificative_file do |attachable|
-    attachable.variant :small, resize: '300x300'
     attachable.variant :medium, resize: '400x400'
   end
 

app/models/champs/titre_identite_champ.rb

@@ -3,7 +3,6 @@ class Champs::TitreIdentiteChamp < Champ
   ACCEPTED_FORMATS = ['image/png', 'image/jpeg']
 
   has_many_attached :piece_justificative_file do |attachable|
-    attachable.variant :small, resize: '300x300'
     attachable.variant :medium, resize: '400x400'
   end
 

app/views/instructeurs/dossiers/_header_bottom.html.haml

@@ -7,7 +7,7 @@
         instructeur_dossier_path(dossier.procedure, dossier),
         notification: notifications_summary[:demande])
 
-      - if dossier.revision.types_de_champ.any?(&:piece_justificative?)
+      - if dossier.champs.map(&:piece_justificative_file).flatten.any?
         = dynamic_tab_item(t('views.instructeurs.dossiers.tab_steps.attachments'),
           pieces_jointes_instructeur_dossier_path(dossier.procedure, dossier))
 

app/views/instructeurs/dossiers/pieces_jointes.html.haml

@@ -3,10 +3,6 @@
 = render partial: "header", locals: { dossier: @dossier }
 
 .fr-container
-  - if @champs_with_pieces_jointes.map(&:piece_justificative_file).flatten.none?
-    .empty-text
-      Ce dossier ne contient pas de pièces jointes
-  - else
   .gallery.gallery-pieces-jointes{ "data-controller": "lightbox" }
     - @champs_with_pieces_jointes.each do |champ|
       - champ.piece_justificative_file.each do |attachment|

app/views/shared/champs/piece_justificative/_show.html.haml

@@ -4,9 +4,8 @@
       - champ.piece_justificative_file.attachments.each do |attachment|
         %li= render Attachment::ShowComponent.new(attachment:, new_tab: true)
   - else
+    .gallery-items-list
       - champ.piece_justificative_file.attachments.each do |attachment|
-      %ul
-        %li= render Attachment::ShowComponent.new(attachment:, new_tab: true, truncate: true)
         .gallery-item
           - blob = attachment.blob
           - if blob.content_type.in?(AUTHORIZED_PDF_TYPES)
@@ -19,6 +18,10 @@
           - elsif blob.content_type.in?(AUTHORIZED_IMAGE_TYPES)
             = link_to image_url(blob.url), title: "#{champ.libelle} -- #{blob.filename}", data: { src: blob.url }, class: 'gallery-link' do
               .thumbnail
-              = image_tag(attachment.variant(:small), loading: :lazy)
+                = image_tag(attachment.variant(:medium), loading: :lazy)
                 .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
                   = 'Visualiser'
+          - else
+            .thumbnail
+              = image_tag('apercu-indisponible.png')
+          = render Attachment::ShowComponent.new(attachment:, new_tab: true, truncate: true)