Links de ícones sociais clicáveis no perfil

[weallwegot (juicecounty.prodigy)]

Um Componente de Tema que inclui ícones sociais clicáveis no Perfil do Usuário e nos Cartões de Usuário, caso você esteja usando o Componente de Tema Diretório de Cartões de Usuário.

Ele foi copiado em 99% da discussão e dos exemplos de código fornecidos por @LeoMcA, incluídos nesta conversa no Meta e no Namati User Card Profile Theme, mas achei útil extraí-lo do tópico e torná-lo um pouco mais genérico.

Observações

• Qualquer usuário que não incluir um valor para uma entrada não terá o ícone correspondente exibido no cartão/perfil do usuário.
• Os campos personalizados de usuário do Instagram e do Twitter esperam apenas os nomes de usuário (sem “@” incluído); o nome é adicionado à URL base.
• Recomendo que os Campos Personalizados de Usuário que terão ícones NÃO sejam exibidos no Cartão de Usuário, pois isso tornaria redundante ter o texto e os ícones clicáveis. É apenas minha opinião, o tema não os oculta automaticamente.

Configurações do Site

Cada entrada de nome de campo personalizado deve corresponder ao nome do campo de usuário personalizado que você define na sua instância do Discourse. Por padrão, o componente de tema espera que os nomes sejam os mostrados abaixo, mas você pode, claro, alterá-los. As strings são sensíveis a maiúsculas e minúsculas.

instagram_custom_field_name: 'Instagram'
twitter_custom_field_name: 'Twitter'
linkedin_custom_field_name: 'Perfil LinkedIn'

Aproveite!

	Repositório no Github	Discourse-Social-Links-Clickable
	Guia de Instalação	Como instalar um tema ou componente de tema

[davidkingham]

Ótimo trabalho! O único problema que vejo é que a insígnia do avatar é deslocada para baixo por causa disso. O ícone da árvore deveria sobrepor meu avatar.

[weallwegot (juicecounty.prodigy)]

Ah, obrigado por testar e encontrar isso.
Acho que não tenho nenhuma flair nas minhas comunidades.
Olhei na sua e acho que é o tamanho dos ícones que está deixando o cartão maior. Não sou muito expert em CSS, mas acho que vou ter que aplicar uma margem condicional ao avatar para usuários que têm ícones.

[davidkingham]

Observe que o botão de mensagem e o fundo também se movem. Consegui corrigir tudo com isso, mas sim, precisa ser aplicado condicionalmente

#user-card.no-bg .card-content {
    margin-top: 0px;
}

.user-card-avatar .avatar-flair.rounded, .user-profile-avatar .avatar-flair.rounded {
    bottom: 19px;
}

#user-card .usercard-controls {
    margin-top: 0px !important;
}

[bartv (Bart)]

Há uma incompatibilidade com o plugin Follow: este TC funciona normalmente quando estou logado, mas ao acessar o site como usuário anônimo, os cartões de usuário e a página de perfil do usuário estão quebrados.

Atualização: isso não está relacionado aos links de ícones sociais do TC. Vou relatá-lo no tópico do plugin Follow.

Em /logs, vejo:

NoMethodError (método id não definido para nil:NilClass) /var/www/discourse/plugins/discourse-follow/plugin.rb:74:in `block (2 levels) in activate!’

cc @angus

[Solari]

Gosto muito! Meu único problema é que o nome do campo e a URL aparecem no cartão e no perfil, além do ícone. Como posso ocultar a parte do texto do campo/URL?

Obrigado,
Ray

[weallwegot (juicecounty.prodigy)]

Ei, sim, obrigado por testar!

Apenas desmarquei a opção “Mostrar no cartão do usuário?” nos campos personalizados.

[weallwegot (juicecounty.prodigy)]

Obrigado, sim, cheguei à mesma conclusão. Ainda não consegui entender completamente a aplicação de estilo condicional, desculpe. Vou tentar encontrar alguém com mais experiência com essas coisas.

[Solari]

Ahhh, isso funcionou. Isso é muito bom, obrigado por codificar!

Ray

[bartv (Bart)]

Você poderia adicionar suporte ao YouTube também, por favor?

[weallwegot (juicecounty.prodigy)]

Sim, deve estar atualizado agora. Adicionei apenas o nome. Você pode ver aqui:

add support for youtube profiles

[bartv (Bart)]

Funciona perfeitamente, mas notei que você fixou o uso de canais do YouTube. Algumas pessoas podem preferir inserir seu nome de usuário? (Alguns usuários não têm canais). Acredito que funcionaria melhor se você permitisse que as pessoas apenas colocassem um link do YouTube em vez de um canal/nome de usuário.

Outra ideia sobre os campos do Instagram/Twitter: Apesar de adicionar uma nota sobre inserir apenas nomes de usuário nesses campos de perfil, muitas pessoas simplesmente inserem a URL completa — imagino que seja uma forma mais comum de fazer isso em muitos sites. Isso me fez pensar: talvez você pudesse detectar a presença de ‘https://’ no valor e, se houver, não adicionar mais a base da URL? Isso tornaria as coisas um pouco mais tolerantes e robustas.

[weallwegot (juicecounty.prodigy)]

@bartv

Talvez você pudesse detectar a presença de ‘https://’ no valor e, se for o caso, não adicionar mais a base da URL a ele? Isso tornaria as coisas um pouco mais tolerantes/robustas.

Excelente, adicionei essa sugestão agora e deve funcionar para ambos os tipos de entrada.

@bartv

Algumas pessoas podem preferir colocar o nome de usuário ali? (Alguns usuários não têm canais). Acredito que funcionaria melhor se você permitisse que as pessoas apenas inserissem um link do YouTube em vez de um canal/nome de usuário.

Infelizmente, não tenho certeza se conheço a diferença entre canais e perfis de usuário no YouTube. O que você sugere que seja a URL base para o YouTube? Apenas https://youtube.com/?

[bartv (Bart)]

Acho que existem links /c/ e /u/ para canais e usuários, respectivamente. Honestamente, acho que a melhor abordagem aqui é simplesmente permitir que as pessoas insiram uma URL e não se preocupar em deixá-la muito bonita.

[weallwegot (juicecounty.prodigy)]

Ah, certo, vou remover o recurso de URL base para links do YouTube, para que as pessoas possam inserir uma URL completa, assim como no LinkedIn. Obrigado pela sugestão, já atualizei.

[bartv (Bart)]

Brilhante, obrigado!

[Solari]

Sou um novato aqui – tentei personalizar o CSS para mudar a cor das fontes dos ícones, já que uso um tema escuro, mas não consegui fazer funcionar.

Acho que a classe é iconic-user-fields. Tentei alterar a cor dessa classe e também usei !important, mas não funcionou.

Alguma sugestão?

Obrigado!
Ray

[weallwegot (juicecounty.prodigy)]

Peço desculpas pela resposta extremamente tardia — espero que você tenha conseguido encontrar uma solução no meio tempo.

Adicionei uma nova configuração que permite escolher uma cor de ícone no painel de configuração do tema.
Agora, você pode simplesmente alterá-la para branco ou para outra cor mais compatível com o tema escuro. Deve estar disponível agora!

[renato (Renato Atilio)]

Primeiro, obrigado por este componente de tema Ativei na minha comunidade e ficou muito legal.

Não sei se mais alguém teve esse problema, mas com o componente de tema ativado, o cartão de usuário no mobile apresenta sobreposição:

Usei este CSS para mobile como solução alternativa, para que o cartão fique igual ao de antes, quando não há links sociais fornecidos:

.iconic-user-fields {
  padding-bottom: 0 !important;
}
#user-card {
  .usercard-controls {
      margin-top: 1em !important;
  }
}

Provavelmente não é uma solução geral, mas funcionou para nossa comunidade nos cenários relevantes.

[renato (Renato Atilio)]

Não sei se isso está relacionado a alguma mudança recente no núcleo: se estiver logado na minha conta, os links aparecem nos cartões de usuário, mas se estiver deslogado (estou testando com uma aba anônima), ele exibe um erro no console porque, na linha, userFields está indefinido. Nesse caso, o cartão de usuário mostra apenas o avatar e o nome de usuário, nada mais.

Se eu verificar a presença de userFields antes de sua primeira utilização, como testei aqui, o cartão é exibido por completo, mas os links de ícones sociais não aparecem.

Alguém mais está enfrentando esse problema?