PMでメッセージバブルを削除する方法

サポート
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
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
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でバブル関連のものをできるだけ手動で元に戻したいと思いますが、これは少なくとも非常に簡単な方法で表示され続けるのを防ぎ、テーマの将来の変更に関係なく機能するはずです。

「いいね！」 1
4

CSSで何かを変更するのは常に最も安全で簡単な方法です。だからこそ、私はそれを投稿しました。

変更前のbodyクラスが何だったかは覚えていませんが、archetype-private_messageクラスを削除するのではなく、archetype-regularに置き換えました。これは、[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>
「いいね！」 2
5

私の知る限り、うまく機能します！

「いいね！」 1