Reações Personalizadas do Discourse

[Don]

Olá,

Fiz algumas modificações de CSS no Plugin Discourse Reactions. Agora, ele se parece muito com os botões de reação do Facebook.

Estes são para 6 botões de reação, incluindo o padrão que está no meu site: .

COMUM / SCSS
Coloque este código na seção comum de CSS.
Aviso importante: Você pode modificar os emojis acima do rótulo editando as linhas content: 'Love it!', content: 'Beautiful', etc… Obviamente, você pode usar qualquer reação que desejar. É apenas um rótulo acima das reações.

.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: 'Adorei!';
      }
    }
    &:nth-child(2) {
      &:hover:after {
        content: 'Lindo';
      }
    }
    &:nth-child(3) {
      &:hover:after {
        content: 'Abraço';
      }
    }
    &:nth-child(4) {
      &:hover:after {
        content: 'Parabéns!!';
      }
    }
    &:nth-child(5) {
      &:hover:after {
        content: 'Hmm...';
      }
    }
    &:nth-child(6) {
      &:hover:after {
        content: 'Uau!';
      }
    }
  }
}

---

Mobile

No mobile, defini a posição do seletor de reações como fixa.

Esta é uma opção possível para evitar esse comportamento estranho.

Fica assim

A mesma coisa acontece com o painel de estado no mobile que estava no seletor de reações, então use também a posição fixa.

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

---

Ocultar a seção padrão de quem gostou

COMUM / CSS

Eu ocultei a seção padrão de quem gostou porque o Painel de Estado das Reações também mostra essas informações.

.who-liked {
  display: none;
}

[frold]

Gosto muito …

[Heliosurge (Dan DeMontmorency)]

Legal, isso funciona muito bem. Obrigado por compartilhar

[PaulinaMX (ForosMX)]

Eu já o instalei e adoro.

Uma pergunta:

É possível remover aquele hover preto?

[Don]

Olá, Paulina,

Fico muito feliz que você tenha gostado Obrigado!

Para ocultar o painel da lista de usuários com hover escuro, use este código

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

[PaulinaMX (ForosMX)]

Funcionou para mim! Adoro o visual, muito obrigado.

[neo (R.Zhang)]

Olá, Don,

Adoro muito sua personalização. Um ótimo trabalho e obrigado!
Mas ainda tenho uma pergunta: como remover o hover preto como este?

[Don]

Olá, Neo,

Obrigado

Infelizmente, não é possível ocultar o atributo de título com CSS, mas você pode editar o texto js.discourse_reactions.picker.react_with em /admin/customize/site_texts para torná-lo mais curto.

[neo (R.Zhang)]

Obrigado, terminei com isso, agora está melhor!

[jayarr (JR)]

Isto é fantástico, @Don. Muito obrigado.

Estou pensando em usar isso na minha configuração do Discourse, mas atualmente temos duas linhas de opções de reação (seis emojis por linha, totalizando 12 emojis).

Eu sei o suficiente de CSS para me virar, mas realmente não é o meu forte.

Quão difícil seria ajustar este código para que funcionasse para esse tipo de arranjo?

Realmente aprecio você compartilhar isso (mesmo que eu esteja bastante atrasado na festa!).

[Don]

Obrigado JR Acho que vou criar um componente de tema a partir disso para facilitar o uso e adequar às reações, adicionar algumas correções etc… Espero que ajude. Tentarei fazer isso na próxima semana.

[jayarr (JR)]

Muito obrigado, @Don! Seria incrível e um complemento/adição muito apreciado. Com certeza ficarei de olho.

[PaulinaMX (ForosMX)]

@Don

Obrigado JR Acho que vou criar um componente de tema a partir disso para facilitar o uso e adequar às reações, adicionar algumas correções etc… Espero que isso ajude. Tentarei fazer isso na próxima semana.

[Don]

Olá,

Eu criei um componente de tema a partir disso. Acho que facilita.

Graças ao componente de tema feito anteriormente por @manuel Category List with Banners, posso implementar facilmente a configuração da lista no rótulo das reações. Obrigado

Adicionei correções e algumas configurações:

1. reactions_label
   Separe com ponto e vírgula ;
nome da reação;rótulo da reação
   

2. reactions picker rounding
   Arredondamento dos cantos do seletor de reações (border-radius). Você pode usar px, em, etc.
   Padrão 1em.
   

   
   
   Se você quiser torná-lo mais ou menos arredondado, altere esta configuração.
   A versão anterior era 2em.
   
   

3. state panel rounding
   Arredondamento dos cantos do Painel de Estado de Reações (border-radius). Você pode usar px, em, etc.
   

   

4. user list rounding
   Arredondamento dos cantos da Lista de Usuários de Reações (border-radius). Você pode usar px, em, etc.
   

   

5. hide user list heading
   Esta opção ocultará o título da lista de usuários no painel. O título é smiley nesta imagem.
   

   

6. hide user list
   Esta opção ocultará o painel da lista de usuários. Este é o painel escuro em destaque.
   

   

7. hide who liked
   Esta opção ocultará a seção padrão “quem curtiu”.
   

   

Tenho mais alguns planos com este componente, que adicionarei mais tarde.

GitHub - VaperinaDEV/discourse-custom-reactions