Me pregunto si hay alguna forma de personalizar qué botones se muestran (y en qué orden) en la barra de herramientas de Nuevo Tema.
Específicamente, quiero reemplazar el botón de Fecha/Hora con el botón Agregar Evento. La Fecha/Hora solo causa confusión a los nuevos usuarios y, en nuestro contexto, los Eventos son lo que queremos destacar. Instruir a los usuarios a ignorar primero el botón con aspecto de calendario, hacer clic en el icono del engranaje y luego hacer clic en el otro icono con aspecto de calendario no es lo mejor, considerando que nuestra comunidad tiene muchas personas mayores y no orientadas a la tecnología usándola.
Veo que hay temas sobre la personalización del botón de nuevo tema, pero no de la barra de herramientas en sí.
También tengo curiosidad sobre esto. Recientemente agregamos una herramienta a la barra de herramientas del editor y eso hizo que el pasara a la siguiente línea.
Con CSS también es bastante sencillo reordenar elementos en estos menús… puedes hacer algo como:
.d-editor-button-bar {
.local-dates { // mueve el botón de fecha al principio
order: -1;
}
}
Tenemos una guía para averiguar cómo cambiar CSS aquí:
Dicho todo esto, el cambio más difícil es mover algo del menú desplegable a la barra de herramientas principal (o viceversa). Necesitarías ocultar el botón original con CSS y luego agregar un botón duplicado usando la API.
Mirar un componente de tema de ejemplo, como Discourse Gifs da una idea general de cómo se hace… aunque esto se complica si no eres desarrollador.
Sí, esto es realmente necesario. No solo una opción “predeterminada” para todos los usuarios, sino que luego cada usuario podría personalizarla, porque no todos necesitan tener un botón para poner el texto en “Negrita”, “Cursiva” o incluso “Preguntar a la IA”.
Pero por ahora, poder al menos mover cosas globalmente y agregarlas al menú oculto/rueda dentada, ayudaría.
En mi pantalla de 13 pulgadas, las cosas empiezan a estar un poco apretadas (siempre me gusta tener visible parte del tema original para citar secciones, etc.):
Para ser sincero, no estoy completamente seguro. Eso se instaló en una comunidad que administraba anteriormente (pero ya no lo hago). Parece que se puede encontrar aquí.
Yo también tengo personas mayores en mi foro y me siento tonto explicándoles esto.
El engranaje también es un símbolo muy poco obvio para “hay más”. ¿Quizás una elipsis sería más apropiada? ¿Hay alguna forma sencilla de cambiar el icono?
Otro obstáculo que encontré aquí es que en el móvil hay un pequeño icono de hamburguesa que oculta/muestra la barra de herramientas, y parece estar desactivado por defecto. Esto causa mucha más confusión que cualquier beneficio que pudiera ofrecer. Lo desactivé:
Tengo el “icono de crear evento” colocado a la derecha y fuera del menú +, pero puedes colocarlo a la izquierda con estas instrucciones:
1° En el encabezado de tu tema en admin > apariencia > tema > editar > editar código > head, añade este javascript:
<!-- Botón personalizado de creación de eventos (basado en iconos, a prueba de idiomas) -->
<script>
(() => {
const e = ".d-editor-button-bar"; // Barra de botones del editor
const t = ".btn.no-text.fk-d-menu__trigger.toolbar-menu__options-trigger.toolbar__button.options.toolbar-popup-menu-options"; // Botón del menú de opciones
const n = ".fk-d-menu__inner-content"; // Contenido interno del menú
const o = ".d-modal.fk-d-menu-modal"; // Modal del menú
// Función para obtener el botón del icono del calendario
const c = (e) => {
const t = e.querySelector('svg use[href="#calendar-day"]');
return t ? t.closest("button") : null;
};
// Función para esperar a que un elemento exista
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);
});
// Función para esperar a que aparezca el modal del menú
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);
};
// Función para crear y añadir el botón de crear evento
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 = "Create event"; // Título del botón
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 {}
});
};
// Observador para detectar la aparición de la barra de botones del editor
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 quieres el icono a la izquierda y no a la derecha: en la misma página de administración encontrarás una pestaña de CSS donde puedes añadir esto:
3° Bonus: si quieres que este botón sea visible en este lugar solo en ciertas categorías, usa el script de allí y modifica las condiciones con los nombres de tus categorías Discourse Calendar (and Event) - #547 by opcourdis
pasara a la siguiente línea.
