F NAV - Schede di Navigazione Mobile

:information_source: Riepilogo F NAV - Schede di Navigazione Mobile
:eyeglasses: Anteprima Theme Creator
:hammer_and_wrench: Repository GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs
:question: Guida all’installazione Come installare un tema o un componente tema
:open_book: Nuovo ai temi di Discourse? Guida per principianti all’uso dei temi di Discourse

Installa questo componente tema

Ciao :wave:

In precedenza, ho creato un Dev topic per esso come concetto di componente tema e ora questo è in uno stato tale da essere un Theme component.

:warning: Assicurati di testarlo prima di usarlo in live.

Alcune informazioni qui sul componente: F NAV - Theme component concept


Informazioni sul componente tema. Ho letto così tanti post a riguardo, sarebbe meraviglioso rendere la Discourse Tab Bar for Mobile più dinamica e aggiungere la possibilità di gestire ad esempio le notifiche, ecc… F-NAV può fare questo e altro ancora…

Header

Nasconde l’hamburger, il menu utente, la ricerca e la chat e aggiunge un pulsante del menu del profilo (avatar) che contiene il contenuto predefinito della scheda del profilo del menu utente.

Impostazioni

Contiene anche un’impostazione in cui è possibile aggiungere elementi personalizzati prima della voce Esci.
Contiene tre campi in cui è possibile aggiungere facilmente elementi personalizzati.

Ci sono alcune impostazioni per mostrare/nascondere le icone predefinite dell’header, il che è utile quando non si desidera posizionare la scheda esatta in F NAV in modo che venga mostrata nell’header.

Schede

È possibile associare diverse funzioni alle schede. Queste funzioni consentono a ciascuna scheda di cambiare dinamicamente.

Screenshot 2024-12-13 at 13.06.14

Tali modifiche includono:

Funzioni

home

  • cambia l’icona della scheda home sulle rotte dei topic in una freccia sinistra che aggiunge una funzione di ritorno
    Screenshot 2024-12-13 at 12.29.33
  • aggiunge un punto indicatore per i topic nuovi o non letti
    Screenshot 2024-12-13 at 12.30.52

hamburger (apre il menu hamburger)


multi

scheda multi

La scheda Multi viene cambiata automaticamente in scheda messaggio se la chat non è abilitata o l’utente la disattiva nelle impostazioni utente.

La bolla delle notifiche cambia a seconda che sia urgente o meno.

Le notifiche urgenti della scheda Multi sono verdi e appaiono così. :arrow_down_small:


Espanso

I messaggi personali sono sempre verdi, ma la chat può essere blu come originariamente, ad esempio una notifica di messaggio di canale non letto.


Espanso

Notifica singola


message

  • aggiunge un pulsante messaggio con notifiche e cliccandoci sopra apre una modale messaggi per una rapida visualizzazione

chat

  • aggiunge un pulsante chat con le sue funzioni

notificationToRoute

  • se non disturbare è attivo, l’icona della campana cambierà in icona campana-slash e apparirà l’ora di dnd fino a
    Screenshot 2024-12-13 at 13.02.35

  • reindirizza alla pagina delle notifiche del profilo bypassando il menu delle notifiche

    • se ci sono notifiche, reindirizza a /notifications?filter=unread
    • se non ci sono notifiche, reindirizza a /notifications
    • se c’è un contenuto da revisionare apparirà un segnale di pericolo e reindirizza a /review

notificationMenu

  • se non disturbare è attivo, l’icona della campana cambierà in icona campana-slash e apparirà l’ora di dnd fino a
    Screenshot 2024-12-13 at 13.02.35

  • apre il menu delle notifiche


search

  • reindirizza alla pagina /search basata sul contesto

Impostazioni

Ho cercato di rendere le impostazioni il più semplici possibile.
Conterrà quattro campi.

  • name: Questo serve solo per identificare più facilmente la scheda nelle impostazioni.
  • icon: Aggiunge un’icona alla scheda. Nota: Se selezioni una funzione, potrebbero esserci icone che non possono essere sovrascritte con questa impostazione.
  • destination: Aggiunge una destinazione per la tua scheda personalizzata. Nota: Se selezioni una funzione che gestirà la destinazione, puoi lasciarla vuota. Il componente gestisce automaticamente le destinazioni /my/... convertendole in /u/username/... in modo che lo stato attivo delle schede possa essere aggiunto correttamente.
  • function: Scegli una funzione per la scheda.

Gli amministratori possono semplicemente creare/rimuovere/modificare schede e selezionare una delle funzioni o aggiungere una destinazione personalizzata alla scheda.
Funzioni :arrow_down_small:

Ad esempio, l’aggiunta di una scheda di creazione di topic apparirà semplicemente così.


Screenshot 2024-12-12 at 18.55.50


Crediti: Discourse Tab Bar for Mobile e grazie a tutti per i feedback nel topic F NAV - Theme component concept. :heart:

21 Mi Piace

Questo è fantastico e dovrebbe legittimamente essere il comportamento predefinito e mi salverà il pollice dal dover raggiungere troppo spesso la parte superiore dello schermo del mio :mobile_phone:.

Non sono un fan dell’interruttore “online” prominente perché penso che la maggior parte delle persone non abbia bisogno di cambiare questa impostazione spesso, immagino che la maggior parte degli utenti scelga di rinunciare alla propria presenza online una volta per tutte, quindi non sono sicuro del costante promemoria che questa opzione esista.

Apparentemente hai apportato molte modifiche di navigazione molto utili ai componenti del tema. Mi piacerebbe usarne alcuni, ma quanto ti vedi a mantenere tutto questo a lungo termine? Tendo molto a usare solo i componenti del tema #ufficiali per garantire l’affidabilità.

Non ho visto il componente del tema ufficiale della barra delle schede originale, quindi gli darò un’occhiata.

7 Mi Piace

Grazie per il componente @don, sono qui da molto tempo, stai facendo davvero un ottimo lavoro.

3 Mi Piace

Questo dovrebbe essere un bug

2 Mi Piace

Ah grazie, questo è correlato al tema FKB. Aggiornerò il tema.

3 Mi Piace

Ecco la correzione: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
Si prega di aggiornare il tema FKB e abilitare questa nuova impostazione.
Screenshot 2024-12-14 at 9.17.02

3 Mi Piace

Ciao @don, come posso usare le icone fa-regular come nella foto? Ho fatto qualche ricerca e non ho trovato informazioni su come farlo dopo il passaggio a Fontawesome 6.

3 Mi Piace

Ciao :waving_hand: Dovrebbe funzionare con far-bell. Avevo in programma di renderlo da regolare a solido quando la scheda è attiva, controllerò questo ma se ricordo bene l’icona della casa ha solo la versione solida nella versione gratuita. :thinking:

1 Mi Piace

Grazie, ho risolto il mio problema. @Don

1 Mi Piace

L’icona della home, che si trasforma nel pulsante indietro quando si apre un argomento. Perché, possiamo usare lo swiping per quello (come quando si torna alla schermata principale dell’Hub :smirking_face:). I miei utenti si sono lamentati parecchio di questo, perché ora devono raggiungere il logo per farlo (problema del primo mondo, lo so :joy:)

2 Mi Piace

Penso che possiamo aggiungerlo a una funzione, sto solo pensando a dove posizionarlo. Questa può essere una singola scheda e puoi aggiungerla alla navigazione che viene visualizzata solo in DiscourseHub.

1 Mi Piace

In realtà DiscourseHub funziona benissimo con lo scorrimento verso il basso. Semplicemente non lo sapevo.

La questione del pulsante home/indietro è più grande perché devo spiegarla agli altri.

3 Mi Piace

Il pulsante indietro è attivo solo negli argomenti per semplificare la navigazione indietro tra gli argomenti. Deriva dalla funzione home che puoi disattivare e quindi manterrà la destinazione home.

Le impostazioni non possono ancora essere riordinate e se hai una selezione esistente non puoi cancellarla, ma ho aggiunto una nuova funzione none che avrà lo stesso comportamento di quando lasci vuoto il campo della funzione. In questo modo non dovrai ricreare tutte le schede di navigazione.

Questo è come dovrebbe essere se vuoi disabilitare il pulsante indietro e mantenere la home ovunque.

3 Mi Piace

Fantastico come sempre. Devo concordare dalla rapida anteprima sul tema creator. Questo dovrebbe davvero essere incluso nel core con un’opzione per il classico mobile e il mobile migliorato.

Vedo che questo apre cose come loghi del sito con banner più lunghi. Un’opzione più pulita per gli extra nell’intestazione come il selettore di lingua e altro ancora. Molto, molto bello come sempre Don!

3 Mi Piace

L’icona della matita e gli argomenti di navigazione si stanno collassando con la barra di navigazione.

1 Mi Piace
4 Mi Piace

Ciao Don. Grazie per il tuo fantastico lavoro. Mi piace.
Ho una domanda. Dopo aver cliccato sull’Hamburger o sulla Notifica, a volte non ho bisogno di intraprendere ulteriori azioni. In questo momento, devo tornare all’elenco degli articoli. Tuttavia, posso chiudere l’Hamburger o la Notifica solo cliccando sulla pagina vuota. Ciò potrebbe portare a clic accidentali sull’avatar o sulla risposta.

Per fare un altro semplice esempio, quando mi trovo sulla pagina della chat e devo tornare alla home page, devo cliccare sul pulsante indietro in alto a sinistra, il che in realtà non è user-friendly sui dispositivi mobili.

Quindi, è possibile mantenere sempre la barra dei menu in alto?

Spero che la mia descrizione possa essere compresa.

2 Mi Piace

Ciao Max :wave:

Puoi fare uno screenshot / registrare lo schermo riguardo al problema?

Su /chat nascondiamo la navigazione e utilizziamo l’intestazione predefinita della chat. Non sono sicuro che valga la pena visualizzare la navigazione sulla chat perché potrebbe causare problemi su browser diversi, ma verificherò.

1 Mi Piace

Ciao Don :smiley:
Grazie per la tua risposta.
Si prega di fare riferimento agli screenshot sottostanti. I primi due screenshot indicano che quando voglio chiudere l’Hamburger o la Notifica, posso fare clic solo sull’area gialla. Il problema è che è facile fare clic accidentalmente sull’articolo o sull’avatar.

Il terzo screenshot indica che devo fare clic sul pulsante Indietro nell’angolo in alto a sinistra per uscire dall’interfaccia di chat.



1 Mi Piace

Grazie per il chiarimento :blush:

Sì, capisco. Il problema che si verifica qui non è il componente, ma un problema di base quando hai abilitato l’impostazione “riduci movimento” sul tuo dispositivo. È abilitata sul tuo dispositivo?

Quando il “riduci movimento” è disattivato. Il header-cloak (area scura dietro il menu) blocca l’azione del clic.

Quando lo abito sul mio dispositivo, non blocca il clic dell’utente.

Se questo è il caso, puoi anche chiudere i menu in sicurezza con i gesti di scorrimento.

Penso di avere un argomento su questo problema da qualche parte :thinking:

Questa è l’intestazione di chat predefinita.

Verificherò se possiamo abilitare anche la navigazione lì.

3 Mi Piace