Discourse Tab Bar for Mobile

GitHub repository:

Screenshots


Installation

Follow the instructions in this howto topic:

Customization

See the readme file in the theme’s GitHub repository.

Ideas to improve this theme are very welcome :slightly_smiling_face:


Update 24/12/2018:

You no longer need to overwrite any code in order to customize this theme. It’s now shipped with theme settings that allow customization for each of the 6 tabs with ability to disable any tab. See the readme file for details.

77개의 좋아요

안녕하세요, 이 플러그인을 정말 좋아합니다. 하지만 로그아웃된 사용자도 바를 볼 수 있도록 해야 합니다.

이걸 가능하게 하는 방법이 있을까요? 아마 이런 식으로 하면 될까요?

body:not(.logged-in) .d-tab-bar-theme {
    display: block
}
1개의 좋아요

벤님,

해당 컴포넌트의 JS 코드는 여러 곳에서 로그인된 사용자가 있다고 가정하고 작성되어 있어, CSS만으로는 비로그인 사용자에게 바를 표시할 수 없습니다. 따라서 해당 컴포넌트를 포크한 후 수정하여 비로그인 사용자에게도 표시되도록 하는 것을 권장합니다.

4개의 좋아요

바에 + 새 게시글 버튼을 추가하는 방법은 무엇인가요?

피터님,

Discourse 코어에는 URL을 통해 작성기를 열 수 있도록 하기 위해 /new-topic이라는 편리한 라우트가 있습니다. 따라서 작성기가 열려야 하는 탭의 URL로 해당 라우트를 사용하면 됩니다.

13개의 좋아요

이 컴포넌트는 매우 유용하며, 우리 포럼 사용자들도 정말 좋아합니다.

가장 많이 요청된 기능 중 하나는 화면 하단의 키에 읽지 않은 알림 배지 및 읽지 않은 개인 메시지 배지를 표시하는 것입니다.

Discourse JavaScript API를 통해 이것이 가능한가요?

7개의 좋아요

Nildarar님,

커뮤니티에서 이 컴포넌트를 즐기고 유용하게 사용하신다니 정말 기쁩니다. 감사합니다! 이 기능을 컴포넌트에 추가하는 것을 지지하지만, 당장 구현할 수는 없습니다(몇 달 후쯤 가능할 것 같습니다). 그 사이에 다른 분들이 이 기능에 대해 작업해 주신다면, 해당 기능이 포함된 풀 리퀘스트를 병합하는 데 전혀 문제가 없습니다.

네, 필요한 데이터는 쉽게 접근할 수 있는 currentUser 객체에 노출되어 있습니다. 이 기능의 대부분은 1) 배지를 표시할 탭을 결정하는 것과 2) CSS로 배지를 올바르게 배치하는 것입니다.

8개의 좋아요

감사합니다, @Osama

귀하의 안내 덕분에 이 객체들을 찾았습니다.

<script type="text/discourse-plugin" version="0.8">
    let currentUser = api.getCurrentUser();
    console.log(currentUser);
</script>

// unread_high_priority_notifications: 2
// unread_notifications: 7
// unread_private_messages: 2

이벤트에 함수를 등록할 방법이 있는지, 아니면 다음 트릭을 통해 이 정보를 알아내야 하는지 궁금합니다.

$('.header-dropdown-toggle current-user').bind('DOMSubtreeModified', function(){
  console.log('changed');
});
5개의 좋아요

네, 우리가 소비해야 할 올바른 프로퍼티입니다. 하지만 Discourse가 Ember 애플리케이션이기 때문에, UI를 업데이트하기 위해 DOM 이벤트를 구독하는 방식은 일반적으로 사용하지 않습니다. 대신 Ember에서 ‘computed’ 프로퍼티라고 부르는 것을 사용해야 합니다.

컴포넌트는 이미 여기에서 computed 프로퍼티를 정의하고 있으므로, 이를 예로 참고할 수 있습니다. currentUser.unread_high_priority_notifications 등의 프로퍼티를 기반으로 알림 배지가 표시되어야 하는지 여부를 결정하는 computed 프로퍼티를 정의한 후에는, 같은 링크의 하단에서 Handlebars 템플릿에 해당 computed 프로퍼티를 사용해야 합니다.

참고: 이 기능을 별도의 컴포넌트에서 구현하는 것은 까다로울 수 있으므로, 여기에서 언급한 모든 내용은 별도의 컴포넌트가 아닌 컴포넌트 자체에서 구현한다는 전제 하에 설명한 것입니다.

8개의 좋아요

감사합니다, 한번 시도해볼게요 :wink::+1:

6개의 좋아요

다크 테마에서도 탭 바에 흰색 배경이 표시됩니다. 2.7.0 beta 1에서 2.7.0 beta 3로 업데이트한 이후부터 흰색 배경이 보이기 시작했습니다. 그 전까지는 모든 것이 정상적으로 작동했습니다. 탭 바에 문제가 있는 다른 테마 컴포넌트나 커스터마이징이 있는지 확인하기 위해 모든 테마 컴포넌트와 커스터마이징을 제거해 보았지만, 최소한의 설정(barebones)인 Discourse에서도 다크 테마에서 탭 바에 흰색 배경이 표시됩니다. 이 문제를 확인해 주실 수 있을까요?

5개의 좋아요

이 문제에 대한 수정 사항을 푸시했습니다. 알려주셔서 감사합니다!

9개의 좋아요

이 탭은 일부 경우(예: Chrome으로 iPhone SE를 시뮬레이션할 때 재현 가능)에 주제 진행 표시줄이 답글 버튼을 가리는 것 같습니다.

보시는 것처럼, 답글 버튼이 진행 표시줄에 가려져 있습니다. 하지만 표시줄을 비활성화하면 정상적으로 동작합니다. 진행 버튼의 위치가 relative로 설정되어 있기 때문이라고 추측하지만, 어떻게 수정해야 할지는 모르겠습니다.

4개의 좋아요

저도 비슷한 문제가 있습니다. 모바일 탭 바를 활성화하면 “목차” 버튼이 표시되지 않습니다. 둘 다 좋아하니까, 하나를 선택해야 하는 상황이 되지 않았으면 좋겠습니다.

1개의 좋아요

@haroldfy 저는 Meta나 테마 제작자에서 이 문제를 재현할 수 없습니다. 다른 테마나 커스터마이징이 간섭을 일으키고 있는 것은 아닌가요? 사이트가 공개되어 있다면 확인해 볼 수 있습니다.

@littleviolette 다른 컴포넌트의 요소를 대상으로 하는 코드를 추가하는 것은 가급적 피하려 합니다. 이 경우, 이 CSS를 사용하여 ToC 버튼을 바 위에 올릴 수 있는 별도의 컴포넌트를 만들 수 있습니다:

html:not(.anon) .d-toc-toggle {
  margin-bottom: 55px;
}
8개의 좋아요

확인해 주셔서 감사합니다. 개인 사이트라서 다른 커스터마이징을 비활성화하고 거기서 디버깅을 시도해 보겠습니다.

4개의 좋아요

버그를 찾은 것 같은데, iOS에서 내 사이트의 PWA 버전에서만 재현할 수 있어요 (Android와 iOS Safari에서는 정상적으로 보입니다).

탭 바는 항상 고정되어 있어야 하죠? 정상적인 상태는 다음과 같습니다:

그런 다음 화면 잠금을 해제하고, 가로 모드로 전환한 뒤 다시 세로 모드로 돌아온 다음, 조금 위로 스크롤하면 다음과 같은 문제가 발생합니다:

1개의 좋아요

저도 같은 문제를 겪었습니다 @haroldfy @littleviolette . 아래 방법으로 수정할 수 있습니다:

html:not(.anon) #topic-progress-wrapper.docked{
margin-bottom:0!important;
}
7개의 좋아요

탭 바는 필터링 시 고정 푸터(posts-filtered-notice)를 표시하는 게시물 필터 핵심 기능과도 충돌합니다.

어쨌든, 훌륭한 TC를 만들어 주셔서 감사합니다 :slight_smile:

5개의 좋아요

멋진 테마 컴포넌트네요, 감사합니다.

요청할 것이 있어 ‘스크롤 시 숨김’ 기능에 대한 관심이 있는지 확인하고 싶습니다.

구체적으로, 사용자가 아래로 스크롤하면 하단 바가 자동으로 숨겨지고, 위로 스크롤하면 다시 나타나는 기능입니다.

예시로 찾은 링크는 여기입니다.

이 기능은 모바일에서 소중한 화면 공간을 효과적으로 확보하여 더 넓은 공간에서 콘텐츠를 소비할 수 있도록 하여 사용자 경험을 향상시킬 것입니다.

9개의 좋아요