Comment se débarrasser des bulles de message dans les MP

Soutien
1

Juste une petite question : je suis en train de passer à la version 2.8.beta4 et je me demandais s’il était possible de conserver l’ancien style des messages privés, plutôt que les nouvelles bulles. Merci !

3 « J'aime »
2

Salut Zac :slightly_smiling_face:

C’est possible de remplacer le CSS actuel si tu le souhaites vraiment. Essaie quelque chose comme ceci :thinking:
Cela ressemblera au thème Discourse Light par défaut. Probablement, la meilleure option est de supprimer la classe archetype-private_message du body avec du JavaScript. Cela conserve le style du thème personnalisé.

COMMUN

.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;
    }
  }
}

BUREAU

.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 « J'aime »
3

En tant que débutant complet en JS, quelle serait la meilleure façon de faire cela ? Une boucle while ou une fonction récursive infinie semble peu idéal.

Ma solution actuelle ressemble à ceci :

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

Cela semble en fait assez élégant à mes yeux de novice, mais je suis sûr que quelqu’un aura une méthode plus efficace lol
Vous voudrez toujours annuler manuellement autant de choses liées aux bulles que possible via CSS, car elles apparaissent pendant une fraction de seconde lors du chargement, mais cela évite au moins qu’elles ne restent présentes d’une manière très simple qui devrait fonctionner indépendamment des futures modifications de vos thèmes.

1 « J'aime »
4

J’essaierais quelque chose comme ça, mais je ne sais pas si ce changement a des effets secondaires. Le CSS est toujours le plus sûr et le plus simple pour changer quelque chose. C’est pourquoi j’ai posté cela.

Je ne me souviens pas quelle était la classe body avant les changements, mais je l’ai simplement remplacée par archetype-regular au lieu de supprimer la classe archetype-private_message car il y a du CSS global pour la classe [class*=\"archetype-\"], donc nous la gardons aussi dans les messages privés.

En-tête

<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 « J'aime »
5

D’après ce que je peux dire, ça marche à merveille !

1 « J'aime »