네, 정말 좋은 제안들이네요. 테마 컴포넌트 만으로 어떻게 구현할지 확실하지는 않지만, 상상하는 것만으로도 재미있어요.
또, 오늘 컴포넌트에 가독성 설정을 추가하는 업데이트를 추가했어요.
다만, 여기서 사용 중인 DiscoTOC 컴포넌트와 잘 어울리지 않는 문제를 발견했어요. 해결할 수 있는 몇 가지 아이디어가 있으니 이번 주에 해결해 보려고 합니다.
네, 정말 좋은 제안들이네요. 테마 컴포넌트 만으로 어떻게 구현할지 확실하지는 않지만, 상상하는 것만으로도 재미있어요.
또, 오늘 컴포넌트에 가독성 설정을 추가하는 업데이트를 추가했어요.
다만, 여기서 사용 중인 DiscoTOC 컴포넌트와 잘 어울리지 않는 문제를 발견했어요. 해결할 수 있는 몇 가지 아이디어가 있으니 이번 주에 해결해 보려고 합니다.
정말 멋진 컴포넌트입니다. 두 가지 제안이 있습니다:
좋아요!
관리자/모드가 아닌 경우 이렇게 보입니다.
아이콘을 이동시키지 않고 같은 위치에 유지하는 것이 가능할까요? ![]()
감사합니다. 실제로는 여기 개발 환경에 설치된 discoTOC 테마 컴포넌트 때문이었습니다. 이번 주에 두 컴포넌트가 잘 함께 작동하도록 작업하겠습니다.
리더 모드 설정을 저장해서 주제 간에도 유지되도록 하면 좋겠습니다. 기술적으로는 이를 구현할 수 있는 방법이 다양합니다.
해당 설정을 사용할 때 발생하는 플리커링/새시트/고스팅 현상을 어떻게 개선할 수 있을지 궁금합니다:
좋은 아이디어네요!
와, 진동이 꽤 심하네요! 어떤 브라우저를 사용 중이신가요? 크롬에서는 이런 현상이 보이지 않아요.
크롬 124.0.6367.61, 윈도우 11입니다 ![]()
확장 프로그램 없이도 시도해 보았는데, 동일한 문제가 발생합니다.
위치 지정(top)이 업데이트되어서는 안 될 때에도 계속 업데이트되고 있기 때문이라고 생각합니다. (top 값이 폰트 크기에 영향을 받는 것 같고, 이 패널은 정적이어야 합니다
)
파이어폭스에서도 동일한 현상이 발생하지만, 가끔(아직 확실하게 파악하지는 못했지만) 위치 지정이 업데이트되지 않으면 매끄럽게 동작합니다:
나중에 더 구체적인 피드백을 드리겠습니다.
정확히 도움이 될지는 모르겠지만, 게시글을 보고 아이디어가 떠올랐습니다.
너비 슬라이더의 단계 증분은 1px으로 매우 작게 설정되어 있어서 매끄러워 보였습니다.
하지만 글꼴 단계는 너무 컸고, 이를 대폭 줄였습니다. 이제 글꼴 크기 변경이 실제 텍스트 크기 증가와 감소 측면에서 좀 더 매끄럽게 느껴질 것입니다.
설정 메뉴의 상단(top) 위치를 말씀하시는 건가요?
네, 설정 패널입니다. 큰 숫자를 볼 때 메인 아웃렛(main outlet) 기준으로 상대 위치가 지정된 것으로 보입니다.
설정 패널을 타임라인 컨트롤(timeline controls) 기준으로 상대 위치를 지정할 수 있을지 궁금합니다. 다만 이것이 가능한지는 잘 모르겠습니다.
예를 들어, 패널을 그곳으로 이동시키면 타임라인은 움직이지 않기 때문에 상대 위치 기준으로는 배치가 변하지 않는 것을 볼 수 있습니다. 제 말씀이 무슨 뜻인지 이해하시나요?
기술적으로는 가능하지만, 저는 내장된 discourse 컴포넌트인 <DMenu>를 사용하고 있습니다. 거기에 무슨 일이 일어나고 있는지 확인하기 위해 소유자에게 도움을 요청해야 할 수도 있습니다.
맞습니다!
this.menu.registerPortalOutletElement를 사용하여 코드를 삽입할 컨테이너를 DMenu에 알려주는 방법이 있다고 생각합니다.
.timeline-controls에 컨테이너를 생성한 후 해당 컨테이너 요소를 registerPortalOutletElement에 전달하는 테스트를 해보았고, 제 환경에서는 잘 작동했습니다. 이것이 최선의 방법인지는 모르겠지만, 제 목적을 달성했습니다. ![]()
아래를 참고하세요
Joffrey 감사합니다!
기억이 맞다면, 이 함수는 앱이 시작될 때 한 번만 사용되도록 설계되어 있습니다. 나중에 호출하면 이후의 모든 DMenu 호출이 해당 요소로 이동하게 되어 다른 많은 기능이 깨집니다 ![]()
아.
실수했네요. 컴포넌트가 삽입될 때마다 설정된다고 생각했어요. 게시하기 전에 테스트까지 해봤는데, 아마 인라인 메뉴와 혼동한 것 같아요. 피곤할 때는 코드를 읽지 않는 게 좋다는 걸 또 확인했네요. ahah.
수정: 방금 다시 확인해봤는데, 네, 한 번만 설정되네요. 다행히 아무것도 깨지지 않았어요. ![]()
이 컴포넌트를 만들어주셔서 감사합니다. 정말 유용하게 쓰고 있습니다! 아래 기능들이 추가되면 좋겠습니다:
리더 모드 옵션에 색상 설정이 있으면 좋겠습니다. 저는 개인적으로 메타를 라이트 모드로 유지하는 걸 선호하지만, 리더 모드에서 다크/세피아 색 스킴으로 전환할 수 있으면 좋겠습니다.
사파리의 리더 모드와 비슷하게요:
버튼을 다시 누르지 않고 주제 외부 영역을 클릭하면 리더 모드가 종료되면 좋겠습니다.
리더 모드 설정이 주제 간에도 유지되고,
초기화 버튼으로 기본 설정으로 되돌릴 수 있으면 좋겠습니다.
아바타 플레어(장식)의 불투명도도 낮아지면 좋겠습니다. 리더 모드에서는 완전한 색상으로 표시되어 더 두드러져 보이기 때문입니다.
@Arkshine 우리 Joffrey가 친절하게 코어를 업데이트해 주셨습니다. 이제 <DMenu>에서 @inline={{true}}를 사용하여 팝업을 컨테이너 내에서 인라인으로 렌더링할 수 있습니다.
업데이트는 현재 메타에서 라이브 상태입니다.
정말 좋습니다. 결국 이 UI를 만들고 싶었던 바로 그 디자인이었어요. 지금은 폰트 크기, 선택, 콘텐츠 너비 관련해서 단순한 브라우저 기본값을 유지하고 있습니다.
Arc 브라우저의 부스트(Boosts) 기능 UI도 정말 마음에 듭니다.
다만 리더 모드에서 사용할 수 있는 폰트 패밀리로 Wingdings를 허용하는 것은 피할 겁니다 ![]()
멋지네요! ![]()
내 쪽에서는 더 이상 흔들림이 없어요. 모두 잘 작동합니다! 두 분 모두 감사합니다 ![]()
이 기능을 정말 좋아하고, 우리 사용자 대부분도 좋아할 것이라 기대합니다. 불행히도, Keegan이 지적한 투명도 불일치 문제가 바로 이 기능을 우리 인스턴스에 추가하지 못하게 하는 이유입니다:
저는 오히려 반대 방향, 즉 사용자 프로필과 플라이어가 완전한 색상으로 유지되는 쪽을 선호합니다. 다만, 플라이어와 프로필 사진의 투명도 사이의 불일치가 진정한 문제라는 데에는 동의합니다.
Keegan의 다른 세 가지 지점은 제가 생각했던 나머지 모든 내용을 우아하게 요약해 줍니다.
이 기능에 대한 추가 개발을 기다려집니다 ![]()
수정:
동료의 댓글:
좋아 보여요! 너무 좋아서 이 기능이 활성화된 상태가 기본값이 되도록 선택할 수 있었으면 좋겠어요"
오늘 이 부분을 업데이트했습니다.
좋은 말씀 감사합니다. 유용하게 활용하고 계신 것 같아 기쁩니다.