|||
|:discourse2:| Resumo | Adiciona variações ou animações opcionais a emojis.
| 
| Pré-visualização | Pré-visualizar em theme-creator.discourse.org|
|:hammer_and_wrench:| Link do Repositório |
|:open_book:|Novo no Discourse Themes? | Guia para iniciantes sobre como usar temas do Discourse
Instalar este componente de tema
Este componente requer que o Discourse esteja atualizado a partir de 2024-11-26T23:00:00Z. [1]
Descrição
O Emoji Fluff permite que os usuários coloquem emojis espelhados ou animados em suas postagens.
Ele permite que os usuários postem trabalhos de emoji sofisticados, como:
Você pode escolher essas decorações no pop-up de autocompletar de emojis, no seletor de emojis ou anexando palavras-chave diretamente após o shortcode do emoji:
Exemplos: :bike:f-slide , :smile:f-bounce
Inversões horizontais e verticais podem ser combinadas com outras decorações.
Exemplos:
:horse:f-slide,flip::spider:f-float,flip_v:
Capturas de tela
Fluff de emoji disponível
Como adicionar fluff a um emoji
Do pop-up de autocompletar de emojis
Do seletor de emojis
Digitando manualmente o sufixo de fluff
Funcionalidades
-
Emojis espelhados horizontal ou verticalmente
-
Emojis animados (pulo, rotação, pulsação, etc.)
-
Configuração para escolher quais decorações de emoji devem estar disponíveis para os usuários
-
Configuração para escolher a inserção de um seletor de decorações no autocompletar ou no seletor de emojis.
-
Permite que administradores criem novos fluffs
Configurações
| Configuração | Descrição |
|---|---|
| habilitado | Ativa ou desativa as funcionalidades do componente. Valor padrão: trueDesabilitar impedirá que a decoração do emoji seja aplicada. Isso é útil se você quiser pausar ou planeja remover o componente, mas não quer ver o código de decoração, como Para mais informações, confira Revertendo decorações de emoji no tópico. |
| permitir decorações | Lista de decorações permitidas. Valor padrão: flip|flip_v|spin|pulse|bounce|wobble|float|slide|fade|negative|hue|gray |
| permitir seletor em | Onde o seletor de fluff deve estar disponível. Valor padrão: bothnone – desabilita os seletores.both – habilita o seletor no autocompletar e no seletor de emojis.autocomplete – habilita o seletor apenas no autocompletar.emoji-picker – habilita o seletor apenas no seletor de emojis. |
spin:
Adicionalmente, as strings do componente de tema são traduzíveis a partir das configurações.
Revertendo decorações de emoji
Se você desabilitar o componente, esses sufixos permanecem, resultando em emojis como este: 
f-spin:
Devido às limitações e escolhas de design do componente de tema, adicionamos sufixos diretos aos emojis para dar a eles esses efeitos decorativos. O prefixo de fluff f- ajuda a identificar essas decorações, tornando-as fáceis de remover através do script disponível abaixo.
Você pode baixar e executar uma tarefa rake para remover os sufixos de fluff definitivamente das postagens.
wget -P lib/tasks/ https://raw.githubusercontent.com/Arkshine/discourse-emoji-fluff/refs/heads/main/tasks/fluff.rake
rake fluff:delete_all
A tarefa rake não cria revisões de postagem por padrão. Você pode adicionar false como argumento para mudar esse comportamento: rake fluff:delete_all[false]
Leia Administrative Bulk Operations para instruções sobre como entrar no contêiner para executar a tarefa rake.
Sempre faça um backup antes de executar esta tarefa. Não há garantia de que ela não removerá strings indesejadas. Use-a por sua conta e risco e revise o código se tiver dúvidas.
Criando seus fluffs
A criação de fluff requer conhecimento de CSS.
Quando um fluff é adicionado a um emoji dentro de uma postagem, o emoji é envolvido por uma tag <span > com a 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>
Adicione CSS personalizado ao seu tema ou a um novo componente de tema para adicionar novos fluffs.
Aqui estão dois exemplos de novos fluffs:
Inclinar um emoji em 90°
.fluff--tilt img {
transform: rotate(90deg);
}
Fazer um efeito de giro 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);
}
}
Em seguida, você precisa adicionar o sufixo de fluff em decorações permitidas do Emoji Fluff:
É isso; seus novos fluffs agora devem estar disponíveis para os usuários. Aproveite!
Créditos
- @Canapin: Ideia original, ajuda geral na preparação e teste deste TC.
Para ser preciso, o TC requer pelo menos uma versão do Discourse após 30 de outubro, e especificamente o suporte ao seletor de emojis, uma versão atual a partir de 2024-11-26T23:00:00Z (graças à equipe por adicionar um outlet de plugin há alguns dias!) ↩︎
