개인 메시지의 말풍선을 제거하는 방법

제품 지원
1

간단한 질문이 있습니다. 2.8.beta4로 업그레이드하는 중인데, 새로운 버블 대신 기존 PM 스타일을 유지할 방법이 있는지 궁금합니다. 감사합니다!

2

Zac님 :slightly_smiling_face:

원하신다면 현재 CSS를 오버라이드하여 적용하는 것이 가능합니다. 다음과 같이 시도해 보세요 :thinking:
이렇게 하면 기본 Discourse Light 테마와 비슷한 모습으로 표시됩니다. 아마도 최선의 방법은 body에서 archetype-private_message 클래스를 JS로 제거하는 것입니다. 이렇게 하면 커스텀 테마 스타일을 유지할 수 있습니다.

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;
  }
}
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 클래스가 무엇이었는지 기억나지 않지만, [class*="archetype-"] 클래스에 대한 전역 CSS가 있어 개인 메시지에 대해서도 이를 유지하기 위해 archetype-private_message 클래스를 제거하는 대신 archetype-regular로 교체했습니다.

Header

<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

제가 볼 때, 완벽하게 작동합니다!