수락 전과 수락 후 응답의 다른 상태(텍스트 및 아이콘)

[DorisHo]

도움말 텍스트를 더 실행 가능한 내용(예: “해답으로 표시” vs “해답”)으로 변경할 때, 최근에는 승인되지 않은 답변과 승인된 답변이 모두 동일한 도움말 텍스트를 사용한다는 것을 발견했습니다. 이는 확장하여 아이콘도 동일하게 사용되고 있다는 뜻입니다. 답변이 승인되지 않은 상태와 응답이 해답으로 표시된 상태에 대해 각각 다른 상태를 가질 수 있는지 궁금합니다. 예를 들어 다음과 같이요:

답변이 선택되지 않은 상태의 버튼:

승인된 답변이 선택된 후의 버튼 상태:

사용자는 기본 “해답” 텍스트보다 실행을 제안하는 도움말 텍스트를 보는 것이 더 유용할 수 있다고 생각합니다. 답변이 선택되면, 선택 결과로 명확한 피드백을 볼 수 있으면 도움이 될 것입니다.

또한, 브라우저의 alt 속성에 의존하는 것보다 버튼이 어떤 역할을 하는지 이해하는 데 도움이 되는 맥락에 맞는 호버 상태도 유용할 수 있습니다. 아래 예시를 참고하세요.

해답 승인:

이전에 선택된 답변 제거:

이러한 상호작용을 구현할 계획이 있으신가요?

[tynaut (Ty Correll)]

도움이 될 수 있도록 CSS 솔루션을 추가합니다.

의사 요소(pseudo elements)를 사용하면 텍스트 부분의 동작을 모방할 수 있습니다:

이 코드는 의미론적으로 약간 중첩되어 있지만 동작은 합니다. 호버 시 대상이 여기저기 움직이지 않도록 텍스트 정렬을 변경하거나 버튼의 폭을 고정해야 합니다.

css

nav.post-controls .actions button {
    &:after {
        margin-left: 0.5em;
    }
    
    &.unaccepted {
        &:after {
            content: "Mark as solution";
        }
        &:hover {
            &:after {
                content: "Select solution";
            }
        }
        
    }
    
    &.accepted {
        &, .d-icon {
            color: var(--tertiary);
        }
        &:after {
            content: "Selected Solution"; 
        }
        &:hover {
            &, .d-icon {
                color: var(--primary);
            }
            &:after {
                content: "Deselect Solution";
            }
        }
    }
}

다음과 같이 처리하는 것도 가능하며, 이는 "Select if this reply solves the problem"이라는 텍스트가 표시됩니다. 너무 길지만 언어 번역을 존중해야 합니다.

&:after {
    content: attr(title);
}

---

이상적으로는 의사 요소 대신 번역을 지원하도록 실제 HTML을 변경하는 것입니다;
title 속성(더 짧다면)은 js 호버 리스너를 사용하는 것보다 나은 경우가 있습니다.

[Karen_Kitchens]

Hi @tynaut,

해당 솔루션을 테스트 중인데 질문이 있습니다. 원문 작성자일 경우 DOM에 Mark as solution이라는 추가 버튼 레이블이 전송되어 이 솔루션과 중복이 발생합니다. 이 문제를 해결하는 방법에 대한 제안이 있을까요? CSS로 버튼 레이블을 숨기는 것이 좋을까요?

감사합니다!

[Karen_Kitchens]

Hi @tynaut,

버튼을 왼쪽으로 정렬하는 쉬운 방법이 없어서 호버 시 버튼이 튀는 문제를 발견했습니다. 제가 찾은 유일한 해결책은 버튼에 너비를 지정하는 것이지만, 고정 너비 요소가 아니므로 이상적인 방법은 아닐 것 같습니다. 혹시 다른 해결책이 있을까요?

[tynaut (Ty Correll)]

@Karen_Kitchens

버튼을 왼쪽으로 정렬하여 호버 시 버튼이 튀어 오르지 않도록 하는 쉬운 방법이 없다는 점도 알게 되었습니다.

텍스트가 변경될 때 커서가 고정되지 않은 요소의 끝에 머물러 있으면 버튼이 계속 튀어 오르기 때문에, 두 가지 조치를 모두 결합하는 것이 가장 좋습니다.

nav.post-controls {
    .actions {
        width: 100%;
        .extra-buttons {
            margin-right: auto; // 버튼을 왼쪽으로 정렬
            .widget-button {
                width: 200px; // 최대 텍스트를 덮을 수 있는 값으로 설정
            }
        }
    }
}

원하는 경우 호버 배경색을 숨기고 다른 방식으로 호버 상태를 표시할 수 있습니다.

[tynaut (Ty Correll)]

DOM 텍스트는 font-size: 0;로 설정할 수 있습니다.

그리고 의사 요소(그리고 .d-icon 클래스)는 해당 속성을 상속받는 자식 요소이므로, 그 글꼴 크기를 지정해야 합니다.

[DorisHo]

Hey @tynaut, 도움과 의견 주셔서 감사합니다.
<use href> 속성을 변경하여 다른 상태(선택된 답변, 호버 등)의 아이콘을 바꿀 수 있는 방법이 있을까요?