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
	Hat es dir gefallen?	> ./support --coffee
	Installationsanleitung	So installierst du ein Theme oder Theme-Component
	Neu bei Discourse Themes?	Einsteiger-Leitfaden zur Nutzung von Discourse Themes

Dieses Theme-Component installieren

Hallo

Zuvor habe ich ein Development Thema dazu als Konzept für ein Theme-Component erstellt, und nun ist es in einem Zustand, in dem es als Customization > Theme component veröffentlicht werden kann.

Bitte teste es vor der Nutzung im Live-Betrieb unbedingt.

Einige Infos hier zum Component: F NAV - Theme component concept

---

Über das Theme-Component. Ich habe so viele Beiträge darüber gelesen, wie wunderbar es wäre, die Discourse Tab Bar for Mobile dynamischer zu gestalten und die Möglichkeit zu schaffen, z. B. Benachrichtigungen zu verwalten … F-NAV kann das und noch mehr …

Header

Es blendet das Hamburger-Menü, das Benutzermenü, die Suche und den Chat aus und fügt einen Profil- (Avatar-)Menü-Button hinzu, der den Inhalt des Standard-Benutzermenü-Profiltabs enthält.

Einstellungen

Es enthält auch eine Einstellung, mit der du benutzerdefinierte Elemente vor dem „Abmelden“-Element hinzufügen kannst.
Es gibt drei Felder, in die du benutzerdefinierte Elemente einfach hinzufügen kannst.

Es gibt einige Einstellungen zum Ein-/Ausblenden der Standard-Header-Symbole, was nützlich ist, wenn du den exakten Tab nicht in F NAV platzieren möchtest, damit er im Header angezeigt wird.

Tabs

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

Solche Änderungen umfassen:

Funktionen

home

• wechselt das Home-Tab-Symbol auf Themen-Routen zu einem Pfeil nach links, was eine Zurück-Funktion hinzufügt
  
• fügt einen Indikatorpunkt für neue oder ungelesene Themen 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
einstellungen deaktiviert.

Die Benachrichtigungsblase ändert sich je nachdem, ob es dringend ist oder nicht.

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

Ausgeklappt

Persönliche Nachrichten sind immer grün, aber der Chat kann blau sein, wie ursprünglich zum Beispiel für Benachrichtigungen über ungelesene Kanal-Nachrichten.

Ausgeklappt

Einzelne Benachrichtigung

---

message

• fügt eine Nachrichten-Schaltfläche mit Benachrichtigungen hinzu; ein Klick darauf öffnet ein Nachrichten-Modal für einen schnellen Blick

---

chat

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

---

notificationToRoute

• wenn „Nicht stören“ aktiv ist, wechselt das Glockensymbol zum Glocke-mit-Schlag-Symbol und die Zeit, bis zu der „Nicht stören“ aktiv ist, wird angezeigt
  

• leitet zur Profil-Benachrichtigungsseite um und umgeht das Benachrichtigungsmenü

  • wenn es eine Benachrichtigung gibt, leitet es zu /notifications?filter=unread um
  • wenn es keine Benachrichtigung gibt, leitet es zu /notifications um
  • wenn es überprüfbare Inhalte gibt, erscheint eine rote Flagge und es leitet zu /review um

---

notificationMenu

• wenn „Nicht stören“ aktiv ist, wechselt das Glockensymbol zum Glocke-mit-Schlag-Symbol und die Zeit, bis zu der „Nicht stören“ aktiv ist, wird angezeigt
  

• öffnet das Benachrichtigungsmenü

---

search

• leitet zur kontextbasierten /search-Seite um

---

Einstellungen

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

• name: Dies dient nur dazu, den Tab in den Einstellungen leichter zu identifizieren.
• icon: Fügt dem Tab ein Symbol hinzu. Hinweis: Wenn du eine Funktion auswählst, gibt es möglicherweise Symbole, die mit dieser Einstellung nicht überschrieben werden können.
• destination: Fügt ein Ziel für deinen benutzerdefinierten Tab hinzu. Hinweis: Wenn du eine Funktion auswählst, die das Ziel behandelt, kannst du es leer lassen. Das Component behandelt /my/...-Ziele automatisch und konvertiert sie in /u/username/..., damit der aktive Status der Tabs korrekt hinzugefügt werden kann.
• function: Wähle eine Funktion für den Tab.

Administratoren können einfach Tabs erstellen/löschen/ändern und aus einer der Funktionen auswählen oder ein benutzerdefiniertes Ziel für den Tab hinzufügen.
Funktionen

Z. B. sieht das Hinzufügen eines Tabs für die Themen-Erstellung einfach so aus.

---

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

[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.