Réactions personnalisées sur Discourse

[Don]

Bonjour,

J’ai apporté quelques modifications CSS au plugin Discourse Reactions. Il ressemble désormais beaucoup aux boutons de réaction de Facebook.

Voici les 6 boutons de réaction, y compris celui par défaut qui est sur mon site.

COMMUN / SCSS
Placez ce code dans la section CSS commune.
Remarque importante : Vous pouvez modifier les emojis au-dessus des étiquettes en éditant les lignes content: 'Love it!', content: 'Beautiful', etc. Bien sûr, vous pouvez utiliser n’importe quelle réaction que vous souhaitez. Il s’agit simplement d’une étiquette au-dessus des réactions.

.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: 'Love it!';
      }
    }
    &:nth-child(2) {
      &:hover:after {
        content: 'Beautiful';
      }
    }
    &:nth-child(3) {
      &:hover:after {
        content: 'Hug';
      }
    }
    &:nth-child(4) {
      &:hover:after {
        content: 'Congrats!!';
      }
    }
    &:nth-child(5) {
      &:hover:after {
        content: 'Hmm...';
      }
    }
    &:nth-child(6) {
      &:hover:after {
        content: 'Wooow!';
      }
    }
  }
}

---

Mobile

Sur mobile, j’ai défini la position du sélecteur de réactions sur fixed.

Ceci est une option possible pour éviter ce comportement étrange.

Cela ressemble à ceci

La même chose se produit avec le panneau d’état sur mobile qui était sur le sélecteur de réactions, donc utilisez également position: fixed.

Mobile / 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;
}

---

Masquer la section par défaut « Qui a liké »

COMMUN / CSS

J’ai masqué la section par défaut « Qui a liké » car le panneau d’état des réactions affiche également ces informations.

.who-liked {
  display: none;
}

[frold]

Ça me plaît beaucoup …

[Heliosurge (Dan DeMontmorency)]

Super, ça marche vraiment bien. Merci de le partager

[PaulinaMX (ForosMX)]

Je l’ai installé et je l’adore.

Une question :

Est-il possible de supprimer ce survol noir ?

[Don]

Bonjour Paulina,

Je suis vraiment ravi que cela te plaise Merci !

Pour masquer le panneau de la liste des utilisateurs survolé en mode sombre, utilise ce code

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

[PaulinaMX (ForosMX)]

Ça a fonctionné pour moi ! J’adore le résultat, merci beaucoup.

[neo (R.Zhang)]

Bonjour Don,

J’aime beaucoup votre personnalisation. Excellent travail, merci !
Mais j’ai encore une question : comment supprimer le survol noir comme celui-ci ?

[Don]

Salut Neo,

Merci

Malheureusement, il n’est pas possible de masquer l’attribut title avec du CSS, mais tu peux modifier le texte js.discourse_reactions.picker.react_with sur /admin/customize/site_texts pour le rendre moins long.

[neo (R.Zhang)]

Merci, j’ai terminé, maintenant ça a l’air mieux !

[jayarr (JR)]

C’est fantastique, @Don. Merci beaucoup.

Je compte l’utiliser sur mon installation Discourse, mais nous avons actuellement deux rangées d’options de réaction (six emojis par rangée, donc 12 emojis au total).

Je ne connais que le CSS juste assez pour m’en sortir, mais ce n’est vraiment pas mon point fort.

Serait-il difficile d’ajuster ce code pour qu’il fonctionne pour ce type d’arrangement ?

J’apprécie vraiment que vous partagiez cela (même si je suis assez en retard !).

[Don]

Merci JR Je pense que je vais créer un composant de thème à partir de cela pour le rendre plus facile à utiliser et l’adapter aux réactions, ajouter quelques corrections, etc… J’espère que cela aidera. J’essaierai de le faire la semaine prochaine.

[jayarr (JR)]

Merci beaucoup, @Don ! Ce serait incroyable et un complément/ajout très apprécié. Je garderai certainement un œil dessus.

[PaulinaMX (ForosMX)]

@Don

Merci JR Je pense que je vais créer un composant de thème à partir de cela pour le rendre plus facile à utiliser et l’adapter aux réactions, ajouter quelques corrections, etc… J’espère que cela aidera. J’essaierai de le faire la semaine prochaine.

[Don]

Bonjour,

J’ai créé un composant de thème à partir de cela. Je pense que cela facilite les choses.

Grâce au composant de thème créé précédemment par @manuel Category List with Banners, je peux facilement implémenter le paramètre de liste dans l’étiquette des réactions. Merci

J’ai ajouté des corrections et quelques paramètres :

1. reactions_label
   Séparez avec un point-virgule ;
nom de la réaction;étiquette de la réaction
   

2. reactions picker rounding
   Arrondi des coins du sélecteur de réactions (border-radius). Vous pouvez utiliser px, em, etc.
   Par défaut 1em.
   

   
   
   Si vous souhaitez le rendre plus ou moins arrondi, modifiez ce paramètre.
   La version précédente était de 2em.
   
   

3. state panel rounding
   Arrondi des coins du panneau d’état des réactions (border-radius). Vous pouvez utiliser px, em, etc.
   

   

4. user list rounding
   Arrondi des coins de la liste des utilisateurs de réactions (border-radius). Vous pouvez utiliser px, em, etc.
   

   

5. hide user list heading
   Cette option masquera l’en-tête de la liste des utilisateurs sur le panneau. L’en-tête est smiley sur cette image.
   

   

6. hide user list
   Cette option masquera le panneau de la liste des utilisateurs. C’est le panneau sombre survolé.
   

   

7. hide who liked
   Cette option masquera la section par défaut “qui a aimé”.
   

   

J’ai encore quelques projets avec ce composant, que j’ajouterai plus tard.

GitHub - VaperinaDEV/discourse-custom-reactions