Barra lateral de bate-papo

Componente de tema
1
:information_source: Resumo Abre automaticamente e exibe o chat como uma barra lateral, desde que haja espaço, e aproveita a altura
:hammer_and_wrench: Repositório GitHub - Arkshine/discourse-chat-sidebar
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo em Temas do Discourse? Guia para iniciantes no uso de Temas do Discourse

Instalar este componente de tema

Créditos: @Alon1 (solicitação patrocinada)[1]

Este componente de tema visa abrir automaticamente e exibir o chat como uma barra lateral, desde que haja espaço, e aproveitar a altura.

  • Suporte ao redimensionamento de janelas
  • Suporte ao composer
  • Pode ser fixado no conteúdo ou na janela em ambos os lados
  • O usuário pode escolher a posição (salvo no armazenamento local do navegador)
  • Pode reverter para o estado original do chat se ele foi aberto anteriormente
  • As preferências originais do usuário do chat não são tocadas
  • Suporte parcial a temas (a maioria dos populares)

Isso deve funcionar na maioria dos temas.
Me avise se faltarem opções ou algo não funcionar em um tema! :smile:

Configurações

Nome Padrão Descrição
breakpoint auto Ponto de interrupção em px para que a barra lateral do chat apareça.
Defina como auto para usar a largura padrão da barra lateral e do conteúdo como um ponto de interrupção natural (recomendado).
width 400px Largura da barra lateral do chat.
position [2] right Posição da barra lateral do chat.

left: Fixar no lado esquerdo do conteúdo
right: Fixar no lado direito do conteúdo
outside-left: Fixar no lado esquerdo da janela
outside-right: Fixar no lado direito da janela
theme_style Quando possível, use o estilo do tema atual nestas posições da barra lateral do chat.
Disponível apenas para a maioria dos temas populares.
Esta não é uma configuração confiável (o nome do tema pode ser alterado).
Desative para usar o estilo de tema padrão.
allow_user_preference[3] Permite que os usuários definam suas preferências de barra lateral de chat.
Nota: isso é salvo no armazenamento local do navegador do usuário.

Valores disponíveis:
position: Permite que os usuários definam a posição da barra lateral do chat

A Fazer

  • Testes
  • Transições mais suaves
  • Mais preferências do usuário?

Notas de Desenvolvimento

Inicialmente, tentei inserir o componente <ChatDrawer /> em outro outlet para que fosse mais fácil manipulá-lo e mantê-lo no fluxo. Infelizmente, o componente original não pode ser suprimido inteiramente (estou pensando nos eventos). Pelo menos, não consegui encontrar uma maneira de substituí-lo.

Isso me deixa sem escolha a não ser seguir o caminho difícil do JS, a custo de um pouco mais de uso intensivo da CPU, mas menos intrusivo (embora o redimensionamento manual só aconteça às vezes).

  1. Se interessado, o caso de uso de Alon aqui. ↩︎

  2. Certifique-se de atualizar a página. ↩︎

  3. Importante: esta configuração usa a API mais recente para mostrar o ícone no cabeçalho e requer a versão mais recente do Discourse. ↩︎

24 curtidas
2

Ótimo trabalho! :clap: :slight_smile:

3

Isso suporta Discourse Bars 🍻 🍸 (a sidebar framework) , porque seria bom combiná-lo com outros widgets de barra lateral?

7 curtidas
4

Infelizmente, no momento não é possível dar suporte às Discourse Bars.

O componente usa o drawer de chat original, e o posicionamento é feito manualmente. A menos que possamos usar/mover o componente original <ChatDrawer /> onde quisermos, acredito que seria difícil. Concordo, no entanto; isso seria ótimo! :slight_smile:

Pelo menos pode ser exibido ao lado da barra lateral da Bar

Meu componente usa o elemento #main-outlet-wrapper como referência, então qualquer coisa dentro funcionará bem.

image
image1997×897 88.9 KB

4 curtidas
5

OMG, isso é ótimo!

3 curtidas
6

Isso funciona apenas se o painel lateral estiver recolhido? Percebo que se eu não recolher meu painel lateral, a barra lateral de chat não aparece.

1 curtida
7

Nesta versão atual, o conteúdo principal não é forçado a encolher se não houver espaço suficiente para colocar a barra lateral de chat. É assim que foi projetado.

Talvez existam situações em que isso possa ser útil. Não me importo em adicionar uma opção para o usuário permitir isso. :thinking:

1 curtida
8

Ok, entendi, obrigado pelo componente, ele funciona muito bem.

1 curtida
9

Acredito que este componente não está mais funcionando a partir do \3.6.0.beta2-latest\\? Não importa o que eu escolha, ele está sempre à direita, como a experiência padrão… Está funcionando para alguém aí?

Este componente está funcionando como esperado agora! Eu estava testando na tela do meu Macbook a maior parte do tempo e, quando o componente não tem espaço suficiente, ele simplesmente não mostra nada, o que provavelmente é o motivo da minha confusão. Isso está funcionando perfeitamente agora.

2 curtidas
10

Ainda não testei, mas obrigado por relatar, verificarei em breve!

2 curtidas
11

super componente :+1: é uma ótima ideia

12

Fiz um PR para corrigir as depreciações conhecidas. :+1:

Obrigado a @DevTeVe por testá-lo!

4 curtidas
13

Muito obrigado por ir além para me ajudar :heart:!

Então, eu estava conversando offline com o @Arkshine e, como tive algumas sugestões, decidimos que este seria um lugar melhor para deixá-las!

  1. Janela de chat redimensionável (largura e altura)
  2. Permitir que ela ainda fique flutuando, mesmo que cubra o texto na tela.
  3. Seria ótimo se a largura também fosse automática; dessa forma, ela sempre encontraria uma maneira de se ajustar, mesmo que pareça pequena, e nas configurações (não como padrão), teríamos algo como “largura mínima em px” e um aviso que diz: “Se definido, o chat voltará ao padrão se não tiver pelo menos o valor xxx.”
2 curtidas