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

Após a nova atualização, isso não está mais funcionando. @Don você fez alguma alteração relevante ou algo assim?

Olá :waving_hand: Não, acho que não. A última alteração foi há 2 meses. Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub

Sim, voltou a funcionar tudo. Alguns outros componentes do tema estavam causando o problema.

1 curtida

Olá :waving_hand: Hmm, não consigo reproduzir isso… qual dispositivo e navegador você usa?

Olá Don, obrigado pela resposta.
É muito estranho. Abaixo estão vários navegadores que testei, e o mesmo fenômeno ocorreu. :sweat_smile:

Navegador Edge no PC


Aplicativo Discourse Hub do iPhone

Safari do iPhone

Edge do Android

Usei o seguinte CSS para ajustar a posição, e funcionou muito bem.

/* Use Flexbox para centralizar chat-channel-unread-indicator__number */
.chat-channel-unread-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Garante que o contêiner tenha um contexto de posicionamento */
}

/* Garante que os estilos do elemento de número não interfiram na centralização */
.chat-channel-unread-indicator__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
2 curtidas

Parece legal. Seria bom mostrar também para usuários não logados.

@Don você aceita PRs? Adicionei um recurso para adicionar funções extras para abrir um menu modal onde você pode adicionar itens adicionais.

Em nosso caso de uso, queremos criar um submenu para ter várias variações ao criar um novo tópico (por exemplo, enviar um relatório de bug, enviar uma solicitação de suporte, enviar uma ideia, criar um novo diário ou criar um novo tópico regular)

Veja: GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs

4 curtidas

Atualização rápida sobre meu Fork de “F-NAV para Mobile” com Botão Voltar, Submenu Personalizado e Controles de Visibilidade

Por que este fork?

  • Fornece um botão “Voltar” no cabeçalho das páginas de tópico que espelha a UX comum de aplicativos móveis
  • Oferece um tipo de aba “customMenu” que abre um submenu configurável (ideal para vincular a vários destinos; usamos para adicionar links personalizados pré-preenchidos de “Novo Tópico”)
  • Adiciona visibilidade baseada em grupos para abas e itens de menu, para que você possa mostrar certos itens apenas para a equipe, etc.
  • Pequenas correções com algumas depreciações e polimento de estilos/acessibilidade
Resumo sobre os recursos recém-adicionados aqui
  • Ícone de Voltar no Cabeçalho (opcional)
    • Substitui o logotipo inicial no cabeçalho por uma seta de voltar nas páginas de tópico
    • Comportamento: volta se houver histórico, caso contrário, roteia para “/”
    • Alternar com a configuração: header_back_icon_enabled
  • Tipo de aba Submenu Personalizado
    • Nova função f_nav_tabs: customMenu
    • Nova configuração: f_nav_submenu_items
      • Configura itens de menu com rótulo e URL (ícone opcional)
      • Ótimo para acesso rápido a várias páginas a partir de uma única aba
  • Controles de visibilidade baseados em grupo
    • Abas, itens de submenu e profile_extra_items podem ser limitados a grupos selecionados
    • Comportamento:
      • Grupos vazios => visível para todos
      • Se grupos definidos => apenas membros de pelo menos um grupo selecionado podem ver
      • Usuários anônimos não podem ver itens restritos
  • Opcional: Ocultar barra de navegação em páginas de tópico
    • Alternar com a configuração: hide_nav_in_topic
  • Artefatos de “build” compactados e documentação de testes
    • Artefatos de build de conveniência (v1–v5) em builds/
    • TESTING_GUIDE.md e TEST_RESULTS.md documentando validação manual

Melhorias em recursos existentes

  • Itens e abas do F‑NAV
    • Adiciona o getter visibleTabs para respeitar a visibilidade do grupo
    • Integra o novo componente CustomSubmenu no fluxo do FNavItem
  • Avatar/menu de perfil no cabeçalho
    • Detecção de visualização móvel movida para o componente, melhorando o comportamento e resolvendo avisos
    • Itens extras de perfil agora suportam visibilidade baseada em grupo
  • Estilização e acessibilidade
    • Novo SCSS para o submenu personalizado e o ícone de voltar
    • Estados consistentes de hover/ativo/focus-visible
    • Raio de borda consistente com variáveis principais; preenchimento/espaçamento refinado (por exemplo, preenchimento do botão de voltar definido como 0)

Correções de bugs e manutenção

  • Resolve avisos de depreciação de site.mobileView movendo verificações de inicializadores para a renderização do componente
  • Corrige um caso de borda de renderização movendo uma função para fora do bloco
  • Pequeno polimento para corresponder aos comportamentos do cabeçalho do Discourse (estados de hover/ativo, transições de opacidade)
  • Pequenos ajustes de CSS (por exemplo, garantir que o preenchimento do botão de voltar seja zero, evitar mudanças acidentais de dimensionamento)

Comparação de alto nível (Branch Original vs. Forked)

  • Original (main): Abas móveis F‑NAV + importação opcional de chat; sem botão de voltar ou submenu personalizado
  • Fork (feat/home-logo-arrow-back):
    • Adiciona recurso de ícone de voltar no cabeçalho com fallback de roteamento
    • Introduz a função de aba “customMenu” com itens de submenu configuráveis
    • Adiciona visibilidade restrita por grupo para abas, itens de submenu e itens de perfil
    • Opcionalmente oculta o F‑NAV em páginas de tópico
    • Melhora a a11y e a consistência dos estados de interação
    • Fornece documentação de testes e builds empacotados

Observações:

  • Este componente visa versões recentes do Discourse que suportam o nível 1.14+ da API de Plugins do Discourse (conforme indicado nos inicializadores)
  • Se você depende de visibilidade baseada em grupo, certifique-se de que seus grupos e associações estejam configurados primeiro

Palavra de aviso: Teste com cautela, pois não sou um programador e o TC foi feito e testado inteiramente com IA. Funciona melhor com 3.6beta1.

Parabéns a Don por este ótimo componente; é uma adição fantástica! :heart:

2 curtidas