ui(navigation_icons): use span icons which are bolder [asked by design].

ensure next/prev links are always on oneline, make back button bigger
[same as design], align back/next/prev to top when there is more than
oneline for h1 [either procedure name, either dossier name]
This commit is contained in:
mfo 2024-12-02 10:32:56 +01:00
parent eea5758753
commit af5af67750
No known key found for this signature in database
GPG key ID: 7CE3E1F5B794A8EC
5 changed files with 22 additions and 14 deletions

View file

@ -397,3 +397,7 @@ ul.dropdown-items {
content: none !important; content: none !important;
} }
} }
.back-btn {
line-height: 1.75rem;
}

View file

@ -6,6 +6,8 @@ class Instructeurs::BackButtonComponent < ApplicationComponent
end end
def call def call
link_to "", @to, class: 'back-btn fr-btn fr-btn--secondary fr-btn--sm fr-mr-2w fr-icon-arrow-left-line', title: t('.back') link_to @to, class: 'back-btn fr-btn fr-btn--secondary fr-btn--sm fr-mr-2w fr-px-1v', title: t('.back') do
dsfr_icon("fr-icon-arrow-left-line")
end
end end
end end

View file

@ -16,25 +16,27 @@ class Instructeurs::DossiersNavigationComponent < ApplicationComponent
end end
def link_next def link_next
options = { class: "fr-link fr-icon-arrow-right-line fr-link--icon-right fr-ml-3w" }
if has_next? if has_next?
tag.a(t('.next'), **options.merge(href: next_instructeur_dossier_path(dossier:, statut:))) html_tag = :a
options = { class: "fr-link no-wrap fr-ml-3w", href: next_instructeur_dossier_path(dossier:, statut:) }
else else
options[:class] = "#{options[:class]} fr-text-mention--grey" html_tag = :span
tag.span(t('.next'), **options) options = { class: "fr-link no-wrap fr-ml-3w fr-text-mention--grey" }
end end
tag.send(html_tag, t('.next').html_safe + tag.span(class: 'fr-icon-arrow-right-line fr-ml-1w'), **options)
end end
def link_previous def link_previous
options = { class: "fr-link fr-icon-arrow-left-line fr-link--icon-left" }
if has_previous? if has_previous?
tag.a(t('.previous'), **options.merge(href: previous_instructeur_dossier_path(dossier:, statut:))) html_tag = :a
options = { class: "fr-link no-wrap", href: previous_instructeur_dossier_path(dossier:, statut:) }
else else
options[:class] = "#{options[:class]} fr-text-mention--grey" html_tag = :span
tag.span(t('.previous'), **options) options = { class: "fr-link no-wrap fr-text-mention--grey" }
end end
tag.send(html_tag, tag.span(class: 'fr-icon-arrow-left-line fr-mr-1w') + t('.previous'), **options)
end end
def has_next? = @has_next ||= @cache.next_dossier_id(from_id: dossier.id).present? def has_next? = @has_next ||= @cache.next_dossier_id(from_id: dossier.id).present?

View file

@ -1,10 +1,10 @@
.flex.fr-mb-1w.align-center .flex.fr-mb-1w.align-start
= render Instructeurs::BackButtonComponent.new(to: instructeur_procedure_path(dossier.procedure, **back_url_options)) = render Instructeurs::BackButtonComponent.new(to: instructeur_procedure_path(dossier.procedure, **back_url_options))
%h1.fr-h3.fr-mb-0 %h1.fr-h3.fr-mb-0
= t('show_dossier', scope: [:layouts, :breadcrumb], dossier_id: dossier.id, owner_name: dossier.owner_name) = t('show_dossier', scope: [:layouts, :breadcrumb], dossier_id: dossier.id, owner_name: dossier.owner_name)
.fr.ml-auto.align-center.flex .fr.ml-auto.align-center.flex.fr-mt-1v
= link_previous = link_previous
= link_next = link_next

View file

@ -1,5 +1,5 @@
.procedure-header .procedure-header
.clipboard-container.flex .align-start.flex
= render Instructeurs::BackButtonComponent.new(to: instructeur_procedures_path) = render Instructeurs::BackButtonComponent.new(to: instructeur_procedures_path)
%h1.fr-h3.fr-mb-0 %h1.fr-h3.fr-mb-0
= "#{procedure_libelle procedure} (n°#{procedure.id})" = "#{procedure_libelle procedure} (n°#{procedure.id})"