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:
parent
eea5758753
commit
af5af67750
5 changed files with 22 additions and 14 deletions
|
@ -397,3 +397,7 @@ ul.dropdown-items {
|
||||||
content: none !important;
|
content: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.back-btn {
|
||||||
|
line-height: 1.75rem;
|
||||||
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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?
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -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})"
|
||||||
|
|
Loading…
Reference in a new issue