Composer 카테고리 선택기에 하위 카테고리 우선 표시

개발
1

사용자는 하위 카테고리를 기준으로 Topic Composer에서 관련 카테고리를 선택합니다. 즉, 사용자는 원하는 하위 카테고리가 어떤 상위 카테고리에 속해 있는지 기억해야만 해당 카테고리를 찾을 수 있습니다.

카테고리 선택기에서 카테고리가 표시되는 방식을 변경하여 하위 카테고리와 상위 카테고리의 위치를 서로 바꾸는 것이 가능한가요? (하위 카테고리가 먼저 표시되도록)

예를 들어, 사용자가 거버넌스(Governance)에 관한 주제를 게시하려고 한다고 가정해 보겠습니다. 이상적으로는 카테고리 드롭다운에 'Governance - Admin’이 표시되어야 하며(목록은 하위 카테고리 기준으로 정렬됨),

image
image1784×598 68.7 KB

선택 시 컴포저(composer)에도 'Governance - Admin’으로 표시되어야 합니다.

image
image1484×244 18.4 KB

감사합니다

2

간단한 CSS 솔루션은 다음과 같습니다. 이를 테마나 컴포넌트 CSS에 추가하세요.
이 코드는 카테고리 → 하위 카테고리를 하위 카테고리 → 카테고리로 역전시킵니다:

// 위치를 "카테고리 -> 하위 카테고리"에서 "하위 카테고리 -> 카테고리"로 역전
.select-kit .select-kit-row.category-row .category-status,
#reply-control .category-input .category-chooser .selected-name .name {
    flex-direction: row-reverse;
}

// 하위 카테고리가 선택되었을 때 상위 카테고리를 숨김
#reply-control .category-input .category-chooser .selected-name .name {
    & > .badge-category__wrapper:first-child {
        display: none;
    }

    & > .badge-category__wrapper:last-child {
        display: unset;
    }
}

image
image475×349 8.47 KB

image
image387×147 2.74 KB

3

정말 마법사 같은 분이시네요! 감사합니다!

image
image618×154 6.25 KB

드롭다운에서 항목이 선택된 후, 카테고리 이름 대신 하위 카테고리 이름을 우선해서 표시하도록 composer를 설정할 방법이 있을까요? 아니면 더 좋게, 드롭다운에 하위 카테고리만 표시하도록 하는 방법(즉, 'trail’과 같은 카테고리는 드롭다운에 나타나지 않도록)이 있을까요?

4

여러 번 시도해 본 결과, 다음과 같이 진행되고 있는 것 같습니다:

span.name .badge-wrapper:first-child {
    display: none;
}

다만, 옵션에 하위 카테고리가 없고 카테고리만 있는 경우에는 작동하지 않습니다(이 경우 카테고리를 표시해야 하므로). 계속 시도해 보겠습니다.

5

Arkshine의 제안이 왜 문제인가요?

6

@martyn_thomas 위쪽 게시물을 업데이트했습니다. 올바른 방향으로 가고 계십니다. 하위 카테고리가 없을 때 display를 복원하는 규칙 하나가 빠져 있습니다. (기본적으로 첫 번째 요소는 항상 숨기고, 두 번째 요소는 해제하는 것입니다)

7

아니요 - 완벽하게 작동했습니다. 선택된 드롭다운에서 카테고리를 숨기려는 것이 아니라, 기본적으로 제 컴포저를 깔끔하게 보이게 하려는 것입니다.

8

첫 번째 부분은 작동합니다(하위 카테고리와 카테고리를 반전하는 것), 하지만 두 번째 부분은 작동하지 않네요 :frowning:

주말에 직접 시도해 보며 방법을 찾아보겠습니다. 도움 주셔서 감사합니다. 크리스마스 맥주 한 잔 빚었네요.

9

확신할 수 없습니다. 스크린샷에서 보시는 것처럼 제 쪽에서는 정상적으로 작동합니다. :thinking:
또한, 제 테스트 포럼에서 촬영한 영상이 있습니다:

11

저한테도 잘 동작합니다 (또한 장소가 더 깔끔하고 논리적으로 정리되니까 좋습니다. 우리는 경로의 경로가 아니라 하나의 카테고리에 관심이 있으니까요 — 여기서 상위 카테고리는 중요하지 않습니다)

두 분 모두 감사합니다.

12

해결했습니다:

3.1에서는

#reply-control .category-input .category-chooser .selected-name .name {
    & > .badge-wrapper:first-child {
        display: none;
    }

    & > .badge-wrapper:last-child {
        display: unset;
    }
}

모두 도와주셔서 감사합니다!

13

안녕하세요. 하위 카테고리가 없는 카테고리들이 많지 않다면 조건문을 사용할 수 있을 것 같습니다.

예를 들어, 카테고리가 cat1, Cat2가 아니면 메인 카테고리를 컴포저에서 숨기는 코드를 실행하는 식입니다.

반대의 경우라면 if catX, Cat,Y 조건으로 코드를 변경하면 됩니다.

컴포넌트를 생성할 때 이 조건을 어디에 배치해야 하나요?