style(attestation): improve editor UI & style
This commit is contained in:
parent
16478651a9
commit
475406f3f2
7 changed files with 21 additions and 23 deletions
|
@ -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,
|
||||
h2,
|
||||
h3 {
|
||||
h1 {
|
||||
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;
|
||||
}
|
||||
|
|
|
@ -34,9 +34,9 @@ module Administrateurs
|
|||
['Souligner', 'underline', 'underline']
|
||||
],
|
||||
[
|
||||
['Titre', 'title', 'h-1'],
|
||||
['Sous titre', 'heading2', 'h-2'],
|
||||
['Titre de section', 'heading3', 'h-3']
|
||||
['Titre', 'title', :hidden], # only for "title" section, without any action possible
|
||||
['Sous titre', 'heading2', 'h-1'],
|
||||
['Titre de section', 'heading3', 'h-2']
|
||||
],
|
||||
[
|
||||
['Liste à puces', 'bulletList', 'list-unordered'],
|
||||
|
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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
|
||||
%code @
|
||||
suivi du nom de la balise. Les balises pour les champs conditionnés ne sont pas disponibles.
|
||||
Tapez le caractère
|
||||
%strong.fr-text-title--grey @
|
||||
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)
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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
|
||||
|
|
Loading…
Reference in a new issue