F NAV - Konzept für Theme-Komponente

Entwickler
1

Hallo :waving_hand:

Ich arbeite an einer neuen Theme-Komponente, die auf Discourse Tab Bar for Mobile basiert.

Die Theme-Komponente fügt die Möglichkeit hinzu, Funktionen zu den Tabs zu verwenden. Diese Funktionen können jetzt Hamburger, Benachrichtigungen, Suche sein.

  • Hamburger: Tab öffnet das Hamburger-Menü
  • Benachrichtigungen: Fügt Benachrichtigungen zum Tab hinzu
  • Suche: Öffnet kontextbezogene /search

Es modifiziert auch die Header-Icons. Entfernt Hamburger, Benutzer-Menü, Suche und fügt einen neuen DMenu-Avatar hinzu, der den Inhalt des Benutzer-Menü-Profils enthält. Wenn Sie nach unten scrollen, wird der Header überall außer im Thema ausgeblendet, um die Ansicht zu maximieren.

Das Bild zeigt einen Screenshot eines mobilen Benutzerprofils mit verschiedenen Theme-Einstellungen und aktuellen Beiträgen. (Beschriftet von KI)
Das Bild zeigt einen Screenshot eines mobilen Benutzerprofils mit verschiedenen Theme-Einstellungen und aktuellen Beiträgen. (Beschriftet von KI)1080×2026 217 KB

Es ändert das Glockensymbol des Benachrichtigungs-Tabs in Glocke-durchgestrichen, wenn “Nicht stören” aktiv ist, und fügt die Zeit hinzu. Es ändert auch dynamisch die Route, wenn es überprüfbare Elemente gibt, dann leitet es zu /review weiter, andernfalls geht es zur Seite /notifications.

Ein Screenshot einer Theme Creator App, die verschiedene Themen wie "Eine grundlegende Anleitung zum Schreiben einer grundlegenden Anleitung", "Seamus der Surferhund" und "Narnia Holiday Pics" anzeigt. (Beschriftet von KI)
Ein Screenshot einer Theme Creator App, die verschiedene Themen wie "Eine grundlegende Anleitung zum Schreiben einer grundlegenden Anleitung", "Seamus der Surferhund" und "Narnia Holiday Pics" anzeigt. (Beschriftet von KI)1080×2005 207 KB

Hier ist die Demo: https://discourse.theme-creator.io/theme/Don/f-nav

Das ist es im Moment…

Was denkst du? Danke :slightly_smiling_face:

14 „Gefällt mir“
2

Ich liebe es. Wieder gute Arbeit.

Wo wird der Chat-Button sein?

4 „Gefällt mir“
3

Das sieht wirklich gut aus! :clap:

Die Trennung der Benachrichtigungen ist sehr sinnvoll. Das zentrale Thema macht dasselbe, wodurch das Benutzermenü leichter zugänglich und angenehmer wird (es wirkt weniger aufdringlich). Es ist geradlinig und enthält die wichtigsten Links. Meiner Meinung nach ist das eine große UX-Verbesserung, gefällt mir sehr gut.

Zu den Links im Menü:

  • Ich würde das Wort „Zusammenfassung“ durch „Profil“ ersetzen; es ist in diesem Kontext leichter verständlich.
  • „Aktivität“ ist nicht sehr hilfreich; ich würde es stattdessen durch „Nachrichten“ ersetzen. Direkter Zugriff auf Ihren Posteingang ist ein Muss.
  • Ich denke, ein „Lesezeichen“ wäre auch willkommen.

Ich bin mir beim unteren Bereich nicht sicher. :thinking:
Ich bin es wohl nicht gewohnt, nach unten zu schauen.

  • Der Benachrichtigungsbutton sollte die rechte Seite öffnen, anstatt zum Profil zu gehen. Die Ansicht ist besser geeignet, wenn Sie einen schnellen Blick darauf werfen möchten und keine zusätzlichen Inhalte haben, die nichts mit der Benachrichtigung zu tun haben.

Das Hamburger-Menü öffnet sich mit einem kurzen Blinkeffekt.

Ich hoffe, das Feedback hilft. :+1:

3 „Gefällt mir“
4

Danke für das Feedback :hugs:

Nun, ich möchte eine Multi-Tab-Funktion in der F NAV erstellen, die Nachrichten und Chats enthält. Ähnlich wie bei Ordnern in mobilen Apps. Man sieht, was sich darin befindet, und kann es zum Beispiel in einem DMenu öffnen. Sie zeigt separat die ungelesenen Abzeichen an, wenn sie geöffnet wird, andernfalls sieht man eine zusammengefasste Anzeige für ungelesene Nachrichten. Nachrichten sollten Priorität haben, wie Arkshine erwähnte, daher würde sie in einem Modal geöffnet, um Nachrichten anzuzeigen.

Tolle Ideen! Ich denke, Nachrichten sollten, wie oben erwähnt, in der F NAV sein, aber ich denke, sie werden anpassbar sein. :thinking:

Die ursprüngliche Idee war, Benutzer zu Benachrichtigungen mit dem Filter “ungelesen” weiterzuleiten, wenn ungelesene Benachrichtigungen vorhanden sind, und ohne Filter zu allen weiterzuleiten, wenn keine vorhanden sind, und zur Überprüfungsseite zu gehen, wenn eine überprüfbare Benachrichtigung vorhanden ist. Aber ich habe vergessen, es hinzuzufügen :sweat_smile: Ich denke, es ist auf Mobilgeräten bequemer, die Seite weiterzuleiten… Aber vielleicht liege ich falsch :thinking:

Bearbeitung: Ich habe es hinzugefügt. Jetzt wird zu /u/username/notifications?filter=unread weitergeleitet, wenn eine ungelesene Benachrichtigung vorhanden ist.

Hmm, ja, es scheint, dass die Animation nicht korrekt hinzugefügt wird, wenn man das Hamburger-Menü durch Klicken außerhalb schließt. Das Schließen durch Wischen funktioniert einwandfrei, ich denke, deshalb habe ich es nicht bemerkt. :thinking:

Danke :slightly_smiling_face:

4 „Gefällt mir“
5

Tolle Arbeit, danke für die Komponente, ich werde sie ausprobieren.

Sie hat ein einfacheres Aussehen erhalten, besonders im Kopfbereich auf Mobilgeräten. Mir gefällt das so, die Unübersichtlichkeit ist weg und es gibt ein einfacheres Aussehen. Die meisten bekannten Anwendungen nutzen es mittlerweile so, zum Beispiel: x.com. Funktionen, die meiner Meinung nach hinzugefügt werden könnten:

  • Ein neuer Themen-Button kann zum Widget hinzugefügt werden
  • Wenn ich auf einen Beitrag klicke und ihn aufrufe, kann anstelle des Home-Buttons ein Zurück-Symbol angezeigt werden. Wenn der Benutzer auf dieses Symbol klickt, kann er zu der letzten Stelle zurückkehren, an der er sich befand.
  • Wenn ich auf einen Beitrag klicke, kann sich der ausgewählte aktive Button auf der Homepage ändern. Er kann transparent sein.
  • Es könnte die Anzahl ungelesener Nachrichten auf dem Homepage-Symbol geben. Ich bin mir da nicht sicher, es könnte es unübersichtlicher machen oder alternativ:
    Screenshot_20241204_142920
    Screenshot_20241204_142920203×173 4.54 KB

@Don

2 „Gefällt mir“
6

Ist es möglich, Verknüpfungen zu Kategorien zu definieren?
Ich würde gerne Symbole für spezielle Kategorien am unteren Rand anzeigen lassen.
Sie sollten Indikatoren für aktualisierte oder neue Themen anzeigen können, wie die Kategorieverknüpfungen in der Seitenleiste.

7

Danke für das Feedback @ozkn :slight_smile:
Ich habe die Änderung des Home-Icons bei Themenrouten und die neue oder aktualisierte Themenpunktanzeige hinzugefügt. Es wäre wahrscheinlich eine gute Idee, die Sticky-Komponente für neue oder aktualisierte Themen hinzuzufügen… Ich habe auch die Position und Größe des Benachrichtigungsabzeichens geändert (es kleiner und die Zahl fetter gemacht).

4 „Gefällt mir“
8

Tolle Arbeit, @Don. Wirklich eine großartige Theme-Komponente. Ich habe einige Probleme auf Android entdeckt, bei denen das Wischen nicht gut funktioniert, insbesondere in PWAs. Es ist möglicherweise spezifisch für die Telefone und nicht für Discourse, aber es existiert trotzdem, sodass dies diese Lücke schließt, insbesondere für iOS. Es scheint, dass mit dem verfügbaren Platz in der F NAV-Leiste Platz für ein weiteres Navigations-Element ist.

1 „Gefällt mir“
9

Wofür steht F?

10

Ich vermute Fußzeile? :wink:

3 „Gefällt mir“
11

Das ist die Idee für den Multi-Tab. Ich werde das Tab-Symbol wahrscheinlich ändern, aber dies ist nur die erste Version davon. Es enthält den Chat und die Nachrichten. Der Chat funktioniert genauso wie das Chat-Symbol in der Kopfzeile und die Nachrichten öffnen ein Nachrichten-Modal. Es wird wahrscheinlich funktionieren, wenn der Chat deaktiviert ist, dann wird DMenu ebenfalls deaktiviert und nur Nachrichten werden in der Navigation angezeigt.

Wenn der Chat aktiviert ist:

Das Bild zeigt ein Popup mit Symbolen für E-Mail und Chat, was eine Benutzeroberfläche für die Kommunikation nahelegt. (Beschriftet von KI)
Das Bild zeigt ein Popup mit Symbolen für E-Mail und Chat, was eine Benutzeroberfläche für die Kommunikation nahelegt. (Beschriftet von KI)381×357 19.9 KB

4 „Gefällt mir“
12

Schön. Ich kann es kaum erwarten, es zu benutzen.

Wenn der Benutzer nicht angemeldet ist, ändert sich nichts, oder?

1 „Gefällt mir“
13

Hallo :wave: Einige Fortschritte hier… Ich habe die Benachrichtigungsblasen erstellt, einige Anpassungen an den Zahlenbenachrichtigungen vorgenommen und einiges mehr… :slightly_smiling_face:

Multi-Tab wird jetzt automatisch zum Nachrichten-Tab geändert, wenn der Chat nicht aktiviert ist oder der Benutzer ihn in den Benutzereinstellungen deaktiviert. Administratoren können jedoch jetzt auch separat den Nachrichten- und den Chat-Tab hinzufügen.

Die Benachrichtigungsblasen ändern sich, je nachdem, ob es dringend ist oder nicht.
Multi-Tab-Dringlichkeitsbenachrichtigungen sind grün und sehen so aus. :arrow_down_small:

Screenshot 2024-12-10 at 15.41.45
Screenshot 2024-12-10 at 15.41.45174×135 2.96 KB

Erweitert

Screenshot 2024-12-10 at 15.41.59
Screenshot 2024-12-10 at 15.41.59362×337 9.69 KB

Persönliche Nachrichten sind immer grün, aber Chats können blau sein, wie ursprünglich für eine ungelesene Kanalnachrichtenbenachrichtigung zum Beispiel.

Screenshot 2024-12-10 at 15.42.41
Screenshot 2024-12-10 at 15.42.41158×131 2.69 KB

Erweitert

Screenshot 2024-12-10 at 15.42.53
Screenshot 2024-12-10 at 15.42.53365×331 9.18 KB

Einzelne Benachrichtigung

Screenshot 2024-12-10 at 15.43.25
Screenshot 2024-12-10 at 15.43.25125×126 1.68 KB

5 „Gefällt mir“
14

Hallo :wave:

Ein weiteres Update hier… Ich habe den aktiven Zustand der Tabs neu aufgebaut, jetzt funktioniert er auch besser mit dynamischen Tab-Zielen.

Ich habe das behoben… Danke :slightly_smiling_face:

Jetzt ist dies eine Option und Administratoren können wählen, welche bevorzugt wird.
notificationToRoute: leitet zur Benachrichtigungs-Seite weiter
notificationMenu: öffnet das Benachrichtigungs-Menü

Ich habe diese Änderungen zum Theme-Creator hinzugefügt, sodass es jetzt so funktioniert.

2 „Gefällt mir“
15

Gute Arbeit @Don Ich weiß, dass dies nicht Ihr F NAV-Themenkomponente ist, aber es wäre großartig, wenn es ein x gäbe, um das Suchfenster zu schließen, wenn es sich öffnet. Es sei denn, ich übersehe es, was möglich ist, nachdem Sie auf das Suchsymbol geklickt haben, wenn Sie sich entscheiden, nicht zu suchen, ist es nicht sauber, das Fenster zu schließen.

1 „Gefällt mir“
16

Hallo Brian :wave: Ich bin mir nicht sicher, ob ich das verstehe. Wenn du auf das Suchsymbol tippst, wirst du zur Seite /search weitergeleitet, sodass du mit der Browser-/Mobilnavigation oder einer Geste zurückkehren kannst.

Wieder ein Update… Ich habe beschlossen, die Header-Icons nicht zu löschen, sondern sie nur mit CSS zu verstecken. Gestern, als ich die Animation zum Öffnen des Hamburger-Menüs repariert habe, habe ich festgestellt, dass es einfacher, sauberer und sicherer ist, da wir auf diese Weise den Klick auf die Standard-Header-Icons auslösen können. Jetzt funktionieren das Hamburger-Menü, das Benachrichtigungsmenü und die Suche auf diese Weise. Das Standard-Header-Chat-Symbol ist ebenfalls nur mit CSS versteckt, da es auf den /chat-Seiten im Header angezeigt wird.

Ich versuche, die Einstellungen so einfach wie möglich zu gestalten.
Sie werden 4 Felder enthalten, die Beschreibungen fehlen noch. Das Ziel ist optional, da es, wenn du eine Funktion wählst, das Notwendige beinhaltet und dieses Feld leer bleiben sollte.

Screenshot 2024-12-12 at 18.45.26
Screenshot 2024-12-12 at 18.45.261138×362 17.3 KB

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 :arrow_down_small:

Screenshot 2024-12-12 at 18.46.05
Screenshot 2024-12-12 at 18.46.05613×326 6.9 KB

Zum Beispiel sieht das Hinzufügen eines Topic-Erstellungs-Tabs einfach so aus.

Screenshot 2024-12-12 at 18.53.57
Screenshot 2024-12-12 at 18.53.571135×395 19.9 KB

Screenshot 2024-12-12 at 18.55.50

3 „Gefällt mir“
17

Hallo @Don, meine Aussage ist eher zusammenhanglos, :confused: mein Kommentar hat nichts mit deiner Komponente zu tun. Ich denke, es wäre hilfreich, ein x zu haben, um die Suchoberfläche zu schließen, falls du dich entscheidest, nach dem Öffnen oder versehentlichem Klicken nicht zu suchen. Ich lande oft versehentlich auf der Seite oder in Discourse. :exploding_head:

Sieht fantastisch aus, ich kann es kaum erwarten, es auszuprobieren!

Ein Screenshot der Theme Creator App, der eine Suchleiste, eine Option zum Durchsuchen von Themen oder Beiträgen und eine Schaltfläche „Suchen“ zeigt. (Beschriftet von KI)
Ein Screenshot der Theme Creator App, der eine Suchleiste, eine Option zum Durchsuchen von Themen oder Beiträgen und eine Schaltfläche „Suchen“ zeigt. (Beschriftet von KI)775×1161 22.4 KB

2 „Gefällt mir“
18

Das Theme-Komponente ist fertig :tada:
Danke an alle :hugs:

3 „Gefällt mir“
19

Gleiches Problem wie bei einem früheren, etwas ähnlichen: Die Verwendung mit DiscourseHub ist wirklich schwierig. Jetzt ist es nur noch für Browser und PWAs.

20

Funktioniert bei mir in DiscourseHub.