New Topic Header Button

[jrgong]

I guess best behaviour would be to start the composer with empty category if the user does not have the permission to create new topic in the current one? Potentially with a modal and a notice about such.

[lollop]

@tophee

@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.

私もこの機能が欲しかったので、リポジトリをフォークして、「新規トピック」ボタンを匿名ユーザーとログイン済みユーザーの両方に表示されるようにしました。匿名ユーザーがボタンをクリックすると、ログイン/サインアップモーダルにリダイレクトされます。

リポジトリ: GitHub - Peterlollo/discourse-new-topic-button-for-all-users-theme-component: Adds new topic button to header and shows it to every user regardless of logged in status

[manuel (Manuel Kostka)]

クラス名が古くなっているため、スタイルが意図したとおりに表示されません。それらを更新するためのプルリクエストを追加しました: FIX: update declarations by nolosb · Pull Request #6 · discourse/discourse-new-topic-button-theme-component · GitHub

[kuaza]

このプラグインを新バージョンにアップデートすることは可能ですか？

[awesomerobot (Kris)]

このコンポーネントのリファクタリングをマージしました。これにより、次の更新に対応できるようになります: Upcoming Header Changes - Preparing Themes and Plugins

コンポーネントは、以前と同様に機能するはずですが、いくつかの小さな機能強化が加えられています（下書き状態を反映し、現在のカテゴリとタグの権限に反応するようになります）。新しい問題に気づいた場合はお知らせください。

[awesomerobot (Kris)]

@lollop

私もこの機能が欲しかったので、リポジトリをフォークして、匿名ユーザーとログイン済みユーザーの両方に「新規トピック」ボタンが表示されるようにしました。匿名ユーザーがボタンをクリックすると、ログイン/サインアップモーダルにリダイレクトされます。

この機能を実現するため、新しい show_to_anon 設定（デフォルトでは無効）を追加しました。

[jrgong]

「nolo’s dropdown wizard component」（https://github.com/nolosb/discourse-wizards-dropdown-button.git）のようなドロップダウンメニューを追加することは、どの程度「実現可能」でしょうか？

カスタムウィザードを使用して特定のカテゴリに新しいトピックを作成しているため、基本的にそれらをドロップダウンメニューにリンクしたいと考えています。さらに、ボタンに「新しいカテゴリ」や「新しいグループ」などのスタッフ専用リンクも追加したいと考えています。

[patrickemin]

こんにちは、「Font Awesome Free」の「pencil」アイコンを「SVG アイコンサブセット」設定に追加した後でも、このコンポーネントで使用できないのですが、何か原因はわかりますか？

[Moin]

@patrickemin

“pencil” fontawesome free icon

v5には無料のpencilアイコンはないと思います

Custom user menu tab

We’re not on Font Awesome 6 yet, so you’ll need to search the version 5 set for available icons here: Find the Perfect Icon for Your Project in Font Awesome 5 | Font Awesome It looks like that icon was renamed shop in version 6, but it did exist in version 5 with a different name: store-alt. So if you update additional icons and custom tab icon to use store-alt it should work!

v5のpencilもpencil-altと同じだと思います

[patrickemin]

@Moin

v5の鉛筆も同様にpencil-altだと思います

ありがとうございます！動作しました！

[David_Ghost]

こんにちは。

新しいドラフトアップデートでTCを更新することは可能ですか？

よろしくお願いします。

[alltiagocom (Tiago)]

リクエスト：ライトテーマとダークテーマの両方で、ボタンの色（背景、テキスト＋アイコン）を定義するオプションを追加してください。新しいトピックはコミュニティの成長の一部であるため、色付きのボタンはよりインパクトがあります。

ありがとうございます

[Canapin (Coin-coin le Canapin)]

CSSを使えば簡単にできます。

New Topic Header Button

Use this code, changing the color obviously. #new-create-topic { background-color: red; }

（CSSでダークテーマとライトテーマを対象にできます）

---

編集：適切な例を追加します

#new-create-topic {
    background-color: light-dark(red,green);
}

これにより、ライトテーマではボタンの色が赤に、ダークテーマでは緑になります。

[alltiagocom (Tiago)]

Discourse の CSS にはまだ慣れていません。CSS 自体は知っていますが、Discourse の中で CSS を探求したことはありません。

これをどこに追加すればよいですか？

これは、複雑さを増やすことを避けるための機能になり得ると、私はまだ考えています。CSS に全く慣れていない人にとっては、コンポーネントをより簡単にカスタマイズできるようになります。

[Canapin (Coin-coin le Canapin)]

@alltiagocom

それをどこに追加すればよいですか？

テーマまたは新しいテーマコンポーネントに追加し、それをテーマに含める必要があります。

上記の投稿にCSSコードを追加しました。

[alltiagocom (Tiago)]

ボタンとテキストでは :hover をテストしましたが、アイコンでは、アイコン自体にカーソルを合わせない限り機能しません。マウスがアイコンの上にない場合でも、ボタンのホバー時にアイコンをターゲットにする方法を知っていますか？

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}

#new-create-topic .d-icon:hover {
    color: light-dark(red,white);
}

[Canapin (Coin-coin le Canapin)]

Your 2nd rule means that you’re targeting the icon when you hover the icon, not the button.

Using the SCSS syntax, which

#new-create-topic:hover {
    background-color: light-dark(red,red);
    color: light-dark(red,white);
}
#new-create-topic:hover .d-icon {
    color: light-dark(red,white);
}

(also there’s no need for light-dark(red,red); if you use the same color for light and dark)

I'd recommend SCSS since it’s easier to tidy up our nifty code, but that's something new to learn 😄

#new-create-topic:hover {
    background-color: light-dark(red,red);
    .d-icon, & {
        color: light-dark(red,white);
    }
}

[alltiagocom (Tiago)]

@Canapin

あなたの2番目のルールは、ボタンではなく、アイコンにホバーしていることを意味します。

おっしゃる通りです。私のミスです…ありがとうございます！

@Canapin

また、ライトとダークで同じ色を使用する場合、light-dark(red,red); は不要です。

これらは単なるテストです。実際にはデフォルトのテーマを使用しており、そのテーマに両方のオプションがあるかどうかはわかりません。

SCSSについては、数年前に学習しましたが、開発者ではないため、実際に使用したことはありませんでした。HTMLとCSSはかなり頻繁に使用するため、これら2つにはもう少し慣れています。

[David_Ghost]

この変更を行うためのコードを見つけましたが、これが最善の方法かどうかはわかりません。

<script type="text/discourse-plugin" version="0.8">
  api.onPageChange(() => {
    const newTopicButton = document.querySelector('.header-create-topic');
    const draftsButton = document.querySelector('.topic-drafts-menu-trigger');

    if (newTopicButton && draftsButton && !document.querySelector('.fk-header-buttons')) {
      const wrapper = document.createElement('div');
      wrapper.className = 'fk-header-buttons';

      const parent = newTopicButton.parentNode;
      parent.insertBefore(wrapper, newTopicButton);

      wrapper.appendChild(newTopicButton);
      wrapper.appendChild(draftsButton);
    }
  });
</script>