Come eliminare le bolle dei messaggi nei PM

Supporto
1

Solo una domanda veloce: sto aggiornando alla versione 2.8.beta4 e mi chiedevo se esiste un modo per mantenere lo stile dei vecchi messaggi privati, invece di passare alle nuove bolle. Grazie!

2

Ciao Zac :slightly_smiling_face:

È possibile sovrascrivere l’attuale CSS se lo desideri davvero. Prova qualcosa del genere :thinking:
Questo assomiglierà al tema Discourse Light predefinito. Probabilmente l’opzione migliore è rimuovere la classe archetype-private_message dal body tramite JavaScript. In questo modo si mantiene lo stile del tema personalizzato.

COMMON

.archetype-private_message {
  .topic-avatar,
  .topic-body {
    border-top: 1px solid var(--primary-low);
  }
  .topic-body {
    .cooked {
	  box-sizing: unset;
	  border: none;
	  margin-top: 0;
	  margin-left: 0;
	  padding: 1em 11px 0.25em 11px;
	  border-radius: 0;
	}
	&.highlighted {
	  animation: background-fade-highlight 2.5s ease-out;
	  .cooked {
	    animation: none;
	  }
	}
  }
  .post-menu-area {
    margin-top: 0;
  }
  .small-action-desc.timegap {
	flex-wrap: wrap;
	flex: 1 1 100%;
	align-items: center;
	padding: 1em 0;
	text-transform: uppercase;
	font-weight: bold;
	font-size: var(--font-down-1);
	color: var(--primary-medium);
  }
  .current-user-post,
  .current-user-post:not(.moderator) {
    .topic-body {
      .cooked {
        background: none;
	    border: none;
      }
      &.highlighted {
	    animation: background-fade-highlight 2.5s ease-out;
	    .cooked {
	      animation: none;
	    }
	  }
    }
  }
  .topic-map {
	border: 1px solid var(--primary-low);
	border-top: none;
	border-radius: 0;
    padding: 0;
	section {
	  border-top: 1px solid var(--primary-low)
	}
	.map:first-of-type .buttons .btn {
	  border: 0;
	  border-left: 1px solid var(--primary-low);
	  border-top: 1px solid transparent;
	  border-radius: 0;
	}
	.participants .user {
	  border: 1px solid var(--primary-low);
      border-radius: 0.25em;
      padding: 0;
      background: none;
	}
  }
}

DESKTOP

.archetype-private_message {
  .topic-map {
    margin: 20px 0 20px 11px;
  }
}

MOBILE

.archetype-private_message {
  .topic-post {
    margin: 0;
    article {
       border-top: 1px solid var(--primary-low); 
    }
  }
  .topic-body,
  .topic-avatar {
    border-top: none;
  }
  .topic-body {
    flex: unset;
  }
  .boxed .contents {
    padding: 10px 0 0 0;
  }
  .topic-map {
    margin: 0;
  }
}
3

Come principiante assoluto di JS, qual è il modo migliore per farlo? Un ciclo while o una funzione ricorsiva infinita sembrano poco ideali.

La mia soluzione attuale è la seguente:

<script type="text/discourse-plugin" version="0.8">

    api.onPageChange(() =>{
        window.onload = noBubbles();
    });

    async function noBubbles()
    {
        var elements = document.getElementsByClassName('archetype-private_message');

        while(elements.length > 0){
            elements[0].classList.remove('archetype-private_message');
        }
    }
</script>

Questo in realtà sembra abbastanza elegante ai miei occhi da principiante, ma sono sicuro che qualcuno avrà un modo più efficiente lol
Dovrai comunque annullare manualmente il più possibile la roba delle bolle tramite CSS perché appare per una frazione di secondo al caricamento, ma questo almeno impedisce che rimanga in modo molto semplice che dovrebbe funzionare indipendentemente da future modifiche ai tuoi temi.

4

Proverei qualcosa di simile, ma non so se questa modifica abbia effetti collaterali. Il CSS è sempre il più sicuro e facile per cambiare qualcosa. Ecco perché l’ho pubblicato.

Non ricordo quale fosse la classe body prima delle modifiche, ma l’ho semplicemente sostituita con archetype-regular invece di rimuovere la classe archetype-private_message perché ci sono alcuni CSS globali per la classe [class*=\"archetype-\"], quindi la manteniamo anche nei messaggi privati.

Intestazione

<script type="text/discourse-plugin" version="0.8">
  const body = document.querySelector("body");
  api.onPageChange(() => {
    if (body.classList.contains("archetype-private_message")) {
      body.classList.replace("archetype-private_message", "archetype-regular");
    }
  });
</script>
5

Per quanto mi risulta, funziona a meraviglia!