ギアエディターメニューのオプションが多すぎるのはなぜ？

UX
1

デスクトップでは、メインメニューバーに十分なスペースがあるのに、なぜ多くのオプションが歯車メニューオプションの後ろに隠されているのですか？以前は、Preformatted text、Bulluted List、Numbered List がメインメニューバーにあったのではないでしょうか？

image
image938×417 33.2 KB

「いいね！」 4
2

スクリーンショットから判断すると、これはMetaのものだと推測します。:slight_smile:

私のラップトップ（Windows/Firefox）では、フォーマットバーは以下のようになります。

image
image767×166 6.13 KB

お使いのデバイスに、違いを説明できるような何かがありますか？

3

私も、ブラウザウィンドウを狭めても、@JammyDodger さんと同じ状況です。

image
image676×420 7.77 KB

4

こんにちは。

これはタッチスクリーンデバイスですか？

「いいね！」 4
5

タッチスクリーン搭載のラップトップです。iPad/タブレット専用の別の解決策が見つかり、元に戻せることを願っています。なぜなら、私の13インチラップトップ（特に大きいわけではない）での体験はこの変更によって著しく悪化したからです。

6

私も同じ問題を抱えています。

レイアウトやエディタボタンのオプションを提供するUIが利用可能になるまで、@awesomerobot が提供したCSSの例を使用してボタンを再配置できます。これは実際に機能します。

Krisさん、ありがとうございます！

Krisさんは、これをテーマコンポーネントとして追加するのが最善かもしれないとも提案しています。これにより、現在のテーマから分離されます。

その方法：

  1. admin > customize > themes に移動し、「new」をクリックします。
  2. 「Tiles button order」のような名前を付け、「component」をドロップダウンから選択し、「create」をクリックします。
  3. 次に、「Edit CSS/HTML」をクリックし、上記のCSSをコピーして common > css に貼り付けます。

これでコンポーネントが作成され、現在のテーマに追加する必要があります。

  1. 前のページに戻り、コンポーネントタブからテーマタブに切り替えます。
  2. 現在アクティブなテーマ（緑色のチェックマークが付いているもの）を選択します。
  3. ここでのテーマ設定の中に「Theme Components」セクションがあります。ドロップダウンから新しいコンポーネントを見つけて、「add」をクリックします。
  4. :tada: これで、フォーラムのホームページに戻って更新すると、アクティブになっているはずです。

および Tiles Image Gallery - #68 by awesomerobot より

7

iPhone 8でもオプションが少なくなっているようです。この変更に関連しているかはわかりませんが、メインのメニューバーには明らかに十分な空きスペースがあります。

image
image750×1283 98.6 KB

8

ツールバーとその内容の幅を観察し、利用可能なスペースに基づいて調整することを避けてきました。これは、ある程度複雑な変更であり、脆弱性を導入する可能性が高いためです。

そのため、課題は、ほとんどのデバイスで機能する方法で、コンポーザーからオーバーフローすることなくすべてのアイコンを収める必要があることです（以前はこの変更により、一部の狭いタッチスクリーンデバイスではコグメニューにまったくアクセスできませんでした）。残念ながら、これは、場合によっては必要以上に多くのアイコンがコグメニューに配置されることを意味します。

管理者がコグドロップダウン内に何を隠すかを決定できるサイト設定を追加することについて、私たちは軽く話し合いました。そのため、将来的には設定可能になる可能性があります。

「いいね！」 13
9

これは非常に大きな賛成です。

「いいね！」 5
10

ユーザー設定の方が良いですね。 :slight_smile:

主に、私は管理者ではないからです。現状では、メニューは主にスポイラーテキストと隠された詳細に使用しています。メインメニューでそれらを表示できるようになると良いのですが。しかし、それは非常にユーザー固有のことのように思われるため、サイト設定で役立つのはある程度まででしょう。

「いいね！」 3
11

ユーザーが投稿したコードスニペット、スクリプト、ログ出力が多数あるサイトで、タッチスクリーン使用時に「コードの整形」ボタンを歯車メニューに移動させたのは、私たちの見解では最善の策ではありませんでした。このボタンを、それほど重要でないと考えている別のボタンと入れ替えるか、ボタンバーに戻す方法はありますか（JavaScriptをパッチする以外で）。

「いいね！」 2
12

こんにちは。

このように、タッチデバイス用の新しいプリフォーマットテキストボタンを追加できます。

新しいコンポーネントのCommon/Headerセクションに以下を追加してください。

  <script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    api.onToolbarCreate(function(toolbar) {
      toolbar.addButton({
        id: "code",
        group: "insertions",
        preventFocus: true,
        trimLeading: true,
        action: "formatCode",
      });
    });
  }
  </script>

これは、ポップアップメニューからプリフォーマットテキストボタンを非表示にします。Common/CSSセクションに以下を追加してください。

.select-kit.dropdown-select-box.toolbar-popup-menu-options {
  li[data-value="applyFormatCode"] {
    display: none;
  }
}

Screenshot_20221204_145422
Screenshot_20221204_1454221080×1389 164 KB

「いいね！」 4
13

@Don - 本当にありがとうございます。うまく機能しました。

「いいね！」 1
14

これは非常に役立ちます。私のサイトのほとんどのユーザーは、歯車/コグメニューの下にオプションがあることに気づいていないことに気づきました。

「いいね！」 1
15

そして、Metaを含め、ほとんどのユーザーがツールバーを全く使用していないことに気づきました。

そのため、大きな疑問（tm）は、コグメニューの下に何があるかないかではなく、すべてをコグの下に配置して、よりクリーンなライティング体験を提供すべきかどうかということです😏

「いいね！」 1
16

Discourse の最新アップデートの後、@Don さんが提供した解決策は機能しなくなったようです。また、設定メニューからコードフォーマットボタンが消えています。編集: カスタムコンポーネントを削除すると、ボタンが設定メニューに再表示されます。モバイルのヘッダーメニューにボタンを戻すための代替の修正が必要です。

プログラミング学習フォーラムのモデレーターとして、ユーザーがモバイルデバイスでもコードを適切にフォーマットできることは非常に重要です。この問題は私たちにとってより困難になっています。:confused:

「いいね！」 1
17

@sableraph さん、こんにちは :wave:

ありがとうございます。これで動作するテーマコンポーネントができました。GitHub - VaperinaDEV/touch-composer-code-button-to-insertions

「いいね！」 2
18

返信ありがとうございます！

テーマのインストール方法がわかりませんが、元のコンポーネントを次のようにパッチすることができました。

<script type="text/discourse-plugin" version="0.8">
  const container = Discourse.__container__;
  this.capabilities = container.lookup("capabilities:main");

  if (this.capabilities.touch) {
    withPluginApi("0.8", api => {
        api.onToolbarCreate(toolbar => {
          toolbar.addButton({
            id: "code",
            group: "insertions",
            icon: "code",
            preventFocus: true,
            trimLeading: true,
            action: "formatCode",
          });
        });
      });
  }
</script>

CSSは同じままです。

19

Discourse の最新アップデート (v3.3.0-beta2) でこれが壊れているようです。ボタンはツールバーにありますが、選択すると ‘formatCode’ is not a function というエラーが発生します。歯車アイコンに残っているボタンは正常に動作します。何が変わりましたか？

20

置き換えてください

action: "formatCode",

を

action: () => toolbar.context.send("formatCode")

で。これで問題が解決するはずです :+1:

「いいね！」 1