Como Remover as Bolhas de Mensagem em Mensagens Privadas

Suporte
1

Apenas uma pergunta rápida: estou no processo de atualização para a versão 2.8.beta4 e tenho curiosidade se há uma maneira de manter o antigo estilo de mensagens privadas, em vez de usar as novas bolhas. Obrigado!

2

Oi Zac :slightly_smiling_face:

É possível sobrescrever o CSS atual se você realmente quiser. Tente algo assim :thinking:
Isso ficará parecido com o tema padrão Discourse Light. Provavelmente a melhor opção é remover a classe archetype-private_message do body com JavaScript. Isso mantém o estilo do tema personalizado.

COMUM

.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

Como um novato completo em JS, qual seria a melhor maneira de fazer isso? Um loop while ou uma função recursiva infinita parecem pouco ideais.

Minha solução atual se parece com isto:

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

Isso realmente parece decentemente elegante aos meus olhos de novato, mas tenho certeza que alguém terá uma maneira mais eficiente, lol
Você ainda vai querer desfazer manualmente o máximo possível do conteúdo de bolhas via CSS porque ele aparece por uma fração de segundo ao carregar, mas isso pelo menos evita que ele permaneça de forma muito simples que deve funcionar independentemente de futuras alterações em seus temas.

4

Eu tentaria algo assim, mas não sei se essa alteração tem algum efeito colateral. CSS é sempre o mais seguro e fácil para mudar algo. É por isso que postei isso.

Não me lembro qual era a classe body antes das alterações, mas apenas a substituí para archetype-regular em vez de remover a classe archetype-private_message porque existem alguns CSS globais para a classe [class*=\"archetype-\"], então mantemos isso também nas mensagens privadas.

Cabeçalho

<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

Pelo que pude ver, funciona que é uma beleza!