Custom Discourse Reactions

[Don]

Hello,

I made some CSS modification on Discourse Reactions Plugin. So it looks much like Facebook reaction buttons.

These for 6 reaction buttons including the default which is on my site is .

COMMON / SCSS
Place this code to common - css section.
Important notice: You can modify the emojis above label with edit content: 'Love it!', content: 'Beautiful' etc… lines: Of course you can use whatever reaction you want. It is just a label above the reactions.

.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

On mobile I set position fixed the reactions picker position.

This is a possible option to prevent this strange behaviour.

Looks like this

Same thing happening with state panel on mobile that was on reactions picker so also use 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;
}

---

Hide default who liked section

COMMON / CSS

I hide the default who’s liked section because the Reactions State Panel also show those informations.

.who-liked {
  display: none;
}

[frold]

Like it very much …

[Heliosurge (Dan DeMontmorency)]

Awesone this works really nice. Thanks for sharing

[PaulinaMX (ForosMX)]

I have it installed and I love it.

A question:

Is it possible to remove that black hover?

[Don]

Hi Paulina,

I am really glad you like it Thank you!

To hide the dark hovered user list panel use this code

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

[PaulinaMX (ForosMX)]

It worked for me! I love the way it looks, thank you very much.

[neo (R.Zhang)]

Hi Don,

I like your customization very much. A great Job and thanks!
but I still have a question, how to get rid of the black hover like this?

[Don]

Hi Neo,

Thank you

Unfortunately that is not possible to hide title attribute with css but you can edit the js.discourse_reactions.picker.react_with text on /admin/customize/site_texts to make it less longer.

[neo (R.Zhang)]

Thanks, I’ve done with it, now it looks better!

[jayarr (JR)]

This is fantastic, @Don. Thanks so much.

I’m looking at using this on my Discourse setup, but we currently have two rows of reaction options (six emojis per row, so 12 emojis total).

I know just enough CSS to get by, but it really isn’t my strength.

How difficult would it be to adjust this code so that it’d work for that sort of arrangement?

Really appreciate your sharing this (even if I’m quite late to the party!).

[Don]

Thank you JR I think I will create a theme component from this to make it easier to use and fit to reactions, add some fixes etc… I hope that will help. I’ll try to make it next week.

[jayarr (JR)]

Thanks so much, @Don! That would be incredible and a much appreciated supplement/addition. I’ll definitely keep an eye out for it.

[PaulinaMX (ForosMX)]

@Don

Thank you JR I think I will create a theme component from this to make it easier to use and fit to reactions, add some fixes etc… I hope that will help. I’ll try to make it next week.

[Don]

Hello,

I made a theme component from this. I think it makes it easier.

Thanks to @manuel’s previously made theme component Category List with Banners I can easily implement the list setting to the reactions label. Thank you

I added fixes and some settings:

1. reactions_label
   Separate with semicolon ;
reaction name;reaction label
   

2. reactions picker rounding
   Reactions picker (border-radius) corners rounding. You can use px, em, etc
   Default 1em.
   

   
   
   If you want to make it more or less rounded change this setting.
   The previous version was 2em.
   
   

3. state panel rounding
   Reactions State Panel (border-radius) corners rounding. You can use px, em, etc
   

   

4. user list rounding
   Reactions User list (border-radius) corners rounding. You can use px, em, etc
   

   

5. hide user list heading
   This option will hide this user list heading on panel. The heading is smiley on this image.
   

   

6. hide user list
   This option will hide the user list panel. This is the dark hovered panel.
   

   

7. hide who liked
   This option will hide the default who liked section.
   

   

I have a few more plans with this component, which I will add later.

GitHub - VaperinaDEV/discourse-custom-reactions