Tema clickable

:discourse2: Summary Clickable Topic makes the entire area of a topic-list-item clickable, as opposed to just the topic title.
:eyeglasses: Preview Preview on Discourse Theme Creator
:hammer_and_wrench: Repository Link https://github.com/discourse/discourse-clickable-topic
:open_book: New to Discourse Themes? Beginner’s guide to using Discourse Themes

Install this theme component

Features

preview

:discourse2: Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @JammyDodger 2024-06-11T12:48:31Z

Check documentPerform check on document:
46 Me gusta

Thank you so much, very needed thing! :heart:

4 Me gusta

That is a very helpful component! Should be from user experience point of view built into Discourse, but that is my opinion.

Anyways, I’m stuck in trying to make the same logic work for Categories. I wanted to do it with api.modifyClass but seem to miss the crucial part. Can you please help me?

I have this setting for my desktop page:
image

Basically the red box on the left should be clickable:

Or to have a perfect picture what I want to achieve: recreating the Blizzard Forum design, cause I like it a lot:

Appreciate any help here.

While waiting for a response I also found the components page here:

And tried different ideas but it seems my hook is not even available? Or I’m missing something!? :slight_smile:

Glad you like the component!

Thanks for the suggestions :grinning_face_with_smiling_eyes:

At the moment this component is only designed to work for Topics in a topic list.

1 me gusta

If you want to experiment and fork this component, you are welcome to do so :+1:

As a starting point to get a category to be clickable, I would suggest looking through the code in this component that does so by modifying the topic-list-item component inside Discourse core.

You could try creating a new file within this same folder which targets one of the many types of category layouts included in our components, making sure to target the same category page style you have selected on your forum.

Some of these are listed in their locations below…

app/assets/javascripts/discourse/app/components/categories-and-latest-topics.js
app/assets/javascripts/discourse/app/components/categories-and-top-topics.js
app/assets/javascripts/discourse/app/components/categories-boxes-topic.js
app/assets/javascripts/discourse/app/components/categories-boxes-with-topics.js
app/assets/javascripts/discourse/app/components/categories-boxes.js
app/assets/javascripts/discourse/app/components/categories-only.js
app/assets/javascripts/discourse/app/components/category-list-item.js

3 Me gusta

La vista previa ya no funciona

2 Me gusta

Creo que ahora debería estar bien. :slightly_smiling_face::+1:

2 Me gusta

Ahora roto.

Confiábamos en este componente para hacer que las tarjetas de temas de la vista Categorías + Últimos (predeterminada en nuestro caso) fueran clickables. Desde la actualización de hoy a la última versión 3.1.0beta8 (ahora aparece como 3.2.0.beta1-dev), el componente dejó de funcionar correctamente.

Ahora el estado activo del cursor permanece como clickeable, pero el área del tema no lo es. Con la consola del navegador abierta, hay un error que puede ayudar a los desarrolladores a identificar el problema:

Uncaught TypeError: this.router is undefined

function navigateToTopic(topic, href) {
    if (this.siteSettings.page_loading_indicator !== "slider") {
      // Con el slider, se siente mejor que el encabezado se actualice una vez que el resto del contenido del tema se carga,
      // así que omite establecerlo temprano.
      this.appEvents.trigger("header:update-topic", topic);
    }
    this.session.set("lastTopicIdViewed", {
      topicId: topic.id,
      historyUuid: this.router.location.getState?.().uuid
    });
    _url.default.routeTo(href || topic.get("url"));
    return false;
  }

El error lanzado para la línea:

historyUuid: this.router.location.getState?.().uuid

¿Podría estar relacionado con las actualizaciones de Ember planeadas/en curso en el núcleo?

Hola @kinetiksoft - No he podido reproducir el problema por mi parte. El componente de tema parece funcionar bien con la última versión de Discourse. Usar el enlace ‘vista previa en el creador de temas’ en el OP aquí también parece funcionar.

¿Podrías compartir un enlace a un sitio con el problema? Quizás haya un conflicto con otro tema/plugin.

2 Me gusta

¡Gracias! Te he enviado un mensaje privado con un enlace a la comunidad en cuestión. No es apropiado compartirlo en público.

1 me gusta

¡Gracias @kinetiksoft! Parece que el problema ocurre cuando el componente del tema se usa junto con la vista ‘categorías + últimas’ (que tienes configurada como tu página de inicio).

He creado una PR que debería resolver el problema.

Publicaré aquí una vez que se fusione, y entonces necesitarás actualizar tu foro a la última versión del núcleo de Discourse.

3 Me gusta

¡Gracias David! Nos alegra haber podido ayudar a identificar el problema en un componente que funciona perfectamente.

2 Me gusta

Todo listo, así que debería tener efecto la próxima vez que actualices a la última versión de Discourse.

1 me gusta

Haremos un intento de actualización esta semana y ciertamente volveré a este tema para informar cómo va todo. ¡Gracias de nuevo!

1 me gusta

Podemos confirmar que el problema se ha solucionado. ¡Gracias de nuevo! :heart:

1 me gusta

Hola, ¿cómo puedo modificar este componente para que admita el plugin de Docs?

Estoy ejecutando la última versión de Discourse 3.4.0.beta2-dev.


No estoy seguro si tengo algo mal configurado en este componente temático, pero todo el texto del cuerpo en el tema de la tarjeta no es clicable. Si haces clic justo después de que termina el texto en cualquiera de las líneas, puedes activar la tarjeta y abrir el tema.

¿Alguna idea sobre qué podría estar causando esto?

Gracias de antemano por toda su ayuda y aportes. :slight_smile:

4 Me gusta

Hola, gracias por ese TC, pero ¿parece que una región sigue sin ser clicable?