Icona Discourse

:discourse2: Riepilogo Discourse Icon ti permette di utilizzare icone dal tuo sottoinsieme di icone SVG in un post.
:eyeglasses: Anteprima Anteprima su Discourse Theme Creator
:hammer_and_wrench: Collegamento al Repository https://github.com/discourse/discourse-icon
:open_book: Nuovo a Discourse Themes? Guida per principianti all’uso di Discourse Themes

Installa questo componente del tema

Funzionalità

Utilizzo:

[wrap=icon id=square][/wrap]

Esempio:
Questa è l’icona e l’icona .

Questa è l'icona [wrap=icon id=far-square][/wrap] e l'icona [wrap=icon id=pencil][/wrap].

Nota: se l’icona non viene visualizzata, significa che non è presente nel tuo sottoinsieme. Se sei un amministratore, puoi aggiungerla nelle impostazioni del sito: svg icon subset.


:discourse2: Ospitato da noi? I componenti del tema sono disponibili per l’uso nei nostri piani Standard, Business e Enterprise.

31 Mi Piace

Fantastico! È iconico!

(meta ha molti e molti temi, ma per fortuna grazie a @kris.kotlarek abbiamo un pulsante “aggiungi a tutti i temi”… dobbiamo sistemare i progressi lì, perché ci vuole un po’ per compiere la sua magia)

13 Mi Piace

Sì, per ora non volevo aggiungerlo a tutto, dato che ho appena finito di codificarlo :grin: ma lo farò ora

Modifica: oh, già fatto

10 Mi Piace

Grazie, è super divertente! :sunglasses:

Non mi sono mai cimentato con i tag script BB, né ho mai codificato a mano FontAwesome, quindi la pratica di utilizzare una coppia di tag vuoti mi è sempre sembrata strana. È una convenzione diffusa o c’è un motivo tecnico per l’uso di coppie di tag? Inoltre, possono contenere del testo al loro interno e questo influisce sul rendering del testo?

3 Mi Piace

Ci sono diverse cause in questo caso.

Innanzitutto, quando ho implementato la funzionalità BBCode wrap, @sam mi ha chiesto esplicitamente di supportare tre formati:

[wrap=foo][/wrap]
[wrap=foo]bar[/wrap]
[wrap=foo]
bar
[/wrap]

Questo è stato fatto per mantenere la coerenza con l’uso esistente dei BBCode in Discourse.

Avrei potuto utilizzare una sintassi migliore come [icon=times], ma in tal caso sarebbe dovuto essere un plugin e non un componente del tema.

Come esperimento, ritengo che la situazione attuale vada bene; se l’utilizzo dovesse diventare molto frequente, potremmo valutare di creare un plugin che offra una sintassi più concisa.

Un’altra idea che ho avuto è quella di aggiungere un’API per inserire simboli di completamento automatico nel compositore, proprio come facciamo per utenti, categorie ed emoji… Ma temo che questo potrebbe diventare un incubo se più componenti scegliessero simboli diversi.

5 Mi Piace

Oh! Devo aggiungere il supporto per un altro bbcode e pensavo di usare questo come punto di partenza, ma stai dicendo che la gestione del wrapping è gestita nel core, il che spiega perché non riesco a capire come sia gestito dal tuo componente del tema.

La mia soluzione attuale è utilizzare il componente “parole collegate” e una regex brutta, ma sto ancora faticando ad aggiungere le classi necessarie ai link.

3 Mi Piace

Sì, leggi questo argomento per saperne di più:

4 Mi Piace

Giusto, l’ho esaminato una dozzina di volte. Ho anche stampato il codice del tuo componente e lo ho fissato per ore, cercando di capire se è la quantità di JavaScript o di Ember che non comprendo. Non posso aggiungere un tag [foo] senza un plugin? O posso in qualche modo sostituire ‘wrap’ nel tuo codice con ‘foo’ per coprire il mio nuovo BBCode?

1 Mi Piace

No, non è possibile. Perché una parte avviene lato server. Se desideri un tuo BBCode personalizzato, dovrai scrivere un plugin e osservare come è implementato wrap, ad esempio:

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/pretty-text/engines/discourse-markdown/d-wrap.js.es6

5 Mi Piace

Grazie! Sta iniziando a avere senso. Non avevo avuto tante difficoltà a imparare una nuova lingua da quando ho affrontato C++ e Object Pascal nel 1990.

Il mio attuale trucco con le espressioni regolari funziona quasi. Dovrò decidere se seguire la strada del plugin o attenermi al mio trucco (e capire come aggiungere le classi).

Almeno ora capisco perché non riesco a trovare quel wrap nel componente del tema!

3 Mi Piace

Posso pensare a alcune possibili disposizioni sintattiche da aggiungere al plugin wrap per questo:

[wrap=foo /]
[wrap/=foo]

(imitando i tag auto-chiusi dell’XML), ma entrambi sono piuttosto brutti :confused:

Qualcuno ha idee straordinarie per qualcosa che sembri accettabile?

3 Mi Piace

eh, non sono molto fan di queste :confused:

6 Mi Piace

Ho trovato un grosso bug…

Se si utilizza un wrapper di icone e quindi si evidenzia la citazione, l’immagine risultante viene enormemente ingrandita:

  • Utilizzare un wrapper di icone in una frase in un post. es. Questo è un'icona [wrap=icon id=far-check-square][/wrap]
  • Evidenziare il testo pertinente e ‘Cita’
  • L’icona diventa super grande nell’estratto citato

Questo è l’aspetto della sintassi quando viene evidenziata e citata:

[quote="JammyDodger, post:1, topic:294, full:true"]
This is an icon ![](/svg-sprite/grumpy.jammydodger.monster/icon/222222/far-check-square.svg)
[/quote]

Questa è una risposta in cui diventa enorme

Tuttavia, citarla usando la bolla di dialogo nella barra del formato funziona bene.

4 Mi Piace

Come riesci a evidenziare l’icona della citazione? Sul mio sito di prova, l’icona viene saltata.

Non sono sicuro? Uso solo il mouse.

Che browser stai usando?

Usando il mouse, ho provato con Chrome e Firefox e non sono riuscito a selezionare l’icona. :thinking:


MODIFICA:

Se racchiudi un’icona non disponibile nel sottoinsieme corrente, creerà invece un’immagine SVG.
Quindi, puoi citarla.

2 Mi Piace

Puoi fornire un esempio? Il tuo screenshot mostra una casella di controllo selezionata e non ho problemi a selezionarla nella mia istanza di test (così come altre icone probabilmente non utilizzate da Discourse come x-ray).

2 Mi Piace

Vedo il problema. Il componente cerca controllando se c’è un wrapper con la classe d-wrap; ma non c’è alcun wrapper se l’icona fornita non proviene dal sottoinsieme. Crea invece un’immagine come SVG.

Ad esempio:

SVG, icona all'interno del sottoinsieme

Immagine come SVG, icona non all'interno del sottoinsieme

Se citi le immagini, il componente non fa nulla, poiché non c’è alcun wrapper (e l’immagine viene convertita in markdown, risultando in un’immagine senza alcuna classe)

1 Mi Piace

Questo significa che devo avere un campo svg_icons in settings.yml disponibile nel mio tema? Oppure potrei usare qualsiasi campo svg_icons disponibile da qualsiasi componente tema abilitato? E in tal caso, avrebbe senso aggiungere questo campo a questo componente tema?

svg_icons:
  default: ''
  type: 'list'
  list_type: 'compact'

Perché nella mia esperienza, le icone SVG vengono trasformate in tag <img /> e non ereditano currentColor quando lo schema di colori viene modificato:
Confronta il paragrafo Esempio:

2 Mi Piace

È possibile migliorare il rendering in modalità scura?

Mi piacerebbe avere gli stessi colori dell’interfaccia:

3 Mi Piace