Tag Icons

네, 태그 그룹에 관한 문제입니다.

네, 방금 확인해 보니 꽤 간단한 수정으로 보입니다. 코어에서 필터 드롭다운에 태그 렌더러를 사용해야 합니다(이렇게 하면 작성기의 태그 선택기와 일치하게 됩니다). 곧 자세히 살펴보겠습니다.

3개의 좋아요

방금 확인해 보니, 작성기에서 #mentioning 시 표시되는 드롭다운에서도 카테고리 렌더러가 테마 컴포넌트에 의해 대체된 것으로 확인됩니다. 테마 컴포넌트의 카테고리 아이콘이 표시되지만, 태그 렌더러는 다른 모든 위치와 달리 태그 이름 옆에 태그 아이콘이 표시되는 다른 렌더러를 사용하고 있습니다:

@pmusaraj 이 렌더러도 테마 컴포넌트에 의해 대체된 것과 동일한 것을 사용하도록 만드는 것이 가능하다고 생각하시나요?

감사합니다.

2개의 좋아요

이 부분을 표준화하는 것이 좋을 것 같습니다. @renato, 이 작업에 대해 PR을 작성해 보실 의향이 있으신가요?

(참고로, 필터 드롭다운에 대한 PR이 올라가 있었으며, 아마도 다음 주쯤 병합될 예정입니다.)

4개의 좋아요

이 컴포넌트를 사용하여 태그를 적용할 때 채팅 통합이 트리거된다는 것을 사용자에게 시각적으로 알리는 기능을 도입하기 시작했습니다.

이 컴포넌트에서 태그 텍스트의 색상을 선택적으로 변경하는 것도 가능한가요? 포럼 여기에서 수동으로 설정하는 옵션을 확인했습니다. 훌륭한 컴포넌트를 만들어 주셔서 감사합니다!

수정: 태그에 여러 아이콘을 추가할 수 있는 기능도 유용할 것 같습니다. 검토해 주셔서 감사합니다!

1개의 좋아요

테마에서 SCSS를 사용하면 이 작업을 수행할 수 있습니다. 이 기능을 컴포넌트에 추가할 계획은 없습니다.

태그당 여러 아이콘을 허용할 계획도 없습니다.

2개의 좋아요

안녕하세요 @pmusaraj

현재 태그 그룹별로 폴백 아이콘을 설정할 수 있는 우회 방법이 있나요?

모든 태그의 아이콘을 변경할 수 있을까요? 글머리 기호 대신 다른 것으로? 내가 이해하기로는 이 컴포넌트는 목록화된 태그에만 적용되는 것 같습니다.

답변을 찾았어요:

.discourse-tags .bullet:before { 
    background: transparent;
    content: svg-uri('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1" style="shape-rendering:geometricPrecision;text-rendering:geometricPrecision;image-rendering:optimizeQuality;" viewBox="0 0 467 856.25" x="0px" y="0px" fill-rule="evenodd" clip-rule="evenodd"><defs><style type="text/css">.fil0 {fill:black}</style></defs><g><path class="fil0" d="M234 0c129,0 233,105 233,234 0,64 -26,122 -68,165l-165 286 -166 -286c-42,-43 -68,-101 -68,-165 0,-129 105,-234 234,-234zm0 125c50,0 90,40 90,90 0,50 -40,91 -90,91 -50,0 -91,-41 -91,-91 0,-50 41,-90 91,-90z"/></g></svg>'); 
    vertical-align:baseline;
}

SVG 아이콘 이미지는 https://thenounproject.com/ 같은 사이트에서 자유롭게 다운로드할 수 있습니다.

1개의 좋아요

불릿 태그 + 태그 색상

불릿 스타일 태그를 사용하면서

  • _태그 아이콘_과 _태그 텍스트_의 색상을 동일하게 설정하고 싶거나
  • _태그 아이콘_이 설정되지 않은 경우에만 불릿을 표시하고 싶다면

books와 science-fiction 태그에 대해 제가 적용한 방법은 다음과 같습니다:

최종 결과:

  1. Tag icons 컴포넌트 설정 (이 컴포넌트)

  1. Tag Icons와 동기화되어야 하는 보조 컴포넌트 설정
    이 컴포넌트에서는 다음 두 가지를 수행합니다:
    1. 특정 태그에 대한 불릿 숨기기
    2. 아이콘과 동일한 색상으로 태그 텍스트 색상 설정

이것이 작동하려면 새로운 테마 컴포넌트인 Tag Icons extra를 생성합니다.
Common/CSS section에서:

  1. 다음 믹신을 추가합니다 (한 번만 필요함):
@mixin updateBulletTag ($col) {
    &.bullet {
        color: $col !important;
    }
    &.bullet::before {
        content: none !important;
    }
}
  1. 수정하려는 각 태그에 대해 아래 내용을 붙여넣고 REPLACEMETAG를 태그 이름으로, REPLACEMECOLOR를 아이콘과 동일한 색상으로 교체하세요:
[data-tag-name="REPLACEMETAG"] {
    @include updateBulletTag(REPLACEMECOLOR);
}

7개의 좋아요

버그 보고서: 게시물의 태그 선택기에서 아이콘에 색상이 적용되지 않습니다:

여기서 아이콘은 텍스트와 동일한 색상을 가져야 합니다(텍스트는 제가 직접 작성한 CSS입니다):

제 설정:

2개의 좋아요

@pmusaraj 약 두 주 전에 50개 정도의 태그에 아이콘을 붙여 놓았어요. 지금 태그 목록을 확인해 보니 그중 5개는 아이콘이 사라져 있네요… 그리고 그 태그들을 삭제했다가 다시 입력해도 소용이 없어요. 50개 전부를 삭제했다가 다시 입력해 보면 해결될지 모르겠지만, 그렇게 해야 한다면 너무 귀찮을 것 같아서 그러고 싶지 않네요…

아이콘이 더 이상 작동하지 않는 태그를 표시한 설정 화면 스크린샷을 올려 주시겠어요?

2개의 좋아요

음, 마지막 5개 항목이 작동하지 않는다는 점이 좀 이상하네요. 마지막 5개 항목 중 하나를 그 위의 항목과 바꿔서 넣어보시고 어떤 일이 일어나는지 확인해 주시겠어요? 설정 값이 어딘가에서 잘리는 것처럼 보이는데…

3개의 좋아요

알려둘 게 있는데, 처음부터 마지막 5개가 표시되지 않은 건 아니었어요. 처음에는 무작위인 것처럼 보이는 5개가 사라졌고, 제가 그걸 삭제한 뒤 다시 입력해서 표시되는지 확인해 봤거든요(그런데도 안 나왔어요). 그래서 마지막 몇 개가 안 나오는 것처럼 보이는 거예요.

그래서 증명 검증 태그를 삭제하고 다시 입력해서 목록 맨 앞으로 옮겼어요. 원래 주황색이었고, 여전히 주황색이며 정상적으로 표시되고 있어요. 그래도 여전히 그 5개만 문제인 것 같네요…

태그 아이콘 색상에 그 색상 변수를 사용할 수 있는 방법이 있을까요?

태그 아이콘에 모든 색상을 사용할 수 있습니다.
tagicons
혹시 다른 뜻인가요?

좋은 질문입니다. 네, CSS 커스텀 프로퍼티를 사용할 수 있는 것 같습니다. 저에게는 이렇게 작동했습니다:

2개의 좋아요

아, 내 실수였네요. 내 오류를 방금 발견했고, 지금은 잘 작동하고 있어요.
이렇게 가능하다는 게 정말 멋지네요!

1개의 좋아요

아이콘에 png 파일을 사용할 수 있는 방법이 있을까요? 사용하려는 모든 이미지를 png 형식으로 보유하고 있는데, svg로 변환하면 이미지가 망가져서 사용할 수 없어요. 게다가 변환을 시도해도 아이콘이 로드되지 않습니다.

400개 이상의 이미지를 변환해야 하는데, 하나도 제대로 변환이 되지 않으니 이미 가지고 있는 png 파일을 그대로 사용할 수 있으면 좋겠습니다.

이 컴포넌트는 PNG 파일과 함께 사용하도록 설계되지 않았습니다. 당신의 경우 CSS를 그대로 사용하면 될 것 같습니다.

2개의 좋아요