DGNum/demarches-normaliennes
15
1
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity

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

Browse source 
ETQ instructeur et usager : mise à jour UI de la galerie
This commit is contained in:
Eric Leroy-Terquem 2024-05-06 14:00:03 +00:00 committed by GitHub
commit cb3581dd79
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 78 additions and 71 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
app/assets/images/apercu-indisponible.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 5.7 KiB

After

Width:  |  Height:  |  Size: 5.3 KiB

35
app/assets/stylesheets/gallery.scss
View file

@ -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;
}
}

11
app/javascript/controllers/lightbox_controller.ts
View file

@ -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');

1
app/models/champs/piece_justificative_champ.rb
View file

@ -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

1
app/models/champs/titre_identite_champ.rb
View file

@ -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

2
app/views/instructeurs/dossiers/_header_bottom.html.haml
View file

@ -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))

64
app/views/instructeurs/dossiers/pieces_jointes.html.haml
View file

@ -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)

35
app/views/shared/champs/piece_justificative/_show.html.haml
View file

@ -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)