style(attestation): improve editor UI & style

app/assets/stylesheets/attestation_template_2_edit.scss

@@ -4,20 +4,20 @@
   .attestation-schema {
     width: 100%;
     margin-top: 3em;
+    top: 3em;
+    position: sticky;
   }
 
   .tiptap {
     padding: $default-spacer;
     overflow-y: scroll;
-    min-height: 600px;
+    min-height: 400px;
   }
 
   .editor {
     // Visual zones
     .header .flex-1,
-    h1,
+    h1 {
-    h2,
-    h3 {
       border: 1px solid var(--background-contrast-grey-hover);
       padding: $default-spacer / 2;
     }
@@ -49,7 +49,7 @@
     }
 
     h3 {
-      font-size: 0.8rem;
+      font-size: 1.15rem;
       font-weight: normal;
       line-height: 1rem;
     }

app/controllers/administrateurs/attestation_template_v2s_controller.rb

@@ -34,9 +34,9 @@ module Administrateurs
           ['Souligner', 'underline', 'underline']
         ],
         [
-          ['Titre', 'title', 'h-1'],
+          ['Titre', 'title', :hidden], # only for "title" section, without any action possible
-          ['Sous titre', 'heading2', 'h-2'],
+          ['Sous titre', 'heading2', 'h-1'],
-          ['Titre de section', 'heading3', 'h-3']
+          ['Titre de section', 'heading3', 'h-2']
         ],
         [
           ['Liste à puces', 'bulletList', 'list-unordered'],

app/javascript/shared/tiptap/tags.ts

@@ -100,7 +100,7 @@ class SuggestionMenu {
       .join('');
 
     const hint =
-      '<li><span class="fr-hint-text">Tapez le nom d’une balise, naviguez avec les flèches du clavier, validez avec Entrée ou en cliquant sur la balise.</span></li>';
+      '<li><span class="fr-hint-text">Tapez le nom d’une balise, naviguez avec les flèches, validez avec Entrée ou en cliquant sur la balise.</span></li>';
     list.innerHTML = hint + html;
     list.querySelector<HTMLElement>('.selected')?.focus();
   }
@@ -110,7 +110,7 @@ class SuggestionMenu {
     menu.classList.add('fr-menu');
 
     const list = document.createElement('ul');
-    list.classList.add('fr-menu__list', 'fr-tag-list');
+    list.classList.add('fr-menu__list', 'fr-tag-list', 'list-style-type-none');
 
     menu.appendChild(list);
 

app/views/administrateurs/attestation_template_v2s/edit.html.haml

@@ -33,15 +33,15 @@
               L’attestation est émise au moment où un dossier est accepté, elle est jointe à l’email d’accusé d’acceptation.
               Elle est également disponible au téléchargement depuis l’espace personnel de l’usager.
 
+          .fr-fieldset__element
+            %h2.fr-h4 En-tête
+
           .fr-fieldset__element
             .fr-toggle
               = f.check_box :official_layout, class: "fr-toggle-input", id: dom_id(@attestation_template, :official_layout), data: { "attestation-target": "layoutToggle"}
               %label.fr-toggle__label{ for: dom_id(@attestation_template, :official_layout), data: { fr_checked_label: "Activé", fr_unchecked_label: "Désactivé" } }
                 Je souhaite générer une attestation à la charte de l’état (logo avec Marianne)
 
-          .fr-fieldset__element.fr-mt-2w
-            %h2.fr-h4 En-tête
-
           .fr-fieldset__element{ class: class_names("hidden" => !@attestation_template.official_layout?), data: { "attestation-target": 'logoMarianneLabelFieldset'} }
             = render Dsfr::InputComponent.new(form: f, attribute: :label_logo, input_type: :text_area, required: @attestation_template.official_layout?, opts: { rows: 3, data: { controller: :textarea, textarea_max_rows_value: 3 } }) do |c|
               - c.with_hint { "Exemple: Ministère de la Mer. 3 lignes maximum" }
@@ -68,7 +68,7 @@
               = AttestationTemplate.human_attribute_name :body
               = render EditableChamp::AsteriskMandatoryComponent.new
 
-            .editor.mt-2{ data: { tiptap_target: 'editor' } }
+            .editor{ data: { tiptap_target: 'editor' } }
             = f.hidden_field :tiptap_body, data: { tiptap_target: 'input' }
 
           .fr-fieldset__element
@@ -76,16 +76,14 @@
               - @buttons.each do |buttons|
                 .flex.flex-gap-1
                   - buttons.each do |(label, action, icon)|
-                    %button.fr-btn.fr-btn--secondary.fr-btn--sm{ type: 'button', title: label, class: "fr-icon-#{icon}", data: { action: 'click->tiptap#menuButton', tiptap_target: 'button', tiptap_action: action } }
+                    %button.fr-btn.fr-btn--secondary.fr-btn--sm{ type: 'button', title: label, class: icon == :hidden ? "hidden" : "fr-icon-#{icon}", data: { action: 'click->tiptap#menuButton', tiptap_target: 'button', tiptap_action: action } }
                       = label
 
           .fr-fieldset__element
-            %label.fr-label
-              Balises
             %p.fr-hint-text
-              Intégrez à l’attestation du texte issu du dossier. Cliquez sur un bouton de balise pour l’ajouter là où se trouve le curseur, ou tapez dans l’éditeur le caractère
+              Tapez le caractère
-              %code @
+              %strong.fr-text-title--grey @
-              suivi du nom de la balise. Les balises pour les champs conditionnés ne sont pas disponibles.
+              suivi du nom de la balise, ou cliquez sur les boutons ci-dessous. Les champs conditionnés ne sont pas disponibles.
 
             = render TagsButtonListComponent.new(tags: @attestation_template.tags_categorized)
 

app/views/administrateurs/attestation_template_v2s/show.html.haml

@@ -5,7 +5,7 @@
         - if @attestation_template.official_layout?
           = image_tag('centered_marianne.svg', alt: '', class: 'marianne')
           .bloc-marque
-            = simple_format @attestation_template.label_logo.presence || "VOTRE INTITULE\ndu LOGO MARIANNE", class: "intitule"
+            = simple_format @attestation_template.label_logo.presence || "INTITULE de\nVOTRE INSTITUTION", class: "intitule"
             = image_tag('liberte2.svg', alt: '', class: 'devise')
         - elsif @attestation_template.logo.present?
           .bloc-marque.logo-free-layout

config/locales/models/attestation_template/fr.yml

@@ -4,7 +4,7 @@ fr:
       attestation_template: 'Attestation'
     attributes:
       attestation_template:
-        label_logo: Intitulé du logo Marianne
+        label_logo: Intitulé de votre institution
         label_direction: Intitulé de la direction
         logo: Logo
         logo_additional: Logo additionnel

spec/system/administrateurs/procedure_attestation_template_spec.rb

@@ -80,7 +80,7 @@ describe 'As an administrateur, I want to manage the procedure’s attestation',
 
       expect(page).to have_css("label", text: "Logo additionnel")
 
-      fill_in "Intitulé du logo Marianne", with: "System Test"
+      fill_in "Intitulé de votre institution", with: "System Test"
       fill_in "Intitulé de la direction", with: "The boss"
 
       attestation = nil