Как убрать пузыри сообщений в личных сообщениях

Поддержка
1

Всего один быстрый вопрос: я сейчас обновляюсь до версии 2.8.beta4 и просто интересно, есть ли способ оставить старый стиль личных сообщений, а не использовать новые «пузыри». Спасибо!

2

Привет, Зак :slightly_smiling_face:

Если очень хочется, можно переопределить текущий CSS. Попробуйте что-то вроде этого :thinking:
Это будет выглядеть как стандартная светлая тема Discourse. Вероятно, лучший вариант — удалить класс archetype-private_message из body с помощью JavaScript. Это сохранит стиль вашей кастомной темы.

ОБЩЕЕ

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

ДЕСКТОП

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

МОБИЛЬНЫЕ

.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

Как полному новичку в JS, какой будет лучший способ сделать это? Цикл while или бесконечно рекурсивная функция кажутся неидеальными.

Мое текущее решение выглядит так:

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

Мне, как новичку, это кажется довольно элегантным, но уверен, что кто-то предложит более эффективный способ, ха-ха.

Вам всё равно захочется вручную отменить как можно больше эффектов «пузырей» через CSS, потому что они всё же на долю секунды появляются при загрузке. Но это хотя бы предотвращает их задержку, причём очень простым способом, который должен работать независимо от будущих изменений в ваших темах.

4

Я бы попробовал что-то вроде этого, но не уверен, не повлечёт ли это изменение побочных эффектов. CSS всегда самый безопасный и простой способ что-то изменить. Именно поэтому я опубликовал этот вариант.

Я не помню, какой класс у body был до изменений, но я просто заменил его на archetype-regular вместо удаления класса archetype-private_message, так как существуют глобальные стили для классов [class*="archetype-"], поэтому мы сохраняем их и для личных сообщений.

Заголовок

<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

Насколько я могу судить, работает как по волшебству!