Botón de encabezado de nuevo tema

I guess best behaviour would be to start the composer with empty category if the user does not have the permission to create new topic in the current one? Potentially with a modal and a notice about such.

Quería tener esta funcionalidad también, así que hice un fork del repositorio e hice que mostrara el botón “Nuevo tema” tanto a usuarios anónimos como a usuarios registrados. Si un usuario anónimo hace clic en el botón, se le redirige a la ventana modal de inicio de sesión/registro.

Repositorio: GitHub - Peterlollo/discourse-new-topic-button-for-all-users-theme-component: Adds new topic button to header and shows it to every user regardless of logged in status

2 Me gusta

Hay algunos nombres de clase obsoletos, por lo que los estilos no se muestran como se esperaba. Se añadió una PR para actualizarlos: FIX: update declarations by nolosb · Pull Request #6 · discourse/discourse-new-topic-button-theme-component · GitHub

4 Me gusta

¿Es posible actualizar este plugin a la nueva versión?

1 me gusta

Acabo de fusionar una refactorización de este componente para que funcione con estas actualizaciones: Upcoming Header Changes - Preparing Themes and Plugins

El componente debería funcionar como lo hizo antes, con algunas pequeñas mejoras (reflejará el estado del borrador y reaccionará a los permisos de categoría y etiqueta actuales). Si nota algún problema nuevo, háganoslo saber.

5 Me gusta

Acabo de añadir una nueva configuración show_to_anon (desactivada por defecto) que hará esto.

3 Me gusta

¿Qué tan “factible” sería agregar un menú desplegable similar al del componente de asistente desplegable de nolo?

Dado que estamos utilizando el asistente personalizado para crear nuevos temas en categorías específicas, nos gustaría básicamente vincularlos en los menús desplegables. Además, también nos gustaría agregar algunos enlaces solo para el personal (como “Nueva categoría” y “Nuevo grupo”) al botón.

Hola, no he podido usar el icono “pencil” de Font Awesome Free en este componente, incluso después de agregarlo a la configuración de “svg icon subset”. ¿Alguna idea?

1 me gusta

No creo que haya un icono gratuito de pencil en la versión 5

Creo que es lo mismo para pencil en la v5 es pencil-alt

4 Me gusta

¡Gracias! ¡Funciona!

2 Me gusta

Se dividió una publicación en un nuevo tema: No New Topic button

Hola,

¿Es posible actualizar el TC con la nueva actualización de borrador?

Gracias

2 Me gusta

Solicitud: añadir una opción para definir los colores del botón (fondo, texto + icono) tanto para un tema claro como oscuro. Dado que los nuevos temas forman parte del crecimiento de una comunidad, un botón de colores tiene más impacto.

Gracias

Es bastante fácil de hacer con CSS:

(puedes apuntar a temas oscuros y claros con CSS)


editar: añadiendo un ejemplo adecuado

#new-create-topic {
    background-color: light-dark(red,green);
}

Establecerá el color del botón en rojo en un tema claro y en verde en un tema oscuro.

2 Me gusta

Todavía no estoy familiarizado con CSS en Discourse. Estoy familiarizado con CSS, pero aún no he empezado a explorarlo dentro de Discourse.
¿Cómo/dónde lo añado?

Todavía creo que esta podría ser una característica para evitar añadir más complejidad y, para las personas que no están familiarizadas con CSS en absoluto, hace que el componente sea más fácil de personalizar.

1 me gusta

Ya sea en tus temas o en un nuevo componente temático, que luego debe incluirse en tus temas:


He añadido el código CSS en mi publicación anterior.

1 me gusta

También estaba probando :hover y funciona para el botón y el texto, pero no para el icono, a menos que pase el ratón sobre el propio icono. ¿Sabes cómo seleccionar el icono al pasar el ratón sobre el botón, incluso si el ratón no está sobre el icono?

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}

#new-create-topic .d-icon:hover {
    color: light-dark(red,white);
}
1 me gusta

Tu segunda regla significa que estás apuntando al icono cuando pasas el cursor sobre el icono, no al botón.

Usando la sintaxis SCSS, que

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}
#new-create-topic:hover .d-icon {
    color: light-dark(red,white);
}

(tampoco hay necesidad de light-dark(red,red); si usas el mismo color para claro y oscuro)

Recomendaría SCSS ya que es más fácil ordenar nuestro ingenioso código, pero eso es algo nuevo que aprender 😄
#new-create-topic:hover {
    background-color: light-dark(red,red);
    .d-icon, & {
        color: light-dark(red,white);
    }
}
1 me gusta

Tienes razón. Fue mi error… ¡Gracias!

Solo son pruebas. En realidad estoy usando el tema Predeterminado y no sé si ese tema tiene ambas opciones.

En cuanto a SCSS, lo aprendí hace unos años, pero fue algo que nunca usé realmente ya que no soy desarrollador. Uso HTML y CSS con bastante frecuencia, así que estoy un poco más familiarizado con esos 2.

1 me gusta

Encontré este código para hacer esta modificación, pero no estoy seguro si esta es la mejor manera de hacerlo:

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const newTopicButton = document.querySelector('.header-create-topic');
    const draftsButton = document.querySelector('.topic-drafts-menu-trigger');

    if (newTopicButton && draftsButton && !document.querySelector('.fk-header-buttons')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'fk-header-buttons';

      const parent = newTopicButton.parentNode;
      parent.insertBefore(wrapper, newTopicButton);

      wrapper.appendChild(newTopicButton);
      wrapper.appendChild(draftsButton);
    }
  });
</script>