F NAV - Abas de Navegação Móvel

:information_source: Resumo F NAV - Abas de Navegação do Mobile
:eyeglasses: Prévia Theme Creator
:hammer_and_wrench: Repositório GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
: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

Instale este componente de tema

Olá :wave:

Antes, eu criei um tópico Dev tópico para ele como um conceito de componente de tema e agora ele está em um estado para ser um Theme component.

:warning: Por favor, certifique-se de testá-lo antes de usar em produção.

Algumas informações aqui sobre o componente: F NAV - Theme component concept


Sobre o componente de tema. Li tantos posts sobre isso que seria maravilhoso tornar a Barra de Abas do Discourse para Mobile mais dinâmica e adicionar a capacidade de lidar com, por exemplo, notificações etc… O F-NAV pode fazer isso e mais…

Cabeçalho

Ele oculta o hambúrguer, menu do usuário, pesquisa e chat e adiciona um botão de menu de perfil (avatar) que contém o conteúdo padrão da aba de perfil do menu do usuário.

Configurações

Ele também contém uma configuração onde você pode adicionar itens personalizados antes do item Sair.
Ele contém três campos onde você pode facilmente adicionar itens personalizados.

Existem algumas configurações para mostrar/ocultar os ícones padrão do cabeçalho, o que é útil quando você não quer colocar a aba exata no F NAV, para que ela seja exibida no cabeçalho.

Abas

É possível associar diferentes funções às abas. Essas funções permitem que cada aba mude dinamicamente.

Screenshot 2024-12-13 at 13.06.14

Essas mudanças incluem:

Funções

home

  • muda o ícone da aba inicial em rotas de tópicos para uma seta para a esquerda que adiciona uma função de voltar
    Screenshot 2024-12-13 at 12.29.33
  • adiciona um ponto indicador de tópico novo ou não lido
    Screenshot 2024-12-13 at 12.30.52

hamburger (abre o menu hambúrguer)


multi

aba multi

A aba multi muda automaticamente para a aba de mensagens se o chat não estiver habilitado ou se o usuário o desativar nas configurações do usuário.

A bolha de notificações muda dependendo se é urgente ou não.

As notificações urgentes da aba multi são verdes e ficam assim. :arrow_down_small:


Expandido

A mensagem pessoal é sempre verde, mas o chat pode ser azul como originalmente, por exemplo, uma notificação de mensagem de canal não lida.

Expandido

Notificação única


message

  • adiciona um botão de mensagem com notificações e clicar nele abre um modal de mensagens para uma visualização rápida

chat

  • adiciona um botão de chat com suas funções

notificationToRoute

  • se o “não perturbe” estiver ativo, o ícone do sino mudará para o ícone de sino cortado e o tempo de “não perturbe até” aparecerá
    Screenshot 2024-12-13 at 13.02.35

  • redireciona para a página de notificações do perfil, ignorando o menu de notificações

    • se houver notificação, redireciona para /notifications?filter=unread
    • se não houver notificação, redireciona para /notifications
    • se houver conteúdo para revisão, uma bandeira vermelha aparecerá e redirecionará para /review

notificationMenu

  • se o “não perturbe” estiver ativo, o ícone do sino mudará para o ícone de sino cortado e o tempo de “não perturbe até” aparecerá
    Screenshot 2024-12-13 at 13.02.35

  • abre o menu de notificações


search

  • redireciona para a página /search baseada em contexto

Configurações

Tentei tornar as configurações o mais simples possível.
Elas conterão quatro campos.

  • name: Isso é apenas para identificar mais facilmente a aba nas configurações.
  • icon: Adiciona um ícone à aba. Nota: Se você selecionar uma função, pode haver ícones que não podem ser substituídos por esta configuração.
  • destination: Adiciona um destino para sua aba personalizada. Nota: Se você selecionar uma função que cuidará do destino, pode deixá-lo em branco. O componente lida com os destinos /my/... convertendo-os automaticamente para /u/username/..., para que o status ativo das abas possa ser adicionado corretamente.
  • function: Escolha uma função para a aba.

Os administradores podem simplesmente criar/remover/alterar abas e selecionar uma das funções ou adicionar um destino personalizado à aba.
Funções :arrow_down_small:

Por exemplo, adicionar uma aba de criação de tópicos ficará simplesmente assim.


Screenshot 2024-12-12 at 18.55.50


Crédito: Discourse Tab Bar for Mobile e obrigado a todos pelos feedbacks no tópico F NAV - Theme component concept. :heart:

21 curtidas

Isso é incrível e legítimo, deveria ser o comportamento padrão e salvará meu polegar de ter que alcançar com muita frequência a parte superior da tela do meu :mobile_phone:.

Não sou fã do controle deslizante “online” proeminente, pois acho que a maioria das pessoas não precisa alterar essa configuração com frequência. Acho que a maioria dos usuários opta por sair de sua presença online de uma vez por todas, então não tenho certeza sobre o lembrete constante de que essa opção existe.

Vocês aparentemente fizeram muitos componentes de tema de modificação de navegação muito úteis. Gostaria de usar alguns, mas quanto vocês se veem mantendo tudo isso a longo prazo? Eu tendo muito a usar apenas componentes de tema #oficiais para garantir a confiabilidade.

Não vi o componente de tema oficial original da barra de abas, então darei uma olhada nele.

7 curtidas

Obrigado pelo componente @don, estou aqui há muito tempo, você está realmente fazendo um ótimo trabalho.

3 curtidas

Isso deve ser um bug

2 curtidas

Ah, obrigado, isso está relacionado ao tema FKB. Vou atualizar o tema.

3 curtidas

Aqui está a correção: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
Por favor, atualize o tema FKB e ative esta nova configuração.
Screenshot 2024-12-14 at 9.17.02

3 curtidas

Olá @don, como posso usar ícones fa-regular como na imagem? Pesquisei e não encontrei nenhuma informação sobre como fazer isso após a mudança para o Fontawesome 6.

3 curtidas

Olá :waving_hand: Deve funcionar com far-bell. Eu tinha planos de torná-lo de regular para sólido quando a aba estiver ativa, vou verificar isso, mas se bem me lembro, o ícone de casa só tem sólido na versão gratuita. :thinking:

1 curtida

Obrigado, resolvi meu problema. @Don

1 curtida

O ícone de início, que muda para o botão de voltar ao abrir um tópico. Por quê, podemos usar o gesto de deslizar para isso (como ao retornar à tela inicial do Hub :smirking_face:). Meus usuários reclamaram bastante disso, porque agora eles precisam alcançar o logo para isso (problema do primeiro mundo, eu sei :joy:)

2 curtidas

Acho que podemos adicioná-lo a uma função, estou apenas pensando onde colocá-lo. Esta pode ser uma única aba e você pode adicioná-la à navegação que só é exibida no DiscourseHub.

1 curtida

Na verdade, o DiscourseHub funciona perfeitamente com o gesto de deslizar para baixo. Eu só não sabia disso.

Essa questão do botão de início/voltar é maior porque tenho que explicá-la para outras pessoas.

3 curtidas

O botão de voltar só é ativado em tópicos para facilitar a navegação de volta entre os tópicos. É da função de início que você pode desativar e, em seguida, isso manterá o destino de início.

As configurações ainda não podem ser reordenadas e, se você tiver uma seleção existente, não poderá limpá-la, mas adicionei uma nova função none que terá o mesmo comportamento de quando você deixa o campo da função vazio. Dessa forma, você não precisa recriar todas as abas de navegação.

É assim que deve ser se você quiser desativar o botão de voltar e manter o início em todos os lugares.

3 curtidas

Fantástico como sempre. Tenho que concordar com a prévia rápida no criador de temas. Isso realmente deveria ser empacotado no núcleo com uma opção para celular clássico e celular aprimorado.

Posso ver isso abrindo coisas como um logotipo de site de banner mais longo. Uma opção mais limpa para extras no cabeçalho, como seletor de idioma e muito mais. Muito, muito bom como sempre, Don!

3 curtidas

O Ícone de Lápis e os tópicos de navegação estão colapsando com a barra de navegação.

1 curtida
4 curtidas

Olá Don. Obrigado pelo seu trabalho incrível. Eu gostei.
Tenho uma pergunta. Depois de clicar no Hamburger ou Notificação, às vezes não preciso tomar nenhuma ação adicional. Neste momento, preciso voltar para a lista de artigos. No entanto, só consigo fechar o Hamburger ou Notificação clicando na página em branco. Isso pode levar a cliques acidentais no avatar ou na resposta.

Para dar outro exemplo simples, quando estou na página de chat e preciso voltar para a página inicial, tenho que clicar no botão voltar no canto superior esquerdo, o que na verdade não é amigável para dispositivos móveis.

Portanto, é possível manter a barra de menu sempre no topo?

Espero que minha descrição possa ser compreendida.

2 curtidas

Olá Max :wave:

Você pode fazer algumas capturas de tela / gravações de tela sobre o problema?

Em /chat ocultamos a navegação e usamos o cabeçalho de chat padrão. Não tenho certeza se vale a pena exibir a navegação no chat porque isso pode causar problemas em diferentes navegadores, mas vou verificar isso.

1 curtida

Olá Don :smiley:
Obrigado pela sua resposta.
Por favor, consulte as capturas de tela abaixo. As duas primeiras capturas de tela significam que, quando quero fechar o Hamburger ou Notificação, só consigo clicar na área amarela. O problema é que é fácil clicar acidentalmente no artigo ou no avatar.

A terceira captura de tela significa que tenho que clicar no botão voltar no canto superior esquerdo para sair da interface de chat.



1 curtida

Obrigado pelo esclarecimento :blush:

Sim, entendi. O problema aqui não é o componente, mas um problema central quando você ativou a configuração de reduzir movimento no seu dispositivo. Está ativada no seu dispositivo?

Quando o reduzir movimento está desativado. O header-cloak (área escura atrás do menu) está bloqueando a ação de clique.

Quando eu o ativo no meu dispositivo, ele não bloqueia o clique do usuário.

Se for esse o caso, você também pode fechar os menus com gestos de deslizar.

Acho que tenho um tópico sobre esse problema em algum lugar :thinking:

Esse é o cabeçalho de chat padrão.

Vou verificar se podemos habilitar a navegação lá também.

3 curtidas