Clickable Topic Component

jordan.vidrine · March 30, 2021, 7:48pm

This component makes the entire area of a topic-list-item clickable, as opposed to just the topic title.

Thanks to @Johani for this code and functionality. I’m just the messenger


	Preview	Preview on theme-creator.discourse.org
	Repository	github.com/discourse/discourse-clickable-topic
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

TheBaby5 · March 15, 2021, 7:18pm

Thank you so much, very needed thing!

B-iggy · June 13, 2021, 10:18pm

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:

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.

B-iggy · June 16, 2021, 12:37pm

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!?

jordan.vidrine · June 16, 2021, 1:41pm

Glad you like the component!

Thanks for the suggestions

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

jordan.vidrine · June 17, 2021, 8:45pm

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

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.

github.com

discourse/discourse-clickable-topic/blob/7bb07da79d621de09b35a5405ee02eb204f62a8e/javascripts/discourse/initializers/clickable-topic-list-item.js#L9

    
      
          import { withPluginApi } from "discourse/lib/plugin-api";
          import { wantsNewWindow } from "discourse/lib/intercept-click";
          
          
export default {
            name: "clickable-topic-list-item",
          
          
  initialize() {
              withPluginApi("0.8.14", api => {
                api.modifyClass("component:topic-list-item", {
                  click(event) {
                    const result = this.showEntrance(event);
                    
                    if (result === false) return result;
          
          
          const topic = this.topic;
                    const target = $(event.target);
          
          
          if (target.hasClass("bulk-select")) {
                      const selected = this.selected;

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