Reacciones personalizadas en Discourse

[Don]

Hola,

He realizado algunas modificaciones CSS en el Plugin de Reacciones de Discourse. Ahora se parece mucho a los botones de reacción de Facebook.

Estos son para 6 botones de reacción, incluido el predeterminado que está en mi sitio: .

COMÚN / SCSS
Coloque este código en la sección común de CSS.
Aviso importante: Puede modificar los emojis sobre la etiqueta editando las líneas content: 'Love it!', content: 'Beautiful', etc. Por supuesto, puede usar cualquier reacción que desee. Es solo una etiqueta sobre las reacciones.

.discourse-reactions-picker {
  .discourse-reactions-picker-container {
    width: 330px;
    height: 50px;
    max-width: calc(100vw - 2em);
    border: 1px solid var(--primary-low) !important;
    border-radius: 50px;
    .pickable-reaction {
      max-width: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
    }
  }
  .pickable-reaction {
    background: transparent !important;
    .emoji {
      height: 40px;
      width: 40px;
      padding: 0 !important;
      transform: scale(0.9);
    }
    &.is-used {
      transform: scale(1.3);
      transform-origin: bottom;
      border: none !important;
    }
    &:hover {
      transform-origin: bottom;
    }
    &:hover:after {
      position: absolute;
      font-size: 10px;
      top: -15px;
      background: var(--secondary-low);
      color: var(--secondary);
      padding: 2px 5px;
      border-radius: 20px;
    }
    &:first-child {
      &:hover:after {
        content: '¡Me encanta!';
      }
    }
    &:nth-child(2) {
      &:hover:after {
        content: 'Hermoso';
      }
    }
    &:nth-child(3) {
      &:hover:after {
        content: 'Abrazo';
      }
    }
    &:nth-child(4) {
      &:hover:after {
        content: '¡Felicidades!!';
      }
    }
    &:nth-child(5) {
      &:hover:after {
        content: 'Hmm...';
      }
    }
    &:nth-child(6) {
      &:hover:after {
        content: '¡Guau!';
      }
    }
  }
}

---

Móvil

En el móvil, configuré la posición del selector de reacciones como fija.

Esta es una opción posible para evitar este comportamiento extraño.

Se ve así

Ocurre lo mismo con el panel de estado en el móvil que estaba en el selector de reacciones, así que también use posición fija.

Móvil / SCSS

.discourse-reactions-picker {
  position: fixed;
  .pickable-reaction {
    &:hover:after {
      font-size: 12px;
      top: -8px;
    }
    &.is-used {
      &:hover:after {
        transform: scale(0.8);
        top: -15px;
      }
    }
  }
}

.discourse-reactions-state-panel {
  position: fixed;
}

---

Ocultar la sección predeterminada de quién dio like

COMÚN / CSS

Oculté la sección predeterminada de quién dio like porque el Panel de Estado de Reacciones también muestra esa información.

.who-liked {
  display: none;
}

[frold]

Me gusta mucho …

[Heliosurge (Dan DeMontmorency)]

¡Qué genial, funciona de maravilla! Gracias por compartirlo.

[PaulinaMX (ForosMX)]

Lo tengo instalado y me encanta.

Una pregunta:

¿Es posible quitar esa reacción negra al pasar el cursor?

[Don]

¡Hola Paulina!

Me alegra mucho que te guste ¡Gracias!

Para ocultar el panel de la lista de usuarios oscuros al pasar el cursor, usa este código

.discourse-reactions-list .reactions .user-list {
  display: none;
}

[PaulinaMX (ForosMX)]

¡Funcionó para mí! Me encanta cómo se ve, muchas gracias.

[neo (R.Zhang)]

Hola Don,

Me encanta mucho tu personalización. ¡Gran trabajo y gracias!
Pero aún tengo una pregunta: ¿cómo puedo eliminar ese efecto de hover negro como el de la imagen?

[Don]

Hola Neo,

Gracias

Lamentablemente, no es posible ocultar el atributo de título con CSS, pero puedes editar el texto js.discourse_reactions.picker.react_with en /admin/customize/site_texts para hacerlo más corto.

[neo (R.Zhang)]

¡Gracias, ya terminé con ello, ahora se ve mejor!

[jayarr (JR)]

Esto es fantástico, @Don. Muchas gracias.

Estoy pensando en usar esto en mi configuración de Discourse, pero actualmente tenemos dos filas de opciones de reacción (seis emojis por fila, es decir, 12 emojis en total).

Sé lo suficiente de CSS para salir del paso, pero realmente no es mi fuerte.

¿Qué tan difícil sería ajustar este código para que funcione para ese tipo de disposición?

Realmente aprecio que compartas esto (¡incluso si llego bastante tarde a la fiesta!).

[Don]

Gracias JR Creo que crearé un componente temático a partir de esto para que sea más fácil de usar y se ajuste a las reacciones, añadiré algunas correcciones, etc… Espero que eso ayude. Intentaré hacerlo la próxima semana.

[jayarr (JR)]

¡Muchas gracias, @Don! Sería increíble y un complemento/adición muy apreciado. Definitivamente estaré atento.

[PaulinaMX (ForosMX)]

@Don

Gracias JR Creo que crearé un componente temático a partir de esto para que sea más fácil de usar y se ajuste a las reacciones, añadiré algunas correcciones, etc… Espero que eso ayude. Intentaré hacerlo la próxima semana.

[Don]

Hola,

Hice un componente de tema a partir de esto. Creo que lo hace más fácil.

Gracias al componente de tema creado anteriormente por @manuel Category List with Banners, puedo implementar fácilmente la configuración de lista en la etiqueta de reacciones. Gracias

Añadí correcciones y algunas configuraciones:

1. reactions_label
   Separe con punto y coma ;
nombre de reacción;etiqueta de reacción
   

2. reactions picker rounding
   Redondeo de esquinas del selector de reacciones (border-radius). Puedes usar px, em, etc.
   Por defecto 1em.
   

   
   
   Si quieres hacerlo más o menos redondeado, cambia esta configuración.
   La versión anterior era 2em.
   
   

3. state panel rounding
   Redondeo de esquinas del panel de estado de reacciones (border-radius). Puedes usar px, em, etc.
   

   

4. user list rounding
   Redondeo de esquinas de la lista de usuarios de reacciones (border-radius). Puedes usar px, em, etc.
   

   

5. hide user list heading
   Esta opción ocultará el encabezado de la lista de usuarios en el panel. El encabezado es smiley en esta imagen.
   

   

6. hide user list
   Esta opción ocultará el panel de la lista de usuarios. Este es el panel oscuro con hover.
   

   

7. hide who liked
   Esta opción ocultará la sección predeterminada “who liked”.
   

   

Tengo algunos planes más con este componente, que añadiré más tarde.

GitHub - VaperinaDEV/discourse-custom-reactions