F NAV - Mobile Navigation Tabs

[Don]

	Zusammenfassung	F NAV - Mobile Navigation Tabs
	Vorschau	Theme Creator
	Repository	GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
	Installationsanleitung	How to install a theme or theme component
	Neu bei Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

Hallo

Zuvor habe ich einen Dev Thema dafür als Theme-Komponenten-Konzept erstellt und jetzt ist es in einem Zustand, um eine Theme component zu sein.

Bitte testen Sie es, bevor Sie es live verwenden.

Einige Informationen über die Komponente: F NAV - Theme component concept

---

Über die Theme-Komponente. Ich habe so viele Beiträge darüber gelesen, dass es wunderbar wäre, die Discourse Tab Bar for Mobile dynamischer zu gestalten und die Möglichkeit hinzuzufügen, z. B. Benachrichtigungen usw. zu verwalten… F-NAV kann dies und 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 Standardinhalt des Profilmenü-Tabs enthält.

Einstellungen

Es enthält auch eine Einstellung, mit der Sie benutzerdefinierte Elemente vor dem Abmelde-Element hinzufügen können.
Es enthält drei Felder, in denen Sie einfach benutzerdefinierte Elemente hinzufügen können.

Es gibt einige Einstellungen zum Ein-/Ausblenden der Standard-Header-Icons, was nützlich ist, wenn Sie den genauen Tab nicht in F NAV platzieren möchten, damit er 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

• schaltet das Home-Tab-Icon auf Topic-Routen in einen Pfeil nach links, der eine Zurück-Funktion hinzufügt
  
• fügt einen Punkt für neue oder ungelesene Topics hinzu
  

---

hamburger (öffnet das Hamburger-Menü)

---

multi

multi tab

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

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

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

Erweitert

Persönliche Nachrichten sind immer grün, aber der Chat kann blau sein, wie ursprünglich, z. B. eine Benachrichtigung über eine ungelesene Kanalnachricht.

Erweitert

Einzelne Benachrichtigung

---

message

• fügt einen Nachrichten-Button mit Benachrichtigungen hinzu und das Klicken darauf öffnet ein Nachrichten-Modal für einen schnellen Blick

---

chat

• fügt einen Chat-Button mit seinen Funktionen hinzu

---

notificationToRoute

• wenn “Nicht stören” aktiv ist, ändert sich das Glockensymbol in ein durchgestrichenes Glockensymbol und die “Nicht stören bis”-Zeit wird angezeigt
  

• leitet zur Benachrichtigungs-Seite des Profils weiter und umgeht das Benachrichtigungsmenü

  • wenn es eine Benachrichtigung gibt, wird zu /notifications?filter=unread weitergeleitet
  • wenn es keine Benachrichtigung gibt, wird zu /notifications weitergeleitet
  • wenn es überprüfbaren Inhalt gibt, erscheint ein rotes Ausrufezeichen und es wird zu /review weitergeleitet

---

notificationMenu

• wenn “Nicht stören” aktiv ist, ändert sich das Glockensymbol in ein durchgestrichenes Glockensymbol und die “Nicht stören bis”-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 gestalten.
Sie enthält vier Felder.

• name: Dies dient nur zur einfacheren Identifizierung des Tabs in den Einstellungen.
• icon: Fügt dem Tab ein Icon hinzu. Hinweis: Wenn Sie eine Funktion auswählen, gibt es möglicherweise Icons, die mit dieser Einstellung nicht überschrieben werden können.
• destination: Fügt ein Ziel für Ihren benutzerdefinierten Tab hinzu. Hinweis: Wenn Sie eine Funktion auswählen, die das Ziel handhabt, können Sie dieses Feld leer lassen. Die Komponente verarbeitet die Ziele /my/... automatisch und wandelt sie in /u/username/... um, damit der aktive Status der Tabs korrekt hinzugefügt werden kann.
• function: Wählen Sie eine Funktion für den Tab aus.

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

Z. B. das Hinzufügen eines Tabs zur Topic-Erstellung sieht einfach so aus.

---

Credit: Discourse Tab Bar for Mobile und vielen Dank 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 Lehtonen)]

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 Lehtonen)]

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 (Max)]

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 (Max)]

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.