Chat – bolle di WhatsApp

[chapoi]

La chat è ancora in fase di sviluppo attivo, quindi questo componente è probabilmente instabile e per ora in beta. Feedback e segnalazioni di bug sono benvenuti.

	Riepilogo	Una skin ispirata a WhatsApp per la chat (mobile)
	Anteprima	Theme Creator (solo visualizzazione mobile)
	Repository	GitHub - chapoi/discourse-chat-bubbles: A whatsapp-inspired skin for Discourse chat (mobile)
	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

← Inserisci “repoName” e “repoURL” per il pulsante di installazione automatica →

Installa questo componente tema

Istruzioni per l’anteprima

1. Assicurati di visualizzare questo su uno schermo piccolo.
2. Non dimenticare di aggiungere ?mobile_view=1 all’URL per ottenere la visualizzazione corretta.
3. Accedi per ottenere l’accesso alla chat.

Descrizione

← Descrivi questo tema/componente in una o due frasi →

Uno stile di messaggi a bolla, applicato solo al mobile.

← Aggiungi altri dettagli e spiega le impostazioni (se applicabile) →

Impostazioni

Il componente viene fornito con uno sfondo incorporato mostrato sopra. Questo può essere modificato nelle impostazioni. Si consiglia di utilizzare un pattern svg. Questo sito web ne ha alcuni gratuiti.

Puoi anche scegliere i colori delle bolle e lo sfondo dietro il pattern, o disabilitare completamente il pattern.

Se lasci vuota l’impostazione chiara o scura, le bolle utilizzeranno per impostazione predefinita secondary e tertiary-low. Se lasci vuoto il colore di sfondo, utilizzerà per impostazione predefinita primary-high.

Anche l’uso di un’immagine completa come sfondo può funzionare, ma dovrai assicurarti che sia di dimensioni ottimizzate per la visualizzazione mobile.

Modalità scura

Puoi scegliere diversi colori di sfondo e bolle per la modalità scura.
Per evitare di dover cambiare il pattern di sfondo, utilizza una miscelazione dello sfondo in modalità scura.

Per ottenere i migliori risultati, scegli un pattern di colore chiaro che funzioni bene in modalità chiara e che dovrebbe essere automaticamente attenuato in modalità scura (purtroppo non su tutti i dispositivi – vedi sotto).

Problemi noti

• I timestamp per i tuoi messaggi sono posizionati diversamente rispetto ai messaggi degli altri
• Non ha una modalità scura (ancora)
• la modalità scura agisce in modo strano su alcuni dispositivi
• non funziona bene con il threading abilitato

[fbpbdmin (deepblue)]

Questo è molto bello!

Un suggerimento,
è possibile consentire a tutti di cambiare la propria immagine di sfondo?

E l’SVG del circuito predefinito viene renderizzato in modo diverso sui temi scuri di iPhone e Android.
Su iPhone, le linee sembrano più luminose, non come nell’esempio nel post della documentazione… non sono sicuro del perché…

[Jagster (Jakke Lehtonen)]

È possibile disabilitare completamente il motivo di sfondo?

@fbpbdmin

possibile far cambiare a tutti la propria immagine di sfondo

Suppongo che sia molto difficile e, se fosse possibile, servirebbe un plugin. Ma non ricordo alcun plugin che dia agli utenti la possibilità di regolare tali cose. Sarebbe bello, però. Ma potrebbe anche portare a un incubo di UX quando le preferenze sono qui, lì e ovunque.

Un utente non può nemmeno regolare la toolbox del composer e quella sarebbe una funzionalità importante.

[chapoi]

@fbpbdmin

è possibile far cambiare a tutti la propria immagine di sfondo?

@Jagster

Immagino che sia davvero difficile e se può essere fatto, necessita di un plugin.

Sì, sfortunatamente quella è un’altra categoria. Se l’interesse per questa skin in generale sarà abbastanza grande, mi piacerebbe espandere questo aspetto, ma per ora non succederà.

@Jagster

Posso disabilitare totalmente il pattern di sfondo?

Oh sì, è abbastanza facile. Posso fare un aggiornamento per quello.

[fbpbdmin (deepblue)]

@chapoi potresti provare il tema scuro su iPhone, la maggior parte dei pattern viene renderizzata in modo strano lì.

diciamo, quello predefinito, su iPhone scuro, i link sono bianchi, sembra troppo carico.

sembra ok sul tema scuro di Android però…

grazie

[chapoi]

Oh wow! Grazie per questo, proverò a dare un’occhiata alla modalità scura durante il fine settimana.

[chapoi]

Ho aggiunto un’impostazione per disabilitare completamente il pattern.

I problemi della modalità scura su iPhone sono dovuti a un bug in Safari, che impedisce il corretto funzionamento della proprietà background-mode-blend quando viene utilizzata la proprietà background-repeat… Abbastanza fastidioso e non ho ancora una soluzione.

Potrebbe essere necessario effettuare due caricamenti separati per la modalità scura/chiara, il che non è affatto elegante.

In ogni caso, per ora consiglio di utilizzarlo senza il pattern, se ti trovi su iPhone e utilizzi il tuo dispositivo in modalità scura.

[Falco]

@chapoi

@fbpbdmin

è possibile far cambiare a tutti la propria immagine di sfondo?

@Jagster

Immagino che sia davvero difficile e se può essere fatto, necessita di un plugin.

Sì, sfortunatamente quella è un’altra lega. Se l’interesse per questa skin in generale dovesse essere abbastanza grande, mi piacerebbe espandere questo aspetto, ma per ora non succederà.

Forse un’opzione utente per utilizzare la propria immagine “Sfondo carta utente” come sfondo della chat?

[Roi]

@chapoi

Piuttosto fastidioso e non ho ancora una soluzione.

Sì, lo stesso qui:

Ma sembra fantastico su Android:

Senza un motivo sembra noioso. L’ho lasciato abilitato per ora, ma gli utenti Apple hanno iniziato a lamentarsi.

[digitaldominica]

Ciao @chapoi, c’è un modo per cambiare l’icona di risposta della chat in una freccia sinistra effettiva invece dell’icona di condivisione che appare come d-icon-share?

[chapoi]

Non specificamente con questo componente tematico, no.

Potresti seguire qualcosa di simile a questo

Help replacing an icon

I am trying to replace the bars icon for opening/closing the sidebar following these instructions Replace Discourse's default SVG icons with custom icons in a theme but I’m not having much luck. I’ve created a spritesheet with the sidebar icon I want to use (blurred out since it’s a pro fontawesome icon) [image] Created a component and uploaded the spritesheet: [image] And used this code (I only want the change on desktop) [image] But I just get no icon: [image] Any ideas? I’m sure I…

per sostituire tutte le istanze dell’icona. (Non credo che usiamo l’icona di condivisione in nessun altro posto, quindi questo potrebbe forse funzionare).

Sostituirla solo lì comporterebbe una maggiore complessità, non sono sicuro di cosa.

[digitaldominica]

Ok, grazie, ci proverò. Uso il Kodular Community Theme e la stessa icona appare negli argomenti a cui rispondo. Mi chiedo se faccia parte specificamente del tema. Ora andrò a chiedere allo sviluppatore.

[digitaldominica]

Grazie per questo componente.

Ho apportato una piccola modifica a mobile.scss nelle righe da 55 a 62

.chat-messages-scroll {
  background-color: var(--bubble-bg);
  background-image: url(check-empty($background-pattern, $enable_pattern));
  background-blend-mode: var(--bubble-bg-mode);

}
.chat-messages-container {
  padding: 0;

In precedenza lo sfondo veniva applicato a .chat-messages-container e durante lo scorrimento il mio sfondo si muoveva con i messaggi, in questo modo rimane sullo sfondo.

Ho notato che c’erano due istanze di .chat-messages-container nella chat mobile, il che causava questa replicazione sullo sfondo.

[chapoi]

Grazie, ottimo rilevamento di una sciocca svista. Corretto.

[digitaldominica]

Ciao, sembra che lo sfondo della chat non sia più visibile nella chat, non vedo più il CSS aggiunto al contenitore della chat. Attualmente sto usando la versione 3.3.0.beta2

[chapoi]

Ciao! Grazie per la segnalazione; ci sono stati molti cambiamenti nella chat e probabilmente dovrò aggiornare questo componente.

Ci proverò presto!

[eisammy (Sammy)]

Ho provato a testare questo componente del tema un paio di giorni fa, se vuoi posso pubblicare qui gli screenshot degli errori perché vorrei riattivarlo.

[eisammy (Sammy)]

@chapoi Semplicemente meraviglioso… gli errori sono apparentemente spariti. piani per implementare questo alla versione desktop?

[Earnie_Baird (Earnie)]

L’ho appena provato. È fantastico, ma come altri hanno segnalato, non sembra consentire di modificare il colore o il motivo dello sfondo.

Con lo sfondo chiaro predefinito, le bolle bianche si fondono davvero con lo sfondo.

[eisammy (Sammy)]

Un nuovo bug del link di Instagram