O componente de tema adiciona a capacidade de usar funções nas abas. Essas funções agora podem ser hamburger, notificações, pesquisa.
Hamburger: a aba abre o menu hamburger
Notificações: adiciona notificações à aba
Pesquisa: abre a pesquisa baseada em contexto /search
Ele também modifica os ícones do cabeçalho. Remove o hamburger, o menu do usuário, a pesquisa e adiciona um novo avatar DMenu que contém o conteúdo do perfil do menu do usuário. Quando você rola para baixo, o cabeçalho é ocultado em todos os lugares, exceto no tópico, para maximizar a visualização.
Ele muda o ícone do sino da aba de notificação para sino-cortado se o “não perturbe” estiver ativo e adiciona o horário. Ele também muda dinamicamente a rota se houver revisáveis, então ele redireciona para /review, caso contrário, ele vai para a página /notifications.
Separar as notificações faz muito sentido. O tema Central faz o mesmo, tornando o menu do usuário mais acessível e confortável (parece menos imponente). É direto, e você tem os links essenciais. Esta é uma grande melhoria de UX, na minha opinião, adorei.
Sobre os links dentro do menu:
Eu substituiria a palavra “Summary” por “Profile”; é mais fácil de entender neste contexto.
“Activity” não é super útil; eu o substituiria por “Messages”. O acesso direto à sua caixa de entrada é essencial.
Acho que um “Bookmark” também seria bem-vindo.
Não tenho certeza sobre o painel inferior.
Acho que não estou acostumado a olhar para baixo.
O botão de notificação deve abrir o painel direito em vez de ir para o perfil. A visualização é mais adequada quando você quer dar uma olhada rápida e não tem conteúdo extra não relacionado à notificação.
O menu hambúrguer abre com um breve efeito de piscar.
Bem, eu gostaria de criar uma multi-aba na F NAV que contenha as mensagens e o chat. Algo como pastas em aplicativos de celular. Assim, você verá o que há lá dentro e poderá abri-lo em um DMenu, por exemplo. Ele mostra separadamente os indicadores de não lidas quando abre, caso contrário, você vê um indicador consolidado de não lidas. As mensagens devem ter prioridade, como Arkshine mencionou, então abriria em um modal para ver as mensagens.
Ótimas ideias! Acho que as mensagens devem ficar na F NAV como mencionei acima, mas acho que será personalizável.
A ideia original aqui era redirecionar os usuários para as notificações com filtro de não lidas se houver notificações não lidas e ir para todas sem filtro se não houver e ir para a página de revisão se houver notificação revisável. Mas eu esqueci de adicionar Acho que é mais confortável no celular redirecionar a página… Mas talvez eu esteja errado
Editar: Eu adicionei. Agora redireciona para /u/username/notifications?filter=unread se houver notificação não lida.
Hmm, sim, parece que ele não adiciona a animação corretamente se você fechar o menu hambúrguer clicando fora. Fechar deslizando funciona bem, acho que é por isso que não percebi.
Ótimo trabalho, obrigado pelo componente, vou tentar.\n\nGanhou um visual mais simples, especialmente na seção do cabeçalho no celular. Gosto assim, a aglomeração ali sumiu e ficou um visual mais simples. A maioria dos aplicativos mais conhecidos já usa assim, por exemplo: x.com. Funcionalidades que vejo que podem ser adicionadas:\n\n- Um botão de novo tópico pode ser adicionado ao widget\n- Ao clicar em uma postagem e entrar nela, em vez do botão de início, pode haver um ícone de voltar. Quando o usuário clicar nesse ícone, ele pode ir para o último local onde parou.\n- Ao clicar em uma postagem, o botão ativo selecionado da página inicial pode mudar. Pode ficar transparente.\n- Poderia haver o número de mensagens não lidas no ícone da página inicial. Não tenho certeza sobre isso, pode deixá-lo mais cheio ou alternativamente:\n
É possível definir atalhos para categorias?
Eu adoraria tentar ter ícones para categorias especiais na parte inferior.
Eles devem ser capazes de exibir indicadores sobre tópicos atualizados ou novos, como os atalhos de categoria na barra lateral.
Obrigado pelo feedback @ozkn
Adicionei a alteração do ícone de casa nas rotas de tópico e o indicador de ponto de tópico novo ou atualizado. Provavelmente será uma boa ideia adicionar o componente de tema de tópico fixo novo ou atualizado… Também alterei a posição e o tamanho do selo de notificação (tornei-o menor e o número mais ousado).
Trabalho lindo, @Don. Componente de tema realmente ótimo. Descobri alguns problemas no Android onde o deslizar não funciona bem, especialmente no PWA. Pode ser específico dos telefones e não do Discourse, mas existe mesmo assim, então isso preenche essa lacuna, especialmente para o iOS. Parece que há espaço para outro item de navegação com o espaço disponível na barra F NAV.
Esta é a ideia para multi-aba. Eu mudarei o ícone da aba, acho, mas esta é apenas a primeira versão. Ela contém o chat e as mensagens. O chat funciona como o ícone de chat do cabeçalho e as mensagens abrem uma janela modal de mensagens. Provavelmente funcionará se o chat estiver desativado, então o DMenu também será desativado e apenas as mensagens estarão na navegação.
Olá Algum progresso aqui… Fiz as bolhas de notificação, fiz alguns ajustes nas notificações de número e outras coisas…
A aba múltipla agora muda automaticamente para a aba de mensagem se o chat não estiver ativado ou se o usuário o desativar nas configurações do usuário. Mas agora os administradores também podem adicionar separadamente a aba de mensagem e a aba de chat.
A bolha de notificações muda dependendo se é urgente ou não.
Notificações urgentes na aba múltipla são verdes e se parecem com isto.
Mais uma atualização aqui… Reconstruí o estado ativo das abas, agora funciona melhor com destinos de abas dinâmicos também.
Eu consertei isso… Obrigado
Agora isso é uma opção e os administradores podem escolher qual preferem. notificationToRoute: redireciona para a página de notificações notificationMenu: abre o menu de notificações
Adicionei essas alterações ao criador de temas, então agora funciona assim.
Bom trabalho @Don Sei que este não é o seu componente de tema F NAV, mas seria ótimo se houvesse um x para fechar a janela de pesquisa quando ela abrir. A menos que eu esteja perdendo algo, o que é possível, depois de clicar no ícone de pesquisa, se você decidir não pesquisar, não é elegante fechar a janela.
Olá Brian Não tenho certeza se entendi. Quando você toca no ícone de pesquisa, ele redireciona para a página /search, então você pode voltar com a navegação do navegador/móvel ou gesto.
Alguma atualização novamente… Decidi não excluir os ícones do cabeçalho, apenas escondê-los com CSS. Ontem, quando corrigi a animação de abertura do menu hambúrguer, percebi que seria mais fácil, limpo e seguro, na minha opinião, porque dessa forma podemos acionar o clique nos ícones padrão do cabeçalho. Agora o hambúrguer, o menu de notificações e a pesquisa funcionam dessa maneira. O ícone de chat padrão do cabeçalho também está apenas oculto com CSS porque nas páginas /chat ele será exibido no cabeçalho.
Tento tornar as configurações o mais simples possível.
Elas conterão 4 campos, as descrições ainda estão faltando. O destino é opcional porque se você escolher uma função, ela incluirá o item necessário e este campo deve ser deixado em branco.
Olá @Don, minha declaração é bastante incoerente, Meu comentário não tem nada a ver com seu componente. Acho que seria útil ter um ‘x’ para fechar a interface de pesquisa se você decidir não pesquisar depois de abri-la ou clicar por engano. Frequentemente acabo voltando da página ou do Discourse acidentalmente.
Parece fantástico, mal posso esperar para experimentar!