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

バーに「+」の新しい投稿ボタンを追加する方法は?

こんにちは、Peter さん。

Discourse コアには、URL を介してコンポーザーを開けるようにするための便利なルート /new-topic があります。つまり、コンポーザーを開くタブの URL としてそのルートを使用するだけです。

「いいね!」 13

このコンポーネントは非常に有用で、当フォーラムのユーザーからも大変好評です。

最も要望の多い機能の一つは、画面下部のキーに未読通知バッジと未読メッセージ(PM)バッジを表示することです。

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('変更されました');
});
「いいね!」 5

はい、これが必要とする正しいプロパティです。ただし、Discourse は Ember アプリケーションであるため、通常は UI を更新するために DOM イベントを購読しません。代わりに、Ember が「計算済みプロパティ(computed properties)」と呼ぶものを使用する必要があります。こちらを参照してください。

コンポーネントはすでにここで計算済みプロパティを定義していますので、これを例として使用できます。currentUser.unread_high_priority_notifications などのプロパティに基づいて通知バッジの表示の有無を決定する計算済みプロパティを定義したら、同じリンクの下部にある Handlebars テンプレートでその計算済みプロパティを使用する必要があります。

注: この機能を別のコンポーネントとして実装するのは複雑です。したがって、ここで述べたことはすべて、別のコンポーネントではなく、コンポーネント自体内で実装することを前提としています。

「いいね!」 8

ありがとうございます、試してみますね :wink::+1:

「いいね!」 6

タブバーがダークテーマでも白背景で表示されてしまいます。2.7.0 ベータ 1 から 2.7.0 ベータ 3 に更新したところ、この問題が発生するようになりました。それ以前は正常に動作していました。また、他のテーマコンポーネントをすべて削除し、カスタマイズもすべてリセットして、タブバーに影響を与える要因がないか確認しましたが、Discourse の最小構成でもダークテーマ下でタブバーの背景が白く表示されます。ご確認いただけますでしょうか。

「いいね!」 5

この問題の修正をプッシュしました。お知らせいただきありがとうございます!

「いいね!」 9

このタブにより、場合によってはトピックの進行状況バーが返信ボタンを隠してしまうようです(例:Chrome で iPhone SE をシミュレートすると再現可能です)。

ご覧の通り、返信ボタンが進行状況バーに覆われています。しかし、バーを無効にすると正常に動作します。進行状況バーの位置指定が相対的(relative)であることが原因だと思われますが、どのように修正すればよいか分かりません。

「いいね!」 4

同様の問題が発生しています。「目次」ボタンが「モバイルタブバー」を有効にした際に表示されません。どちらも気に入っているため、どちらか一方を選ばなければならないのは残念です!

「いいね!」 1

@haroldfy Meta やテーマクリエーターではこの問題を再現できませんでした。他のテーマやカスタマイズが干渉している可能性がありますか?サイトが公開されている場合は確認いたします。

@littleviolette できる限り、他のコンポーネントの要素を対象とするコードを追加しないようにしています。この場合、ToC ボタンをバーの上に押し上げるために、以下の CSS を含む別々のコンポーネントを作成できます。

html:not(.anon) .d-toc-toggle {
  margin-bottom: 55px;
}
「いいね!」 8

ご確認いただきありがとうございます。このサイトは非公開です。他のカスタマイズを無効にして、そこからデバッグを試みます。

「いいね!」 4

バグを見つけたようです。私のサイトの PWA バージョン(iOS 版)でのみ再現でき、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