F NAV - Mobile Navigation Tabs

[Don]

	Zusammenfassung	F NAV - Mobile Navigations-Tabs
	Vorschau	Theme Creator
	Repository	GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
	Installationsanleitung	So installieren Sie ein Theme oder Theme-Component
	Neu bei Discourse-Themes?	Einsteigerleitfaden zur Nutzung von Discourse-Themes

Installiere diese Theme-Component

Hallo

Zuvor habe ich dazu ein Development Thema als Konzept für eine Theme-Component erstellt, und jetzt ist es in einem Zustand, der es erlaubt, es als Customization > Theme component zu verwenden.

Bitte stellen Sie sicher, dass Sie es vor der Nutzung in der Live-Umgebung testen.

Einige Informationen zur Component: F NAV - Theme component concept

---

Über die Theme-Component. Ich habe viele Beiträge gelesen, in denen es als wunderbar beschrieben wurde, die Discourse Tab Bar for Mobile dynamischer zu gestalten und die Möglichkeit hinzuzufügen, z. B. Benachrichtigungen zu verarbeiten… F-NAV kann dies und noch viel mehr.

Header

Er blendet das Hamburger-Menü, das Benutzer-Menü, die Suche und den Chat aus und fügt eine Profil-Menü-Schaltfläche (Avatar) hinzu, die den Inhalt der standardmäßigen Profil-Tabs des Benutzer-Menüs enthält.

Einstellungen

Es enthält auch eine Einstellung, mit der Sie benutzerdefinierte Elemente vor dem Element “Abmelden” hinzufügen können.
Es enthält drei Felder, in denen Sie problemlos benutzerdefinierte Elemente hinzufügen können.

Es gibt einige Einstellungen zum Anzeigen/Ausblenden der Standard-Header-Symbole, was nützlich ist, wenn Sie die genaue Registerkarte nicht in F NAV platzieren möchten, sodass sie im Header angezeigt wird.

Tabs

Es ist möglich, verschiedenen Tabs verschiedene Funktionen zuzuordnen. Diese Funktionen ermöglichen es jedem Tab, sich dynamisch zu ändern.

Solche Änderungen umfassen:

Funktionen

home

• wechselt das Symbol der Home-Registerkarte auf Themenrouten zu einem Linkspfeil, der eine Zurück-Funktion hinzufügt
  
• fügt einen neuen oder einen Indikator für ungelesene Themenpunkte hinzu
  

---

hamburger (öffnet das Hamburger-Menü)

---

multi

multi tab

Der Multi-Tab wechselt automatisch zum Nachrichten-Tab, wenn der Chat nicht aktiviert ist oder der Benutzer ihn in den
Benutzereinstellungen deaktiviert.

Die Benachrichtigungsblase ändert sich, je nachdem, ob es sich um eine dringende Benachrichtigung handelt oder nicht.

Dringende Benachrichtigungen im Multi-Tab sind grün und sehen so aus.

Erweitert

Persönliche Nachrichten sind immer grün, der Chat kann jedoch blau sein, zum Beispiel für die Benachrichtigung über ungelesene Kanalnachrichten.

Erweitert

Einzelne Benachrichtigung

---

message

• fügt eine Nachrichtenschaltfläche mit Benachrichtigungen hinzu, und beim Klicken darauf wird ein Nachrichten-Modal für einen schnellen Überblick geöffnet

---

chat

• fügt die Chat-Schaltfläche mit ihren Funktionen hinzu

---

notificationToRoute

• wenn “Nicht stören” aktiv ist, wechselt die Glockensymbol zu einem Glocken-Symbol mit Durchstrich und die DND-Zeit wird angezeigt
  

• leitet zur Benachrichtigungsseite des Profils weiter, umgeht das Benachrichtigungsmenü

  • wenn es eine Benachrichtigung gibt, wird zu /notifications?filter=unread weitergeleitet
  • wenn es keine Benachrichtigung gibt, wird zu /notifications weitergeleitet
  • wenn überprüfbarer Inhalt vorhanden ist, erscheint eine rote Flagge und es wird zu /review weitergeleitet

---

notificationMenu

• wenn “Nicht stören” aktiv ist, wechselt das Glockensymbol zu einem Glocken-Symbol mit Durchstrich und die DND-Zeit wird angezeigt
  

• öffnet das Benachrichtigungsmenü

---

search

• leitet zur kontextbasierten /search-Seite weiter

---

Einstellungen

Ich habe versucht, die Einstellungen so einfach wie möglich zu halten.
Es wird vier Felder enthalten.

• name: Dies dient nur der einfacheren Identifizierung des Tabs in den Einstellungen.
• icon: Fügt dem Tab ein Symbol hinzu. Hinweis: Wenn Sie eine Funktion auswählen, gibt es möglicherweise Symbole, die mit dieser Einstellung nicht überschrieben werden können.
• destination: Fügt Ihrem benutzerdefinierten Tab ein Ziel hinzu. Hinweis: Wenn Sie eine Funktion auswählen, die das Ziel verarbeitet, können Sie dieses Feld leer lassen. Die Component konvertiert /my/...-Ziele automatisch in /u/username/..., sodass der aktive Status der Tabs korrekt hinzugefügt werden kann.
• function: Wählen Sie eine Funktion für den Tab.

Administratoren können Tabs einfach erstellen/löschen/ändern und eine der Funktionen auswählen oder ein benutzerdefiniertes Ziel zum Tab hinzufügen.
Funktionen

Das Hinzufügen eines Tabs zur Themen-Erstellung sieht zum Beispiel so aus.

---

Credit: Discourse Tab Bar for Mobile und vielen Dank an alle für das Feedback im Thema F NAV - Theme component concept.

[Canapin (Coin-coin le Canapin)]

Das ist großartig und sollte legitimerweise das Standardverhalten sein und meinen Daumen davor bewahren, zu oft zum oberen Bildschirmrand meines greifen zu müssen.

Ich bin kein Fan des prominenten „Online“-Schalters, da ich denke, dass die meisten Leute diese Einstellung nicht oft ändern müssen. Ich vermute, die meisten Benutzer entscheiden sich dafür, ihre Online-Präsenz endgültig abzulehnen, daher bin ich mir der ständigen Erinnerung, dass diese Option existiert, nicht sicher.

Sie haben offenbar viele sehr nützliche Navigationsmodifikations-Theme-Komponenten erstellt. Ich würde einige davon gerne verwenden, aber wie sehr sehen Sie sich selbst bei der langfristigen Wartung all dessen? Ich neige dazu, nur #offizielle Theme-Komponenten zu verwenden, um die Zuverlässigkeit zu gewährleisten.

Ich habe die ursprüngliche Tab-Bar-Offizielle-Theme-Komponente nicht gesehen, also werde ich sie mir ansehen.

[ozkn (Mathx)]

Danke für die Komponente @don, ich bin schon lange hier, du leistest wirklich großartige Arbeit.

[Monikas (JustMonika)]

FKB Pro - Social theme

[A screenshot of a social media platform, showcasing a user's profile with a variety of anime-related content. (Captioned by AI)] [The image shows a computer screen displaying a web browser with a blurry background, possibly to protect sensitive information. (Captioned by AI)] This one I’m not sure if it’s a bug or not because I have too many components Well I’d better give feedback on it

Das sollte ein Fehler sein

[Don]

Ah danke, das bezieht sich auf das FKB-Theme. Ich werde das Theme aktualisieren.

[Don]

Hier ist die Korrektur: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
Bitte aktualisieren Sie das FKB-Theme und aktivieren Sie diese neue Einstellung.

[ozkn (Mathx)]

Bell Classic Regular Icon | Font Awesome

Hallo @don, wie kann ich fa-regular Icons wie auf dem Bild verwenden? Ich habe recherchiert und keine Informationen gefunden, wie das nach dem Wechsel zu Fontawesome 6 funktioniert.

[Don]

Hallo Es sollte mit far-bell funktionieren. Ich hatte vor, es regelmäßig in solide umzuwandeln, wenn der Tab aktiv ist. Ich werde das überprüfen, aber wenn ich mich richtig erinnere, hat das Haus-Symbol nur in der kostenlosen Version eine solide Darstellung.

[ozkn (Mathx)]

Danke, ich habe mein Problem gelöst. @Don

[Jagster (Jakke Flemming)]

Das Home-Symbol, das sich beim Öffnen eines Themas in eine Zurück-Schaltfläche ändert. Warum, wir können dafür wischen (wie beim Zurückkehren zum Startbildschirm des Hubs ). Meine Benutzer haben sich ziemlich darüber beschwert, weil sie jetzt zum Logo greifen müssen (1. Welt-Problem, ich weiß )

[Don]

Ich denke, wir können es in eine Funktion einfügen, ich überlege gerade, wo ich sie platzieren soll. Dies kann ein einzelner Tab sein und Sie können ihn zur Navigation hinzufügen, die nur in DiscourseHub angezeigt wird.

[Jagster (Jakke Flemming)]

Tatsächlich funktioniert DiscourseHub einwandfrei mit dem Wischen nach unten. Das wusste ich nur nicht.

Die Frage nach der Home/Zurück-Schaltfläche ist größer, weil ich sie anderen erklären muss.

[Don]

@Jagster

Diese Frage nach der Home/Zurück-Schaltfläche ist größer, weil ich sie anderen erklären muss.

Die Zurück-Schaltfläche ist nur in Themen aktiv, um die Rückwärtsnavigation zwischen Themen zu erleichtern. Sie stammt von der Home-Funktion, die Sie ausschalten können und die dann das Home-Ziel beibehält.

Die Einstellungen können noch nicht neu geordnet werden und wenn Sie eine vorhandene Auswahl haben, können Sie diese nicht löschen, aber ich füge eine neue Funktion none hinzu, die das gleiche Verhalten wie das Leeren des Funktionsfeldes hat. Auf diese Weise müssen Sie nicht die gesamte Navigationsleiste neu erstellen.

So sollte es sein, wenn Sie die Zurück-Schaltfläche deaktivieren und das Home-Symbol überall beibehalten möchten.

FEATURE: Add `none` option to dropdown for clearing selection

[Heliosurge (Dan DeMontmorency)]

Wie immer fantastisch. Ich muss dem aus der schnellen Vorschau im Theme Creator zustimmen. Dies sollte wirklich im Kernpaket mit einem Umschalter für klassische mobile und verbesserte mobile Geräte enthalten sein.

Ich kann mir vorstellen, dass dies Dinge wie ein längeres Banner-Seitenlogo eröffnet. Eine sauberere Option für Extras im Header wie eine lokale Auswahl und mehr. Wie immer sehr, sehr gut, Don!

[MihirR (Mihir)]

Das Bleistiftsymbol und die Navigationsinhalte klappen mit der Navigationsleiste zusammen.

[Don]

F NAV - Mobile Navigation Tabs

Here is the fix: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub Please update the FKB theme and enable this new setting. [Screenshot 2024-12-14 at 9.17.02]

[CAX.DO]

Hallo Don. Vielen Dank für deine großartige Arbeit. Sie gefällt mir.
Ich habe eine Frage. Nachdem ich auf das Hamburger-Menü oder die Benachrichtigung geklickt habe, muss ich manchmal keine weiteren Aktionen durchführen. Zu diesem Zeitpunkt muss ich zur Artikelliste zurückkehren. Allerdings kann ich das Hamburger-Menü oder die Benachrichtigung nur durch Klicken auf die leere Seite schließen. Dies kann dazu führen, dass versehentlich auf den Avatar oder die Antwort geklickt wird.

Um ein weiteres einfaches Beispiel zu geben: Wenn ich mich auf der Chat-Seite befinde und zur Startseite zurückkehren muss, muss ich auf die Zurück-Schaltfläche oben links klicken, was auf Mobilgeräten nicht benutzerfreundlich ist.

Ist es also möglich, die Menüleiste immer oben zu behalten?

Ich hoffe, meine Beschreibung ist verständlich.

[Don]

Hallo Max

Können Sie bitte einen Screenshot / eine Bildschirmaufnahme des Problems machen?

@CAX.DO

Wenn ich auf der Chat-Seite bin und zur Startseite zurückkehren muss, muss ich auf die Zurück-Schaltfläche in der oberen linken Ecke klicken.

Auf /chat blenden wir die Navigation aus und verwenden die Standard-Chat-Kopfzeile. Ich bin mir nicht sicher, ob es sich lohnt, die Navigation im Chat anzuzeigen, da dies möglicherweise Probleme auf verschiedenen Browsern verursachen kann, aber ich werde dies überprüfen.

[CAX.DO]

Hallo Don
Vielen Dank für Ihre Antwort.
Bitte beachten Sie die folgenden Screenshots. Die ersten beiden Screenshots bedeuten, dass ich beim Schließen des Hamburgers oder der Benachrichtigung nur auf den gelben Bereich klicken kann. Das Problem ist, dass man leicht versehentlich auf den Artikel oder Avatar klickt.

Der dritte Screenshot bedeutet, dass ich auf die Zurück-Schaltfläche in der oberen linken Ecke klicken muss, um die Chat-Oberfläche zu verlassen.

[Don]

Danke für die Klarstellung

@CAX.DO

Die ersten beiden Screenshots bedeuten, dass ich, wenn ich den Hamburger oder die Benachrichtigung schließen möchte, nur auf den gelben Bereich klicken kann. Das Problem ist, dass man leicht versehentlich auf den Artikel oder den Avatar klickt.

Ja, ich verstehe. Das Problem hier ist nicht die Komponente, sondern ein Kernproblem, wenn Sie die Einstellung „Bewegung reduzieren“ auf Ihrem Gerät aktiviert haben. Ist diese auf Ihrem Gerät aktiviert?

Wenn „Bewegung reduzieren“ deaktiviert ist, blockiert der header-cloak (dunkler Bereich hinter dem Menü) die Klickaktion.

Wenn ich es auf meinem Gerät aktiviere, blockiert es den Klick des Benutzers nicht.

Wenn dies der Fall ist, können Sie die Menüs auch sicher mit Wischgesten schließen.

Ich glaube, ich habe irgendwo ein Thema zu diesem Problem

@CAX.DO

Der dritte Screenshot bedeutet, dass ich auf die Zurück-Schaltfläche oben links klicken muss, um die Chat-Oberfläche zu verlassen.

Das ist die Standard-Chat-Header.

Ich werde prüfen, ob wir dort auch die Navigation aktivieren können.