F NAV - Schede di navigazione mobile

[Don]

	Riepilogo	F NAV - Schede di navigazione mobile
	Anteprima	Theme Creator
	Repository	GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
	Ti è stato utile?	> ./support --coffee
	Guida all’installazione	Come installare un tema o un componente di tema
	Nuovo ai temi Discourse?	Guida per principianti all’uso dei temi Discourse

Installa questo componente di tema

Ciao

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

Assicurati di testarlo prima dell’uso in produzione.

Alcune informazioni sul componente: F NAV - Theme component concept

---

Informazioni sul componente di tema. Ho letto molti post in cui si diceva che sarebbe stato meraviglioso rendere la Discourse Tab Bar for Mobile più dinamica e aggiungere la possibilità di gestire, ad esempio, le notifiche… F-NAV può farlo e molto altro…

Intestazione

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

Impostazioni

Contiene anche un’impostazione in cui è possibile aggiungere elementi personalizzati prima dell’elemento “Esci”.
Contiene tre campi in cui è possibile aggiungere facilmente elementi personalizzati.

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

Schede

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

Tali modifiche includono:

Funzioni

home

• cambia l’icona della scheda home nelle rotte del topic in una freccia verso sinistra, aggiungendo una funzione di ritorno
  
• aggiunge un indicatore a punto per i nuovi topic o quelli non letti
  

---

hamburger (apre il menu hamburger)

---

multi

scheda multipla

La scheda multipla cambia automaticamente nella scheda messaggi se la chat non è abilitata o se l’utente la disattiva nelle impostazioni utente.

La bolla delle notifiche cambia in base a se è urgente o meno.

Le notifiche urgenti della scheda multipla sono verdi e hanno questo aspetto.

Espansa

Il messaggio privato è sempre verde, ma la chat può essere blu come in origine, ad esempio per la notifica di un messaggio di canale non letto.

Espansa

Notifica singola

---

message

• aggiunge un pulsante messaggi con notifiche e il clic su di esso apre una finestra modale dei messaggi per una rapida consultazione

---

chat

• aggiunge il pulsante chat con le sue funzioni

---

notificationToRoute

• se il non disturbare è attivo, l’icona della campanella cambierà in icona campanella-barrata e verrà visualizzato l’orario di fine del non disturbare
  

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

  • se c’è una notifica, reindirizza a /notifications?filter=unread
  • se non c’è alcuna notifica, reindirizza a /notifications
  • se c’è un contenuto da revisionare, apparirà una bandierina rossa e reindirizzerà a /review

---

notificationMenu

• se il non disturbare è attivo, l’icona della campanella cambierà in icona campanella-barrata e verrà visualizzato l’orario di fine del non disturbare
  

• 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 è solo per identificare più facilmente la scheda nelle impostazioni.
• icon: Aggiunge un’icona alla scheda. Nota: Se si seleziona una funzione, potrebbero esserci icone che non possono essere sovrascritte con questa impostazione.
• destination: Aggiunge una destinazione per la tua scheda personalizzata. Nota: Se si seleziona una funzione che gestirà la destinazione, si può lasciare vuoto. Il componente gestisce le destinazioni /my/... convertendole automaticamente 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 le schede e selezionare una delle funzioni o aggiungere una destinazione personalizzata alla scheda.
Funzioni

Ad esempio, l’aggiunta di una scheda di creazione del topic avrà semplicemente questo aspetto.

---

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

[Canapin (Coin-coin le Canapin)]

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 .

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.

[ozkn (Mathx)]

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

[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

Questo dovrebbe essere un bug

[Don]

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

[Don]

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.

[ozkn (Mathx)]

Bell Classic Regular Icon | Font Awesome

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.

[Don]

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

[ozkn (Mathx)]

Grazie, ho risolto il mio problema. @Don

[Jagster (Jakke Flemming)]

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 ). I miei utenti si sono lamentati parecchio di questo, perché ora devono raggiungere il logo per farlo (problema del primo mondo, lo so )

[Don]

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.

[Jagster (Jakke Flemming)]

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.

[Don]

@Jagster

Quella domanda sul pulsante home/indietro è più importante perché devo spiegarla ad altri.

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.

FEATURE: Add `none` option to dropdown for clearing selection

[Heliosurge (Dan DeMontmorency)]

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!

[MihirR (Mihir)]

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

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

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.

[Don]

Ciao Max

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

@CAX.DO

quando sono sulla pagina della chat e devo tornare alla home page, devo fare clic sul pulsante indietro nell’angolo in alto a sinistra

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

[CAX.DO]

Ciao Don
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.

[Don]

Grazie per il chiarimento

@CAX.DO

I primi due screenshot significano che quando voglio chiudere l’Hamburger o la Notifica, posso cliccare solo sull’area gialla. Il problema è che è facile cliccare accidentalmente sull’articolo o sull’avatar.

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

@CAX.DO

Il terzo screenshot significa che devo cliccare sul pulsante indietro in alto a sinistra per uscire dall’interfaccia della chat.

Questa è l’intestazione di chat predefinita.

Verificherò se possiamo abilitare anche la navigazione lì.