그룹 목록 순서 변경

이 Contribute > UX 카테고리의 “about” 텍스트에는 다음과 같이 적혀 있습니다:

작은 “사용 편의성” 개선 사항도 포함됩니다.

그래서 이렇게 제안해 봅니다 :slight_smile:

그룹을 알파벳 순서로 정렬해 주실 수 있을까요?

https://meta.discourse.org/g

감사합니다 :kissing_face_with_closed_eyes:

4개의 좋아요

이 포럼의 그룹을 말씀하시는 건가요?

아니면, 본인 포럼에서 어떻게 하면 되는지 알려드릴 수 있습니다.

1개의 좋아요

참고로:

전체 이름(Full Name) 기준으로 정렬해 주실 수 있을까요?

전체 이름이 상단에 큰 글씨로 표시되는데, 더 작고 부차적인 서브 텍스트 기준으로 정렬하는 것은 논리적으로 말이 되지 않습니다 :man_shrugging:

2개의 좋아요

이름 순으로 정렬하면 인터페이스 언어에 따라 정렬 순서가 달라집니다. (모든 기본 그룹의 이름은 인터페이스 언어에 따라 변경됩니다.) 저는 영어로든 독일어로든 목록을 보고 있는지와 관계없이 항상 동일한 순서가 유지되기를 선호합니다. 사용자의 인터페이스 언어를 확인하지 않아도, "모더레이터 그룹은 X 그룹과 Y 그룹 사이에 있습니다"라고 말할 수 있으면 좋겠습니다.

2개의 좋아요

그럼 상단에 더 큰 글꼴로 표시되는 것은 Full Name이 아니라 @Name이 되어야 하는 건가요? :thinking:

2개의 좋아요

네, 공유해 주세요 :slight_smile:

이 기능을 수행하는 테마 구성 요소가 있나요?

이것은 관리자 대시보드의 about your site 페이지에서 그룹 목록 아래에 있습니다. 맨 아래로 스크롤하면 해당 항목이 보일 것입니다.

정보 페이지에서 추가 그룹의 정렬을 설정하는 옵션이 그룹 페이지에서 표시되는 방식에도 영향을 미치나요?

1개의 좋아요

네, 한번 해볼게요

음, 나는 차이를 잘 모르겠어. 네 쪽에서 한번 시도해 봐. 아마도 차이가 없을 것 같아.

2개의 좋아요

여전히 유효하다고 생각해요? :thinking:

그룹은 여전히…

즉,

매우 혼란스러운 그룹 정렬의 작은 예시입니다:

1개의 좋아요

그룹 목록의 순서를 다시 정하되, 위치가 고정되도록 하는 두 가지 방법을 생각해 보았습니다. 모크업은 아래에 있습니다.

Moin이 말했듯이, 이름 순으로 정렬하면 언어에 따라 그룹 위치가 달라질 수 있기 때문입니다.

옵션 1:

가장 쉬운 방법은 카테고리를 드래그하여 순서를 바꾸는 것입니다. 하지만 카테고리가 많다면 이 작업이 번거로워질 수 있습니다.

/g 그룹 페이지에 :gear: 그룹 순서 변경 버튼 하나를 추가합니다.


그런 다음 그립 아이콘이 나타나며, 원하는 대로 그룹을 드래그하여 순서를 바꿀 수 있습니다. 다만, 그룹이 많다면 모바일 환경에서는 별로 편하지 않습니다.


옵션 2

기존 UI를 활용하여 그룹 순서를 바꾸는 방식으로 접근하는 것이 좋을 것 같습니다. 배지 그룹 편집기와 카테고리 고정 위치 편집기에서 영감을 받았습니다.

결국, 그룹 이름(그룹 묶음)을 만들고, 그 안의 그룹을 원하는 대로 정렬한 후, 만든 그룹 이름 안에 그룹을 추가하고 다시 순서를 정하게 됩니다. 설명이 좀 헷갈릴 수 있습니다 :sweat_smile:


다시 한번, :gear: 그룹 순서 변경 버튼으로 시작합니다.

그러면 이 그룹 편집기가 열립니다. 배지 편집기처럼 ‘시작하기’, ‘커뮤니티 & 게시’ 그룹 등을 이동할 수 있는 것과 동일합니다.

예를 들어 ‘Region’ 그룹을 편집기에서 아이콘을 눌러 다음과 같이 편집/재정렬할 수 있습니다.


의견은 어떻게 하시나요?

3개의 좋아요

이 문제에 대해 시간을 내어 고민해 주셔서 감사합니다 :slight_smile:

개인적으로는 옵션 1이 가장 논리적인 것 같고, 옵션 2는 카테고리 그룹화가 필요해서 다소 복잡하게 느껴집니다.

옵션 1과 관련하여 이 부분:

아마도 ‘카테고리 순서 변경’ 기능/UI를 그룹에도 적용할 수 있을 것 같습니다:

3개의 좋아요

사실 그게 도움이 될 것 같아. 그런 기능이 있는 게 합리적인 것 같아. 아마도 그룹을 만들 때 알파벳 순서로 정렬하면 좋겠어.

1개의 좋아요

CSS의 display: flex 또는 display: grid를 사용하면 컨테이너 안의 요소를 배치할 수 있음을 발견했습니다.

Horizon에서는 이것이 기본 설계 원칙이므로, 필요할 경우 활성 테마를 확인하여 그에 맞게 조정하는 것이 좋습니다:

.group-box[data-group-name="group1"] {
order: -3;
}
.group-box[data-group-name="group2"] {
order: -2;
}
.group-box[data-group-name="group3"] {
order: -1;
}

어색한 대안은 그룹의 내부 이름을 1_group, 2_group, 3_group으로 변경하는 것이었지만, 눈이 피로해져서 :smiling_face_with_tear: TC를 탐색하고 시행착오를 거치며 이 해결책을 찾았습니다.

도움이 되기를 바랍니다.

2개의 좋아요

@satonotdead 님, 정말 천재시네요 :person_bowing:t2:

저는 어떤 그룹의 Name이나 Full Name도 변경하지 않았습니다.

단순히 제안을 받아들여 이 내용을 라이트 테마와 다크 테마 양쪽에 추가했습니다 (Horizon은 비활성화되어 있습니다):

/* Re-order all  groups by their Full Name */
.groups-boxes>.group-box{order:999}
.groups-boxes>.group-box[data-group-name="group-3d-printing"]{order:1}
.groups-boxes>.group-box[data-group-name="admins"]{order:2}
.groups-boxes>.group-box[data-group-name="group-android"]{order:3}
.groups-boxes>.group-box[data-group-name="group-evo"]{order:4}
.groups-boxes>.group-box[data-group-name="BIGMEET"]{order:5}
.groups-boxes>.group-box[data-group-name="group-challenges"]{order:6}
.groups-boxes>.group-box[data-group-name="group-challenges-cmt"]{order:7}
.groups-boxes>.group-box[data-group-name="commercial-operators"]{order:8}
.groups-boxes>.group-box[data-group-name="group-air-2"]{order:9}
.groups-boxes>.group-box[data-group-name="group-air-2s"]{order:10}
.groups-boxes>.group-box[data-group-name="group-air-3"]{order:11}
.groups-boxes>.group-box[data-group-name="group-air-3s"]{order:12}
.groups-boxes>.group-box[data-group-name="group-dji-avata"]{order:13}
.groups-boxes>.group-box[data-group-name="group-flip"]{order:14}
.groups-boxes>.group-box[data-group-name="group-fly"]{order:15}
.groups-boxes>.group-box[data-group-name="group-dji-fpv"]{order:16}
.groups-boxes>.group-box[data-group-name="group-go4"]{order:17}
.groups-boxes>.group-box[data-group-name="group-dji-lito"]{order:18}
.groups-boxes>.group-box[data-group-name="group-mavic-2"]{order:19}
.groups-boxes>.group-box[data-group-name="group-mavic-3"]{order:20}
.groups-boxes>.group-box[data-group-name="group-mavic-4"]{order:21}
.groups-boxes>.group-box[data-group-name="group-mini-1"]{order:22}
.groups-boxes>.group-box[data-group-name="group-mavic-pro"]{order:23}
.groups-boxes>.group-box[data-group-name="group-mini-2"]{order:24}
.groups-boxes>.group-box[data-group-name="group-mini-3-pro"]{order:25}
.groups-boxes>.group-box[data-group-name="group-mini-4-pro"]{order:26}
.groups-boxes>.group-box[data-group-name="group-mini-4k"]{order:27}
.groups-boxes>.group-box[data-group-name="group-mini-5-pro"]{order:28}
.groups-boxes>.group-box[data-group-name="group-mini-se"]{order:29}
.groups-boxes>.group-box[data-group-name="group-neo"]{order:30}
.groups-boxes>.group-box[data-group-name="group-dji-sc"]{order:31}
.groups-boxes>.group-box[data-group-name="beta-testers"]{order:32}
.groups-boxes>.group-box[data-group-name="group-fpv"]{order:33}
.groups-boxes>.group-box[data-group-name="group-ios"]{order:34}
.groups-boxes>.group-box[data-group-name="group-litchi"]{order:35}
.groups-boxes>.group-box[data-group-name="moderators"]{order:36}
.groups-boxes>.group-box[data-group-name="group-eastmidlands"]{order:37}
.groups-boxes>.group-box[data-group-name="group-eastofengland"]{order:38}
.groups-boxes>.group-box[data-group-name="group-london"]{order:39}
.groups-boxes>.group-box[data-group-name="group-northeast"]{order:40}
.groups-boxes>.group-box[data-group-name="group-northwest"]{order:41}
.groups-boxes>.group-box[data-group-name="group-northernirel"]{order:42}
.groups-boxes>.group-box[data-group-name="group-scotland"]{order:43}
.groups-boxes>.group-box[data-group-name="group-southeast"]{order:44}
.groups-boxes>.group-box[data-group-name="group-southwest"]{order:45}
.groups-boxes>.group-box[data-group-name="group-wales"]{order:46}
.groups-boxes>.group-box[data-group-name="group-westmidlands"]{order:47}
.groups-boxes>.group-box[data-group-name="group-yorkshumber"]{order:48}
.groups-boxes>.group-box[data-group-name="staff"]{order:49}
.groups-boxes>.group-box[data-group-name="trust_level_0"]{order:50}
.groups-boxes>.group-box[data-group-name="trust_level_1"]{order:51}
.groups-boxes>.group-box[data-group-name="trust_level_2"]{order:52}
.groups-boxes>.group-box[data-group-name="trust_level_3"]{order:53}
.groups-boxes>.group-box[data-group-name="trust_level_4"]{order:54}

이전에는 이런 상태였습니다:


이제 이렇게 바뀌었습니다:


@satonotdead 님, 정말 감사합니다. 덕분에 오늘 하루가 정말 즐거웠습니다 :chefs_kiss:

2개의 좋아요

좋아요, 도움이 되었다니 정말 기쁩니다. 믿어주세요, 이 해결책을 찾은 것도 저에게는 큰 기쁨이었답니다! (진짜예요!) 저희 커뮤니티에서는 그룹/티어가 커스텀으로 설정되어 있어서, 이를 순서대로 표시할 수 있다는 점이 우리에게 정말 중요합니다.

참고로 배지도 순서를 바꿀 수 있습니다. 그룹과 연동하여 배지를 사용하다가 디스코스의 기본 상태에서는 이를 처리하는 것이 어려웠던 분들을 위해 알려드립니다.

1개의 좋아요

@Discourse 이전의 제안은 여전히 향후 스프린트를 위해 유효합니다 :blush:

1개의 좋아요