Custom Discourse Reactions

Don · July 24, 2021, 2:06am

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!';
      }
    }
  }
}

react-buttons

Mobile

On mobile I set position fixed the reactions picker position.

This is a possible option to prevent this strange behaviour.
raction-no-fixed

Looks like this
reactions-fixed

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 · July 24, 2021, 10:56am

Like it very much …

Heliosurge · July 24, 2021, 9:23pm

Awesone this works really nice. Thanks for sharing

PaulinaMX · August 27, 2021, 4:39am

I have it installed and I love it.

A question:

Is it possible to remove that black hover?

Don · August 27, 2021, 9:02am

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 · August 29, 2021, 6:26pm

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

neo · August 29, 2021, 8:37pm

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?

Selection_060

Don · August 30, 2021, 2:20am

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 · August 30, 2021, 11:56am

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

jayarr · May 20, 2022, 10:30pm

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 · May 21, 2022, 9:23pm

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 · May 22, 2022, 7:20pm

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

PaulinaMX · May 26, 2022, 6:43pm

Happy So Excited GIF

Don · May 29, 2022, 3:40pm

Hello,

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

Thanks to @nolo’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:

reactions_label
Separate with semicolon ;
reaction name;reaction label
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.
state panel rounding
Reactions State Panel (border-radius) corners rounding. You can use px, em, etc
user list rounding
Reactions User list (border-radius) corners rounding. You can use px, em, etc
hide user list heading
This option will hide this user list heading on panel. The heading is smiley on this image.
hide user list
This option will hide the user list panel. This is the dark hovered panel.
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.