F NAV - モバイルナビゲーションタブ

:information_source: 概要 F NAV - モバイルナビゲーションタブ
:eyeglasses: プレビュー Theme Creator
:hammer_and_wrench: リポジトリ GitHub - VaperinaDEV/f-nav-for-mobile: F NAV - Mobile Navigation Tabs · GitHub
:heart: 役に立ちましたか? > ./support --coffee
:question: インストールガイド テーマまたはテーマコンポーネントのインストール方法
:open_book: Discourseテーマ初心者ですか? Discourseテーマの使用に関する入門ガイド

このテーマコンポーネントをインストール

こんにちは :wave:

以前、これをテーマコンポーネントのコンセプトとして Development トピック を作成しましたが、現在では Customization > Theme component として公開できる状態になりました。

:warning: ライブ環境で使用する前に必ずテストしてください

コンポーネントに関する情報はこちら: F NAV - Theme component concept


テーマコンポーネントについて。 モバイル版の Discourseタブバー をより動的にし、通知などの処理機能を追加できることが素晴らしいという投稿を多く読みました。F-NAVはこれを実現し、さらに多くの機能を提供します…

ヘッダー

ハンバーガーメニュー、ユーザーメニュー、検索、チャットを非表示にし、デフォルトのユーザーメニューのプロファイルタブの内容を含むプロファイル(アバター)メニューボタンを追加します。

設定

ログアウト項目の前にカスタム項目を追加できる設定も含まれています。
カスタム項目を簡単に追加できる3つのフィールドが含まれています。

F NAVに特定のタブを配置したくない場合、ヘッダーに表示されるようデフォルトのヘッダーアイコンを表示/非表示にするための設定もあります。

タブ

タブに異なる機能を関連付けることができます。これらの機能により、各タブが動的に変更できます。

Screenshot 2024-12-13 at 13.06.14

変更には以下が含まれます:

機能

home

  • トピックルートにおいて、ホームタブのアイコンを左矢印に変更し、戻る機能を追加します
    Screenshot 2024-12-13 at 12.29.33
  • 新しいトピックまたは未読トピックのインジケータードットを追加します
    Screenshot 2024-12-13 at 12.30.52

hamburger (ハンバーガーメニューを開く)


multi

multi tab

チャットが無効な場合、またはユーザーがユーザー設定でオフにしている場合、マルチタブは自動的にメッセージタブに変更されます。

通知バブルは、緊急かそうでないかによって変化します。

緊急なマルチタブの通知は緑色で、このようになります。 :arrow_down_small:


展開時

個人メッセージは常に緑色ですが、チャットは例えば未読チャンネルメッセージ通知のように元通り青色である場合があります。

展開時

単一の通知


message

  • 通知付きのメッセージボタンを追加し、クリックするとクイックビュー用のメッセージモーダルが開きます

chat

  • その機能付きのチャットボタンを追加します

notificationToRoute

  • 「取り込み中」が有効な場合、ベルアイコンはベルスラッシュアイコンに変更され、取り込み中の終了時刻が表示されます
    Screenshot 2024-12-13 at 13.02.35

  • 通知メニューをバイパスしてプロファイルの通知ページにリダイレクトします

    • 通知がある場合は /notifications?filter=unread にリダイレクトします
    • 通知がない場合は /notifications にリダイレクトします
    • レビュー可能なコンテンツがある場合は赤い旗が表示され、/review にリダイレクトします

notificationMenu

  • 「取り込み中」が有効な場合、ベルアイコンはベルスラッシュアイコンに変更され、取り込み中の終了時刻が表示されます
    Screenshot 2024-12-13 at 13.02.35

  • 通知メニューを開きます


search

  • コンテキストベースの /search ページにリダイレクトします

設定

設定はできるだけシンプルにしようとしています。
4つのフィールドが含まれます。

  • name: これは設定内でタブを識別しやすくするためのものです。
  • icon: タブにアイコンを追加します。注: 機能を選択した場合、この設定では上書きできないアイコンがある場合があります。
  • destination: カスタムタブの移動先を追加します。注: 機能をj選択した場合、機能が移動先を処理するため、空欄にしておくことができます。コンポーネントは /my/... の移動先を自動的に /u/username/... に変換するため、タブのアクティブ状態が正しく追加されます。
  • function: タブに機能を選択します。

管理者は、タブを簡単に作成/削除/変更し、機能のいずれかを選択するか、タブにカスタム移動先を追加できます。
機能 :arrow_down_small:

例えば、トピック作成タブを追加する場合、このようになります。


Screenshot 2024-12-12 at 18.55.50


クレジット: Discourse Tab Bar for Mobile および F NAV - Theme component concept トピックでのフィードバックをくれた皆さんに感謝します。 :heart:

「いいね!」 22

これは素晴らしいですし、デフォルトの動作であるべきです。これにより、携帯電話の画面の奥上部まで届こうとして親指が痛くなるのを防ぐことができます。

目立つ「オンライン」トグルはあまり好きではありません。ほとんどの人はこの設定を頻繁に変更する必要がないと思うからです。おそらく、ほとんどのユーザーはオンラインプレゼンスを一度きりでオプトアウトするので、このオプションが存在し続けることへの絶え間ないリマインダーは不要だと思います。

多くの非常に便利なナビゲーション変更テーマコンポーネントを作成したようですね。いくつか使用したいのですが、長期的にこれらすべてをどの程度維持するつもりですか?信頼性を確保するために、official のテーマコンポーネントのみを使用する傾向があります。

元のタブバーの公式テーマコンポーネントが見当たらなかったので、確認してみます。

「いいね!」 7

コンポーネントありがとうございます、@don。長い間ここにいて、本当に素晴らしい仕事をしています。

「いいね!」 3

これはバグであるべきです

「いいね!」 2

ありがとうございます。FKBテーマに関するものです。テーマを更新します。

「いいね!」 3

修正はこちらです: Compatibility: Adds support for F NAV theme component by VaperinaDEV · Pull Request #51 · VaperinaDEV/fkb-pro-theme · GitHub
FKBテーマをアップデートして、この新しい設定を有効にしてください。
Screenshot 2024-12-14 at 9.17.02

「いいね!」 3

@donさん、画像のようにfa-regularアイコンを使用するにはどうすればよいですか? Fontawesome 6に切り替えた後、その方法に関する情報が見つかりませんでした。

「いいね!」 3

こんにちは :waving_hand: far-bell で動作するはずです。タブがアクティブなときに通常からソリッドに変更する予定でしたが、確認してみます。しかし、私の記憶が正しければ、家のアイコンは無料版にソリッドしかありません。:thinking:

「いいね!」 1

ありがとうございます。問題が解決しました。@Don

「いいね!」 1

トピックを開いたときにバックボタンに変わるホームアイコンについて。スワイプで戻れるようにできませんか(Hubのホーム画面に戻るときのように :smirking_face:)。ユーザーから、ロゴまで手を伸ばさなければならないと不満が出ています(ファーストワールド問題、わかっています :joy:)。

「いいね!」 2

これをどこに配置するか考えているのですが、関数に追加できると思います。これは単一のタブにすることができ、DiscourseHubにのみ表示されるナビゲーションに追加できます。

「いいね!」 1

実はDiscourseHubはスワイプダウンで問題なく動作します。ただ、それに気づかなかっただけです。

ホーム/バックボタンの質問は、他の人に説明しなければならないので、より大きな問題です。

「いいね!」 3

バックボタンは、トピック間のナビゲーションを容易にするために、トピックでのみアクティブになります。これは、オフにできるホーム機能から来ており、これによりホームの宛先が維持されます。

設定はまだ並べ替えることができず、既存の選択がある場合はクリアできませんが、新しい機能 none を追加しました。これは、機能フィールドを空のままにした場合と同じ動作になります。これにより、ナビゲーションタブ全体を再作成する必要がなくなります。

バックボタンを無効にして、どこでもホームを維持したい場合は、次のようになります。

「いいね!」 3

いつものように素晴らしいです。テーマクリエイターでの簡単なプレビューから同意せざるを得ません。これは、クラシックモバイルと改善されたモバイルのトグルを備えたコアパッケージに含めるべきです。

これにより、長いバナーサイトロゴのようなものが開かれるのを見ることができます。ヘッダーのローカルセレクターなどのオプションがよりクリーンになり、さらに多くのことができます。いつものように、ドン、とてもとても素晴らしいです!

「いいね!」 3

鉛筆アイコンとナビゲーションのトピックがナビゲーションバーと一緒に折りたたまれています。

「いいね!」 1
「いいね!」 4

ドンさん、こんにちは。素晴らしいお仕事、ありがとうございます。気に入っています。
質問があります。ハンバーガーメニューまたは通知をクリックした後、さらに操作する必要がない場合があります。この場合、記事リストに戻る必要があります。しかし、ハンバーガーメニューまたは通知を閉じるには、空白のページをクリックするしかありません。これにより、誤ってアバターや返信をクリックしてしまう可能性があります。

別の簡単な例として、チャットページにいてホームページに戻る必要がある場合、左上隅にある戻るボタンをクリックする必要がありますが、これは実際にはモバイルデバイスではユーザーフレンドリーではありません。

そこで、メニューバーを常に一番上に表示することは可能でしょうか?

私の説明が理解されることを願っています。

「いいね!」 2

こんにちは、マックスさん :wave:

問題のスクリーンショット/画面録画をいくつか作成していただけますか?

/chat ではナビゲーションを非表示にし、デフォルトの チャットヘッダーを使用しています。ナビゲーションをチャットに表示することが、さまざまなブラウザで問題を引き起こす可能性があるため、それだけの価値があるかどうかはわかりませんが、確認します。

「いいね!」 1

ドンさん、こんにちは:smiley:
お返事ありがとうございます。
以下のスクリーンショットを参照してください。最初の2つのスクリーンショットは、ハンバーガーメニューまたは通知を閉じたい場合、黄色い領域をクリックすることしかできないことを意味します。問題は、記事やアバターを誤ってクリックしやすいことです。

3番目のスクリーンショットは、チャットインターフェースを終了するには、左上隅の戻るボタンをクリックする必要があることを意味します。



「いいね!」 1

説明をありがとうございます :blush:

ええ、わかります。ここで発生している問題はコンポーネントではなく、デバイスで「視差効果を減らす」設定が有効になっている場合のコアな問題です。お使いのデバイスで有効になっていますか?

「視差効果を減らす」がオフの場合、「header-cloak」(メニューの後ろの暗い領域)がクリック操作をブロックします。

デバイスで有効にすると、ユーザーのクリックをブロックしなくなります。

この場合、スワイプジェスチャーでメニューを安全に閉じることができます。

この問題については、どこかにトピックがあったと思います :thinking:

それはデフォルトのチャットヘッダーです。

そこにナビゲーションを有効にできるか確認します。

「いいね!」 3