Benutzerdefinierte Discourse-Reaktionen

[Don]

Hallo,

Ich habe einige CSS-Änderungen am Discourse Reactions Plugin vorgenommen. Es sieht nun den Facebook-Reaktionsbuttons sehr ähnlich.

Dieses Design umfasst 6 Reaktionsbuttons, einschließlich des Standardbuttons, der auf meiner Seite ist.

ALLGEMEIN / SCSS
Fügen Sie diesen Code im Abschnitt „Common – CSS" ein.
Wichtiger Hinweis: Sie können die Emojis über den Beschriftungen ändern, indem Sie die Zeilen content: 'Love it!', content: 'Beautiful' usw. bearbeiten. Natürlich können Sie jede gewünschte Reaktion verwenden. Es handelt sich lediglich um Beschriftungen über den Reaktionen.

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

---

Mobil

Auf mobilen Geräten habe ich die Position des Reaktionsauswahlmenüs auf fixed gesetzt.

Dies ist eine mögliche Option, um dieses seltsame Verhalten zu verhindern.

Es sieht dann so aus

Das Gleiche passiert mit dem Zustands-Panel auf mobilen Geräten, das sich ebenfalls im Reaktionsauswahlmenü befand, daher wird auch hier position: fixed verwendet.

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

---

Standardbereich „Wer hat geliked" ausblenden

ALLGEMEIN / CSS

Ich habe den Standardbereich „Wer hat geliked" ausgeblendet, da das Reaktionszustands-Panel diese Informationen ebenfalls anzeigt.

.who-liked {
  display: none;
}

[frold]

Gefällt mir sehr gut …

[Heliosurge (Dan DeMontmorency)]

Toll, das funktioniert wirklich gut. Danke fürs Teilen

[PaulinaMX (ForosMX)]

Ich habe es installiert und es gefällt mir sehr.

Eine Frage:

Ist es möglich, diesen schwarzen Hover-Effekt zu entfernen?

[Don]

Hallo Paulina,

ich freue mich sehr, dass es dir gefällt Danke!

Um das dunkle Panel mit der Benutzerliste beim Hovern auszublenden, verwende diesen Code

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

[PaulinaMX (ForosMX)]

Bei mir hat es funktioniert! Ich liebe den Look, vielen Dank.

[neo (R.Zhang)]

Hallo Don,

mir gefällt deine Anpassung sehr. Eine großartige Arbeit und vielen Dank!
Aber ich habe noch eine Frage: Wie kann man den schwarzen Hover-Effekt wie hier entfernen?

[Don]

Hallo Neo,

danke

Leider ist es nicht möglich, das title-Attribut mit CSS auszublenden. Du kannst jedoch den Text js.discourse_reactions.picker.react_with unter /admin/customize/site_texts bearbeiten, um ihn kürzer zu gestalten.

[neo (R.Zhang)]

Danke, ich habe es erledigt, jetzt sieht es besser aus!

[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