Componente Spinner di caricamento personalizzato

Mentre lavoravo al tema Grogu, ho implementato un’icona di caricamento personalizzata per quel tema e ho pensato che sarebbe stato fantastico avere un componente autonomo per personalizzare l’icona della ruota di caricamento.

Questo componente consente allo staff di personalizzare l’icona di rotazione predefinita. Sono disponibili tre opzioni di personalizzazione tramite le impostazioni del tema:

  • nome dell’icona
  • dimensione dell’icona
  • colore dell’icona

Il componente accetta solo il nome di un’icona FontAwesome e consiglio di sceglierne una tra queste per ottenere un effetto di rotazione eccezionale.

Buon divertimento e fateci sapere come migliorare ulteriormente questo componente. :slight_smile:

25 Mi Piace

Ciao, appena installato questo! Un miglioramento che potresti apportare è aggiungere un altro colore per il tema scuro, poiché il colore scelto per il tema chiaro, come #000000, non sarà visibile su un tema scuro.

6 Mi Piace

È proprio per questo che il colore è personalizzabile tramite l’impostazione del tema ‘colore icona personalizzato’.

4 Mi Piace

No, ciò che intendo è che il colore dell’icona dovrebbe invertirsi automaticamente a seconda che tu stia utilizzando un tema chiaro o scuro.

Il mio sfondo del tema chiaro è #F0F0F0 e quello del tema scuro è #000000.

Di conseguenza, è difficile trovare un colore che offra un buon contrasto. Voglio un’icona bianca nel tema scuro e una nera nel tema chiaro.
Grazie :wink:

4 Mi Piace

Per il cambio automatico del colore dell’icona in base ai colori del tema, non specificare alcun valore nell’impostazione del tema “custom icon color”.

Ho ora reso questo il comportamento predefinito tramite:

12 Mi Piace

Splendido! Grazie @meghna :heart_eyes:

9 Mi Piace

Adoro questo componente del tema e funziona benissimo nella home page. Tuttavia, in alcune aree della mia istanza di Discourse, viene mostrato il caricamento predefinito. Ad esempio, ogni volta che sono nel pannello di amministrazione o nelle impostazioni utente. @meghna C’è un modo per risolvere questo problema?

1 Mi Piace

Aggiornalo, non funziona più con 3.2.0.beta2-dev.

Dà errore nella console di Chrome @meghna

Sto testando questo su Ubuntu con l’ultima versione del browser Chrome e sto riscontrando il seguente errore sul mio sito di sviluppo locale:

component-templates.js:54 [discourse/theme-10/discourse/templates/components/conditional-loading-spinner] conditional-loading-spinner è stato creato utilizzando gjs e il suo template non può essere sovrascritto. Ignorando la sovrascrittura.

Sul mio sito di produzione, testando anche con l’ultima versione del browser Chrome su Ubuntu, non riscontro errori, ma non vedo nemmeno uno spinner di caricamento.

Penso che siano state apportate alcune modifiche al modo in cui i template vengono sovrascritti nei temi da quando questo componente tematico è stato rilasciato: (not recommended) Overriding Discourse templates from a Theme or Plugin. Penso che anche il modo in cui Discourse implementa lo spinner di caricamento sia cambiato da allora.

3 Mi Piace

@meghna questo verrà risolto o è rotto ora?:thinking:

1 Mi Piace

Aspetta un attimo. Il team è stato alla riunione annuale e potrebbe avere altre priorità quando ricomincerà a lavorare questa settimana.

2 Mi Piace

La correzione richiede alcune modifiche al core. Ci stiamo lavorando e lo risolveremo presto.

3 Mi Piace

Grazie per l’ottimo lavoro :smiley: :heart:

Questo componente del tema è stato aggiornato per funzionare sull’ultima versione di Discourse (per gentile concessione di @cvx).

4 Mi Piace

Ancora non funziona per me. :confused:

Modifica: Funziona ora dopo aver aggiornato discourse oggi.

Mi chiedo se usare un’icona svg al posto di FontAwesome. Grazie in ogni caso.

Smettendo di funzionare con l’ultima versione. 3.2.0.beta4-dev

(24532653e6)

Per me va bene con l’ultima versione :thinking:

Sì, funziona in alcuni punti, ma non nei post, quando fai clic su un altro post per vederlo. ora non funziona.

2 Mi Piace