F NAV - Abas de navegação móvel

:information_source: Resumo F NAV - Abas de Navegação para Mobile
:eyeglasses: Visualização Theme Creator
:hammer_and_wrench: Repositório GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
:question: Guia de Instalação Como instalar um tema ou componente de tema
:open_book: Novo nos Temas Discourse? Guia para iniciantes sobre o uso de Temas Discourse

Instale este componente de tema

Olá :wave:

Anteriormente, criei um tópico Development topic sobre ele como um conceito de componente de tema e agora ele está em um estado pronto para ser um Customization > Theme component.

:warning: 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 muitos posts sobre como 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 muito mais…

Cabeçalho

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

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 adicionar facilmente itens personalizados.

Existem algumas configurações para mostrar/ocultar os ícones do cabeçalho padrão, o que é útil quando você não deseja 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

  • altera o ícone da aba inicial nas rotas de tópico para uma seta para a esquerda, que adiciona uma função de voltar
    Screenshot 2024-12-13 at 12.29.33
  • adiciona um indicador de ponto para novos ou não lidos
    Screenshot 2024-12-13 at 12.30.52

hamburger (abre o menu hambúrguer)


multi

multi tab

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 conforme é urgente ou não.

As notificações urgentes da aba Multi são verdes e têm esta aparência. :arrow_down_small:


Expandido

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

Expandido

Notificação única


message

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

chat

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

notificationToRoute

  • se o modo “Não Perturbe” estiver ativo, o ícone do sino mudará para o ícone de sino com barra e o tempo restante do DND 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 uma notificação, redireciona para /notifications?filter=unread
    • se não houver notificação, redireciona para /notifications
    • se houver conteúdo revisável, aparecerá uma bandeira vermelha e redireciona para /review

notificationMenu

  • se o modo “Não Perturbe” estiver ativo, o ícone do sino mudará para o ícone de sino com barra e o tempo restante do DND aparecerá
    Screenshot 2024-12-13 at 13.02.35

  • abre o menu de notificações


search

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

Configurações

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

  • name: Isso serve apenas para facilitar a identificação da 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 lidará com o destino, você pode deixá-la vazia. O componente converte automaticamente os destinos /my/... para /u/username/... para que o status ativo da aba possa ser adicionado corretamente.
  • function: Escolha uma função para a aba.

Os administradores podem criar/remover/alterar abas facilmente 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ópico simplesmente ficará assim.


Screenshot 2024-12-12 at 18.55.50


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

22 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