¿Cómo deshacerse de las burbujas de mensajes en los MD?

Soporte
1

Solo una pregunta rápida: estoy en proceso de actualización a la versión 2.8.beta4 y me pregunto si hay alguna manera de mantener el estilo antiguo de los mensajes privados en lugar de las nuevas burbujas. ¡Gracias!

2

Hola Zac :slightly_smiling_face:

Es posible anular el CSS actual si realmente lo deseas. Prueba algo como esto :thinking:
Esto se verá como el tema Light predeterminado de Discourse. Probablemente la mejor opción sea eliminar la clase archetype-private_message del body con JavaScript. De esa forma, se mantiene el estilo del tema personalizado.

COMÚN

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

ESCRITORIO

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

MÓVIL

.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

Como principiante absoluto en JS, ¿cuál sería la mejor manera de hacerlo? Un bucle while o una función recursiva infinita parecen poco ideales.

Mi solución actual se ve así:

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

Esto en realidad parece bastante elegante para mis ojos de novato, pero estoy seguro de que alguien tendrá una forma más eficiente, ¡jaja!
Todavía querrás deshacer manualmente la mayor parte del “bubble stuff” a través de CSS porque aparece por una fracción de segundo al cargar, pero esto al menos evita que permanezca de una manera muy simple que debería funcionar independientemente de los cambios futuros en tus temas.

4

Intentaría algo como esto, pero no sé si este cambio tiene algún efecto secundario. CSS es siempre lo más seguro y fácil para cambiar algo. Por eso lo publiqué.

No recuerdo cuál era la clase body antes de los cambios, pero simplemente la reemplacé por archetype-regular en lugar de eliminar la clase archetype-private_message porque hay algunas CSS globales para la clase [class*=\"archetype-\"], así que la mantenemos también en los mensajes privados.

Encabezado

<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

¡Por lo que puedo decir, funciona a la perfección!