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 {
-        background-color: var(--hover-tint);
-      }
-
-      &:active {
-        background-color: var(--active-tint);
-      }
     }
   }
+
+  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);
+  }
 }
 
 .gallery-pieces-jointes {
@@ -52,17 +54,16 @@
   .gallery-item {
     margin: 0 2rem 1.5rem 0;
   }
-
-  img {
-    height: 200px;
-    width: 200px;
-  }
 }
 
 .gallery-demande {
-  img {
+  .gallery-items-list {
-    height: 150px;
+    display: flex;
-    width: 150px;
+    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,38 +3,34 @@
 = render partial: "header", locals: { dossier: @dossier }
 
 .fr-container
-  - if @champs_with_pieces_jointes.map(&:piece_justificative_file).flatten.none?
+  .gallery.gallery-pieces-jointes{ "data-controller": "lightbox" }
-    .empty-text
+    - @champs_with_pieces_jointes.each do |champ|
-      Ce dossier ne contient pas de pièces jointes
+      - champ.piece_justificative_file.each do |attachment|
-  - else
+        .gallery-item
-    .gallery.gallery-pieces-jointes{ "data-controller": "lightbox" }
+          - blob = attachment.blob
-      - @champs_with_pieces_jointes.each do |champ|
+          - if blob.content_type.in?(AUTHORIZED_PDF_TYPES)
-        - champ.piece_justificative_file.each do |attachment|
+            = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{champ.libelle} -- #{blob.filename}" do
-          .gallery-item
-            - blob = attachment.blob
-            - if blob.content_type.in?(AUTHORIZED_PDF_TYPES)
-              = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{champ.libelle} -- #{blob.filename}" do
-                .thumbnail
-                  = image_tag("pdf-placeholder.png")
-                  .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
-                    Visualiser
-              .champ-libelle
-                = champ.libelle.truncate(25)
-              = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
-
-            - 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(:medium), loading: :lazy)
-                  .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
-                    Visualiser
-              .champ-libelle
-                = champ.libelle.truncate(25)
-              = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
-
-            - else
               .thumbnail
-                = image_tag('apercu-indisponible.png')
+                = image_tag("pdf-placeholder.png")
-              .champ-libelle
+                .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
-                = champ.libelle.truncate(25)
+                  Visualiser
-              = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
+            .champ-libelle
+              = champ.libelle.truncate(25)
+            = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
+
+          - 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(:medium), loading: :lazy)
+                .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
+                  Visualiser
+            .champ-libelle
+              = champ.libelle.truncate(25)
+            = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)
+
+          - else
+            .thumbnail
+              = image_tag('apercu-indisponible.png')
+            .champ-libelle
+              = champ.libelle.truncate(25)
+            = render Attachment::ShowComponent.new(attachment: attachment, truncate: true)

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

@@ -4,21 +4,24 @@
       - champ.piece_justificative_file.attachments.each do |attachment|
         %li= render Attachment::ShowComponent.new(attachment:, new_tab: true)
   - else
-    - champ.piece_justificative_file.attachments.each do |attachment|
+    .gallery-items-list
-      %ul
+      - champ.piece_justificative_file.attachments.each do |attachment|
-        %li= render Attachment::ShowComponent.new(attachment:, new_tab: true, truncate: true)
+        .gallery-item
-      .gallery-item
+          - blob = attachment.blob
-        - blob = attachment.blob
+          - if blob.content_type.in?(AUTHORIZED_PDF_TYPES)
-        - if blob.content_type.in?(AUTHORIZED_PDF_TYPES)
+            = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{champ.libelle} -- #{blob.filename}" do
-          = link_to blob.url, id: blob.id, data: { iframe: true, src: blob.url }, class: 'gallery-link', type: blob.content_type, title: "#{champ.libelle} -- #{blob.filename}" do
+              .thumbnail
-            .thumbnail
+                = image_tag("pdf-placeholder.png")
-              = image_tag("pdf-placeholder.png")
+                .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
-              .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
+                  = 'Visualiser'
-                = 'Visualiser'
 
-        - elsif blob.content_type.in?(AUTHORIZED_IMAGE_TYPES)
+          - 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
+            = link_to image_url(blob.url), title: "#{champ.libelle} -- #{blob.filename}", data: { src: blob.url }, class: 'gallery-link' do
+              .thumbnail
+                = 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(attachment.variant(:small), loading: :lazy)
+              = image_tag('apercu-indisponible.png')
-              .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button }
+          = render Attachment::ShowComponent.new(attachment:, new_tab: true, truncate: true)
-                = 'Visualiser'