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

Soporte
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 Me gusta
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 Me gusta
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.

1 me gusta
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>
2 Me gusta
5

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

1 me gusta