Barre latérale de chat

:information_source: Résumé S’ouvre automatiquement et affiche le chat comme une barre latérale, tant qu’il y a de l’espace, et profite de la hauteur
:hammer_and_wrench: Dépôt GitHub - Arkshine/discourse-chat-sidebar
:question: Guide d’installation Comment installer un thème ou un composant de thème
:open_book: Nouveau aux thèmes Discourse ? Guide pour débutants sur l’utilisation des thèmes Discourse

Installer ce composant de thème

Crédits : @Alon1 (demande sponsorisée)[^1]

Ce composant de thème vise à s’ouvrir automatiquement et à afficher le chat comme une barre latérale, tant qu’il y a de l’espace, et à profiter de la hauteur.

  • Prise en charge du redimensionnement des fenêtres
  • Prise en charge du compositeur
  • Peut être fixé soit au contenu, soit à la fenêtre des deux côtés
  • L’utilisateur peut choisir la position (enregistrée dans le stockage local du navigateur)
  • Peut revenir à l’état de chat d’origine s’il était précédemment ouvert
  • Les préférences d’origine de l’utilisateur du chat ne sont pas touchées
  • Prise en charge partielle des thèmes (la plupart des plus populaires)

Cela devrait fonctionner sur la plupart des thèmes.
Faites-moi savoir s’il manque des options ou si quelque chose ne fonctionne pas sur un thème ! :smile:

Paramètres

Nom Défaut Description
breakpoint auto Point d’arrêt en px pour que la barre latérale du chat apparaisse.
Définissez sur auto pour utiliser la largeur par défaut de la barre latérale et du contenu comme point d’arrêt naturel (recommandé).
width 400px Largeur de la barre latérale du chat.
position [^2] right Position de la barre latérale du chat.

left: Fixé sur le côté gauche du contenu
right: Fixé sur le côté droit du contenu
outside-left: Fixé sur le côté gauche de la fenêtre
outside-right: Fixé sur le côté droit de la fenêtre
theme_style Lorsque possible, utiliser le style du thème actuel sur ces positions de barre latérale de chat.
Disponible uniquement pour la plupart des thèmes populaires.
Ce n’est pas un paramètre fiable (le nom du thème peut être modifié).
Désactiver pour utiliser le style de thème par défaut.
allow_user_preference[^3] Permettre aux utilisateurs de définir leurs préférences de barre latérale de chat.
Note : ceci est enregistré dans le stockage local du navigateur de l’utilisateur.

Valeurs disponibles :
position: Permettre aux utilisateurs de définir la position de la barre latérale du chat

[^1] : Si intéressé, le cas d’utilisation d’Alon ici.
[^2] : Assurez-vous de rafraîchir la page.
[^3] : Important : ce paramètre utilise la dernière API pour afficher l’icône dans l’en-tête et nécessite la dernière version de Discourse.

À faire

  • Tests
  • Transitions plus fluides
  • Plus de préférences utilisateur ?

Notes de développement

Initialement, j’ai essayé d’insérer le composant <ChatDrawer /> dans un autre point de sortie afin qu’il soit plus facile à manipuler et à garder dans le flux. Malheureusement, le composant d’origine ne peut pas être complètement supprimé (je pense aux événements). Du moins, je n’ai pas trouvé de moyen de le remplacer.

Cela ne me laisse d’autre choix que de suivre la voie difficile du JS au prix d’une utilisation un peu plus intensive du CPU mais moins intrusive (bien que le redimensionnement manuel ne se produise que parfois).

24 « J'aime »

Bien joué ! :clap: :slight_smile:

Est-ce que cela prend en charge Discourse Bars 🍻 🍸 (a sidebar framework), car il serait agréable de le combiner avec d’autres widgets de barre latérale ?

7 « J'aime »

Malheureusement, il ne peut pas prendre en charge les barres Discourse pour le moment.

Le composant utilise le tiroir de chat d’origine, et le positionnement est effectué manuellement.
À moins que nous puissions utiliser/déplacer le composant <ChatDrawer /> d’origine où nous le souhaitons, ce serait difficile, je crois. Je suis d’accord, cependant ; ce serait génial ! :slight_smile:

Au moins, il peut être affiché à côté de la barre latérale de la barre

Mon composant utilise l’élément #main-outlet-wrapper comme référence, donc tout ce qui se trouve à l’intérieur fonctionnera bien.

4 « J'aime »

OMG c’est super !

3 « J'aime »

Est-ce que cela fonctionne uniquement si le panneau latéral est réduit ? Je remarque que si je ne réduis pas mon panneau latéral, la barre latérale de discussion ne s’affiche pas.

1 « J'aime »

Dans la version actuelle, le contenu principal n’est pas forcé à rétrécir s’il n’y a pas assez d’espace pour placer la barre latérale de discussion. C’est par conception.

Il peut y avoir des situations où cela peut être utile. Je n’ai rien contre l’ajout d’une option utilisateur pour le permettre. :thinking:

1 « J'aime »

D’accord, je comprends, merci pour le composant, il fonctionne très bien.

1 « J'aime »

Je crois que ce composant ne fonctionne plus depuis la version 3.6.0.beta2-latest ? Peu importe ce que je choisis, c’est toujours à droite comme l’expérience de base… Est-ce que ça fonctionne pour quelqu’un ?

Ce composant fonctionne maintenant comme prévu !, Je testais la plupart du temps sur l’écran de mon MacBook et quand le composant n’a pas assez d’espace, il n’affiche rien, c’est probablement pourquoi j’étais confus. Cela fonctionne parfaitement maintenant.

2 « J'aime »

Je n’ai pas encore testé, mais merci de l’avoir signalé, je vais vérifier bientôt !

2 « J'aime »

super composant :+1: c’est une très bonne idée

J’ai créé une PR pour corriger les dépréciations connues. :+1:

Merci à @DevTeVe de l’avoir testée !

4 « J'aime »

Merci beaucoup d’être allé au-delà pour m’aider :heart: !

Donc, j’ai discuté hors ligne avec @Arkshine, et comme j’avais quelques suggestions, nous avons décidé que c’était un meilleur endroit pour les laisser !

  1. Fenêtre de chat redimensionnable (largeur et hauteur)
  2. Permettre qu’elle reste flottante même si elle couvre le texte à l’écran.
  3. Ce serait génial si la largeur était aussi automatique ; de cette façon, elle trouverait toujours un moyen de s’adapter, même si elle semble petite, et dans les paramètres (pas par défaut), nous aurions quelque chose comme « min px » et un avertissement disant : « Si défini, le chat reviendra à l’état d’origine s’il n’est pas au moins de valeur xxx ».
2 « J'aime »