Selector CSS para separar publicaciones del usuario actual

Desarrollador
1

Estoy buscando una forma sencilla de que un selector CSS coincida con las publicaciones realizadas por el usuario actual (pero no con las de otros usuarios). Por lo que puedo ver, no se añade ninguna clase CSS a dichas publicaciones que pueda utilizar. ¿Pero quizás me estoy perdiendo algo?

Si no existe tal clase en este momento, agradecería mucho que se añadiera una.

Mi sugerencia sería añadir una clase al elemento topic-post, similar a las clases existentes actualmente relacionadas con el usuario que publica, por ejemplo topic-owner. La nueva clase podría ser current-user o my-post o la que mejor se adapte a la nomenclatura existente de Discourse.

Haz clic aquí para una explicación de por qué quiero hacer esto...

Hace algún tiempo, los usuarios de mi foro se quejaron de que se habían vuelto adictos a comprobar cuántos “me gusta” habían recibido sus publicaciones. Volvían a las publicaciones repetidamente solo para verificar sus “me gusta”, y este comportamiento les recordaba los aspectos más tóxicos de las plataformas de redes sociales convencionales.

Mi solución fue crear un tema para ellos donde simplemente añadí una regla CSS para ocultar el contador de “me gusta” en sus publicaciones. El botón de “me gusta” en las publicaciones creadas por el usuario actual tiene una clase llamada .my-likes, por lo que es fácil seleccionarlo con CSS. Esto funcionó bien y los usuarios quedaron satisfechos con la solución.

Sin embargo, más temprano hoy me señalaron que si haces clic en el botón “…”, es decir, “mostrar más” en una publicación, se listan los usuarios que han dado “me gusta” a esa publicación. Un usuario informó que había vuelto a sus hábitos de “adicto a la dopamina” debido a esto, haciendo clic repetidamente en “…” para eludir el tema especial y verificar sus “me gusta”.

Pero a diferencia del caso mencionado anteriormente del botón de “me gusta”, no puedo encontrar un selector CSS que me permita hacer esto. La única solución que he encontrado es ocultar la lista de quienes dieron “me gusta” para todas las publicaciones, es decir, hacer que los usuarios del tema no puedan ver esa lista en ninguna publicación.

Lo que puedo hacer ahora es esto:

.who-liked { display: none;}

Lo que esperaba hacer era algo como esto:

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

(Pero esto no funciona, porque la clase .current-user no existe.)

2

¿Quizás puedes usar el atributo data-user-id en la etiqueta .topic-post article?

1 me gusta
3

Una cosa que podrías hacer es buscar en la lista de temas aquellos en los que el usuario actual es el autor, lo cual se puede hacer con jQuery. Si es así, aplica un estilo a esa fila. La desventaja podría ser que el usuario también se considere autor del tema original (OP).

Otra opción es sobrescribir completamente el componente de la lista de temas y hacer lo necesario allí. Puedes encontrar más información sobre cómo sobrescribir plantillas aquí:

2 Me gusta
4

Lo siento, ¿estás diciendo que quieres decorar las publicaciones de los usuarios en la lista de temas o en el tema en sí? En ese caso, podrías conectar con el avatar del usuario actual, encontrar el elemento raíz del post padre y agregarle una clase con jQuery.

1 me gusta
5

¡Gracias por las respuestas!

Sé perfectamente que puedo hacer esto con JavaScript. Debería haberlo mencionado desde el principio. Sin embargo, el punto de mi publicación es que me gustaría hacerlo de una manera mucho más sencilla, con un poco de CSS (véase la parte expandible de mi publicación original).

Además de ser una solución más simple y natural, me permitiría gestionar las cosas con el excelente sistema integrado para Temas y Componentes de Temas.

Y no se trata de algo extraño o exótico. Como mencioné inicialmente, Discourse ya tiene atributos de clase en el mismo elemento (publicación en la página del tema) para indicar propiedades del usuario que publica (dueño del tema, nivel de confianza, pertenencia a grupos, etc.). Y en un subelemento de este elemento (el botón de “me gusta”), ya hay un atributo de clase que indica que la publicación fue realizada por el usuario que actualmente está accediendo a la página.

Por estas razones, creo que añadir ese único atributo en el elemento topic-post es una solución mucho mejor que algún truco con JavaScript.

1 me gusta
6

Oh, acabo de llegar aquí para publicar la solución en JS. Creé un grupo llamado hidelikes y este JS oculta la lista de «quién dio like» para todos los miembros del grupo en sus propias publicaciones.

<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, si quieres hacerlo para todos los usuarios, simplemente elimina la parte de los grupos.

4 Me gusta
7

¡Muchas gracias por compartir el código real, eso es de gran ayuda!

1 me gusta
8

Después de investigar un poco en plugin-api, creo que he encontrado la solución a tu problema y la forma correcta de hacer lo que sugieres:

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

Consulta aquí:
https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/lib/plugin-api.js#L712

Esto agregará current-user-post a cada publicación realizada por un usuario actualmente conectado.

7 Me gusta
9

¡Esto es genial, muchas gracias!

2 Me gusta
10

¿Dónde debo agregar este código? Lo agregué a pero no funciona correctamente.