Barre d'onglets Discourse pour 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 « J'aime »

Hé, j’adore ce plugin. Mais j’ai besoin d’afficher la barre pour les utilisateurs non connectés aussi.

Y a-t-il un moyen de faire cela ? Peut-être quelque chose comme

body:not(.logged-in) .d-tab-bar-theme {
    display: block
}
1 « J'aime »

Salut Ben,

Le code JS du composant suppose à plusieurs endroits qu’un utilisateur est connecté, donc le CSS ne suffirait pas à afficher la barre pour les utilisateurs anonymes. Ma recommandation ici est de forker le composant et de le modifier pour qu’il s’affiche également aux utilisateurs anonymes.

4 « J'aime »

Comment ajouter un bouton + pour créer un nouveau post dans la barre ?

Bonjour Peter,

Le cœur de Discourse propose cette pratique route /new-topic qui permet d’ouvrir le compositeur via une URL. Il vous suffit donc d’utiliser cette route comme URL pour l’onglet qui doit ouvrir le compositeur.

13 « J'aime »

Ce composant est très utile et les utilisateurs de notre forum l’apprécient vraiment.

L’une des fonctionnalités les plus demandées est d’afficher un badge de notifications non lues et un badge de messages privés non lus sur les touches situées en bas de l’écran.

L’API JavaScript de Discourse nous permet-elle de le faire ?

7 « J'aime »

Bonjour Nildarar,

Je suis ravi d’apprendre que votre communauté apprécie ce composant et le trouve utile, merci ! Je soutiens l’ajout de cette fonctionnalité au composant, mais je ne peux pas l’implémenter pour le moment (peut-être dans quelques mois). Cependant, si quelqu’un d’autre souhaite travailler sur cette fonctionnalité d’ici là, je serais ravi de fusionner une pull request l’incluant.

Oui, les données nécessaires sont exposées dans l’objet currentUser, qui est facilement accessible. La majeure partie du travail pour cette fonctionnalité consisterait à 1) déterminer sur quel(s) onglet(s) afficher les badges et 2) positionner correctement les badges avec du CSS.

8 « J'aime »

Merci @Osama
Sur la base de vos indications, j’ai trouvé ces objets.

<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-t-il un moyen d’enregistrer une fonction dans un événement, ou devons-nous découvrir cela grâce à l’astuce suivante ?

$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
  console.log('changé');
});
5 « J'aime »

Oui, ce sont bien les propriétés correctes que nous devons consommer, mais comme Discourse est une application Ember, nous ne nous abonnons généralement pas aux événements du DOM pour mettre à jour l’interface utilisateur. À la place, nous devons utiliser ce qu’Ember appelle les propriétés ‘computed’.

Le composant définit déjà une propriété computed ici, vous pouvez donc l’utiliser comme exemple. Une fois que vous aurez défini votre propriété computed qui détermine si le badge de notifications doit être affiché ou non (en fonction des propriétés currentUser.unread_high_priority_notifications, etc.), vous devrez utiliser cette propriété computed dans le modèle Handlebars, au même endroit, en bas du lien.

Note : implémenter cette fonctionnalité dans un composant séparé est délicat, donc tout ce que j’ai dit ici suppose que vous l’implémentez dans le composant lui-même, et non dans un composant séparé.

8 « J'aime »

Merci, je vais essayer :wink::+1:

6 « J'aime »

La barre d’onglets affiche un fond blanc même en mode sombre. Je viens de passer de la version 2.7.0 bêta 1 à la 2.7.0 bêta 3, et c’est depuis cette mise à jour que le fond blanc apparaît. Avant cela, tout fonctionnait parfaitement. J’ai également essayé de supprimer tous les autres composants du thème et toute personnalisation pour vérifier si quelque chose perturbait la barre d’onglets. Mais même sur une installation Discourse minimale, la barre d’onglets présente un fond blanc en mode sombre. Quelqu’un pourrait-il jeter un coup d’œil à ce problème ?

5 « J'aime »

J’ai appliqué un correctif pour ce problème. Merci de m’en avoir informé !

9 « J'aime »

Il semble que cet onglet fasse en sorte que la barre de progression du sujet recouvre le bouton de réponse dans certains cas (par exemple, je peux reproduire ce problème en utilisant Chrome pour simuler un iPhone SE)

Comme vous pouvez le voir, le bouton de réponse est masqué par la barre de progression. Cependant, si je désactive la barre, cela fonctionne. Je suppose que c’est parce que la position du bouton de progression est relative, mais je ne sais pas comment le corriger.

4 « J'aime »

Je rencontre un problème similaire. Le bouton « Table des matières » n’apparaît pas lorsque j’active la barre d’onglets mobile. Ce serait bien de ne pas avoir à choisir entre ces deux fonctionnalités, car nous aimons les deux !

1 « J'aime »

@haroldfy Je ne parviens pas à reproduire ce problème ici sur Meta ou sur le créateur de thèmes. Peut-être avez-vous d’autres thèmes ou personnalisations qui interfèrent ? Je peux jeter un coup d’œil si votre site est public.

@littleviolette J’essaie d’éviter autant que possible d’ajouter du code qui cible des éléments d’un autre composant. Dans ce cas, vous pouvez créer un composant séparé avec ce CSS pour pousser le bouton ToC au-dessus de la barre :

html:not(.anon) .d-toc-toggle {
  margin-bottom: 55px;
}
8 « J'aime »

Merci d’avoir examiné cela. C’est un site privé, je vais essayer de désactiver les autres personnalisations et de déboguer à partir de là.

4 « J'aime »

Je pense avoir trouvé un bug, et je ne parviens à le reproduire que sur la version PWA de mon site sous iOS (cela semble fonctionner correctement sous Android et sur Safari iOS).

La barre d’onglets devrait toujours être verrouillée, n’est-ce pas ? Voici à quoi elle ressemble lorsqu’elle est correcte :

Ensuite, je déverrouille mon écran, passe en mode paysage, puis reviens en mode portrait, et je fais défiler légèrement vers le haut, et c’est ce qui se produit :

1 « J'aime »

J’ai rencontré le même problème @haroldfy @littleviolette. Vous pouvez le corriger avec :

html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}
7 « J'aime »

La barre d’onglets entre également en conflit avec la fonctionnalité principale de filtrage des publications, qui affiche un pied de page fixe (posts-filtered-notice) lors du filtrage.

En tout cas, merci pour ce superbe TC :slight_smile:

5 « J'aime »

Composant de thème génial, merci

J’ai une demande et je voudrais savoir s’il y a un intérêt pour une fonctionnalité « faire défiler pour masquer » ?

En gros, la barre du bas se masque automatiquement lorsque l’utilisateur fait défiler vers le bas, et réapparaît lorsqu’il fait défiler vers le haut.

Un exemple que j’ai trouvé se trouve ici :

Cela libérera judicieusement un espace d’écran précieux sur mobile et améliorera l’expérience de lecture du contenu en offrant plus d’espace.

9 « J'aime »