Discourse Tab Bar per Mobile

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 Mi Piace

Ehi, adoro questo plugin. Ma ho bisogno di rendere la barra visibile anche per gli utenti non registrati.

C’è un modo per farlo? Forse qualcosa come

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

Ciao Ben,

Il codice JS del componente presuppone in diversi punti che ci sia un utente connesso, quindi il CSS non sarebbe sufficiente per mostrare la barra agli utenti anonimi. La mia raccomandazione è di fare un fork del componente e modificarlo in modo che venga mostrato anche agli utenti anonimi.

4 Mi Piace

Come aggiungere un pulsante + per un nuovo post alla barra?

Ciao Peter,

Il core di Discourse ha questa comoda rotta /new-topic che esiste per rendere possibile aprire il compositore tramite un URL. Quindi, tutto quello che devi fare è usare quella rotta come URL per la scheda che deve aprire il compositore.

13 Mi Piace

Questo componente è molto utile e i nostri utenti del forum lo apprezzano davvero.

Una delle funzionalità più richieste è quella di mostrare il badge delle notifiche non lette e il badge dei messaggi privati non letti sulle chiavi in basso sullo schermo.

L’API JavaScript di Discourse ci permette di farlo?

7 Mi Piace

Ciao Nildarar,

Sono felice di sapere che la tua community apprezza questo componente e lo trova utile, grazie! Supporto l’aggiunta di questa funzionalità al componente, ma al momento non posso implementarla (forse tra qualche mese). Tuttavia, se qualcun altro volesse lavorare su questa funzionalità nel frattempo, sarei molto felice di unire una pull request con questa funzionalità.

Sì, i dati necessari sono esposti nell’oggetto currentUser, che è facilmente accessibile. La maggior parte del lavoro per questa funzionalità consisterebbe nel: 1) capire in quale/e scheda/e visualizzare i badge e 2) posizionare correttamente i badge con il CSS.

8 Mi Piace

Grazie @Osama
Sulla base delle tue indicazioni, ho trovato questi oggetti.

<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

Esiste un modo per registrare una funzione in un evento o dovremmo scoprirlo attraverso il seguente trucco?

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

Sì, queste sono le proprietà corrette che dobbiamo utilizzare, ma dato che Discourse è un’applicazione Ember, in genere non ci iscriviamo agli eventi DOM per aggiornare l’interfaccia utente. Invece, dovremmo utilizzare ciò che Ember chiama ‘computed properties’.

Il componente definisce già una computed property qui, quindi puoi usarla come esempio. Una volta definita la tua computed property che determina se il badge delle notifiche deve essere visualizzato o meno (in base alle proprietà come currentUser.unread_high_priority_notifications ecc.), dovrai utilizzare tale computed property nel template Handlebars nello stesso link in fondo.

Nota: implementare questa funzionalità in un componente separato è complesso, quindi tutto ciò che ho detto qui presuppone che tu la stia implementando nel componente stesso e non in un componente separato.

8 Mi Piace

Grazie, provo :wink::+1:

6 Mi Piace

La barra delle schede mostra uno sfondo bianco anche in tema scuro. Ho appena aggiornato dalla versione 2.7.0 beta 1 alla 2.7.0 beta 3 e da allora è apparso lo sfondo bianco. Prima di tutto funzionava perfettamente. Ho anche provato a rimuovere tutti gli altri componenti del tema e ogni personalizzazione per verificare se qualcosa stesse interferendo con la barra delle schede. Ma anche in una installazione base di Discourse, la barra delle schede ha uno sfondo bianco in un tema scuro. Qualcuno può per favore dare un’occhiata a questo?

5 Mi Piace

Ho applicato una correzione per questo problema. Grazie per avermelo fatto sapere!

9 Mi Piace

Sembra che questa scheda faccia sì che la barra di avanzamento del topic copra il pulsante di risposta in alcuni casi (ad esempio, riesco a riprodurre il problema utilizzando Chrome per simulare un iPhone SE)

Come potete vedere, il pulsante di risposta è coperto dalla barra di avanzamento. Ma se disabilito la barra, funziona. Immagino sia perché la posizione del pulsante di avanzamento è relativa, ma non so come risolverlo.

4 Mi Piace

Ho un problema simile. Il pulsante “Indice” non appare quando attivo la barra delle schede mobile. Sarebbe bello non dover scegliere una funzione invece dell’altra, perché ci piacciono entrambe!

1 Mi Piace

@haroldfy Non riesco a riprodurre questo problema qui su Meta o nel creatore di temi. Forse hai altri temi o personalizzazioni che interferiscono? Posso dare un’occhiata se il tuo sito è pubblico.

@littleviolette Cerco di evitare, per quanto possibile, di aggiungere codice che prende di mira gli elementi di un altro componente. In questo caso, puoi creare un componente separato con questo CSS per spostare il pulsante ToC sopra la barra:

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

Grazie per aver indagato. Si tratta di un sito privato; proverò a disabilitare altre personalizzazioni e a fare il debug da lì.

4 Mi Piace

Penso di aver trovato un bug, che riesco a riprodurre solo nella versione PWA del mio sito su iOS (sembra funzionare correttamente su Android e su Safari per iOS).

La barra delle schede dovrebbe essere sempre bloccata, giusto? Questo è l’aspetto corretto:

Poi sblocco lo schermo, passo alla modalità orizzontale, torno alla modalità verticale, scorro leggermente verso l’alto e succede questo:

1 Mi Piace

Ho avuto lo stesso problema @haroldfy @littleviolette. Puoi risolverlo così:

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

La barra delle schede entra anche in conflitto con la funzionalità principale di filtro dei post, che visualizza un footer fisso (posts-filtered-notice) durante il filtraggio.

Comunque, grazie per questo ottimo TC :slight_smile:

5 Mi Piace

Componente tema fantastico, grazie.

Ho una richiesta e vorrei verificare se c’è interesse per una funzionalità ‘scorri per nascondere’?

Essenzialmente, la barra inferiore si nasconde automaticamente quando l’utente scorre verso il basso e riappare quando l’utente scorre verso l’alto.

Un esempio che ho trovato è qui:

Ciò libererebbe saggiamente prezioso spazio sullo schermo su dispositivi mobili e migliorerebbe l’esperienza di consumo dei contenuti offrendo più spazio.

9 Mi Piace