From c86c1efcb7abbcc1d795476bfc0c8de68aece150 Mon Sep 17 00:00:00 2001 From: Martin Date: Mon, 26 Jun 2023 11:47:20 +0200 Subject: [PATCH] amelioration(design): ETQ usager la cohabitation du design d'un form mi-DSFR, mi-DS n'est pas trop moche amelioration(design): ETQ usager la cohabitation du design d'un form mi-DSFR, mi-DS n'est pas trop moche --- app/assets/stylesheets/forms.scss | 14 +++++--------- .../edit_component/edit_component.html.haml | 2 +- .../multiple_component.html.haml | 11 ++++++----- app/components/dsfr/input_component.rb | 3 --- app/components/dsfr/input_errorable.rb | 4 ++-- .../editable_champ/editable_champ_component.rb | 2 +- .../editable_champ_component.html.haml | 6 +++--- app/views/users/dossiers/update.turbo_stream.haml | 2 +- 8 files changed, 19 insertions(+), 25 deletions(-) diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss index 44a294652..8155e482f 100644 --- a/app/assets/stylesheets/forms.scss +++ b/app/assets/stylesheets/forms.scss @@ -124,7 +124,6 @@ } &.editable-champ-checkbox { - p, label { padding-left: 28px; font-weight: normal; @@ -174,7 +173,7 @@ user-select: none; &:last-of-type { - margin-bottom: $default-fields-spacer; + margin-bottom: 0; } &:hover { @@ -210,6 +209,7 @@ font-weight: normal; } } + .fr-label { // la description d'un champ peut contenir du markup (markdown->html), // on herite donc la fontsize/mrgin/padding du fr-hint-text @@ -219,10 +219,12 @@ padding: inherit; } } + input[type=password], select { display: block; margin-bottom: $default-fields-spacer; + margin-bottom: 0; &.small-margin { margin-bottom: $default-spacer; @@ -347,7 +349,7 @@ margin-left: 5px; margin-right: 4px; - margin-bottom: $default-fields-spacer; + margin-bottom: 0; } [data-reach-combobox-input] { @@ -529,12 +531,6 @@ } } -[data-react-component-value]:not([data-react-component-value^="ComboMultiple"]) { - [data-reach-combobox-input]:not(.no-margin) { - margin-bottom: $default-fields-spacer; - } -} - [data-react-component-value^="ComboMultiple"] { margin-bottom: $default-fields-spacer; diff --git a/app/components/attachment/edit_component/edit_component.html.haml b/app/components/attachment/edit_component/edit_component.html.haml index 2d81e9506..116271c19 100644 --- a/app/components/attachment/edit_component/edit_component.html.haml +++ b/app/components/attachment/edit_component/edit_component.html.haml @@ -1,4 +1,4 @@ -.attachment.fr-upload-group{ { id: attachment ? dom_id(attachment, :edit) : nil, class: class_names("fr-mb-2w": !(as_multiple? && downloadable?)) }.compact, **replace_controller_attributes } +.attachment.fr-upload-group{ { id: attachment ? dom_id(attachment, :edit) : nil, class: class_names("fr-mb-1w": !(as_multiple? && downloadable?)) }.compact, **replace_controller_attributes } - if persisted? %div{ id: dom_id(attachment, :persisted_row) } .flex.flex-gap-2{ class: class_names("attachment-error": attachment.virus_scanner_error?) } diff --git a/app/components/attachment/multiple_component/multiple_component.html.haml b/app/components/attachment/multiple_component/multiple_component.html.haml index ecca7269f..ab507b8ae 100644 --- a/app/components/attachment/multiple_component/multiple_component.html.haml +++ b/app/components/attachment/multiple_component/multiple_component.html.haml @@ -1,10 +1,11 @@ -.fr-mb-4w.attachment-multiple{ class: class_names("fr-downloads-group": view_as == :download, "destroyable": user_can_destroy?), **replace_controller_attributes } +.attachment-multiple{ class: class_names("fr-downloads-group": view_as == :download, "destroyable": user_can_destroy?), **replace_controller_attributes } = template - %ul - - each_attachment do |attachment, index| - %li{ id: dom_id(attachment) } - = render Attachment::EditComponent.new(champ:, attached_file:, attachment:, index:, as_multiple: true, view_as:, user_can_destroy:, user_can_replace:, form_object_name:) + - if @attachments.size >= 1 + %ul.fr-my-1v + - each_attachment do |attachment, index| + %li{ id: dom_id(attachment) } + = render Attachment::EditComponent.new(champ:, attached_file:, attachment:, index:, as_multiple: true, view_as:, user_can_destroy:, user_can_replace:, form_object_name:) %div{ id: empty_component_id, class: class_names("hidden": !can_attach_next?) } = render Attachment::EditComponent.new(champ:, attached_file:, attachment: nil, index: attachments_count, user_can_destroy:, user_can_replace:, form_object_name:) diff --git a/app/components/dsfr/input_component.rb b/app/components/dsfr/input_component.rb index 5adc0185a..dca55d51e 100644 --- a/app/components/dsfr/input_component.rb +++ b/app/components/dsfr/input_component.rb @@ -49,7 +49,6 @@ class Dsfr::InputComponent < ApplicationComponent object.class.human_attribute_name(@attribute) end - # kind of input helpers def password? @input_type == :password_field @@ -64,6 +63,4 @@ class Dsfr::InputComponent < ApplicationComponent end private - - end diff --git a/app/components/dsfr/input_errorable.rb b/app/components/dsfr/input_errorable.rb index 63b201ae6..30f547a9c 100644 --- a/app/components/dsfr/input_errorable.rb +++ b/app/components/dsfr/input_errorable.rb @@ -68,7 +68,7 @@ module Dsfr end def describedby_id - dom_id(@champ, :error_messages) + dom_id(@champ, :error_full_messages) end def errors_on_another_attribute? @@ -80,7 +80,7 @@ module Dsfr end # errors helpers - def error_messages + def error_full_messages errors.full_messages_for(attribute_or_rich_body) end diff --git a/app/components/editable_champ/editable_champ_component.rb b/app/components/editable_champ/editable_champ_component.rb index e5d9a9ff7..a4a553af9 100644 --- a/app/components/editable_champ/editable_champ_component.rb +++ b/app/components/editable_champ/editable_champ_component.rb @@ -28,7 +28,7 @@ class EditableChamp::EditableChampComponent < ApplicationComponent 'editable-champ': true, "editable-champ-#{@champ.type_champ}": true, "hidden": !@champ.visible?, - "fr-input-group": true, + "fr-input-group": true }.merge(input_group_error_class_names) ), id: @champ.input_group_id, diff --git a/app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml b/app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml index 5fba33f87..89b4f3521 100644 --- a/app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml +++ b/app/components/editable_champ/editable_champ_component/editable_champ_component.html.haml @@ -4,12 +4,12 @@ = render component_class.new(form: @form, champ: @champ, seen_at: @seen_at) - if errors_on_attribute? - - if error_messages.size == 1 - %p.fr-error-text{ id: describedby_id }= error_messages.first + - if error_full_messages.size == 1 + %p.fr-error-text{ id: describedby_id }= error_full_messages.first - else .fr-error-text{ id: describedby_id } %ul.list-style-type-none.fr-pl-0 - - error_messages.map do |error_message| + - error_full_messages.each do |error_message| %li= error_message = @form.hidden_field :id, value: @champ.id diff --git a/app/views/users/dossiers/update.turbo_stream.haml b/app/views/users/dossiers/update.turbo_stream.haml index a8daa34cb..e998f507c 100644 --- a/app/views/users/dossiers/update.turbo_stream.haml +++ b/app/views/users/dossiers/update.turbo_stream.haml @@ -9,7 +9,7 @@ = render EditableChamp::EditableChampComponent.new champ:, form: - else = turbo_stream.update champ.labelledby_id do - = render EditableChamp::ChampLabelContentComponent.new champ: + = render EditableChamp::ChampLabelContentComponent.new champ:, form: = turbo_stream.remove_all(".editable-champ .spinner-removable"); = turbo_stream.hide_all(".editable-champ .spinner");