F NAV - Mobile Navigation Tabs

Themenkomponente
63

Nach dem neuen Update funktioniert das nicht mehr. @Don, hast du irgendwelche relevanten Änderungen vorgenommen oder so?

64

Hallo :waving_hand: Nein, ich glaube nicht. Die letzte Änderung war vor 2 Monaten. Merge pull request #6 from VaperinaDEV/show-label · VaperinaDEV/f-nav-for-mobile@085e07f · GitHub

65

Ja, es funktionierte wieder alles. Einige andere Theme-Komponenten verursachten das Problem.

1 „Gefällt mir“
67

Hallo :waving_hand: Hmm, das kann ich nicht reproduzieren… welches Gerät und welchen Browser verwenden Sie?

68

Hallo Don, danke für die Antwort.
Das ist sehr seltsam. Unten sind mehrere Browser aufgeführt, die ich getestet habe, und das gleiche Phänomen ist aufgetreten. :sweat_smile:

Edge-Browser auf dem PC

image
image354×105 5.64 KB

Iphone Discourse Hub App
image
image354×105 5.64 KB

Iphone Safari
Eine einfache Reihe von grauen und grünen Symbolen, die ein Haus, ein Menü, Benachrichtigungen mit einer Eins und eine Person darstellen, wird auf weißem Hintergrund angezeigt. (Beschriftet von KI)
Eine einfache Reihe von grauen und grünen Symbolen, die ein Haus, ein Menü, Benachrichtigungen mit einer Eins und eine Person darstellen, wird auf weißem Hintergrund angezeigt. (Beschriftet von KI)1170×197 10.4 KB

Andriod Edge
Eine minimalistische Oberfläche zeigt Navigationssymbole, darunter Zurück, Optionen, eine hervorgehobene Sprechblase und ein Benutzerprofil, alles in einem monochromen Farbschema mit einem grünen Akzent. (Beschriftet von KI)
Eine minimalistische Oberfläche zeigt Navigationssymbole, darunter Zurück, Optionen, eine hervorgehobene Sprechblase und ein Benutzerprofil, alles in einem monochromen Farbschema mit einem grünen Akzent. (Beschriftet von KI)954×150 12.5 KB

70

Ich habe das folgende CSS verwendet, um die Position anzupassen, und es funktioniert ziemlich gut.

/* Verwenden Sie Flexbox, um chat-channel-unread-indicator__number zu zentrieren */
.chat-channel-unread-indicator {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative; /* Stellen Sie sicher, dass der Container einen Positionierungskontext hat */
}

/* Stellen Sie sicher, dass die Stile des Number-Elements die Zentrierung nicht beeinträchtigen */
.chat-channel-unread-indicator__number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
2 „Gefällt mir“
71

Sieht cool aus. Wäre schön, es auch für nicht angemeldete Benutzer anzuzeigen

72

@Don akzeptierst du PRs? Ich habe eine Funktion hinzugefügt, um ein modales Menü zu öffnen, in dem Sie zusätzliche Elemente hinzufügen können.

In unserem Anwendungsfall möchten wir ein Untermenü erstellen, um mehrere Variationen beim Erstellen eines neuen Themas zu haben (z. B. einen Fehlerbericht einreichen, eine Supportanfrage einreichen, eine Idee einreichen, ein neues Journal erstellen oder ein reguläres neues Thema erstellen).

Siehe: GitHub - jrgong420/f-nav-for-mobile: F NAV - Mobile Navigation Tabs

4 „Gefällt mir“
73

Schnelles Update zu meinem Fork von „F-NAV für Mobilgeräte“ mit Zurück-Schaltfläche, benutzerdefiniertem Untermenü und Sichtbarkeitssteuerungen

Warum dieser Fork?

  • Bereitstellung einer „Zurück“-Schaltfläche in der Kopfzeile auf Themenseiten, die die gängige UX mobiler Apps widerspiegelt
  • Angebot eines Tab-Typs „customMenu“, der ein konfigurierbares Untermenü öffnet (ideal für die Verknüpfung mit mehreren Zielen; wir verwenden ihn, um benutzerdefinierte, vorab ausgefüllte Links zu „Neues Thema“ hinzuzufügen)
  • Hinzufügen gruppenbasierter Sichtbarkeit für Tabs und Menüelemente, sodass Sie bestimmte Elemente nur für Mitarbeiter usw. anzeigen können.
  • Kleine Korrekturen bei einigen veralteten Funktionen und Optimierung von Stilen/Barrierefreiheit
Zusammenfassung der neu hinzugefügten Funktionen
  • Kopfzeilen-Zurück-Symbol (optional)
  • Ersetzt das Home-Logo in der Kopfzeile durch einen Zurück-Pfeil auf Themenseiten
  • Verhalten: Geht zurück, wenn es einen Verlauf gibt, andernfalls wird zu „/“ weitergeleitet
  • Umschalten mit Einstellung: header_back_icon_enabled
  • Benutzerdefinierter Tab-Typ „Submenu“
  • Neue Funktion f_nav_tabs: customMenu
  • Neue Einstellung: f_nav_submenu_items
  • Konfigurieren Sie Menüelemente mit Beschriftung und URL (optionales Symbol)
  • Ideal für den schnellen Zugriff auf mehrere Seiten von einem einzigen Tab aus
  • Gruppenbasierte Sichtbarkeitssteuerungen
  • Tabs, Untermenüelemente und profile_extra_items können auf ausgewählte Gruppen beschränkt werden
  • Verhalten:
  • Leere Gruppen => für alle sichtbar
  • Wenn Gruppen festgelegt sind => nur Mitglieder von mindestens einer ausgewählten Gruppe können sehen
  • Anonyme Benutzer können eingeschränkte Elemente nicht sehen
  • Optional: Navigationsleiste auf Themenseiten ausblenden
  • Umschalten mit Einstellung: hide_nav_in_topic
  • Gezippte „Build“-Artefakte und Testdokumente
  • Praktische Build-Artefakte (v1–v5) unter builds/
  • TESTING_GUIDE.md und TEST_RESULTS.md dokumentieren manuelle Validierung

Erweiterungen bestehender Funktionen

  • F-NAV-Elemente und Tabs
  • Fügt den Getter visibleTabs hinzu, um die Gruppensichtbarkeit zu berücksichtigen
  • Integriert die neue CustomSubmenu-Komponente in den FNavItem-Fluss
  • Avatar-/Profilmenü in der Kopfzeile
  • Die Erkennung der mobilen Ansicht wurde in die Komponente verschoben, was das Verhalten verbessert und Warnungen behebt
  • Zusätzliche Profilelemente unterstützen jetzt die gruppenbasierte Sichtbarkeit
  • Styling und Barrierefreiheit
  • Neues SCSS für das benutzerdefinierte Untermenü und das Zurück-Symbol
  • Konsistente Hover-/Aktiv-/Fokus-sichtbare Zustände
  • Konsistenter Randradius mit Kernvariablen; verfeinerte Abstände (z. B. Zurück-Schaltflächen-Abstand auf 0 gesetzt)

Fehlerbehebungen und Wartung

  • Behebung von Warnungen zur Veralterung von site.mobileView durch Verschieben von Prüfungen aus Initialisierern in die Komponenten-Rendering
  • Behebung eines Rendering-Randfalls durch Verschieben einer Funktion aus dem Block
  • Kleinere Optimierungen zur Anpassung an die Kopfzeilenverhalten von Discourse (Hover-/Aktivzustände, Opazitätsübergänge)
  • Kleine CSS-Bereinigungen (z. B. Sicherstellen, dass der Abstand der Zurück-Schaltfläche Null ist, versehentliche Größenänderungen verhindern)

Übergeordneter Vergleich (Original vs. Gefeaturter Branch)

  • Original (main): F-NAV mobile Tabs + optionaler Chat-Import; keine Zurück-Schaltfläche oder benutzerdefiniertes Untermenü
  • Fork (feat/home-logo-arrow-back):
  • Fügt die Funktion für das Zurück-Symbol in der Kopfzeile mit Fallback-Routing hinzu
  • Führt die Tab-Funktion „customMenu“ mit konfigurierbaren Untermenüelementen ein
  • Fügt gruppenbeschränkte Sichtbarkeit für Tabs, Untermenüelemente und Profilelemente hinzu
  • Blendet optional das F-NAV auf Themenseiten aus
  • Verbessert die Barrierefreiheit und Konsistenz der Interaktionszustände
  • Stellt Testdokumente und gepackte Builds bereit

Hinweise:

  • Diese Komponente zielt auf neuere Discourse-Versionen ab, die die Discourse Plugin API Level 1.14+ unterstützen (wie in den Initialisierern angegeben).
  • Wenn Sie sich auf gruppenbasierte Sichtbarkeit verlassen, stellen Sie sicher, dass Ihre Gruppen und Mitgliedschaften zuerst konfiguriert sind.

Wort der Warnung: Bitte testen Sie vorsichtig, da ich kein Programmierer bin und der TC vollständig von der KI erstellt und getestet wurde. Funktioniert am besten mit 3.6beta1.

Ein großes Dankeschön an Don für diese großartige Komponente; sie ist eine fantastische Ergänzung! :heart:

2 „Gefällt mir“