CSS selector to separate posts by current user

Dev
1

I am looking for a simple way for a CSS selector to match posts made by the current user (but not posts by other users). As far as I can tell, there is no CSS class added to such posts which I can use. But perhaps I am missing something?

If there is no such class at the moment, I would greatly appreciate if one was added!

My suggestion would be to add a class to the topic-post element, similar to the currently existing classes relating to the posting user, e.g. topic-owner. The new class could be current-user or my-post or whatever fits with existing Discourse nomenclature.

Click here for an explanation of why I want to do this...

Some time ago users of my forum complained about getting addicted to checking how many likes their posts have received. They went back to posts repeatedly just to check their likes and this behavior reminded them of the more toxic aspects of the mainstream social media platforms.

My solution was to create a theme for them to use where I simply added a CSS rule to hide the like counter on their posts. The like button on posts created by the current user has a class called .my-likes, so it is easy to select with CSS. This worked well and the users were happy with the solution.

However, earlier today it was pointed out to me that if you click the “…”-button, i.e. “show more” on a post, the users who have liked that post are listed. One user reported that he was back in his “dopamine junkie” ways because of this, repeatedly clicking “…” to circumvent the special theme and check his likes.

But unlike the above mentioned case of the like button, I can not find a CSS selector which lets me do this. The only solution I have found is to hide the list of likers for all posts, i.e. making it so that the users of the theme can not see that list for any post.

What I can do now is this:

.who-liked { display: none;}

What I hoped to do was something like this:

.topic-post.current-user .who-liked { display: none;}

(But this does not work, because the .current-user class does not exist.)

2

Maybe you can use the data-user-id attribute in the .topic-post article tag?

1 Like
3

One thing you could to is find the topics in topic list which have current user are the poster, that could be done with jQuery. If true, then apply style to that row. Downside could be that user can be found as poster to the OP topic.

Other way is to override topic list component completely and do the magic there. More info on overriding templates can be found here:

2 Likes
4

Sorry, are you saying to want to decorate user posts in topic list or in the actual topic?
You could hook to the avatar of the current user in that case and find the parent post root element and add a class with jQuery to it.

1 Like
5

Thank you for the replies!

I am well aware that I can do this with Javascript. I should have mentioned that from the start. However, the point of my post is that I would like to do it in a much simpler way, with a tiny bit of CSS (see the expandable part of my original post).

Besides being a simpler and more natural solution, it would let me manage things with the excellent built-in system for Themes and Theme Components.

And it is not like this would be some weird exotic thing. As I mentioned initially, Discourse already has class attributes on the very same element (post on topic page) for indicating properties of the posting user (topic-owner, trust level, group memberships etc). And in a sub-element of this element (the like button), there is already a class attribute indicating that the post is made by the user who is currently accessing the page.

For these reasons, I think adding that single attribute on the topic-post element is a much better solution than some Javascript hack.

1 Like
6

Oh, just came here to post the js solution. I made a group called hidelikes and this js hides the who-liked for all group members for their own posts.

<script type="text/discourse-plugin" version="0.8">
    $( document ).ready(function() {
        let currentUser = api.getCurrentUser();
        var groups = currentUser.groups;
        var userID = currentUser.id;
        const hidelikes = groups.some(g => g.name === 'hidelikes');
        if (hidelikes) { 
               $('<style>').text('.boxed.onscreen-post[data-user-id="' + userID + '"] .who-liked{display: none;}').appendTo(document.head)
         }
    });
</script>

Obviously if you want to do it for all users just scrap the groups part

4 Likes
7

Thank you very much for posting the actual code, that is helpful indeed!

1 Like
8

After digging a bit in plugin-api I think I found solution to your problem and the proper way of doing what you suggested

<script type="text/discourse-plugin" version="0.8">
  api.addPostClassesCallback((attrs) => {
    const user = api.getCurrentUser();
    if (attrs.user_id === user.id)  {
      return ['current-user-post']
    }
  });
</script>

Check here:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712

This will add current-user-post to every post that is made by a current logged in user.

7 Likes
9

This is great—thank you very much!

2 Likes
10

Where to add this code? I added to but not working fine.