Don
1
こんにちは 
以前、テーマコンポーネントのコンセプトとして Dev トピック を作成しましたが、今回は Theme component として公開できる状態になりました。
本番環境で使用する前に、必ずテストしてください。
コンポーネントに関する情報はこちら: F NAV - Theme component concept
テーマコンポーネントについて。 多くの投稿を読みましたが、Discourse Tab Bar for Mobile をよりダイナミックにし、通知などを処理する機能を追加できると素晴らしいと思いました。F-NAVはこれらすべてを実行できます…
ヘッダー
ハンバーガーメニュー、ユーザーメニュー、検索、チャットを非表示にし、デフォルトのユーザーメニュープロフィールタブのコンテンツを含むプロフィール（アバター）メニューボタンを追加します。
設定
ログアウト項目より前にカスタム項目を追加できる設定も含まれています。
カスタム項目を簡単に追加できる3つのフィールドが含まれています。
デフォルトのヘッダーアイコンを表示/非表示するための設定もあり、F NAVに正確なタブを配置したくない場合にヘッダーに表示されるため便利です。
タブ
タブにさまざまな機能を関連付けることができます。これらの機能により、各タブは動的に変化します。
このような変更には以下が含まれます：
機能
home
- トピックルートのホームタブアイコンを左矢印に切り替え、戻る機能を追加します。
- 新規または未読トピックのインジケータードットを追加します。
hamburger （ハンバーガーメニューを開きます）
multi
multi tab
チャットが無効になっている場合や、ユーザーがユーザー設定でオフにした場合に、メッセージタブに自動的に変更されます。
通知バブルは、緊急度に応じて変化します。
マルチタブの緊急通知は緑色で、以下のようになります。 
展開時
個人メッセージは常に緑色ですが、チャットは例えば未読チャンネルメッセージ通知のように青色になることがあります。
展開時
単一通知
message
- 通知付きのメッセージボタンを追加し、クリックするとクイック表示用のメッセージモーダルが開きます。
chat
notificationToRoute
notificationMenu
search
- コンテキストベースの
/search ページにリダイレクトします。
設定
設定をできるだけシンプルにしようとしました。
4つのフィールドが含まれます。
- name: 設定でタブを識別しやすくするためのものです。
- icon: タブにアイコンを追加します。注意: 関数を選択した場合、この設定で上書きできないアイコンがある場合があります。
- destination: カスタムタブの移動先を追加します。注意: 移動先を処理する関数を選択した場合は、空のままにすることができます。コンポーネントは
/my/... の移動先を /u/username/... に自動的に変換するため、タブのアクティブステータスを正しく追加できます。
- function: タブの関数を選択します。
管理者は、タブを作成/削除/変更し、関数のいずれかを選択するか、カスタム移動先を追加するだけです。
関数
例：トピック作成タブを追加すると、以下のようになります。
クレジット: Discourse Tab Bar for Mobile、および F NAV - Theme component concept トピックでのフィードバックをいただいた皆様に感謝いたします。 
「いいね！」 21
Canapin
(Coin-coin le Canapin)
2
これは素晴らしいですし、デフォルトの動作であるべきです。これにより、携帯電話の画面の奥上部まで届こうとして親指が痛くなるのを防ぐことができます。
目立つ「オンライン」トグルはあまり好きではありません。ほとんどの人はこの設定を頻繁に変更する必要がないと思うからです。おそらく、ほとんどのユーザーはオンラインプレゼンスを一度きりでオプトアウトするので、このオプションが存在し続けることへの絶え間ないリマインダーは不要だと思います。
多くの非常に便利なナビゲーション変更テーマコンポーネントを作成したようですね。いくつか使用したいのですが、長期的にこれらすべてをどの程度維持するつもりですか？信頼性を確保するために、official のテーマコンポーネントのみを使用する傾向があります。
元のタブバーの公式テーマコンポーネントが見当たらなかったので、確認してみます。
「いいね！」 7
ozkn
(Mathx)
3
コンポーネントありがとうございます、@don。長い間ここにいて、本当に素晴らしい仕事をしています。
「いいね！」 3
Don
5
ありがとうございます。FKBテーマに関するものです。テーマを更新します。
「いいね！」 3
Don
6
「いいね！」 3
ozkn
(Mathx)
7
@donさん、画像のようにfa-regularアイコンを使用するにはどうすればよいですか？ Fontawesome 6に切り替えた後、その方法に関する情報が見つかりませんでした。
「いいね！」 3
Don
8
こんにちは 
far-bell で動作するはずです。タブがアクティブなときに通常からソリッドに変更する予定でしたが、確認してみます。しかし、私の記憶が正しければ、家のアイコンは無料版にソリッドしかありません。
「いいね！」 1
ozkn
(Mathx)
9
ありがとうございます。問題が解決しました。@Don
「いいね！」 1
Jagster
(Jakke Lehtonen)
10
トピックを開いたときにバックボタンに変わるホームアイコンについて。スワイプで戻れるようにできませんか（Hubのホーム画面に戻るときのように 
）。ユーザーから、ロゴまで手を伸ばさなければならないと不満が出ています（ファーストワールド問題、わかっています 
）。
「いいね！」 2
Don
11
これをどこに配置するか考えているのですが、関数に追加できると思います。これは単一のタブにすることができ、DiscourseHubにのみ表示されるナビゲーションに追加できます。
「いいね！」 1
Jagster
(Jakke Lehtonen)
12
実はDiscourseHubはスワイプダウンで問題なく動作します。ただ、それに気づかなかっただけです。
ホーム/バックボタンの質問は、他の人に説明しなければならないので、より大きな問題です。
「いいね！」 3
Don
13
バックボタンは、トピック間のナビゲーションを容易にするために、トピックでのみアクティブになります。これは、オフにできるホーム機能から来ており、これによりホームの宛先が維持されます。
設定はまだ並べ替えることができず、既存の選択がある場合はクリアできませんが、新しい機能 none を追加しました。これは、機能フィールドを空のままにした場合と同じ動作になります。これにより、ナビゲーションタブ全体を再作成する必要がなくなります。
バックボタンを無効にして、どこでもホームを維持したい場合は、次のようになります。
「いいね！」 3
Heliosurge
(Dan DeMontmorency)
14
いつものように素晴らしいです。テーマクリエイターでの簡単なプレビューから同意せざるを得ません。これは、クラシックモバイルと改善されたモバイルのトグルを備えたコアパッケージに含めるべきです。
これにより、長いバナーサイトロゴのようなものが開かれるのを見ることができます。ヘッダーのローカルセレクターなどのオプションがよりクリーンになり、さらに多くのことができます。いつものように、ドン、とてもとても素晴らしいです！
「いいね！」 3
MihirR
(Mihir)
16
鉛筆アイコンとナビゲーションのトピックがナビゲーションバーと一緒に折りたたまれています。
「いいね！」 1
CAX.DO
(Max)
18
ドンさん、こんにちは。素晴らしいお仕事、ありがとうございます。気に入っています。
質問があります。ハンバーガーメニューまたは通知をクリックした後、さらに操作する必要がない場合があります。この場合、記事リストに戻る必要があります。しかし、ハンバーガーメニューまたは通知を閉じるには、空白のページをクリックするしかありません。これにより、誤ってアバターや返信をクリックしてしまう可能性があります。
別の簡単な例として、チャットページにいてホームページに戻る必要がある場合、左上隅にある戻るボタンをクリックする必要がありますが、これは実際にはモバイルデバイスではユーザーフレンドリーではありません。
そこで、メニューバーを常に一番上に表示することは可能でしょうか？
私の説明が理解されることを願っています。
「いいね！」 2
Don
19
こんにちは、マックスさん 
問題のスクリーンショット/画面録画をいくつか作成していただけますか？
/chat ではナビゲーションを非表示にし、デフォルトの チャットヘッダーを使用しています。ナビゲーションをチャットに表示することが、さまざまなブラウザで問題を引き起こす可能性があるため、それだけの価値があるかどうかはわかりませんが、確認します。
「いいね！」 1
CAX.DO
(Max)
20
ドンさん、こんにちは:smiley:
お返事ありがとうございます。
以下のスクリーンショットを参照してください。最初の2つのスクリーンショットは、ハンバーガーメニューまたは通知を閉じたい場合、黄色い領域をクリックすることしかできないことを意味します。問題は、記事やアバターを誤ってクリックしやすいことです。
3番目のスクリーンショットは、チャットインターフェースを終了するには、左上隅の戻るボタンをクリックする必要があることを意味します。
「いいね！」 1
Don
21
説明をありがとうございます 
ええ、わかります。ここで発生している問題はコンポーネントではなく、デバイスで「視差効果を減らす」設定が有効になっている場合のコアな問題です。お使いのデバイスで有効になっていますか？
「視差効果を減らす」がオフの場合、「header-cloak」（メニューの後ろの暗い領域）がクリック操作をブロックします。
デバイスで有効にすると、ユーザーのクリックをブロックしなくなります。
この場合、スワイプジェスチャーでメニューを安全に閉じることができます。
この問題については、どこかにトピックがあったと思います
それはデフォルトのチャットヘッダーです。
そこにナビゲーションを有効にできるか確認します。
「いいね！」 3
