Je me demande s’il existe un moyen de personnaliser les boutons qui s’affichent (et dans quel ordre) sur la barre d’outils du nouveau sujet.
Plus précisément, je souhaite remplacer le bouton Date/Heure par le bouton Ajouter un événement. La date/heure prête à confusion pour les nouveaux utilisateurs et, dans notre contexte, ce sont les événements que nous voulons mettre en avant. Demander aux utilisateurs d’ignorer d’abord le bouton ressemblant à un calendrier, de cliquer sur l’icône d’engrenage, puis de cliquer sur l’autre icône ressemblant à un calendrier n’est pas idéal, étant donné que notre communauté compte de nombreuses personnes peu familiarisées avec la technologie et des personnes âgées qui l’utilisent.
Je vois qu’il existe des discussions sur la personnalisation du bouton du nouveau sujet, mais pas de la barre d’outils elle-même.
Je suis également curieux à ce sujet. Nous avons récemment ajouté un outil à la barre d’outils de l’éditeur et cela a fait passer la à la ligne suivante.
Avec du CSS, il est également assez simple de réorganiser les éléments dans ces menus… vous pouvez faire quelque chose comme :
.d-editor-button-bar {
.local-dates { // déplace le bouton de date au début
order: -1/
}
}
Nous avons un guide pour savoir comment modifier le CSS ici :
Cela dit, le changement le plus difficile est de déplacer quelque chose du menu déroulant vers la barre d’outils principale (ou vice versa). Vous devrez masquer le bouton d’origine avec du CSS, puis ajouter un bouton dupliqué à l’aide de l’API.
Examiner un composant de thème exemple, comme Discourse Gifs, donne une idée générale de la façon dont cela est fait… bien que cela devienne délicat si vous n’êtes pas un développeur.
Oui, c’est vraiment nécessaire. Pas seulement une option « par défaut » pour tous les utilisateurs, mais ensuite chaque utilisateur pourrait la personnaliser, car tout le monde n’a pas besoin d’avoir un bouton pour mettre le texte en « Gras », ou en « Italique », ni même « Demander à l’IA ».
Mais pour l’instant, pouvoir au moins déplacer les choses globalement et les ajouter au menu caché/roue dentée aiderait.
Sur mon écran de 13 pouces, les choses commencent à être un peu à l’étroit (j’aime toujours avoir une partie du sujet original visible pour citer des sections, etc.) :
Pour être honnête, je ne suis pas entièrement sûr. Cela a été installé sur une communauté que je gérais auparavant (mais que je ne gère plus). Il semble que cela puisse être trouvé ici.
J’ai aussi des personnes âgées sur mon forum, et je me sens bête de devoir leur expliquer cela.
L’engrenage est également un symbole très peu évident pour indiquer « il y a plus ». Peut-être qu’une ellipse serait plus appropriée ? Existe-t-il un moyen simple de changer l’icône ?
Un autre obstacle que j’ai trouvé est que sur mobile, il y a une petite icône de hamburger qui affiche/masque la barre d’outils, et elle semble être désactivée par défaut. Cela cause beaucoup plus de confusion que les avantages qu’elle pourrait offrir. Je l’ai désactivée :
J’ai placé l’icône « créer un événement » à droite et à l’extérieur du menu +, mais vous pouvez la placer à gauche avec ces instructions :
1° Dans l’en-tête de votre thème dans admin > apparence > thème > modifier > modifier le code > head ajoutez ce javascript
<!-- Bouton personnalisé de création d'événement (basé sur une icône, indépendant de la langue) -->
<script>
(() => {
const e = ".d-editor-button-bar";
const t = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options";
const n = ".fk-d-menu__inner-content";
const o = ".d-modal.fk-d-menu-modal";
const c = (e) => {
const t = e.querySelector('svg use[href="#calendar-day"]');
return t ? t.closest("button") : null;
};
const r = (e, t, n = 4000) => new Promise((o, c) => {
const r = t(e);
if (r) return o(r);
const l = new MutationObserver(() => {
const n = t(e);
n && (l.disconnect(), o(n));
});
l.observe(e, { childList: !0, subtree: !0 });
setTimeout(() => {
l.disconnect();
c();
}, n);
});
const l = (e = 4000) => {
const t = new MutationObserver(() => {
document.querySelector(o) && t.disconnect();
});
t.observe(document.body, { childList: !0, subtree: !0 });
setTimeout(() => {
t.disconnect();
}, e);
};
const s = (e) => {
if (e.querySelector(".custom-create-event-btn")) return;
const o = document.createElement("button");
o.className = "btn no-text btn-icon toolbar__button link custom-create-event-btn";
o.title = "Créer un événement";
o.innerHTML = '<svg class="fa d-icon d-icon-calendar-day svg-icon"><use href="#calendar-day"></use></svg>';
e.appendChild(o);
o.addEventListener("click", async () => {
const e = document.querySelector(t);
if (!e) return;
e.click();
let o = document.querySelector(n);
if (!o) {
await new Promise((e, t) => {
const c = new MutationObserver(() => {
o = document.querySelector(n);
o && (c.disconnect(), e());
});
c.observe(document.body, { childList: !0, subtree: !0 });
setTimeout(() => {
c.disconnect();
t();
}, 2000);
});
}
try {
(await r(o, c)).click();
l();
} catch {}
});
};
const u = new MutationObserver(() => {
const t = document.querySelector(e);
t && s(t);
});
u.observe(document.body, { childList: !0, subtree: !0 });
const d = document.querySelector(e);
d && s(d);
})();
</script>
2° Si vous souhaitez que l’icône soit à gauche et non à droite : sur la même page d’administration, vous trouverez un onglet CSS où vous pourrez ajouter ceci :
3° Bonus : si vous souhaitez que ce bouton soit visible à cet endroit dans certaines catégories uniquement, utilisez le script là-bas et modifiez les conditions avec les noms de vos catégories Discourse Calendar (and Event) - #547 by opcourdis
à la ligne suivante.
