diff --git a/app/assets/stylesheets/autosave.scss b/app/assets/stylesheets/autosave.scss index 11529620a..1d975b9a9 100644 --- a/app/assets/stylesheets/autosave.scss +++ b/app/assets/stylesheets/autosave.scss @@ -1,18 +1,5 @@ -@import 'colors'; -@import 'constants'; - .autosave { position: relative; - font-size: 0.9em; -} - -.autosave-explanation { - margin-left: 4px; -} - -.autosave-explanation-text, -.autosave-label { - margin-right: 6px; } .autosave-status { @@ -20,21 +7,15 @@ position: absolute; top: 0; - &.succeeded .autosave-label { - color: $green; + &.succeeded { + color: var(--success-425-625); } - &.failed .autosave-label { - color: $orange; + &.failed { + color: var(--warning-425-625); } } -.autosave-icon { - display: inline-block; - vertical-align: -1px; - margin-right: 4px; -} - .autosave-retry { &:disabled { .autosave-retry-label { @@ -91,17 +72,6 @@ $autosave-status-fade-out-duration: 0.7s; transition-property: opacity; transition-duration: $autosave-status-fade-in-duration; } - - // Make the icon pulse (if any) - .autosave-icon { - opacity: 1; - // Make the icon pulse after being made visible - animation-name: pulse; - animation-duration: 0.25s; - animation-delay: 0.15s; - animation-timing-function: linear; - animation-fill-mode: backwards; - } } // Show only the relevant status message (succeeded of failed) diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.en.yml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.en.yml index d03a8dd98..f176a6295 100644 --- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.en.yml +++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.en.yml @@ -2,15 +2,15 @@ en: brouillon: explanation: Your draft is automatically saved. - confirmation: Draft saved - error: Impossible to save the draft + confirmation_html: Draft successfully saved. + error_html: 'Warning: Impossible to save the draft.' en_construction: explanation: Your modifications are automatically saved. submit_them: Submit them when you’re done. - confirmation: Modifications saved - error: Impossible to save the modifications. + confirmation_html: Modifications successfully saved. + error_html: 'Warning: Impossible to save the modifications.' annotations: explanation: Your annotations are automatically saved. - confirmation: Annotations saved - error: Impossible to save the annotations + confirmation_html: Annotations successfully saved. + error_html: 'Warning: Impossible to save the annotations.' more_information: More informations diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.fr.yml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.fr.yml index 6d962ca27..6dd6b9df4 100644 --- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.fr.yml +++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.fr.yml @@ -2,15 +2,15 @@ fr: brouillon: explanation: Votre brouillon est automatiquement enregistré. - confirmation: Brouillon enregistré - error: Impossible d’enregistrer le brouillon + confirmation_html: 'Brouillon enregistré avec succès' + error_html: 'Attention : Impossible d’enregistrer le brouillon.' en_construction: explanation: Vos modifications sont automatiquement enregistrées. submit_them: Déposez-les quand vous aurez terminé. - confirmation: Modifications enregistrées. - error: Impossible d’enregistrer les modifications + confirmation_html: 'Modifications enregistrées avec succès' + error_html: 'Attention : Impossible d’enregistrer les modifications.' annotations: explanation: Vos annotations sont automatiquement enregistrées. - confirmation: Annotations enregistrées - error: Impossible d’enregistrer les annotations + confirmation_html: 'Annotations enregistrées avec succès' + error_html: 'Attention : Impossible d’enregistrer les annotations.' more_information: En savoir plus diff --git a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml index 7cf693d86..4002cba52 100644 --- a/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml +++ b/app/components/dossiers/autosave_footer_component/autosave_footer_component.html.haml @@ -1,4 +1,4 @@ -.autosave.autosave-state-idle{ data: { controller: 'autosave-status' } } +.autosave.autosave-state-failed{ data: { controller: 'autosave-status' } } %p.autosave-explanation.fr-text--sm.fr-mb-0 %span.autosave-explanation-text - if annotation? @@ -10,29 +10,27 @@ - else = t('.brouillon.explanation') - if !annotation? - = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes + = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm fr-ml-1w', **external_link_attributes - %p.autosave-status.succeeded.fr-mb-0 - = dsfr_icon('fr-icon-checkbox-circle-fill fr-text-default--success autosave-icon') - %span.autosave-label - - if annotation? - = t('.annotations.confirmation') - - elsif dossier.editing_fork? - = t('.en_construction.confirmation') - - else - = t('.brouillon.confirmation') + %p.autosave-status.succeeded.fr-text--sm.fr-mb-0 + %span.fr-icon-success-fill.fr-mr-1v{ 'aria-hidden': 'true' } + - if annotation? + = t('.annotations.confirmation_html') + - elsif dossier.editing_fork? + = t('.en_construction.confirmation_html') + - else + = t('.brouillon.confirmation_html') - if !annotation? - = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm', **external_link_attributes + = link_to t('.more_information'), t("links.common.faq.autosave_url"), class: 'fr-link fr-link--sm fr-ml-1w', **external_link_attributes - %p.autosave-status.failed.fr-mb-0 - %span.autosave-icon ⚠️ - %span.autosave-label - - if annotation? - = t('.annotations.error') - - elsif dossier.editing_fork? - = t('.en_construction.error') - - else - = t('.brouillon.error') - %button.fr-btn.fr-btn--tertiary.fr-btn--sm.autosave-retry{ type: :button, data: { action: 'autosave-status#onClickRetryButton', autosave_status_target: 'retryButton' } } + %p.autosave-status.failed.fr-text--sm.fr-mb-0 + %span.fr-icon-warning-fill.fr-mr-1v{ 'aria-hidden': 'true' } + - if annotation? + = t('.annotations.error_html') + - elsif dossier.editing_fork? + = t('.en_construction.error_html') + - else + = t('.brouillon.error_html') + %button.fr-btn.fr-btn--tertiary.fr-btn--sm.fr-ml-1w.fr-mt-n1v.autosave-retry{ type: :button, data: { action: 'autosave-status#onClickRetryButton', autosave_status_target: 'retryButton' } } %span.autosave-retry-label Réessayer %span.autosave-retrying-label Enregistrement en cours… diff --git a/app/javascript/components/ComboBox.tsx b/app/javascript/components/ComboBox.tsx index d43843255..a84ad6794 100644 --- a/app/javascript/components/ComboBox.tsx +++ b/app/javascript/components/ComboBox.tsx @@ -59,6 +59,8 @@ export function ComboBox({