Buracos de Mensagem Pessoal

:exclamation: A funcionalidade deste Componente de Tema foi adicionada ao núcleo do Discourse a partir da versão 2.8.0. Você não terá muita sorte se continuar a usá-lo após atualizar para versões superiores a essa!

Criei um componente de tema para alterar o estilo das mensagens pessoais para balões, ajudando a distingui-las dos tópicos.

Configurações:

  • Defina a cor de fundo do balão como as cores primária, secundária ou terciária do seu tema, ou selecione entre outras cores comuns.
  • Selecione cores diferentes para ajudar a distinguir as mensagens que você envia das mensagens recebidas.
  • Defina a opacidade de fundo do balão — quanto maior a porcentagem, mais profunda será a cor.
  • Escolha se deseja exibir o balão de mensagem com uma sombra.
  • Opcionalmente, adicione texto ao botão “Responder à Mensagem” para distingui-lo do botão “Responder ao Tópico”.

Você pode selecionar entre uma variedade de cores ou escolher cores da sua paleta para combinar com seu tema. Também é possível definir a opacidade de fundo do balão em relação à cor e ao fundo.

Instale este componente de tema

70 curtidas

This is soooooo cool, @Rhidian!!!

I’m curious about something because I’ve never messed with plugins before…

Is it possible to allow a hex code with opacity, instead of just allowing system colors? No problem if that’s a bunch of extra work. Just curious.

What if I wanted to change the styling? of the shadow or other CSS. I’m not super savvy with Github and how all of that works, but I looked in your .git repository before copying it into my theme components. I do know how to write CSS. Can I make a copy of your plugin and then tweak the CSS file that you have and then upload this a new theme component with the styling that I want?

If you could point me to any instruction on how to modify a plugin that would be awesome. Or, I suppose I could just do a CSS override, on the front end. Is one option better than the other in terms of performance?

Again… Thank you so much for this… it’s just the solution I was looking for to differentiate DM’s from regular topics!

4 curtidas

Thank you @jord8on . It’s great to get feedback like this.

I’ll make Drop shadow customisable as a setting option.

Regarding creating/editing you own CSS it’s easy. Load the component then click the Custom CSS/HTML section on the component settings.

Simplly edit the CSS sheet and click save. These are your own customisations. If you want to share them and incorporate them into the component for everyone to benefit you can simply post up the CSS to this topic in discourse meta - or as a longer term objective learn how to do pull requests in Github and/or fork the repository if you are making making more substantial changes.

3 curtidas

Thank you @Rhidian!!!

:gift:

This is such a simple solution to make DM’s significantly distinguished from the standard topics on our forum.

I just asked a member what they thought of it and they were soooo happy to have it. They complimented the idea and the execution, so I’m just passing that along to you!!

6 curtidas

I have updated this theme component so you can now enter your own colors using either

  • html color names ( black, white, maroon, red, purple, green, lime, olive, yellow, navy, blue, teal, aqua)
  • html color codes (#000000 black, #FFFFFF white etc. or short codes e.g. #CCC)
  • theme color names (primary, secondary, tertiary)

You can also enter your own message text colors in the same way to contrast with the bubble color.

The opacity setting allows you to blend the bubble color with the background, so that the color will change with your theme color settings - e.g. for Light and Dark themes.

This update is backwards compatible. To access this feature use the Check for Updates button on your theme settings.

9 curtidas

Trabalho fantástico nisso, @Rhidian!

1 curtida

Desativei as bordas com CSS personalizado e fiz apenas uma mudança sutil de cor, o que ficou legal. Seria ótimo se houvesse uma opção para modificar as bordas ou apenas um interruptor de ligar/desligar.

1 curtida

Olá @ggurbet, por favor, você pode postar uma captura de tela e compartilhar o CSS que você alterou?

@Rhidian, as bordas estavam muito chamativas, então as removi. Ignore as minhas cores :slight_smile:

Captura de tela para o tema claro:

Captura de tela para o tema escuro:

Adicionei isso ao CSS > Comum:

// Componente de Bolha de Mensagem Pessoal - Sem borda
.archetype-private_message .topic-body .contents {
    border: none !important;
}
3 curtidas

Adorei isso!

Solicitação

  • Seria possível disponibilizar também a cor quaternária?
  • Notei um erro de ortografia nas instruções. Terciário está escrito como teriário.

Screenshot of Google Chrome (3-8-21, 10-19-25 AM)

2 curtidas

Muito legal. Gostei :grin:

Adicionei a opção para remover a borda, a opção quaternária e corrigi a grafia da terciária.

Obrigado @ggurbet @debryc

Shaun The Sheep Movie Ok GIF

7 curtidas

Isso foi rápido, obrigado!

A propósito, como você pode ver, instalei o componente duas vezes e defini cores escuras para o nosso tema escuro e cores claras para o nosso tema claro. Acho que não há outra maneira se quisermos usar cores CSS personalizadas.

Também uma pequena sugestão: você permite adicionar algo ao final do botão de resposta, mas em alguns idiomas (como o turco) é mais preferível adicionar algo no início, pois o verbo fica no final das frases nesses idiomas.

Sim, essa é uma boa solução alternativa. A mudança planejada no Discourse para remover a capacidade de modificar localmente temas e componentes do Discourse terá algum impacto na sua implementação? Claramente, tem sido útil aqui.

1 curtida

Não, não é. Apenas algumas modificações menores no CSS resolvem o problema.

Estava me referindo a este anúncio na versão Beta. Você ainda pode modificar o CSS, mas precisará criar um novo componente de tema, que não estará mais vinculado ao repositório Git, e copiar todo o código. Foi isso que você fez ou optou pela solução simples de apenas editar o CSS no componente?

Isso me parece problemático. Eu preferiria manter a capacidade de editar temas in loco. Isso certamente ajuda no desenvolvimento de temas/componentes.

1 curtida

Tenho um componente local chamado “common sub-theme” onde faço edições para outros componentes. Nesse sub-tema, alvo classes, elementos etc. de outros componentes. Enquanto o autor do componente não alterar os nomes de suas classes, ids etc., estou bem e isso funciona. Atualmente, como você também incluiu a remoção da borda, não preciso de nenhuma modificação no meu sub-tema para o componente Personal Message Bubbles, a propósito.

1 curtida

Olá e obrigado por este componente de tema maravilhoso. :trophy:

Um bug potencial: Parece que a opção de texto “anexado” inclui um espaço antes da string na parte inferior do tópico da mensagem, mas não o inclui na janela do editor. Veja abaixo:

2 curtidas

@Rhidian, você também pode adicionar a opção de prefixar texto ao botão de Resposta? Em alguns idiomas (como o turco), faria sentido adicionar algum texto ao início de um verbo.

1 curtida

Ótimo componente!
Temos algo semelhante para posts reais em tópicos? Quero dizer, um componente que faz os posts parecerem balões de mensagem!

Adicionei a opção de adicionar texto antes do botão Responder. Isso também oculta a seta de resposta SVG antes do texto Responder.

1 curtida