Wie man die Nachrichtenblasen in PMs loswird

Unterstützung
1

Just a quick question, I am in the process of upgrading to 2.8.beta4 and I am just curious if there is a way to keep the old PM style, rather than have the new bubbles. Thanks!

3 „Gefällt mir“
2

Hi Zac :slightly_smiling_face:

It is possible with override the current css if you really want to. Try something like this :thinking:
This will looks like the default Discourse Light theme. Probably the best option is remove the archetype-private_message class from body with js. That keeps the custom theme style.

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;
  }
}
7 „Gefällt mir“
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.

1 „Gefällt mir“
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>
2 „Gefällt mir“
5

Soweit ich das beurteilen kann, funktioniert es einwandfrei!

1 „Gefällt mir“