Seletor CSS para separar posts do usuário atual

Dev
1

Estou procurando uma maneira simples de um seletor CSS corresponder a posts feitos pelo usuário atual (mas não a posts de outros usuários). Pelo que posso ver, não há nenhuma classe CSS adicionada a esses posts que eu possa usar. Mas talvez eu esteja perdendo algo?

Se não houver tal classe no momento, ficaria muito grato se uma fosse adicionada!

Minha sugestão seria adicionar uma classe ao elemento topic-post, semelhante às classes existentes relacionadas ao usuário que postou, como topic-owner. A nova classe poderia ser current-user ou my-post ou o que se encaixar na nomenclatura existente do Discourse.

Clique aqui para uma explicação do motivo pelo qual quero fazer isso...

Há algum tempo, usuários do meu fórum reclamaram de viciar em verificar quantos likes seus posts receberam. Eles voltavam repetidamente aos posts apenas para conferir seus likes, e esse comportamento lembrava os aspectos mais tóxicos das principais plataformas de mídia social.

Minha solução foi criar um tema para eles usarem, onde simplesmente adicionei uma regra CSS para ocultar o contador de likes em seus posts. O botão de likes em posts criados pelo usuário atual tem uma classe chamada .my-likes, o que facilita a seleção via CSS. Isso funcionou bem e os usuários ficaram satisfeitos com a solução.

No entanto, mais cedo hoje, foi apontado para mim que, se você clicar no botão “…”, ou seja, “mostrar mais” em um post, os usuários que curtiram aquele post são listados. Um usuário relatou que voltou aos seus hábitos de “viciado em dopamina” por causa disso, clicando repetidamente em “…” para contornar o tema especial e verificar seus likes.

Mas, ao contrário do caso mencionado acima do botão de likes, não consigo encontrar um seletor CSS que me permita fazer isso. A única solução que encontrei é ocultar a lista de curtidores para todos os posts, ou seja, fazer com que os usuários do tema não possam ver essa lista em nenhum post.

O que posso fazer agora é isso:

.who-liked { display: none;}

O que eu esperava fazer era algo assim:

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

(Mas isso não funciona, porque a classe .current-user não existe.)

2

Talvez você possa usar o atributo data-user-id na tag .topic-post article?

3

Uma coisa que você pode fazer é encontrar os tópicos na lista de tópicos em que o usuário atual é o autor. Isso pode ser feito com jQuery. Se for verdadeiro, aplique um estilo a essa linha. A desvantagem é que o usuário pode ser identificado como autor do tópico original (OP).

Outra opção é substituir completamente o componente da lista de tópicos e fazer o necessário lá. Mais informações sobre como substituir modelos podem ser encontradas aqui:

4

Desculpe, você está dizendo que deseja decorar as postagens dos usuários na lista de tópicos ou no tópico em si? Nesse caso, você pode conectar ao avatar do usuário atual, encontrar o elemento raiz da postagem pai e adicionar uma classe a ele com jQuery.

5

Obrigado pelas respostas!

Já sei que posso fazer isso com JavaScript. Deveria ter mencionado isso desde o início. No entanto, o ponto do meu post é que gostaria de fazê-lo de uma maneira muito mais simples, com um pouquinho de CSS (veja a parte expansível do meu post original).

Além de ser uma solução mais simples e natural, isso me permitiria gerenciar as coisas com o excelente sistema integrado para Temas e Componentes de Tema.

E não se trata de algo estranho ou exótico. Como mencionei inicialmente, o Discourse já possui atributos de classe no mesmo elemento (post na página do tópico) para indicar propriedades do usuário que publicou (dono do tópico, nível de confiança, associações a grupos etc.). E em um subelemento desse elemento (o botão de curtir), já existe um atributo de classe indicando que o post foi feito pelo usuário que está acessando a página no momento.

Por esses motivos, acho que adicionar esse único atributo no elemento topic-post é uma solução muito melhor do que algum truque em JavaScript.

6

Ah, acabei de vir aqui postar a solução em JS. Criei um grupo chamado hidelikes e esse JS oculta a lista de quem curtiu para todos os membros do grupo em seus próprios 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>

Obviamente, se você quiser fazer isso para todos os usuários, basta remover a parte dos grupos.

7

Muito obrigado por postar o código real, isso é realmente útil!

8

Depois de investigar um pouco o plugin-api, acho que encontrei a solução para o seu problema e a maneira correta de fazer o que você sugeriu.

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

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

Isso adicionará current-user-post a cada postagem feita pelo usuário atual logado.

9

Isso é ótimo, muito obrigado!

10

Onde devo adicionar este código? Adicionei ao , mas não está funcionando corretamente.