F NAV - テーマコンポーネントのコンセプト

こんにちは :waving_hand:

Discourse Tab Bar for Mobile をベースにした新しいテーマコンポーネントに取り組んでいます。

このテーマコンポーネントは、タブに関数を使用する機能を追加します。これらの関数は現在、ハンバーガー、通知、検索です。

  • ハンバーガー: タブが開くとハンバーガーメニューが表示されます
  • 通知: タブに通知が追加されます
  • 検索: コンテキストベースの /search を開きます

ヘッダーアイコンも変更されます。ハンバーガー、ユーザーメニュー、検索を削除し、ユーザーメニューのプロファイルコンテンツを含む新しい DMenu アバターを追加します。下にスクロールすると、表示領域を最大化するために、トピック以外ではヘッダーがどこにも表示されなくなります。


通知タブのベルアイコンが、おやすみモードがアクティブな場合はベルスラッシュに変更され、時間が追加されます。また、レビュー可能なものがある場合は動的にルートが変更され /review にリダイレクトされ、そうでない場合は /notifications ページに移動します。


デモはこちらです: https://discourse.theme-creator.io/theme/Don/f-nav

今のところ以上です…

どう思いますか? :slightly_smiling_face:

「いいね!」 14

気に入りました。今回も素晴らしい出来です。

チャットボタンはどこにありますか?

「いいね!」 4

これは本当に素晴らしいですね! :clap:

通知を分けるのは非常に理にかなっています。セントラルテーマも同様のことを行っており、ユーザーメニューへのアクセスが容易になり、快適になります(あまり威圧感がないように感じます)。それは直接的で、必要なリンクがあります。これはIMOの大きなUX改善であり、気に入っています。

メニュー内のリンクについて:

  • 「Summary」を「Profile」に置き換えることをお勧めします。この文脈では理解しやすいです。
  • 「Activity」はあまり役に立たないので、「Messages」に置き換えることをお勧めします。受信トレイへの直接アクセスは必須です。
  • 「Bookmark」もあると良いと思います。

下部のパネルについてはよくわかりません。 :thinking:
おそらく、下を見ることに慣れていないのだと思います。

  • 通知ボタンは、プロフィールに移動するのではなく、右側のパネルを開くべきです。通知に関連しない追加コンテンツがないため、素早く確認したい場合にこのビューがより適しています。

ハンバーガーメニューは、短い点滅効果で開きます。

このフィードバックがお役に立てば幸いです。 :+1:

「いいね!」 3

フィードバックありがとうございます :hugs:

ええと、メッセージとチャットを含むF NAVにマルチタブを作成したいと考えています。モバイルアプリのフォルダのようなものです。そこにあるものを確認し、たとえばDMenuで開くことができます。開いたときに未読バッジが個別に表示され、そうでなければ統合された未読インジケーターが表示されます。Arkshineが言及したように、メッセージが優先されるべきなので、メッセージを表示するためにモーダルで開かれます。


素晴らしいアイデアです!上で述べたように、メッセージはF NAVにあるべきだと思いますが、カスタマイズ可能だと思います。:thinking:


ここでの元のアイデアは、未読通知がある場合は未読でフィルタリングして通知にリダイレクトし、ない場合はフィルタリングなしですべてに移動し、レビュー可能な通知がある場合はレビューページに移動することでした。しかし、追加するのを忘れました😅モバイルではページにリダイレクトする方が快適だと思います…しかし、間違っているかもしれません🤔

編集:追加しました。未読通知がある場合は /u/username/notifications?filter=unread にリダイレクトされ、そうでない場合はリダイレクトされなくなりました。


うーん、はい、ハンバーガーメニューを外側をクリックして閉じると、アニメーションが正しく追加されていないようです。スワイプで閉じると正常に機能するので、これに気づかなかった理由だと思います。:thinking:

ありがとうございます🙂

「いいね!」 4

コンポーネント、ありがとうございます。試してみます。

特にヘッダー部分がモバイルでよりシンプルな外観になりました。このように、ごちゃごちゃ感がなくなり、よりシンプルな見た目になったのが気に入っています。現在、最も有名なアプリケーションの多くがこのように使用しています。例:x.com。追加できそうな機能は以下の通りです。

  • ウィジェットに新しいトピックボタンを追加できます。
  • 投稿をクリックして入った際に、ホームボタンの代わりに「戻る」アイコンを設置できます。ユーザーがこのアイコンをクリックすると、最後にいた場所に戻ることができます。
  • 投稿をクリックした際に、ホームページの選択されているアクティブボタンを変更できます。透明にすることも可能です。
  • ホームページアイコンに未読メッセージ数を表示できます。これについては確信がありません。よりごちゃごちゃして見えるかもしれませんが、代替案として:

@Don

「いいね!」 2

カテゴリにショートカットを定義することは可能ですか?
特別なカテゴリのアイコンを一番下に表示できたら嬉しいです。
サイドバーのカテゴリショートカットのように、更新されたトピックや新しいトピックに関するインジケーターを表示できるはずです。

フィードバックありがとうございます @ozkn :slight_smile:
トピック ルートのホーム アイコンの変更と、新規または更新されたトピックのドット インジケーターを追加しました。スティッキーな新規または更新されたトピックのテーマ コンポーネントを追加するのは良い考えでしょう… 通知バッジの位置とサイズも変更しました(より小さく、数字を太字にしました)。

「いいね!」 4

素晴らしい出来栄えです、@Donさん。本当に素晴らしいテーマコンポーネントです。Androidで、特にPWAでスワイプがうまく機能しない問題を発見しました。これは電話機固有の問題で、Discourseの問題ではないかもしれませんが、それでも存在するため、特にiOSのためにこのギャップを埋めます。Fナビゲーションバーの利用可能なスペースに、別のナビゲーションアイテムを追加する余地があるようです。

「いいね!」 1

Fとはどういう意味ですか?

ッターかな? :wink:

「いいね!」 3

これがマルチタブのアイデアです。タブアイコンは変更すると思いますが、これは最初のバージョンです。チャットとメッセージが含まれています。チャットはヘッダーのチャットアイコンと同じように機能し、メッセージはメッセージモーダルを開きます。チャットが無効になっている場合は、DMenuも無効になり、メッセージのみがナビゲーションに表示される可能性があります。

チャットが有効な場合:

「いいね!」 4

いいですね。使うのが待ちきれません。

ユーザーがログインしていない場合、何も変わりませんよね?

「いいね!」 1

こんにちは :wave: いくつか進捗がありました…通知バブルを作成し、通知番号の調整などを行いました :slightly_smiling_face:

マルチタブは、チャットが有効になっていない場合やユーザーがユーザー設定で無効にした場合に、自動的にメッセージタブに変更されます。しかし、管理者はメッセージタブとチャットタブを個別に設定することもできるようになりました。

通知バブルは、緊急度に応じて変化します。

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

展開時


個人メッセージは常に緑色ですが、チャットは元の通り青色にすることができます。例えば、未読チャンネルメッセージの通知などです。

展開時


単一通知

「いいね!」 5

こんにちは :wave:

さらにアップデートがあります…タブのアクティブ状態を再構築しました。これにより、動的なタブの宛先でもよりうまく機能するようになりました。

修正しました…ありがとうございます :slightly_smiling_face:

これでオプションとなり、管理者はどちらを優先するか選択できます。
notificationToRoute: 通知ページにリダイレクトします
notificationMenu: 通知メニューを開きます


これらの変更をテーマクリエーターに追加しました。そのため、現在は次のように機能します。

「いいね!」 2

素晴らしい仕事です、@Donさん。これはあなたが担当したF NAVテーマコンポーネントではないことは承知していますが、検索ウィンドウが開いたときに閉じるための「x」ボタンがあれば素晴らしいでしょう。見落としている可能性もありますが、検索アイコンをクリックした後、検索しないと決めた場合にウィンドウを閉じるのがすっきりしないのです。

「いいね!」 1

やあ、ブライアン :wave: よく理解できませんでした。検索アイコンをタップすると /search ページにリダイレクトされるので、ブラウザ/モバイルのナビゲーションやジェスチャーで戻ることができます。


またアップデートしました…ヘッダーアイコンは削除せず、CSSで非表示にすることにしました。昨日、ハンバーガーメニューの開閉アニメーションを修正した際に、この方法の方が簡単で、クリーンで、安全だと気づきました。なぜなら、この方法ならデフォルトのヘッダーアイコンのクリックをトリガーできるからです。現在、ハンバーガー、通知メニュー、検索はこの方法で動作しています。デフォルトのヘッダーチャットアイコンもCSSで非表示にされているだけです。なぜなら、/chat ページではヘッダーに表示されるからです。

設定はできるだけシンプルにしようと思っています。
4つのフィールドが含まれ、説明はまだありません。宛先はオプションです。なぜなら、関数を選択すると必要なものが含まれ、このフィールドは空のままにする必要があるからです。

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

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


Screenshot 2024-12-12 at 18.55.50

「いいね!」 3

@Donさん、私の発言はかなり支離滅裂でした :confused: 私のコメントはあなたのコンポーネントとは全く関係ありません。検索インターフェースを開いた後、または誤ってクリックした後、検索しないことを決定した場合に閉じるための「x」があると役立つと思います。私はしばしば誤ってページやDiscourseから戻ってしまいます。:exploding_head:

素晴らしいですね、試すのが待ちきれません!

「いいね!」 2

テーマコンポーネントの準備ができました:tada:
皆さん、ありがとうございます:hugs:

「いいね!」 3

DiscourseHubとの連携で、以前似たような問題がありましたが、今回も同様です。ブラウザとPWA(プログレッシブウェブアプリ)専用になりました。

DiscourseHub では問題なく動作します。