Menus déroulants Espresso

Dokos a migré ses menus déroulants vers le système Espresso, améliorant l'accessibilité, la compatibilité mobile et la cohérence visuelle de l'interface. Cette évolution concerne tous les menus de la barre d'en-tête : le menu •••, le menu Actions, et les groupes de boutons personnalisés (comme "Créer ⌄" ou "Vue ⌄").

Améliorations apportées

1. Navigation mobile optimisée

• Les sous-menus imbriqués s'affichent désormais correctement sur mobile, avec une indication claire ("Groupe →") pour accéder aux options.
• Les raccourcis clavier sont masqués sur mobile pour éviter la confusion.

2. Accessibilité renforcée

• Navigation au clavier : Utilisez les touches ↑/↓ pour naviguer, Entrée pour sélectionner, et Échap pour fermer.
• Boutons désactivés : Les options inactives sont clairement indiquées et ne peuvent pas être sélectionnées.
• Positionnement intelligent : Les menus s'affichent toujours dans la zone visible de l'écran, évitant les coupures.

3. Cohérence des raccourcis

• Les mnémoniques Alt (raccourcis clavier) suivent désormais une règle stricte :
  • Les éléments avec un raccourci clavier réel (ex: Ctrl+S) n'affichent pas de lettre Alt.
  • Les autres éléments reçoivent une lettre Alt pour un accès rapide.

4. Comportement amélioré

• Les menus ouverts se ferment automatiquement lors d'un changement de page.
• La déduplication des libellés est désormais fonctionnelle.
• La suppression de boutons personnalisés (remove_custom_button) fonctionne correctement.

Personnalisation des menus

Ajouter un élément au menu •••

// Dans un script client ou un fichier JS personnalisé
frappe.ui.page.add_menu_item("Mon Option", () => {
    frappe.msgprint("Option sélectionnée !");
}, "mon-icone"); // Icône optionnelle (ex: "i-mdi-cog")

Ajouter un élément au menu Actions

frappe.ui.page.add_actions_menu_item("Exporter en PDF", () => {
    frappe.call({
        method: "mon_app.api.export_pdf",
        args: { docname: cur_frm.doc.name }
    });
});

Créer un groupe de boutons personnalisés

const group = frappe.ui.add_custom_button_group("Options avancées");
group.add_button("Valider", () => {
    cur_frm.save();
});
group.add_button("Annuler", () => {
    cur_frm.reload_doc();
});

Bonnes pratiques

Pour les développeurs

• Évitez le HTML dans les libellés : Les balises HTML dans les noms d'options sont désormais affichées comme du texte brut.
• Ne modifiez pas le DOM directement : Utilisez toujours les méthodes publiques (add_menu_item, remove_custom_button, etc.) plutôt que de manipuler les éléments cachés.
• Gestion des états : Pour désactiver un élément, utilisez .addClass("disabled") sur l'élément retourné par les méthodes d'ajout.

Pour les utilisateurs

• Raccourcis clavier : Les combinaisons affichées (ex: Ctrl+P) fonctionnent même si elles ne sont pas visibles sur mobile.
• Navigation intuitive : Les sous-menus s'ouvrent automatiquement au survol sur desktop.

Exemple concret : Personnalisation pour un client

Scénario : La société Maison Verte SARL souhaite ajouter un bouton "Envoyer par email" dans le menu Actions de la fiche Client.

Solution :

// Dans un script client lié au DocType Client
frappe.ui.form.on("Customer", {
    refresh: function(frm) {
        if (frm.doc.docstatus === 1) {
            frappe.ui.page.add_actions_menu_item(
                "Envoyer par email",
                () => {
                    frappe.call({
                        method: "frappe.email.queue.queue_doc",
                        args: {
                            doctype: frm.doctype,
                            docname: frm.docname,
                            recipients: frm.doc.email_id
                        }
                    });
                }
            );
        }
    }
});

      
flowchart TD
    A[Ouverture du menu] --> B[Lecture des éléments depuis le DOM caché]
    B --> C[Affichage du menu Espresso]
    C --> D{Action utilisateur}
    D -->|Sélection| E[Exécution du callback]
    D -->|Échap/Click extérieur| F[Fermeture du menu]

    

Résolution des problèmes courants