diff --git a/app/assets/images/apercu-indisponible.png b/app/assets/images/apercu-indisponible.png index 83ed22706..6bebd9f59 100644 Binary files a/app/assets/images/apercu-indisponible.png and b/app/assets/images/apercu-indisponible.png differ diff --git a/app/assets/stylesheets/gallery.scss b/app/assets/stylesheets/gallery.scss index 55580c607..eb2bec9ee 100644 --- a/app/assets/stylesheets/gallery.scss +++ b/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; - - &:hover { - background-color: var(--hover-tint); - } - - &:active { - background-color: var(--active-tint); - } + display: none; } } + + 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 { - 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; } } diff --git a/app/javascript/controllers/lightbox_controller.ts b/app/javascript/controllers/lightbox_controller.ts index 8d4660d70..49e53ecd0 100644 --- a/app/javascript/controllers/lightbox_controller.ts +++ b/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'); diff --git a/app/models/champs/piece_justificative_champ.rb b/app/models/champs/piece_justificative_champ.rb index 8d9435d17..b6dfb0bef 100644 --- a/app/models/champs/piece_justificative_champ.rb +++ b/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 diff --git a/app/models/champs/titre_identite_champ.rb b/app/models/champs/titre_identite_champ.rb index 05b67e802..667feca7e 100644 --- a/app/models/champs/titre_identite_champ.rb +++ b/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 diff --git a/app/views/instructeurs/dossiers/_header_bottom.html.haml b/app/views/instructeurs/dossiers/_header_bottom.html.haml index ce922e524..0358c4aa0 100644 --- a/app/views/instructeurs/dossiers/_header_bottom.html.haml +++ b/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)) diff --git a/app/views/instructeurs/dossiers/pieces_jointes.html.haml b/app/views/instructeurs/dossiers/pieces_jointes.html.haml index 386a31852..a0b1816a1 100644 --- a/app/views/instructeurs/dossiers/pieces_jointes.html.haml +++ b/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? - .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| - .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 + .gallery.gallery-pieces-jointes{ "data-controller": "lightbox" } + - @champs_with_pieces_jointes.each do |champ| + - champ.piece_justificative_file.each do |attachment| + .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('apercu-indisponible.png') - .champ-libelle - = champ.libelle.truncate(25) - = render Attachment::ShowComponent.new(attachment: attachment, truncate: true) + = 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') + .champ-libelle + = champ.libelle.truncate(25) + = render Attachment::ShowComponent.new(attachment: attachment, truncate: true) diff --git a/app/views/shared/champs/piece_justificative/_show.html.haml b/app/views/shared/champs/piece_justificative/_show.html.haml index 525546d8f..50218e54b 100644 --- a/app/views/shared/champs/piece_justificative/_show.html.haml +++ b/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| - %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) - = 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' + .gallery-items-list + - champ.piece_justificative_file.attachments.each do |attachment| + .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' - - 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 + - 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' + - else .thumbnail - = image_tag(attachment.variant(:small), loading: :lazy) - .fr-btn.fr-btn--tertiary.fr-btn--icon-left.fr-icon-eye{ role: :button } - = 'Visualiser' + = image_tag('apercu-indisponible.png') + = render Attachment::ShowComponent.new(attachment:, new_tab: true, truncate: true)