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
	Guida all’installazione	Come installare un tema o un componente tema
	Nuovo ai temi di Discourse?	Guida per principianti all’uso dei temi di Discourse

Installa questo componente tema

Ciao

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

Assicurati di testarlo prima di utilizzarlo in produzione.

Alcune informazioni sul componente: F NAV - Theme component concept

---

Riguardo al componente tema. Ho letto molti post che dicevano quanto sarebbe stato meraviglioso rendere la Barra delle schede di Discourse per Mobile più dinamica e aggiungere la possibilità di gestire ad esempio le notifiche… F-NAV può fare questo e molto altro…

Intestazione

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

Impostazioni

Contiene anche un’impostazione dove puoi aggiungere elementi personalizzati prima della voce “Esci”.
Sono presenti tre campi dove puoi facilmente aggiungere elementi personalizzati.

Ci sono alcune impostazioni per mostrare/nascondere le icone predefinite dell’intestazione, utile quando non si desidera posizionare la scheda esatta in F NAV, così da farla apparire nell’intestazione.

Schede

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

Tali modifiche includono:

Funzioni

home (Home)

• cambia l’icona della scheda home nelle rotte degli argomenti in una freccia sinistra che aggiunge una funzione “torna indietro”
  
• aggiunge un indicatore a punto per nuovi o non letti argomenti
  

---

hamburger (apre il menu hamburger)

---

multi (Multi)

Scheda multi

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

Il bolletino delle notifiche cambia a seconda che siano urgenti o meno.

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

Espanso

I messaggi personali sono sempre verdi, ma la chat può essere blu come originariamente per le notifiche dei messaggi dei canali non letti, ad esempio.

Espanso

Singola notifica

---

message (Messaggi)

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

---

chat (Chat)

• aggiunge un pulsante chat con le sue funzioni

---

notificationToRoute (Notifica a rotta)

• se il “non disturbare” è attivo, l’icona della campana cambierà in un’icona campana barrata e il periodo di “non disturbare” fino al tempo specificato apparirà
  

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

  • se c’è una notifica, reindirizza a /notifications?filter=unread
  • se non c’è nessuna notifica, reindirizza a /notifications
  • se c’è un contenuto revisionabile, apparirà una bandiera rossa e reindirizzerà a /review

---

notificationMenu (Menu notifiche)

• se il “non disturbare” è attivo, l’icona della campana cambierà in un’icona campana barrata e il periodo di “non disturbare” fino al tempo specificato apparirà
  

• apre il menu delle notifiche

---

search (Ricerca)

• reindirizza alla pagina /search basata sul contesto

---

Impostazioni

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

• name (Nome): Questo serve solo per identificare più facilmente la scheda nelle impostazioni.
• icon (Icona): Aggiunge un’icona alla scheda. Nota: Se selezioni una funzione, potrebbero esserci icone che non possono essere sovrascritte con questa impostazione.
• destination (Destinazione): Aggiunge una destinazione per la tua scheda personalizzata. Nota: Se selezioni una funzione che gestirà la destinazione, puoi lasciare vuoto questo campo. Il componente converte automaticamente le destinazioni /my/... in /u/username/... così che lo stato attivo della scheda possa essere aggiunto correttamente.
• function (Funzione): 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 per la creazione di argomenti apparirà semplicemente così.

---

Crediti: Barra delle schede di Discourse per Mobile e grazie a tutti per i feedback nell’argomento F NAV - Concetto del componente tema.

[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ì.