Bolle di Messaggi Personali

:exclamation: La funzionalità di questo componente del tema è stata aggiunta al core di Discourse a partire dalla versione 2.8.0. Non otterrai grandi risultati se continuerai a usarlo dopo aver aggiornato oltre quella versione!

Ho creato un componente del tema per cambiare lo stile dei messaggi personali in bolle, per aiutare a distinguerli dagli argomenti.

Impostazioni:

  • Imposta il colore di sfondo della bolla sui colori primari, secondari o terziari del tuo tema, oppure scegli tra altri colori comuni.
  • Seleziona colori diversi per distinguere i messaggi che invii da quelli che ricevi.
  • Imposta l’opacità dello sfondo della bolla: più alto è la percentuale, più intenso sarà il colore.
  • Scegli se visualizzare la bolla del messaggio con un’ombra.
  • Opzionalmente, aggiungi del testo al pulsante “Rispondi al messaggio” per distinguerlo dal pulsante “Rispondi all’argomento”.

Puoi scegliere tra una gamma di colori o selezionare colori dalla tua tavolozza per abbinarli al tuo tema. Puoi anche impostare l’opacità dello sfondo della bolla in relazione al colore e allo sfondo.

Installa questo componente del tema

70 Mi Piace

This is soooooo cool, @Rhidian!!!

I’m curious about something because I’ve never messed with plugins before…

Is it possible to allow a hex code with opacity, instead of just allowing system colors? No problem if that’s a bunch of extra work. Just curious.

What if I wanted to change the styling? of the shadow or other CSS. I’m not super savvy with Github and how all of that works, but I looked in your .git repository before copying it into my theme components. I do know how to write CSS. Can I make a copy of your plugin and then tweak the CSS file that you have and then upload this a new theme component with the styling that I want?

If you could point me to any instruction on how to modify a plugin that would be awesome. Or, I suppose I could just do a CSS override, on the front end. Is one option better than the other in terms of performance?

Again… Thank you so much for this… it’s just the solution I was looking for to differentiate DM’s from regular topics!

4 Mi Piace

Thank you @jord8on . It’s great to get feedback like this.

I’ll make Drop shadow customisable as a setting option.

Regarding creating/editing you own CSS it’s easy. Load the component then click the Custom CSS/HTML section on the component settings.

Simplly edit the CSS sheet and click save. These are your own customisations. If you want to share them and incorporate them into the component for everyone to benefit you can simply post up the CSS to this topic in discourse meta - or as a longer term objective learn how to do pull requests in Github and/or fork the repository if you are making making more substantial changes.

3 Mi Piace

Thank you @Rhidian!!!

:gift:

This is such a simple solution to make DM’s significantly distinguished from the standard topics on our forum.

I just asked a member what they thought of it and they were soooo happy to have it. They complimented the idea and the execution, so I’m just passing that along to you!!

6 Mi Piace

I have updated this theme component so you can now enter your own colors using either

  • html color names ( black, white, maroon, red, purple, green, lime, olive, yellow, navy, blue, teal, aqua)
  • html color codes (#000000 black, #FFFFFF white etc. or short codes e.g. #CCC)
  • theme color names (primary, secondary, tertiary)

You can also enter your own message text colors in the same way to contrast with the bubble color.

The opacity setting allows you to blend the bubble color with the background, so that the color will change with your theme color settings - e.g. for Light and Dark themes.

This update is backwards compatible. To access this feature use the Check for Updates button on your theme settings.

9 Mi Piace

Fantastic work on this @Rhidian! clapping

1 Mi Piace

Ho disabilitato i bordi con CSS personalizzato e ho apportato solo una leggera variazione di colore, che risulta gradevole. Sarebbe ottimo se ci fosse un’opzione per modificare i bordi o semplicemente un interruttore on/off.

1 Mi Piace

Ciao @ggurbet, puoi per favore pubblicare uno screenshot e condividere il CSS che hai modificato?

@Rhidian, i bordi erano troppo distraenti, quindi li ho rimossi. Ignora i miei colori :slight_smile:

Screenshot per il tema chiaro:

Screenshot per il tema scuro:

Ho aggiunto questo a Common > CSS:

// Componente bolla messaggio privato - Nessun bordo
.archetype-private_message .topic-body .contents {
    border: none !important;
}
3 Mi Piace

Mi piace molto!

Richiesta

  • Potrebbe essere resa disponibile anche la quaternaria?
  • Ho notato un errore di ortografia nelle istruzioni. Tertiary è scritto come teriary invece

Screenshot of Google Chrome (3-8-21, 10-19-25 AM)

2 Mi Piace

Molto figo. Mi piace :grin:

Ho aggiunto l’opzione per rimuovere il bordo, l’opzione quaternaria e ho corretto l’ortografia del termine terziario.

Grazie @ggurbet @debryc

Shaun The Sheep Movie Ok GIF

7 Mi Piace

È stato veloce, grazie!

A proposito, come puoi vedere, ho installato il componente due volte e impostato colori scuri per il nostro tema scuro e colori chiari per il nostro tema chiaro. Penso che non ci sia altro modo se vogliamo utilizzare colori CSS personalizzati.

Inoltre, un piccolo suggerimento: permetti di aggiungere qualcosa alla fine del pulsante di risposta, ma in alcune lingue (come il turco) è preferibile aggiungerlo all’inizio, poiché il verbo si trova alla fine delle frasi.

Sì, è un buon workaround. La modifica prevista in Discourse per rimuovere la possibilità di modificare localmente i temi e i componenti di Discourse avrà un impatto sulla tua implementazione? È stato chiaramente utile in questo caso.

1 Mi Piace

No, non è così. Bastano solo alcune piccole modifiche CSS per risolvere il problema.

Mi riferivo a questo annuncio nella versione Beta. Puoi ancora modificare il CSS, ma dovresti creare un nuovo componente del tema, non più collegato al repository git, e copiare tutto il codice. È quello che hai fatto tu, oppure hai optato per la soluzione più semplice, ovvero modificare direttamente il CSS nel componente?

Questo mi sembra problematico. Preferirei mantenere la possibilità di modificare i temi in loco. Certamente aiuta nello sviluppo di temi e componenti.

1 Mi Piace

Ho un componente locale, chiamato “common sub-theme”, in cui apporto modifiche per altri componenti. In questo sottotema prendo di mira le classi, gli elementi, ecc. di altri componenti. Finché l’autore del componente non cambia i nomi delle sue classi, ID, ecc., per me va bene e funziona. Attualmente, dato che hai anche incluso la rimozione del bordo, non ho bisogno di alcuna modifica nel mio sottotema per il componente Personal Message Bubbles, a proposito.

1 Mi Piace

Ciao e grazie per questo delizioso componente del tema. :trophy:

Un potenziale bug: Sembra che l’opzione per il testo “aggiunto” includa uno spazio prima della stringa in fondo all’argomento del messaggio, ma non lo includa nella finestra dell’editor. Vedi sotto:

2 Mi Piace

@Rhidian, puoi anche aggiungere l’opzione per anteporre del testo al pulsante Rispondi? In alcune lingue (come il turco) avrebbe senso aggiungere del testo all’inizio di un verbo.

1 Mi Piace

Ottimo componente!
Abbiamo qualcosa di simile per i post reali nei topic? Intendo un componente che faccia apparire i post come bolle di messaggio!

Ho aggiunto l’opzione per anteporre del testo al pulsante Rispondi. Questo nasconde anche la freccia SVG prima del testo Rispondi.

1 Mi Piace