Reazioni personalizzate di Discourse

[Don]

Ciao,

Ho apportato alcune modifiche CSS al plugin Discourse Reactions. Ora assomiglia molto ai pulsanti delle reazioni di Facebook.

Questi sono per 6 pulsanti di reazione, incluso quello predefinito che sul mio sito è .

COMMON / SCSS
Inserisci questo codice nella sezione CSS comune.
Nota importante: Puoi modificare gli emoji sopra l’etichetta modificando le righe content: 'Love it!', content: 'Beautiful', ecc. Ovviamente puoi usare qualsiasi reazione desideri. Si tratta solo di un’etichetta sopra le reazioni.

.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

Su mobile ho impostato la posizione del selettore delle reazioni come fixed.

Questa è un’opzione possibile per prevenire questo comportamento strano.

Assomiglia a questo

La stessa cosa accade con il pannello di stato su mobile che si trovava nel selettore delle reazioni, quindi usa anch’esso 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;
}

---

Nascondi la sezione predefinita “Chi ha messo like”

COMMON / CSS

Ho nascosto la sezione predefinita “Chi ha messo like” perché il pannello di stato delle reazioni mostra anche queste informazioni.

.who-liked {
  display: none;
}

[frold]

Mi piace molto …

[Heliosurge (Dan DeMontmorency)]

Fantastico, funziona davvero bene. Grazie per averlo condiviso

[PaulinaMX (ForosMX)]

L’ho installato e mi piace molto.

Una domanda:

È possibile rimuovere quell’effetto hover nero?

[Don]

Ciao Paulina,

Sono davvero felice che ti piaccia Grazie!

Per nascondere il pannello della lista utenti scurito al passaggio del mouse, usa questo codice

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

[PaulinaMX (ForosMX)]

Funziona per me! Mi piace molto com’è venuto, grazie mille.

[neo (R.Zhang)]

Ciao Don,

mi piace molto la tua personalizzazione. Ottimo lavoro, grazie!
ma ho ancora una domanda: come posso eliminare l’effetto hover nero come questo?

[Don]

Ciao Neo,

Grazie

Purtroppo non è possibile nascondere l’attributo title con il CSS, ma puoi modificare il testo js.discourse_reactions.picker.react_with in /admin/customize/site_texts per renderlo più breve.

[neo (R.Zhang)]

Grazie, ho finito, ora sembra meglio!

[jayarr (JR)]

Questo è fantastico, @Don. Grazie mille.

Sto pensando di usarlo nella mia configurazione di Discourse, ma attualmente abbiamo due righe di opzioni di reazione (sei emoji per riga, quindi 12 emoji in totale).

So abbastanza di CSS per cavarmela, ma non è davvero il mio forte.

Quanto sarebbe difficile modificare questo codice in modo che funzioni per quel tipo di disposizione?

Apprezzo davvero la tua condivisione (anche se sono piuttosto in ritardo alla festa!).

[Don]

Grazie JR Penso che creerò un componente tematico da questo per renderlo più facile da usare e adattarlo alle reazioni, aggiungere alcune correzioni, ecc… Spero che aiuti. Cercherò di realizzarlo la prossima settimana.

[jayarr (JR)]

Grazie mille, @Don! Sarebbe incredibile e un’aggiunta/integrazione molto apprezzata. Terrò sicuramente d’occhio.

[PaulinaMX (ForosMX)]

@Don

Grazie JR Penso che creerò un componente a tema da questo per renderlo più facile da usare e adattarlo alle reazioni, aggiungere alcune correzioni ecc… Spero che aiuti. Cercherò di farlo la prossima settimana.

[Don]

Ciao,

Ho creato un componente tematico da questo. Penso che renda le cose più facili.

Grazie al componente tematico creato in precedenza da @manuel Category List with Banners posso implementare facilmente l’impostazione dell’elenco sull’etichetta delle reazioni. Grazie

Ho aggiunto correzioni e alcune impostazioni:

1. reactions_label
   Separare con punto e virgola ;
nome reazione;etichetta reazione
   

2. reactions picker rounding
   Arrotondamento degli angoli del selettore delle reazioni (border-radius). Puoi usare px, em, ecc.
   Predefinito 1em.
   

   
   
   Se vuoi renderlo più o meno arrotondato, cambia questa impostazione.
   La versione precedente era 2em.
   
   

3. state panel rounding
   Arrotondamento degli angoli del pannello di stato delle reazioni (border-radius). Puoi usare px, em, ecc.
   

   

4. user list rounding
   Arrotondamento degli angoli dell’elenco utenti delle reazioni (border-radius). Puoi usare px, em, ecc.
   

   

5. hide user list heading
   Questa opzione nasconderà l’intestazione dell’elenco utenti nel pannello. L’intestazione è smiley in questa immagine.
   

   

6. hide user list
   Questa opzione nasconderà il pannello dell’elenco utenti. Questo è il pannello scuro con l’hover.
   

   

7. hide who liked
   Questa opzione nasconderà la sezione predefinita “chi ha messo mi piace”.
   

   

Ho in programma ancora qualche idea con questo componente, che aggiungerò in seguito.

GitHub - VaperinaDEV/discourse-custom-reactions