Benutzerdefinierte Discourse-Reaktionen

[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)]

Das ist fantastisch, @Don. Vielen Dank.

Ich überlege, dies in meinem Discourse-Setup zu verwenden, aber wir haben derzeit zwei Reihen von Reaktionsoptionen (sechs Emojis pro Reihe, also insgesamt 12 Emojis).

Ich kann gerade genug CSS, um mich durchzuschlagen, aber es ist wirklich nicht meine Stärke.

Wie schwierig wäre es, diesen Code anzupassen, damit er für eine solche Anordnung funktioniert?

Ich schätze es wirklich, dass Sie das teilen (auch wenn ich ziemlich spät dran bin!).

[Don]

Danke JR Ich denke, ich werde eine Theme-Komponente daraus erstellen, um die Verwendung zu erleichtern und sie an Reaktionen anzupassen, einige Korrekturen vorzunehmen usw. Ich hoffe, das hilft. Ich werde versuchen, sie nächste Woche zu erstellen.

[jayarr (JR)]

Vielen Dank, @Don! Das wäre unglaublich und eine sehr geschätzte Ergänzung/Erweiterung. Ich werde auf jeden Fall danach Ausschau halten.

[PaulinaMX (ForosMX)]

@Don

Danke JR Ich denke, ich werde eine Theme-Komponente daraus erstellen, um die Verwendung zu erleichtern und sie an Reaktionen anzupassen, einige Korrekturen usw. hinzuzufügen… Ich hoffe, das hilft. Ich werde versuchen, sie nächste Woche zu machen.

[Don]

Hallo,

Ich habe eine Theme-Komponente daraus erstellt. Ich denke, das macht es einfacher.

Dank der von @manuel zuvor erstellten Theme-Komponente Category List with Banners kann ich die Listen-Einstellung einfach zum Reaktionen-Label hinzufügen. Danke

Ich habe Korrekturen und einige Einstellungen hinzugefügt:

1. reactions_label
   Trennen mit Semikolon ;
Reaktionsname;Reaktionslabel
   

2. reactions picker rounding
   Abrundung der Ecken des Reaktionsauswahlfelds (border-radius). Sie können px, em usw. verwenden.
   Standard 1em.
   

   
   
   Wenn Sie es mehr oder weniger abrunden möchten, ändern Sie diese Einstellung.
   Die vorherige Version war 2em.
   
   

3. state panel rounding
   Abrundung der Ecken des Reaktionen-Statusfelds (border-radius). Sie können px, em usw. verwenden.
   

   

4. user list rounding
   Abrundung der Ecken der Reaktionen-Benutzerliste (border-radius). Sie können px, em usw. verwenden.
   

   

5. hide user list heading
   Diese Option blendet die Überschrift der Benutzerliste auf dem Feld aus. Die Überschrift ist auf diesem Bild smiley.
   

   

6. hide user list
   Diese Option blendet das Feld der Benutzerliste aus. Dies ist das dunkel hervorgehobene Feld.
   

   

7. hide who liked
   Diese Option blendet den standardmäßigen Abschnitt “Wer hat geliked” aus.
   

   
   

Ich habe noch ein paar weitere Pläne mit dieser Komponente, die ich später hinzufügen werde.

GitHub - VaperinaDEV/discourse-custom-reactions