Wie man die Nachrichtenblasen in PMs loswird

Unterstützung
1

Nur eine kurze Frage: Ich bin dabei, auf 2.8.beta4 zu aktualisieren, und ich frage mich nur, ob es eine Möglichkeit gibt, den alten PM-Stil beizubehalten, anstatt die neuen Sprechblasen zu verwenden. Danke!

2

Hallo Zac :slightly_smiling_face:

Es ist möglich, das aktuelle CSS zu überschreiben, wenn du das wirklich möchtest. Probier mal so etwas aus :thinking:
Das wird dann so aussehen wie das Standard-Discourse-Light-Theme. Die beste Option ist wahrscheinlich, die Klasse archetype-private_message aus dem body mit JavaScript zu entfernen. So bleibt der Stil des benutzerdefinierten Themas erhalten.

ALLGEMEIN

.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

Als absoluter JS-Neuling, was wäre der beste Weg, dies zu tun? Eine While-Schleife oder eine unendlich rekursive Funktion erscheinen ungeeignet.

Meine aktuelle Lösung sieht so aus:

<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>

Das scheint meinen Anfängeraugen tatsächlich recht elegant, aber ich bin sicher, jemand wird einen effizienteren Weg finden, lol
Sie werden immer noch so viel wie möglich von dem Bubble-Zeug manuell über CSS rückgängig machen wollen, da es beim Laden für den Bruchteil einer Sekunde auftaucht, aber dies verhindert zumindest, dass es auf eine sehr einfache Weise bestehen bleibt, die unabhängig von zukünftigen Änderungen an Ihren Themes funktionieren sollte.

4

Ich würde so etwas versuchen, aber ich weiß nicht, ob diese Änderung irgendwelche Nebenwirkungen hat. CSS ist immer am sichersten und einfachsten für Änderungen. Deshalb habe ich das gepostet.

Ich erinnere mich nicht, welche body-Klasse vor den Änderungen vorhanden war, aber ich habe sie gerade durch archetype-regular ersetzt, anstatt die Klasse archetype-private_message zu entfernen, da es einige globale CSS für die Klasse [class*=\"archetype-\"] gibt, damit wir diese auch in privaten Nachrichten beibehalten.

Header

<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

Soweit ich das beurteilen kann, funktioniert es einwandfrei!