채팅 사이드바

[Arkshine]

	요약	공간이 허용되는 한 자동으로 열리며, 채팅을 사이드바처럼 표시하고 높이를 최대한 활용합니다.
	저장소	GitHub - Arkshine/discourse-chat-sidebar · GitHub
	설치 가이드	테마 또는 테마 컴포넌트 설치 방법
	디스코ourse 테마가 처음이신가요?	디스코ourse 테마 사용 입문가이드

이 테마 컴포넌트 설치

크레딧: @Alon1 (스폰서 요청)^[1]

이 테마 컴포넌트는 공간이 허용되는 한 자동으로 채팅을 사이드바처럼 표시하고 높이를 최대한 활용하도록 설계되었습니다.

• 창 크기 조정 지원
• 컴포저(Composer) 지원
• 양쪽 모두 콘텐츠 또는 창에 고정 가능
• 사용자가 위치를 선택할 수 있음 (브라우저 로컬 스토리지에 저장됨)
• 이전에 채팅이 열려 있었다면 원래 채팅 상태로 되돌릴 수 있음
• 채팅의 원래 사용자 설정은 변경되지 않음
• 부분 테마 지원 (대부분의 인기 테마)

이 컴포넌트는 대부분의 테마에서 작동해야 합니다.
특정 테마에서 옵션이 누락되거나 문제가 발생하면 알려주세요!

설정

이름	기본값	설명
breakpoint	auto	채팅 사이드바가 표시될 픽셀(px) 단위 브레이크포인트. auto로 설정하면 기본 사이드바 및 콘텐츠 너비를 자연스러운 브레이크포인트로 사용합니다 (권장).
width	400px	채팅 사이드바의 너비.
position [2]	right	채팅 사이드바의 위치. left: 콘텐츠 왼쪽에 고정 right: 콘텐츠 오른쪽에 고정 outside-left: 창 왼쪽에 고정 outside-right: 창 오른쪽에 고정
theme_style		가능할 경우, 이 chat sidebar position에 현재 테마 스타일을 사용합니다. 대부분의 인기 테마에서만 사용 가능합니다. 이것은 신뢰할 수 없는 설정입니다 (테마 이름이 변경될 수 있음). 기본 테마 스타일을 사용하려면 비활성화하세요.
allow_user_preference[3]		사용자가 채팅 사이드바 설정을 지정할 수 있도록 허용합니다. 참고: 이 설정은 사용자의 브라우저 로컬 스토리지에 저장됩니다. 사용 가능한 값: position: 사용자가 채팅 사이드바 위치를 설정할 수 있도록 허용

할 일

• 테스트
• 더 부드러운 전환 효과
• 더 많은 사용자 설정?

개발 노트

처음에는 조작이 더 쉽고 흐름을 유지하기 위해 <ChatDrawer /> 컴포넌트를 다른 아웃렛(outlet)에 삽입해 보았습니다. 불행히도, 원래 컴포넌트를 완전히 억제할 수 없었습니다 (이벤트를 고려하고 있습니다). 적어도 그것을 오버라이드하는 방법을 찾지 못했습니다.

결국, CPU 사용량이 약간 더 높지만 침습성은 적고(수동 크기 조정은 가끔만 발생하지만) 어려운 JS 방식으로 진행할 수밖에 없었습니다.

---

1. 관심이 있으시다면, Alon의 사용 사례는 여기를 참조하세요. ↩︎

2. 페이지를 새로고침했는지 확인하세요. ↩︎

3. 중요: 이 설정은 헤더에 아이콘을 표시하기 위해 최신 API를 사용하며 최신 Discourse 버전이 필요합니다. ↩︎

[Lilly (Lillian)]

Nicely done!

[merefield (Robert)]

Does this support Discourse Bars 🍻 🍸 (a sidebar framework) , because it would be nice to combine it with other sidebar widgets?

[Arkshine]

Unfortunately, it can’t support Discourse Bars at the moment.

The component uses the original chat drawer, and the positioning is done manually.
Unless we can use/move the original <ChatDrawer /> component where we want, that would be difficult, I believe. I agree, though; that would be great!

At least it can be displayed alongside the Bar's sidebar

My component uses #main-outlet-wrapper element as a reference, so anything inside will work fine.

[WorldIsMine (DaveK)]

OMG this is great!

[digitaldominica]

Does this only work if the sidepanel is collapsed ? I notice if i don’t collapse my sidepanel the chat sidebar doesn’t show.

[Arkshine]

In this current version, it doesn’t force the main content to shrink, if there is not enough spaces to place the chat sidebar. It’s by design.

Maybe there are situations this can be useful. I don’t mind adding a user’s option to allow this.

[digitaldominica]

Okay I understand, thanks for the component it does work pretty neat.

[DevTeVe (DevTek Ve)]

이 컴포넌트가 3.6.0.beta2-latest 버전부터 더 이상 작동하지 않는 것 같습니다. 무엇을 선택해도 항상 오른쪽에 표시되며 기본 경험과 같습니다… 다른 분들도 이런 증상이 있나요?

이제 이 컴포넌트는 정상적으로 작동합니다! 저는 대부분 MacBook 사용자 화면에서 테스트했는데, 컴포넌트에 충분한 공간이 없으면 아무것도 표시되지 않아서 혼란을 겪었던 것 같습니다. 지금은 완벽하게 작동합니다.

[Arkshine]

아직 테스트하지는 않았지만, 보고해 주셔서 감사합니다. 곧 확인해 보겠습니다!

[gilles]

완벽한 컴포넌트 정말 좋은 아이디어입니다

[Arkshine]

알려진 비추천(deprecation) 문제를 수정하기 위해 PR을 만들었습니다.

DEV: Resolve deprecations issues (#2)

테스트를 도와주신 @DevTeVe님께 감사드립니다!

[DevTeVe (DevTek Ve)]

도와주신 덕분에 정말 감사합니다 !

@Arkshine와 오프라인으로 대화를 나누었는데, 제가 몇 가지 제안을 해서 이곳에 남기는 것이 더 좋겠다고 결정했습니다!

1. 채팅 창 크기 조절 가능 (너비와 높이)
2. 화면의 텍스트를 가려도 여전히 플로팅 상태로 유지할 수 있도록 허용
3. 너비도 자동으로 조정되면 좋겠습니다. 그러면 작아 보일지라도 항상 잘 맞는 크기를 찾게 될 것입니다. 그리고 설정(기본값이 아님)에서 "최소 px"와 같은 항목과, "설정된 경우 xxx 값에 미달하면 채팅이 기본 설정으로 복원됩니다."라는 경고가 표시되면 좋겠습니다.

[patrickemin]

안녕하세요, 이제 즐겨찾기 채팅 및 DM 채널을 별표로 표시할 수 있게 되었는데요, 채팅 사이드바에서 기본으로 “별표”가 지정된 채팅 및 DM 채널 목록을 표시할 수 있는 방법이 있을까요? 감사합니다.

추가: 아무것도 별표로 지정되지 않은 경우 아무것도 변경하지 않고, 별표가 지정된 채널이 있는 경우에만 해당 채널을 표시하는 방법을 말하는 것입니다.

[patrickemin]

안녕하세요, 오늘 아침에 별표가 달린 채널들이 더 이상 일반 목록에 표시되지 않고, 사이드바의 ‘별표’ 섹션에만 표시되는 것을 확인했습니다. 따라서 이 별표 목록이 기본적으로 표시되는 것이 중요합니다.

[patrickemin]

안녕하세요, 채팅 사이드바는 여전히 정상 작동하지만 빨간색 배너로 다음과 같은 알림이 표시됩니다:

Getting rid of the big red banner, how?

콘솔에는 다음이 표시됩니다:

[Arkshine]

수정 사항을 커밋했습니다. 한번 시도해 보고 알려주세요!

[patrickemin]

좋아요, 배너가 사라졌네요. 감사합니다.