Rhidian
4월 13, 2020, 11:08오후
1
버전 2.8.0부터 Discourse 코어에 추가되었습니다 . 해당 버전 이상으로 업그레이드한 후에도 계속 사용하면 문제가 생길 수 있습니다!
토픽과 개인 메시지 포스트를 구별할 수 있도록 메시지 포스트의 스타일을 버블 형식으로 변경하는 테마 컴포넌트를 만들었습니다.
설정:
버블의 배경색을 테마의 기본색, 보조색, 삼차색 또는 기타 일반적인 색 중에서 선택할 수 있습니다.
다른 색상을 선택하여 내가 보낸 메시지와 나에게 온 메시지를 구별할 수 있습니다.
버블의 배경 투명도를 설정합니다 - 백분율이 클수록 색이 더 진해집니다.
메시지 버블에 박스 그림자를 표시할지 선택합니다.
선택적으로 메시지 답장 버튼에 텍스트를 추가하여 토픽 답장 버튼과 구별할 수 있습니다.
다양한 색상을 선택하거나 팔레트에서 색상을 선택하여 테마에 맞게 조정할 수 있습니다. 또한 색과 배경에 따라 버블의 배경 투명도를 설정할 수도 있습니다.
70개의 좋아요
jord8on
4월 14, 2020, 6:21오후
2
정말 너무너무 멋져요, @Rhidian !!!
플러그인을 다뤄본 적이 없어서 궁금한 점이 하나 있어요…
시스템 색상만 허용하는 대신, 투명도를 포함한 16진수(hex) 코드도 허용할 수 있을까요? 그게 많은 추가 작업이 필요해도 괜찮아요. 그냥 궁금해서 물어봅니다.
그림자나 다른 CSS 스타일을 변경하고 싶다면 어떻게 해야 할까요? GitHub와 그 작동 방식에 대해 아주 능숙하지는 않지만, 테마 컴포넌트에 복사하기 전에 .git 저장소를 살펴봤어요. CSS 작성은 할 줄 압니다. 플러그인을 복사한 후, 작성해 둔 CSS 파일을 수정하고, 원하는 스타일로 새 테마 컴포넌트로 업로드하는 것이 가능할까요?
플러그인을 수정하는 방법에 대한 안내를 주실 수 있다면 정말 좋겠습니다. 아니면, 프론트엔드에서 CSS 오버라이드를 하는 것도 방법일 것 같아요. 성능 측면에서는 어느 쪽이 더 나은가요?
다시 한번… 이거 정말 너무 감사합니다… 일반 토픽과 DM을 구분하는 데 제가 찾고 있던 바로 그 해결책이에요!
4개의 좋아요
Rhidian
4월 14, 2020, 6:36오후
3
감사합니다 @jord8on . 이런 피드백을 받을 수 있어서 정말 기쁩니다.
그림자(Drop shadow)를 설정 옵션으로 커스터마이징할 수 있도록 하겠습니다.
자신의 CSS를 생성하거나 편집하는 것은 매우 쉽습니다. 컴포넌트를 로드한 후, 컴포넌트 설정에서 ‘Custom CSS/HTML’ 섹션을 클릭하세요.
그냥 CSS 시트를 편집하고 저장 버튼을 클릭하면 됩니다. 이는 사용자만의 커스터마이징입니다. 이를 공유하여 모든 사용자가 혜택을 볼 수 있도록 컴포넌트에 반영하고 싶다면, 단순히 이 CSS를 discourse meta의 해당 토픽에 게시하면 됩니다. 또는 더 장기적인 목표로, 더 큰 규모의 변경 사항을 진행 중인 경우 Github에서 풀 리퀘스트(Pull Request)를 하는 방법을 배우거나 저장소를 포크(Fork)할 수 있습니다.
3개의 좋아요
jord8on
4월 14, 2020, 7:01오후
4
감사합니다 @Rhidian !!!
이렇게 간단한 방법으로 DM을 포럼의 일반 주제와 확실히 구분할 수 있게 되네요.
회원 한 분에게 어떻게 생각하는지 물어봤더니, 이 기능이 생긴 걸 정말 기뻐했어요. 아이디어와 구현 모두 칭찬해 주셨는데, 그 마음을 전해 드리고 싶어요!!
6개의 좋아요
Rhidian
4월 26, 2020, 9:08오후
26
이 테마 구성 요소를 업데이트하여 이제 다음 방법으로 직접 색상을 입력할 수 있습니다.
HTML 색상 이름 (black, white, maroon, red, purple, green, lime, olive, yellow, navy, blue, teal, aqua)
HTML 색상 코드 (#000000 black, #FFFFFF white 등 또는 #CCC와 같은 짧은 코드)
테마 색상 이름 (primary, secondary, tertiary)
버블 색상과 대비가 되도록 메시지 텍스트 색상도 동일한 방식으로 직접 입력할 수 있습니다.
불투명도 설정을 사용하면 버블 색상을 배경과 혼합할 수 있으며, 이렇게 하면 테마 색상 설정에 따라 색상이 변경됩니다. 예를 들어 라이트 테마와 다크 테마에서 각각 다른 색상이 적용됩니다.
이 업데이트는 하위 호환성을 유지합니다. 이 기능을 사용하려면 테마 설정에서 ‘업데이트 확인’ 버튼을 사용하세요.
9개의 좋아요
ggurbet
3월 8, 2021, 2:26오후
54
커스텀 CSS로 테두리를 비활성화하고 은은한 색상 변경만 적용했는데, 보기 좋습니다. 테두리를 수정할 수 있는 옵션이나 단순히 켜기/끄기 전환 스위치가 있으면 좋겠습니다.
1개의 좋아요
Rhidian
3월 8, 2021, 2:50오후
55
@ggurbet 님, 안녕하세요. 스크린샷을 올려주시고 변경한 CSS를 공유해 주시겠어요?
ggurbet
3월 8, 2021, 3:04오후
56
@Rhidian , 경계가 너무 시선을 분산시켰기 때문에 제거했습니다. 제 색상 설정은 무시해 주세요
라이트 테마 스크린샷:
다크 테마 스크린샷:
Common > CSS에 다음 내용을 추가했습니다:
// Personal Message Bubble Component - No border
.archetype-private_message .topic-body .contents {
border: none !important;
}
3개의 좋아요
Rhidian
3월 8, 2021, 9:07오후
58
정말 멋지네요. 마음에 듭니다
테두리를 제거하는 옵션과 4차 옵션(quaternary option)을 추가했고, 3차(tertiary)의 철자도 수정했습니다.
감사합니다 @ggurbet @debryc
7개의 좋아요
ggurbet
3월 8, 2021, 9:10오후
59
정말 빠르시네요, 감사합니다!
참고로, 보시다시피 컴포넌트를 두 번 설치하고 다크 테마에는 어두운 색, 라이트 테마에는 밝은 색을 설정했습니다. 커스텀 CSS 색상을 사용하려면 다른 방법이 없다고 생각합니다.
또한 작은 제안 하나 드리고 싶은데요, 현재는 답변 버튼 뒤에 텍스트를 추가할 수 있도록 되어 있지만, 터키어처럼 문장 끝에 동사가 오는 언어의 경우 앞에 추가하는 것이 더 적합할 수 있습니다.
Rhidian
3월 9, 2021, 8:53오전
60
ggurbet:
참고로, 보시다시피 이 컴포넌트를 두 번 설치하고, 다크 테마에는 어두운 색, 라이트 테마에는 밝은 색을 설정했습니다. 커스텀 CSS 색상을 사용하려면 다른 방법이 없다고 생각합니다.
네, 좋은 우회책이네요. Discourse에서 테마와 컴포넌트를 로컬에서 수정할 수 있는 기능을 제거하려는 계획된 변경 사항이 당신의 구현에 어떤 영향을 미칩니까? 여기서는 분명히 유용했던 것 같은데?
1개의 좋아요
ggurbet
3월 9, 2021, 8:57오전
61
아니요, 그렇지 않습니다. CSS를 몇 가지 간단히 수정하면 됩니다.
Rhidian
3월 9, 2021, 10:26오전
62
저는 베타 릴리스의 이 공지사항에 대해 말씀드린 것입니다. 여전히 CSS를 수정할 수 있지만, 이제 git 저장소와 연결되지 않은 새로운 테마 컴포넌트를 생성하고 모든 코드를 복사해야 합니다. 그렇게 하신 건가요, 아니면 컴포넌트에서 CSS를 편집하는 간단한 방법을 사용하신 건가요?
이것은 저에게 문제가 있어 보입니다. 저는 테마를 해당 위치에 있는 그대로 편집할 수 있는 기능을 유지하는 편이 낫다고 생각합니다. 이는 분명히 테마/컴포넌트 개발에 도움이 됩니다.
오래전부터 모범 사례는 원격 Git 저장소에서 설치된 테마를 Discourse에서 로컬로 편집하는 것을 피하는 것이었습니다. 원격 저장소에서 테마를 업데이트할 때 테마 코드나 업로드된 파일에 대한 모든 변경 사항이 삭제되기 때문입니다.
이 커밋에서 원격 테마를 로컬에서 편집할 수 있는 기능을 제거하고, 이제 Discourse에서 이 모범 사례를 강제 적용합니다.
1개의 좋아요
ggurbet
3월 9, 2021, 11:16오전
63
저는 "공용 서브테마"라는 로컬 컴포넌트를 가지고 있으며, 여기서 다른 컴포넌트들을 위한 수정 작업을 수행합니다. 이 서브테마 내에서 다른 컴포넌트들의 클래스, 요소 등을 대상으로 합니다. 컴포넌트 작성자가 클래스, ID 등의 이름을 변경하지 않는 한 이 방식은 문제없이 작동합니다. 참고로, 현재 경계선 제거 기능도 함께 포함되어 있어 개인 메시지 버블 컴포넌트에 대해 서브테마에서 추가 수정이 필요하지 않습니다.
1개의 좋아요
downey
3월 10, 2021, 9:46오후
64
안녕하세요, 이 멋진 테마 컴포넌트를 만들어 주셔서 감사합니다.
잠재적인 버그: “appended” 텍스트 옵션은 메시지 토픽 하단의 문자열 앞에 공백을 포함하지만, 편집기 창에서는 포함하지 않는 것으로 보입니다. 아래를 참고해 주세요:
2개의 좋아요
ggurbet
3월 22, 2021, 9:46오전
65
@Rhidian , 답변 버튼 앞에 텍스트를 추가하는 옵션도 추가해 주실 수 있나요? 일부 언어(터키어 등)에서는 동사 앞에 특정 텍스트를 추가하는 것이 의미에 맞습니다.
1개의 좋아요
훌륭한 컴포넌트네요!
Rhidian
4월 5, 2021, 10:41오전
67
답글 버튼 앞에 텍스트를 추가할 수 있는 옵션을 추가했습니다. 이 옵션은 답글 텍스트 앞의 svg 답글 화살표도 숨겨 줍니다.
1개의 좋아요
이 테마 컴포넌트의 기능은 버전 2.8.0부터 Discourse 코어에 추가되었습니다. 해당 버전 이상으로 업그레이드한 후에도 계속 사용하면 문제가 생길 수 있습니다!
