Chat – bolhas do WhatsApp

[chapoi]

O chat ainda está em desenvolvimento ativo, portanto, este componente provavelmente é instável e está em beta por enquanto. Feedback e relatórios de bugs são bem-vindos.

	Resumo	Uma skin inspirada no WhatsApp para chat (mobile)
	Prévia	Theme Creator (apenas visualização mobile)
	Repositório	GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile)
	Guia de Instalação	Como instalar um tema ou componente de tema
	Novo em Temas do Discourse?	Guia para iniciantes no uso de Temas do Discourse

← Preencha "repoName" e "repoURL" para o botão de instalação automática →

Instalar este componente de tema

Instruções para prévia

1. Certifique-se de visualizar isso em uma tela pequena.
2. Não se esqueça de adicionar ?mobile_view=1 à URL para obter a visualização correta.
3. Faça login para ter acesso ao chat.

Descrição

← Descreva este tema/componente em uma ou duas frases →

Um estilo de mensagem em bolha, aplicado apenas no mobile.

← Adicione mais detalhes e explique as configurações (se aplicável) →

Configurações

O componente vem com um fundo embutido mostrado acima. Isso pode ser alterado nas configurações. Recomenda-se o uso de um padrão svg. Este site tem alguns gratuitos.

Você também pode escolher as cores das bolhas e o fundo atrás do padrão, ou desativar o padrão completamente.

Se você deixar qualquer configuração clara ou escura vazia, as bolhas serão definidas como secondary e tertiary-low. Se você deixar a cor de fundo vazia, ela será definida como primary-high.

Usar uma imagem completa como fundo também pode funcionar, mas você precisará garantir que o tamanho seja otimizado para a visualização mobile.

Modo Escuro

Você pode escolher cores de fundo e bolhas diferentes para o modo escuro.
Para evitar ter que mudar o padrão de fundo, ele usa uma mesclagem de fundo no modo escuro.

Para melhores resultados, escolha um padrão de cor clara que funcione bem no modo claro, e ele deve ser automaticamente atenuado no modo escuro (infelizmente não em todos os dispositivos – veja abaixo).

Problemas conhecidos

• Os carimbos de data/hora para suas próprias mensagens estão em uma posição diferente das mensagens de outras pessoas
• Não tem modo escuro (ainda)
• O modo escuro age de forma estranha em alguns dispositivos
• Não funciona bem com o threading ativado

[fbpbdmin (deepblue)]

isto é muito bom!

uma sugestão,
é possível deixar que todos mudem sua própria imagem de fundo?

e o SVG do circuito padrão é renderizado de forma diferente nos temas escuros do iPhone e Android
no iPhone, as linhas parecem mais brilhantes, não como o exemplo na postagem da documentação… não tenho certeza por quê…

[Jagster (Jakke Lehtonen)]

Posso desativar o padrão de fundo totalmente?

@fbpbdmin

possível deixar todos mudarem sua própria imagem de fundo

Eu diria que isso é realmente difícil e, se puder ser feito, precisará de um plugin. Mas não me lembro de nenhum plugin que ofereça uma opção para os usuários ajustarem tais coisas. Seria bom, no entanto. Mas também poderia levar a um pesadelo de UX quando as preferências estão aqui, ali e em todos os lugares.

Um usuário nem consegue ajustar a caixa de ferramentas do compositor, e esse seria um recurso importante.

[chapoi]

@fbpbdmin

é possível deixar que todos mudem sua própria imagem de fundo?

@Jagster

Eu imagino que isso seja realmente difícil e, se puder ser feito, precisará de um plugin.

Sim, infelizmente isso é outra história. Se o interesse for grande o suficiente para esta skin em geral, adoraria expandir isso, mas por enquanto isso não vai acontecer.

@Jagster

Posso desativar totalmente o padrão de fundo?

Ah sim, isso é fácil o suficiente. Posso fazer uma atualização para isso.

[fbpbdmin (deepblue)]

@chapoi você poderia tentar o tema escuro no iPhone, a maioria dos padrões é renderizada de forma estranha lá.

digamos, o padrão, no escuro do iPhone, os links são brancos, parece muito carregado

ele parece ok no tema escuro do Android, no entanto…

obrigado

[chapoi]

Nossa, que legal! Vou tentar dar uma olhada no modo escuro durante o fim de semana.

[chapoi]

Adicionei uma configuração para desativar completamente o padrão.

Os problemas do modo escuro no iPhone são devido a um bug no Safari, que impede que a propriedade background-mode-blend funcione quando background-repeat é usado… Bastante irritante e ainda não tenho uma solução alternativa.

Pode acabar sendo necessário fazer dois uploads separados para o modo escuro/claro, o que não é nada elegante.

De qualquer forma, recomendo por enquanto usá-lo sem o padrão, se você estiver no iPhone e usar seu dispositivo no modo escuro.

[Falco]

@chapoi

@fbpbdmin

é possível deixar que todos mudem sua própria imagem de fundo?

@Jagster

Eu acho que isso é realmente difícil e, se puder ser feito, precisará de um plugin.

Sim, infelizmente isso é outra liga. Se o interesse for grande o suficiente para esta skin em geral, adoraria expandir isso, mas por enquanto isso não vai acontecer.

Talvez uma opção de usuário para usar sua imagem existente de “Fundo do Cartão do Usuário” como fundo do chat?

[Roi]

@chapoi

Bem irritante e ainda não tenho uma solução.

Sim, o mesmo aqui:

Mas fica ótimo no Android:

Sem um padrão, fica sem graça. Deixei ativado por enquanto, mas os usuários de Apple começaram a reclamar.

[digitaldominica]

Olá @chapoi, existe uma maneira de alterar o ícone de resposta de chat para uma seta para a esquerda real em vez do ícone de compartilhamento que aparece como d-icon-share?

[chapoi]

Não especificamente com este componente de tema, não.

Você poderia seguir algo como isto

Help replacing an icon

I am trying to replace the bars icon for opening/closing the sidebar following these instructions Replace Discourse's default SVG icons with custom icons in a theme but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) [image] Created a component and uploaded the spritesheet: [image] And used this code (I only want the change on desktop) [image] But I just get no icon: [image] Any ideas? I’m sure I…

para substituir todas as instâncias do ícone. (Não acho que usamos o ícone de compartilhamento em nenhum outro lugar, então isso poderia funcionar).

Para substituí-lo apenas lá envolveria um pouco mais de complexidade, apenas não tenho certeza do quê.

[digitaldominica]

Ok, obrigado, vou tentar. Eu uso o Kodular Community Theme e o mesmo ícone aparece nos tópicos para os quais respondo. Gostaria de saber se isso faz parte especificamente do tema. Vou perguntar ao desenvolvedor agora.

[digitaldominica]

Obrigado por este componente.

Fiz um pequeno ajuste no mobile.scss nas linhas 55-62

.chat-messages-scroll {
  background-color: var(--bubble-bg);
  background-image: url(check-empty($background-pattern, $enable_pattern));
  background-blend-mode: var(--bubble-bg-mode);

}
.chat-messages-container {
  padding: 0;

Anteriormente, o plano de fundo era aplicado ao .chat-messages-container e, ao rolar, meu plano de fundo se movia com as mensagens, desta forma ele permanece no fundo.

Notei que havia duas instâncias de .chat-messages-container no chat móvel, o que causou essa replicação no plano de fundo.

[chapoi]

Obrigado, excelente detecção de uma falha boba. Corrigido.

[digitaldominica]

Olá, parece que o fundo do chat não está mais visível no chat, não estou vendo mais o CSS sendo adicionado ao contêiner do chat. Atualmente estou usando a versão 3.3.0.beta2

[chapoi]

Olá! Obrigado pelo relatório; houve muitas alterações no chat e provavelmente preciso atualizar este componente.

Tentarei fazer em breve!

[eisammy (Sammy)]

Tentei experimentar este componente de tema há alguns dias. Se quiser, posso postar aqui as capturas de tela dos erros, pois desejo ativá-lo novamente.

[eisammy (Sammy)]

@chapoi Simplesmente maravilhoso… os erros sumiram aparentemente. planos para implementar isso na versão desktop?

[Earnie_Baird (Earnie)]

Acabei de testar isso. É incrível, mas como outros já relataram, não parece permitir que você altere a cor ou o padrão do plano de fundo.

Com o plano de fundo claro padrão, as bolhas brancas realmente se misturam ao fundo.

[eisammy (Sammy)]

Um novo bug do Instagram link