Don
12월 13, 2024, 1:12오후
1
안녕하세요
이전에 이를 테마 컴포넌트 컨셉으로 Development 토픽 을 생성했으며, 이제 Customization > Theme component
실제 사용 전에 반드시 테스트해 주세요 .
이 컴포넌트에 대한 일부 정보: F NAV - Theme component concept
테마 컴포넌트 소개. 모바일용 Discourse 탭 바 를 더 동적으로 만들고, 예를 들어 알림 등을 처리할 수 있는 기능을 추가하면 좋겠다는 게시물을 많이 읽었습니다. F-NAV는 이를 수행할 수 있으며 더 많은 기능을 제공합니다…
햄버거 메뉴, 사용자 메뉴, 검색 및 채팅을 숨기고, 기본 사용자 메뉴 프로필 탭 내용을 포함하는 프로필(아바타) 메뉴 버튼을 추가합니다.
로그아웃 항목 앞에 사용자 정의 항목을 추가할 수 있는 설정도 포함하고 있습니다.
F NAV에 해당 탭을 배치하지 않으려는 경우 헤더에 표시되도록 하는 데 유용한 기본 헤더 아이콘 표시/숨김 설정이 있습니다.
탭에 다양한 기능을 연결할 수 있습니다. 이러한 기능은 각 탭이 동적으로 변경되도록 허용합니다.
이러한 변경 사항은 다음과 같습니다:
home
토픽 경로에서 홈 탭 아이콘을 왼쪽 화살표로 전환하여 뒤로 가기 기능을 추가합니다
새 토픽 또는 읽지 않은 토픽 표시 점(dot)을 추가합니다
hamburger (햄버거 메뉴를 엽니다)
multi
multi tab
채팅이 비활성화되었거나 사용자가 사용자 설정에서 꺼둔 경우 멀티 탭은 자동으로 메시지 탭으로 변경됩니다.
알림 버블은 긴급한지에 따라 변경됩니다.
멀티 탭의 긴급 알림은 녹색이며 다음과 같이 보입니다.
개인 메시지는 항상 녹색이지만, 예를 들어 읽지 않은 채널 메시지 알림과 같이 원래처럼 채팅은 파란색일 수 있습니다.
확장됨
단일 알림
message
알림과 함께 메시지 버튼을 추가하고, 클릭하면 빠른 확인을 위해 메시지 모달을 엽니다
chat
notificationToRoute
notificationMenu
search
컨텍스트 기반 /search 페이지로 리디렉션합니다
설정을 가능한 한 간단하게 만들려고 노력했습니다.
name : 이는 설정에서 탭을 더 쉽게 식별하기 위한 것입니다.icon : 탭에 아이콘을 추가합니다. 참고: 기능을 선택한 경우 이 설정으로 오버라이드할 수 없는 아이콘이 있을 수 있습니다.destination : 사용자 정의 탭에 목적지를 추가합니다. 참고: 목적지를 처리하는 기능을 선택한 경우 이를 비워 둘 수 있습니다. 이 컴포넌트는 /my/... 목적지를 자동으로 /u/username/...로 변환하여 탭의 활성 상태가 올바르게 추가되도록 합니다.function : 탭에 기능을 선택합니다.
관리자는 단순히 탭을 생성/제거/변경하고 기능 중 하나를 선택하거나 탭에 사용자 정의 목적지를 추가할 수 있습니다.
예를 들어, 토픽 생성 탭을 추가하는 것은 다음과 같이 간단해 보입니다.
크레딧 : 모바일용 Discourse 탭 바 및 F NAV - 테마 컴포넌트 컨셉 토픽에서 피드백을 주신 모든 분께 감사합니다.
22개의 좋아요
Canapin
12월 13, 2024, 1:31오후
2
정말 멋진 기능이고, 이게 기본 동작이 되어야 합니다. 이렇게 하면 스마트폰 화면의 맨 위쪽을 너무 자주 터치하지 않아도 되어 엄지손가락이 편해질 것 같아요.
다만, 눈에 잘 띄게 배치된 ‘온라인’ 토글은 별로 마음에 들지 않아요. 대부분의 사용자는 이 설정을 자주 바꿀 필요가 없기 때문이죠. 대부분의 사용자는 온라인 상태 표시를 한 번 꺼둔 채로 계속 유지할 거라고 생각하는데, 이 옵션이 항상 존재한다는 사실을 계속 상기시켜 주는 방식이 과연 적절한지 모르겠어요.
아주 유용한 내비게이션 수정 테마 컴포넌트를 많이 만들었네요. 그중 몇 개를 사용해보고 싶은데, 장기적으로 이 모든 것을 유지보수할 의사가 얼마나 있으신가요? 저는 안정성을 확보하기 위해 공식 테마 컴포넌트만 사용하는 편입니다.
원래의 탭 바 공식 테마 컴포넌트를 찾지 못해서, 직접 한번 찾아볼 생각입니다.
7개의 좋아요
ozkn
12월 13, 2024, 1:42오후
3
@don 컴포넌트 감사합니다. 여기 오래 있었는데 정말 훌륭한 일 하고 계시네요.
3개의 좋아요
Don
12월 14, 2024, 6:21오전
5
아, 감사합니다. FKB 테마와 관련된 문제네요. 테마를 업데이트하겠습니다.
3개의 좋아요
Don
12월 14, 2024, 8:17오전
6
3개의 좋아요
ozkn
12월 14, 2024, 5:20오후
7
@don 안녕하세요, 사진과 같은 fa-regular 아이콘을 어떻게 사용할 수 있을까요? Fontawesome 6로 전환한 후 이를 사용하는 방법에 대해 조사해 보았지만 관련 정보를 찾지 못했습니다.
3개의 좋아요
Don
12월 15, 2024, 11:30오전
8
안녕하세요 far-bell과 함께 작동해야 합니다. 탭이 활성화되면 regular에서 solid로 전환되도록 할 계획이었어요. 확인해 보겠지만, 기억이 맞다면 무료 버전에서는 집 아이콘이 solid만 있는 것 같습니다.
1개의 좋아요
ozkn
12월 15, 2024, 1:09오후
9
감사합니다, 제 문제는 해결했습니다. @Don
1개의 좋아요
Jagster
12월 15, 2024, 1:53오후
10
홈 아이콘이 토픽을 열면 뒤로가기 버튼으로 바뀌는 건데요. 왜 그런지 궁금합니다. 그건 스와이프(허브의 홈 화면으로 돌아가는 것처럼)로 대체할 수 있을 것 같아요. 제 사용자들 중에선 그걸 꽤 많이 불평하더라고요. 이제 그걸 하려면 로고까지 손을 뻗어야 하니까요. (1등 국가의 문제인 거 알아요
2개의 좋아요
Don
12월 15, 2024, 4:06오후
11
이 기능을 추가할 수 있을 것 같아요. 다만 어디에 배치할지 고민 중입니다. 단일 탭으로 만들어서 DiscourseHub에서만 표시되는 내비게이션에 추가할 수 있습니다.
1개의 좋아요
Jagster
12월 15, 2024, 4:39오후
12
사실 DiscourseHub는 아래로 스와이프하는 기능이 잘 작동합니다. 제가 그걸 몰랐을 뿐이었죠.
홈/뒤로 가기 버튼 문제는 다른 사람들에게 설명해야 하기 때문에 더 큰 문제입니다.
3개의 좋아요
Don
12월 15, 2024, 5:26오후
13
뒤로 가기 버튼은 주제(topic) 사이를 오가는 탐색을 쉽게 하기 위해 주제 내에서만 활성화됩니다. 이는 홈 기능에서 비롯된 것이며, 홈 기능을 끄면 홈 목적지가 유지됩니다.
현재 설정은 순서 변경이 불가능하며, 기존에 선택된 항목이 있으면 이를 지울 수 없습니다. 그러나 필드를 비워 두었을 때와 동일한 동작을 하는 새로운 함수 none을 추가했습니다. 이렇게 하면 전체 탐색 탭을 다시 만들 필요가 없습니다.
뒤로 가기 버튼을 비활성화하고 모든 곳에서 홈을 유지하려면 다음과 같이 설정해야 합니다.
committed 05:24PM - 15 Dec 24 UTC
3개의 좋아요
Heliosurge
12월 21, 2024, 7:08오전
14
항상 훌륭합니다. 테마 크리에이터에서 빠르게 미리 살펴본 결과에도 동의합니다. 이 기능은 반드시 코어에 포함시켜야 하며, 클래식 모바일과 개선된 모바일을 전환할 수 있는 토글 옵션이 제공되어야 합니다.
더 긴 배너, 사이트 로고, 헤더의 로컬 선택기 같은 추가 요소에 대한 더 깔끔한 옵션 등 다양한 가능성을 엿볼 수 있습니다. 언제나처럼 정말 정말 좋습니다, Don!
3개의 좋아요
MihirR
1월 6, 2025, 5:46오전
16
연필 아이콘과 내비게이션 항목이 내비게이션 바와 함께 축소되고 있습니다.
1개의 좋아요
CAX.DO
1월 18, 2025, 12:10오후
18
Don님, 안녕하세요. 정말 멋진 작업 감사합니다. 마음에 듭니다.
더 간단한 예를 들어 보겠습니다. 채팅 페이지에 있다가 홈 페이지로 돌아가려면 왼쪽 위 뒤로 가기 버튼을 클릭해야 하는데, 이는 모바일 기기에서 실제로 사용자 친화적이지 않습니다.
따라서 메뉴 바를 항상 상단에 고정해 둘 수 있을까요?
제 설명이 잘 전달되었기를 바랍니다.
2개의 좋아요
Don
1월 18, 2025, 1:52오후
19
맥스, 안녕하세요
해당 문제에 대한 스크린샷이나 화면 녹화를 만들어 주실 수 있을까요?
/chat에서는 내비게이션을 숨기고 기본 채팅 헤더를 사용합니다. 채팅에서 내비게이션을 표시하는 것이 가치가 있는지 확실하지 않습니다. 브라우저마다 문제가 발생할 수 있기 때문이죠. 하지만 이 부분은 확인해 보겠습니다.
1개의 좋아요
Don님, 안녕하세요
세 번째 스크린샷은 채팅 화면을 벗어나려면 왼쪽 상단의 뒤로 버튼을 클릭해야 함을 의미합니다.
1개의 좋아요
Don
1월 18, 2025, 3:15오후
21
정확하게 설명해 주셔서 감사합니다
네, 이해했습니다. 이 문제가 발생하는 원인은 컴포넌트 자체보다는 디바이스에서 ‘모션 감소(reduce motion)’ 설정을 활성화했을 때 발생하는 핵심적인 문제입니다. 현재 디바이스에서 해당 설정이 활성화되어 있나요?
모션 감소가 꺼져 있을 때 header-cloak(메뉴 뒤의 어두운 영역)이 클릭 동작을 차단하고 있습니다.
제 디바이스에서 이를 활성화하면 사용자가 클릭하는 것을 차단하지 않습니다.
이 경우, 스와이프 제스처를 사용하여 메뉴를 안전하게 닫을 수도 있습니다.
어딘가에 이 문제에 대한 주제를 만든 것 같습니다
이것은 기본 채팅 헤더입니다.
거기에서도 내비게이션을 활성화할 수 있는지 확인해 보겠습니다.
3개의 좋아요
실제 사용 전에 반드시 테스트해 주세요.
)
