如何移除私信中的消息气泡

支持
1

有个小问题，我正在升级到 2.8.beta4，想了解一下是否有办法保留旧的私信样式，而不是使用新的气泡样式。谢谢！

2

嗨，Zac :slightly_smiling_face:

如果你真的想这样做，通过覆盖当前的 CSS 是可行的。可以试试像这样的代码 :thinking:
这看起来会像默认的 Discourse 浅色主题。可能最好的选项是通过 JavaScript 从 body 中移除 archetype-private_message 类。这样可以保留自定义主题的风格。

通用

.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-\"] 类的全局 CSS，所以我们在私信中也保留它。

标题

<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

据我所知，它效果很好！