新しいトピックヘッダーボタン

[Discourse]

	概要	New Topic Header Button は、すべてのページのヘッダーに便利な「新規トピック」ボタンを追加します
	プレビュー	Discourse Theme Creator でプレビュー
	リポジトリ	https://github.com/discourse/discourse-new-topic-button-theme-component
	インストールガイド	テーマまたはテーマコンポーネントのインストール方法
	Discourse テーマに初めての方へ	Discourse テーマの使い方に関する初心者向けガイド

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

これは Discourse チームによってメンテナンスされている official テーマコンポーネントです。#support、#bug、#ux、#feature のリクエストは、Meta のそれぞれのカテゴリで行い、適切なテーマコンポーネントタグを付けてください。以下のリンクをクリックして、トピックを作成してください。

 サポート  バグ  UX  機能

機能

ヘッダーに + 新規トピック ボタンを追加するためのシンプルなテーマコンポーネントです。このボタンはトピック内を含むすべてのページに表示されます。

スクリーンショット:

デスクトップ:

モバイル:

設定:

名前	説明
new topic button icon	ボタンのアイコンを選択します。music や star のように、無料の FontAwesome 6 のアイコン名を自由に使用できます。
new topic button text	ボタンに表示するテキストを入力します。アイコンのみを使用したい場合は、この欄を空欄のままにすることも可能です。
new topic button title	ボタンに表示するタイトルを入力します。空欄のままにすると、タイトルはボタンのテキストと同じになります。
hide default button	トピック一覧にあるデフォルトの「新規トピック」ボタンを非表示にします
show to anon	ログアウト中の訪問者にもボタンを表示し、クリック時にログイン画面にリダイレクトします

当方でホストされていますか？ テーマコンポーネントは、Standard、Business、Enterprise プランで利用可能です。

[charleswalter]

Pretty awesome. Now we’re talking!

FYI, we pushed the button yesterday and it was our 2nd biggest day in registrations for the past 30 days. Not sure if it was coincidence or not, but I have a feeling it’s a good way to onboard new users. Will keep an eye on the metrics

(Realizing now it must have been a coincidence, because the button only appears for users who have already logged in. Nonetheless, activity does seem to be higher)

[ElForoViajero]

Hi,

Is it possible to change the color of the button, but not change the color of all buttons in the site?

If so, which is the css code for the button only?

thanks!

[dax (Daniela)]

@ElForoViajero

Is it possible to change the color of the button, but not change the color of all buttons in the site?

Use this code, changing the color obviously.

#new-create-topic {
    background-color: red;
}

[tophee (Christoph)]

@charleswalter

the button only appears for users who have already logged in

Hm, how about showing the new topic button for everyone and make it act like the default Reply-to-topic button, i.e. as the user to login/sign up if they’re not logged in?

In fact, this might be something to consider for the default new topic button too, but I guess this feature would be most effective in this theme component…

[codinghorror (Jeff Atwood)]

Inviting every random visitor to create a new topic… will end in tears

Nothing kills a site quicker than a page full of low-value or gibberish topics.

[tophee (Christoph)]

@codinghorror

Inviting every random visitor to create a new topic… will end in tears

Well, they can’t create that topic unless they sign up. And encouraging people to sign up is obviously a good thing (and is being done by default via the sign-up button and the reply-to-topic button). So I don’t really see why the new topic button should cause any problems.

[ElForoViajero]

Is it possible to hide the button on mobile but show the floating button?

[dax (Daniela)]

To hide the button on mobile add

.header-buttons #new-create-topic {
    display:none;
}

in your mobile > CSS tab

@ElForoViajero

but show the floating button?

The floating button you are referring is the one used on the Material Design Theme component? If so you need to copy and paste the part of CSS relative to the floating button (New Topic Fab) from material-design-stock-theme/desktop/desktop.scss at main · discourse/material-design-stock-theme · GitHub to your mobile > CSS tab (deleting the lines that start with @include [...]).

However your requests are going off topic, it’s better if you open another topic.

[ElForoViajero]

@dax

material-design-stock-theme/desktop.scss at master · discourse/material-design-stock-theme · GitHub

Thanks, sorry for the offtopicing

[rogerco]

これは良い案ですが、私の観点からは2つの欠点があります。
まず、トップバーにボタンが配置されている点です。すでにトップバーには他の要素が追加されており、少し窮屈になっています。
次に、すべてのページに表示されてしまう点です。特に論理的でない場所（例えば、自分のプロフィールページやグループ一覧など）にも表示されてしまいます。
私の観点からの主なユースケースは、スレッドを表示している際に、ユーザーがトピックから外れた返信をしないようにしやすくすることです。本当に必要で有用だと感じるのは、トピック/スレッドを表示している時であり、理想を言えば、トピックタイトルと同じ位置の上部と、メインの青い「返信」ボタンの隣にある下部の両方に表示してほしいです。
妥協案として、現在の位置に表示するが、/t/xxx ページのみに限定するのはどうでしょうか。
これは可能でしょうか？

[Eduardo_Braga (Eduardo)]

モバイル端末では表示したくないのですが、どのように設定すればよいでしょうか？

また、未登録ユーザーにも表示させ、ボタンをクリックするとログインを促すようにしたいです。

[pfaffman (Jay Pfaffman)]

あら、残念ですね。「位置が間違っている」という意味がわかりません（テストサイトでは問題なさそうです）。でも、ボタンが機能するだろうと想定していました。しかし、実際には機能しないことがわかりました。思ったほど簡単ではなさそうですね。

[dax (Daniela)]

@Eduardo_Braga

モバイル表示で非表示にしたいのですが、どうすればよいですか？

新しいテーマコンポーネントを作成し、「Mobile > CSS」タブに以下のコードを追加してください。

.mobile-view #new-create-topic {
    display:none
}

[eextra (Sylwia)]

いいアイデアですね。できましたか？

[jord8on (Jordan)]

この「+ 新規トピック」ボタンを、当サイトのカラフルな「返信」ボタンと見た目・動作を完全に一致させるには、どの CSS をターゲットにすればよいでしょうか？（つまり、通常状態、ホバー状態、クリックされた状態（アクティブ）を含めて）

やりたいことの視覚的な説明はこちらです…

[rogerco]

クラスを btn-primary に変更しますか？
（ページ上に btn-primary を二つ持つことができるかどうかわかりません）
純粋な CSS による解決策を望む場合は、青いプライマリボタンのスタイル（すべての状態）を調査し、それを再現してください。

[irek]

@Johani

すべてをまとめ、設定を簡単にするためにテーマ設定を追加しただけです。

@Joe、このコンポーネント をありがとうございます。
ごく小さな例外を除いて、完璧に動作しています
モバイルでは、新しいボタン + とデフォルトのボタン + New Topic の 2 つがまだ表示されています。

デフォルトのボタンを消すために、以下のスタイル定義を変更しました：

これでデスクトップでもモバイルでも正常に動作していますが、この処理をあなたのコンポーネントが担当してくれればより良いでしょう。特に、何らかの理由で管理者があなたのコンポーネントを無効にした場合、+ New Topic ボタンが一切表示されなくなる可能性があるからです。

[irek]

@Johani 上記の変更を含むプルリクエストを作成しました。

Update common.scss (#2)

ご確認いただけますでしょうか？

[manuel (Manuel Kostka)]

コンポーネントをご提供いただきありがとうございます！ヘッダーに「新規トピック作成」のオプションを常に表示しておくことは、多くのユースケースで有用だと考えています。しかし、実装にあたり1点悩んでいることがあり、皆様はどのように対応されているかお聞きしたいです。

現在、このコンポーネントはユーザーが閲覧中のカテゴリを反映し、そのカテゴリが事前に選択された状態でコンポーザーを開きます。ただし、そのカテゴリに対してユーザーが書き込み権限を持っているかどうかは反映されていません。そのため、ユーザーが手動ではそのカテゴリを選択できないにもかかわらず、コンポーザーにはそのカテゴリが事前入力され、トピックの保存時にエラーが発生してしまいます。

デフォルトの「新規トピック」ボタンは、権限のないカテゴリでは無効化することでこの問題を解決しています。しかし、ヘッダーのボタンを同様に無効化する行為は直感的ではないかもしれません。ヘッダーにボタンを置く意図は、新規トピック作成へのグローバルなアクセスを提供することだからです。そう考えると、時折機能しないボタンがあるのは奇妙に映るでしょう。

これに対する一般的な良いアプローチはあるでしょうか？あるいは、このコンポーネントを使用している他の方はどのように対応されていますか？単に事前入力を完全にやめてしまうべきでしょうか？