테마 및 테마 컴포넌트(플러그인 포함)의 CSS 식별자 요청

기여 기능
1

제 테마 컴포넌트는 설정에 객체를 사용하며, 꽤 많은 필드를 제공합니다.

현재 객체 설정에 적용되는 그리드 스타일은 세로 탭 열과 스키마 필드에 매우 좁은 열 너비를 사용하고 있습니다.

객체 설정에 대해 대안적인 표시 방식을 제공하길 원했지만, 제 테마 컴포넌트에 대해서만 설정을 변경할 수 있는 방법을 찾지 못했습니다. 모든 테마에 제 CSS 오버라이드를 전역으로 적용하고 싶지 않기 때문입니다.

Discourse가 각 테마와 테마 컴포넌트에 대해 DOM에 CSS 식별자를 추가하여, 특정 테마 설정 페이지를 대상으로 하는 다른 CSS 규칙을 추가할 수 있게 해줄 수 있을까요?

제 사이트에서 전역으로 적용하는 간단한 CSS 오버라이드는 다음과 같습니다:

.schema-setting-editor .schema-setting-editor__wrapper {
    grid-template-columns: minmax(15em, 0.3fr) 1fr;
    gap: 0 3rem;
}
.schema-setting-editor .schema-field {
    grid-template-columns: 1fr;
    gap: 0;
    background-color: var(--tertiary-100);
    padding: 1rem 5px;
}

기본 스타일과 오버라이드된 스타일:

default_styles
default_styles1730×1927 242 KB

overwritten_styles
overwritten_styles1730×2151 302 KB

5개의 좋아요
2

수정 방법은 다음과 같이 간단합니다.

하지만 몇 가지 궁금한 점이 있습니다.

  1. 테마 개발자가 설정 페이지의 외관을 커스터마이즈하는 것을 “쉽게” 만들 경우, 모든 페이지가 각기 다른 모습이라면 사용자가 그 페이지를 사용하는 것이 더 어려워지는 건 아닌가요?

  2. 테마 설정 페이지가 가용한 공간을 더 잘 활용할 수 있도록 코어에서 수정하는 것이 더 나은 건 아닌가요? :thinking: cc @product-managers

3개의 좋아요
3

이것은 정당한 우려인 것 같습니다. 사용자의 입장에서, Discourse의 보편성과 일관성 덕분에 새로운 포럼에 쉽게 참여할 수 있다는 점이 정말 좋습니다. 관리자의 입장에서, 다른 사이트들을 도울 기회가 있다면那里的 일관성도 감사하게 여길 것입니다.

(지금까지 도와달라고 불려간 친구와 가족들의 기술 지원 사례를 떠올리고 있습니다. iPhone은 기꺼이 도와주지만, 모든 단말기가 다 달라서 Android는 두려울 따름입니다.)

4

네, 이것이 우리가 장려하고 싶은 방향은 아닌 것 같습니다. @martin 님은 이전에 관리자 섹션 전체에 대해 우리가 정한 UI 가이드라인과 관련하여 이 주제에 대해 상당한 맥락을 가지고 계십니다.

일반적으로 관리자 섹션은 커스터마이징하지 않는 것이 좋다고 생각했습니다. 제 기억이 맞다면요.

네, 이 주제를 #contribute:ux로 다루는 것이 더 합리적이라고 생각합니다.

@jordan.vidrine 이 내용은 이전에 formkit로 전환하려는 노력 및 formkit 자체에 대한 피드백과 일부 중복되는 부분이 있는 것 같습니다.

2개의 좋아요
5

네, 저는 이 것에 대해 상당히 반대합니다. Discourse 관리자 UI는 사용자 지정되어서는 안 되며, UI의 일관성(대부분 그렇지만, 아직 해결해야 할 몇 가지 페이지가 있습니다)은 관리자 경험의 핵심 부분입니다.

1개의 좋아요
7

이걸 다시 시도해 봤습니다

이전 이후
before
before1961×1453 204 KB
after
after1961×1453 189 KB

제가 할 수 있는 가장 간단한 방식입니다. 이 UI를 다시 작업하는 데 시간을 쓰길 원하는지 확실하지 않습니다. '내부 사이드바’가 어색해 보이지만, 지금 우리가 우선순위를 둘 수 있는 작업량보다 더 많은 노력이 필요할 수도 있습니다 :thinking:

1개의 좋아요
8

내부 사이드바가 표시되는 동안 요소 순서를 변경하는 버튼도 항상 동시에 볼 수 있도록 하는 것이 가능하다고 생각하시나요? 긴 설정 목록 아래에 버튼이 위치해 있으면 순서를 변경하려면 많은 스크롤링이 필요하며, 버튼을 보고 있는 동안에는 어떤 일이 일어나는지 확인할 수 없습니다.

2개의 좋아요
9

@moin 이 문제를 지적해 주셔서 감사합니다. 저도 자주 겪는 문제입니다. +1

사이드바(.schema-setting-editor__tree) 아래로 버튼을 이동하면 사용자 경험이 개선될 것이라 동의합니다.

다만, 위/아래 버튼을 삭제 버튼과 분리하는 방식을 선호합니다. 위/아래 버튼은 사이드바 아래로 이동하고, 삭제 버튼은 설정 필드 아래에 그대로 두는 방식입니다.

2개의 좋아요