Barra de abas do Discourse para celular

GitHub repository:

Screenshots


Installation

Follow the instructions in this howto topic:

Customization

See the readme file in the theme’s GitHub repository.

Ideas to improve this theme are very welcome :slightly_smiling_face:


Update 24/12/2018:

You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the readme file for details.

77 curtidas

Olá, adoro este plugin. Mas preciso tornar a barra visível também para usuários deslogados.

Existe uma maneira de fazer isso? Talvez algo como

body:not(.logged-in) .d-tab-bar-theme {
    display: block
}
1 curtida

Oi Ben

O código JS do componente espera em vários lugares que haja um usuário logado, então o CSS não seria suficiente para exibir a barra para usuários anônimos. Minha recomendação aqui é fazer um fork do componente e modificá-lo para que ele apareça para usuários anônimos.

4 curtidas

Como adicionar um botão + de nova postagem à barra?

Olá Peter,

O núcleo do Discourse possui uma ótima rota /new-topic que permite abrir o compositor por meio de uma URL. Então, tudo o que você precisa fazer é usar essa rota como URL para a guia que deve abrir o compositor.

13 curtidas

Este componente é muito útil e nossos usuários do fórum realmente gostam dele.

Um dos recursos mais solicitados é exibir o selo de notificações não lidas e o selo de MPs não lidas nas teclas na parte inferior da tela.

A API JavaScript do Discourse nos permite fazer isso?

7 curtidas

Olá Nildarar,

Fico feliz em saber que sua comunidade gosta deste componente e o considera útil, obrigado! Apoio a adição desse recurso ao componente, mas não posso implementá-lo agora (talvez em alguns meses). No entanto, se alguém mais se sentir motivado a trabalhar nesse recurso no intervalo, ficarei muito feliz em mesclar um pull request com essa funcionalidade.

Sim, os dados necessários são expostos no objeto currentUser, que é facilmente acessível. A maior parte do trabalho para esse recurso seria 1) definir em qual(is) aba(s) exibir as insígnias e 2) posicionar as insígnias corretamente com CSS.

8 curtidas

Obrigado, @Osama
Com base na sua orientação, encontrei esses objetos.

<script type="text/discourse-plugin" version="0.8">
    let currentUser = api.getCurrentUser();
    console.log(currentUser);
</script>

// unread_high_priority_notifications: 2
// unread_notifications: 7
// unread_private_messages: 2

Existe uma maneira de registrarmos uma função em um evento ou devemos descobrir isso por meio do seguinte truque?

$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
  console.log('changed');
});
5 curtidas

Sim, essas são as propriedades corretas que precisamos consumir, mas como o Discourse é uma aplicação Ember, normalmente não nos inscrevemos em eventos do DOM para atualizar a interface. Em vez disso, devemos usar o que o Ember chama de propriedades ‘computed’.

O componente já define uma propriedade computed aqui, então você pode usá-la como exemplo. Depois de definir sua propriedade computed que determina se ou não o badge de notificações deve ser exibido (com base nas propriedades como currentUser.unread_high_priority_notifications, etc.), você precisará usar sua propriedade computed no template Handlebars, no mesmo link no final.

Nota: implementar esse recurso em um componente separado é complicado, então tudo o que disse aqui pressupõe que você está implementando isso no próprio componente, não em um componente separado.

8 curtidas

Obrigado, deixe-me tentar :wink::+1:

6 curtidas

A barra de abas está exibindo fundo branco mesmo no Tema Escuro. Acabei de atualizar da versão 2.7.0 beta 1 para a 2.7.0 beta 3 e, após a atualização, o fundo branco começou a aparecer. Antes disso, tudo funcionava perfeitamente. Também tentei remover todos os outros componentes do tema e todas as personalizações para verificar se algo estava interferindo na barra de abas. Mas mesmo em um Discourse básico, a barra de abas apresenta fundo branco em um tema escuro. Alguém pode dar uma olhada nisso, por favor?

5 curtidas

Já apliquei uma correção para esse problema. Obrigado por me avisar!

9 curtidas

Parece que esta aba faz com que a barra de progresso do tópico cubra o botão de resposta em alguns casos (por exemplo, consigo reproduzir isso usando o Chrome para simular um iPhone SE)

Como você pode ver, o botão de resposta está coberto pela barra de progresso. Mas se eu desativar a barra, funciona. Acredito que seja porque a posição do botão de progresso é relativa, mas não sei como corrigir isso.

4 curtidas

Tenho um problema semelhante. O botão “Índice” não aparece quando ativo a Barra de Abas Móvel. Seria ótimo se não tivéssemos que escolher uma funcionalidade em vez da outra, pois adoramos ambas!

1 curtida

@haroldfy Não consigo reproduzir esse problema aqui no Meta ou no criador de temas. Talvez você tenha outros temas ou personalizações que estejam interferindo? Posso dar uma olhada se seu site for público.

@littleviolette Tente evitar ao máximo adicionar código que vise elementos de outro componente. Neste caso, você pode criar um componente separado com este CSS para empurrar o botão do ToC acima da barra:

html:not(.anon) .d-toc-toggle {
  margin-bottom: 55px;
}
8 curtidas

Obrigado por investigar isso. É um site privado; vou tentar desativar outras personalizações e depurar a partir daí.

4 curtidas

Acho que encontrei um bug, e só consigo reproduzi-lo na versão PWA do meu site no iOS (parece funcionar bem no Android e no Safari do iOS).

A barra de abas deveria estar sempre travada, certo? É assim que ela aparece quando está correta:

Depois, desbloqueo a tela, mudo para o modo paisagem, volto para o modo retrato, rolo um pouco para cima e isso acontece:

1 curtida

Eu tive o mesmo problema, @haroldfy @littleviolette. Você pode corrigir isso com:

html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}
7 curtidas

A barra de abas também entra em conflito com o recurso principal de filtro de posts, que exibe um rodapé fixo (posts-filtered-notice) durante a filtragem.

De qualquer forma, obrigado por este ótimo TC :slight_smile:

5 curtidas

Componente de tema incrível, obrigado

Tenho um pedido e gostaria de verificar se há interesse em um recurso de ‘rolagem para ocultar’?

Essencialmente, a barra inferior se oculta automaticamente quando o usuário rola para baixo e reaparece quando o usuário rola para cima

Um exemplo que encontrei está aqui

Isso liberaria de forma inteligente espaço precioso na tela em dispositivos móveis e tornaria a experiência de consumo de conteúdo melhor, com mais espaço

9 curtidas