Emoji Fluff

[Arkshine]

|||
|:discourse2:| Riassunto | Aggiunge variazioni o animazioni opzionali alle emoji.|
|:eyeglasses: | Anteprima | Anteprima su theme-creator.discourse.org|
|:hammer_and_wrench: | Link al Repository | GitHub - Arkshine/discourse-emoji-fluff|
|:open_book: |Nuovo su Discourse Themes? | Guida per principianti all’uso dei temi Discourse|

Installa questo componente del tema

Questo componente richiede Discourse aggiornato alla versione del 2024-11-26T23:00:00Z. ^[1]

Descrizione

Emoji Fluff consente agli utenti di inserire emoji specchiate o animate nei loro post.
Consente agli utenti di pubblicare elaborati emoji come:

Puoi scegliere queste decorazioni dal popup di completamento automatico delle emoji, dal selettore di emoji o aggiungendo parole chiave direttamente dopo il codice breve dell’emoji:

Esempi: :bike:f-slide , :smile:f-bounce

I ribaltamenti orizzontali e verticali possono essere combinati con altre decorazioni.

Esempi:

• :horse:f-slide,flip:
• :spider:f-float,flip_v:

Screenshot

Emoji fluff disponibili

Come aggiungere fluff a un’emoji

Dal popup di completamento automatico delle emoji

Dal selettore di emoji

Digitando manualmente il suffisso fluff

Funzionalità

• Emoji specchiate orizzontalmente o verticalmente

• Emoji animate (rimbalzo, rotazione, pulsazione, ecc.)

• Impostazione per scegliere quali decorazioni emoji devono essere disponibili per gli utenti

• Impostazione per scegliere l’inserimento di un selettore di decorazioni nell’autocompletamento o nel selettore di emoji.

• Consenti agli amministratori di creare nuovi fluff

Impostazioni

Impostazione	Descrizione
enabled	Attiva o disattiva le funzionalità del componente. Valore predefinito: true La disattivazione impedirà l’applicazione della decorazione emoji. Questo è utile se si desidera mettere in pausa o rimuovere il componente ma non si desidera vedere il codice di decorazione, come spin:, nei post. Per ulteriori informazioni, consultare Ripristino delle decorazioni emoji nell’argomento.
allow decorations	Elenco delle decorazioni consentite. Valore predefinito: flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray
allow selector in	Dove dovrebbe essere disponibile il selettore di fluff. Valore predefinito: both none – disabilita i selettori. both – abilita il selettore nell’autocompletamento e nel selettore di emoji. autocomplete – abilita il selettore solo nell’autocompletamento. emoji-picker – abilita il selettore solo nel selettore di emoji.

Inoltre, le stringhe del componente del tema sono traducibili dalle impostazioni.

Ripristino delle decorazioni emoji

Se disattivi il componente, questi suffissi rimangono, risultando in emoji come questa: f-spin:

A causa delle limitazioni e delle scelte di progettazione del componente del tema, aggiungiamo suffissi semplici alle emoji per conferire loro questi effetti decorativi. Il prefisso fluff f- aiuta a identificare queste decorazioni, rendendole facili da rimuovere tramite lo script disponibile di seguito.

Puoi scaricare ed eseguire un’attività rake per rimuovere definitivamente i suffissi fluff dai post.

wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all

L’attività rake non crea revisioni dei post per impostazione predefinita. Puoi aggiungere false come argomento per modificare questo comportamento: rake fluff:delete_all[false]

Leggi Administrative Bulk Operations per le istruzioni su come accedere al container per eseguire l’attività rake.

Esegui sempre un backup prima di eseguire questa attività. Non vi è alcuna garanzia che non rimuova stringhe indesiderate. Usala a tuo rischio e pericolo e rivedi il codice in caso di dubbi.

Creazione dei tuoi fluff

La creazione di fluff richiede conoscenze CSS.

Quando un fluff viene aggiunto a un’emoji all’interno di un post, l’emoji viene racchiusa da un tag con una classe fluff:

<span class="fluff fluff--bounce">
  <img src="https://your.discourse.com/images/emoji/twitter/kangaroo.png?v=12" title=":kangaroo:" class="emoji" alt=":kangaroo:" loading="lazy" width="20" height="20" style="aspect-ratio: 20 / 20;">
</span>

Aggiungi CSS personalizzato al tuo tema o a un nuovo componente del tema per aggiungere nuovi fluff.
Ecco due esempi di nuovi fluff:

Inclina un’emoji di 90°

.fluff--tilt img {
  transform: rotate(90deg);
}

Effetto di rotazione 3D

.fluff--spin3d img {
  animation: f-spin3d 2s infinite linear;
}

@keyframes f-spin3d {
  0% {
    transform: perspective(50em) rotateY(0deg);
    filter: brightness(1);
  }
  50% {
    transform: perspective(50em) rotateY(90deg);
    filter: brightness(0.85);
  }
  51% {
    transform: perspective(50em) rotateY(91deg);
    filter: brightness(1.15);
  }
  100% {
    transform: perspective(50em) rotateY(180deg);
    filter: brightness(1);
  }
}

Quindi, devi aggiungere il suffisso fluff in decorazioni consentite di Emoji Fluff:

Tutto qui; i tuoi nuovi fluff dovrebbero ora essere disponibili per gli utenti. Divertiti!

Crediti

• @Canapin: Idea originale, aiuto generale nella preparazione e nel test di questo TC.

---

1. Per essere precisi, TC richiede almeno una versione di Discourse successiva al 30 ottobre, e in particolare il supporto per il selettore di emoji, una versione attuale alla data 2024-11-26T23:00:00Z (grazie al team per aver aggiunto un plugin outlet pochi giorni fa!) ↩︎

[Lilly (Lillian Louis)]

haha questo è fantastico! molto bene!

[Monikas (JustMonika)]

Ho la sensazione che sia in conflitto con questo componente Omit Emoji component causando il mancato funzionamento della bacchetta magica del componente nell’interfaccia utente per la selezione delle emoji.

[Jagster (Jakke Lehtonen)]

Non uso quel componente, ma sto usando l’iPad e la bozza lo ha fatto un paio di volte, sto scrivendo un aiuto per gli utenti. La pubblicazione lo risolve.

[Bas (Bas van Leeuwen)]

Fantastico! Ben fatto!!

(piccola osservazione, “negativo” sarebbe una descrizione migliore di “inverti”?)

[Moin]

@Arkshine

Questo componente richiede che Discourse sia aggiornato alla data del 2024-11-26T23:00:00Z.

Hai aggiornato Discourse? Ricevi una notifica di aggiornamento solo quando viene rilasciata una nuova beta, ma ogni giorno vengono aggiunti nuovi commit.

[Arkshine]

@Bas

Questo è fantastico! Ben fatto!!

(piccola pignoleria, “negativo” sarebbe una descrizione migliore di “inverti”?)

Grazie!

Hai ragione, è stato rinominato ora!

DEV: Rename invert -> negative in alllowed_decorations

@Monikas

Ho la sensazione che entri in conflitto con questo componente Omit Emoji component causando il mancato funzionamento dell’interfaccia utente per quello che seleziona l’emoji, la bacchetta magica del componente

Come affermato da Moin, dovrai aggiornare Discourse.
Ho esaminato il codice del componente del tema e l’ho testato; una volta aggiornato Discourse, dovrebbero funzionare insieme senza problemi!

[joo (slower)]

Ciao, non vedo più l’opzione per aggiungere il componente Emoji Fluff. È ancora supportato?

[Arkshine]

Ho applicato una correzione parziale per farla funzionare con l’ultima versione di Discourse. Tuttavia, questa correzione riguarda solo la funzionalità di completamento automatico.

Attualmente, non sono in grado di risolvere il problema con il selettore di emoji. Recentemente, il team ha unificato il selettore di emoji con la chat in DEV: unifies emoji picker by jjaffeux · Pull Request #28277 · discourse/discourse · GitHub. Sfortunatamente, l’outlet del plugin nel footer del selettore di emoji, che in precedenza veniva utilizzato per inserire un interruttore, è stato rimosso nella nuova versione. Al momento, non ho una soluzione. Mi scuso per l’inconveniente!

[merefield (Robert)]

Un nuovo PR? Credo che accolgano queste cose?

[Arkshine]

Sì, lo farò!

Sto ancora pensando a possibili alternative.
Se guardi il nuovo selettore di emoji, ci sono alcuni spazi disponibili. Probabilmente non vuoi tagliare il testo segnaposto, ma questo è l’unico spazio che ha senso:

Potrebbe andare bene per un’icona. Ma penso che creare una presa per plugin qui non sembri ragionevole.

[merefield (Robert)]

Grande divertimento!

Obiettivo ambizioso:

Animazione 3D

Emojis, would it be prudent for Discourse to Fork Twemoji?

They have stopped, the last update on the repo is 3 years old. The fork is up-to-date with recent official emojis absent from the original Twemoji set. I’m thinking of and that I use in my everyday life, I miss them on Discourse! They currently render as ‍ and ‍↔.

[Arkshine]

@merefield

Aprire una PR? Credo che gradiscano queste cose?

Per rispondere a questo, ho fatto qui:

DEV: Add emoji-picker-filter-container plugin outlet

Una delle cose buone del selettore di emoji unificato è che Fluff funzionerà con la chat!

Spero che la PR riceva un po’ di attenzione!

@merefield

Animazione 3D

Si sono fermati, l’ultimo aggiornamento sul repo risale a 3 anni fa. Il fork è aggiornato con le recenti emoji ufficiali assenti dal set Twemoji originale. Sto pensando a slightly_smiling_face‍↕️ e slightly_smiling_face‍↔️ che uso nella mia vita quotidiana, mi mancano su Discourse! Attualmente vengono visualizzate come slightly_smiling_face‍arrow_up_down e slightly_smiling_face‍↔.

Con animazione 3D, intendi puro CSS con trasformazione 3D?
Come questo:

[merefield (Robert)]

No, intendevo un effetto completamente 3D di qualcuno che scuote la testa, il che ovviamente non è banale.

Possibilmente meglio affrontato usando gli sticker?

[Arkshine]

Altro del genere allora?

Animated Emoji

---

MODIFICA:

Oh, @merefield, capisco cosa intendi con Plugin for animated stickers!

Immagino che sarebbe fuori dall’ambito di questo TC. Non sarebbe facile trovare la versione 3D di ogni emoji.

Mi piace molto l’idea degli adesivi di falco!

[Arkshine]

Il TC è stato aggiornato per renderlo pienamente compatibile con l’ultima versione di Discourse.

Questo aggiunge anche il supporto per la chat!

DEV: Ensure compatibility with core + chat support

[Heliosurge (Dan DeMontmorency)]

Crea un nuovo TC, ‘Emoji-fluff Extras’ e aggiungi i tuoi 2 nuovi effetti fluff

Aggiunti spin3d e tilt all’elenco consentito di emoji fluff. Il nuovo esempio di emoji fluff non funziona. Aggiunto il CSS a common nel TC personalizzato. Assicurati di aggiungerlo a tutti i temi.

[Arkshine]

Se hai aggiunto, ad esempio, tilt all’impostazione e il fluff non funziona, è molto probabile che il CSS non sia disponibile a meno che tu non abbia fatto un errore di battitura. Puoi ricontrollare il tuo CSS?

(Volevo guardare il tuo forum ma non riesco ad accedere. Non ricevo alcuna email e non riesco nemmeno ad accedere con Steam (per qualche motivo, mi chiede ancora di controllare la mia email))

[Heliosurge (Dan DeMontmorency)]

Ho attivato il tuo account

Dovrò occuparmi dell’invio delle email. Dovrai avere un account prima di poter aggiungere l’accesso a Steam.

Il CSS è stato copiato utilizzando la copia rapida nei tuoi blocchi di codice.

Tutto quello che ho fatto con tilt è stato clonarlo due volte cambiandolo in “tilt45” e “tilt90”. “spin3d” nessuna modifica.

Impostazione emoji-fluff

Contenuto CSS aggiuntivo per emoji-fluff in Common

.fluff--tilt45 img {
  transform: rotate(45deg);
}
.fluff--tilt90 img {
  transform: rotate(90deg);
}
.fluff--spin3d img {
  animation: f-spin3d 2s infinite linear;
}

@keyframes f-spin3d {
  0% {
    transform: perspective(50em) rotateY(0deg);
    filter: brightness(1);
  }
  50% {
    transform: perspective(50em) rotateY(90deg);
    filter: brightness(0.85);
  }
  51% {
    transform: perspective(50em) rotateY(91deg);
    filter: brightness(1.15);
  }
  100% {
    transform: perspective(50em) rotateY(180deg);
    filter: brightness(1);
  }
}

Nota Problema di invio email identificato. Ho superato il mio limite di 300 giorni di poco più di 109. Dovrò presto passare a un piano a pagamento. Grazie per l’avviso.

[Arkshine]

Hai risolto il tuo problema?

Per me funziona: