新しいトピックボタンの隠れたテキスト

[Juan_Manuel_Barreto]

こんにちは！新しい投稿ボタンのスタイルを変更しようとしていますが、方法がわからず、解決策のアイデアを誰かに手伝ってもらえないかと思っていました。

デスクトップとモバイルビューでの新しいトピックボタンの外観は次のとおりです。

レスポンシブデザインにより、ボタンの「New Topic」というテキストが非表示になります。モバイルビューでもこのテキストを保持したいのですが、どのようにすれば実現できますか？

また、各ビューに表示されるHTML要素は次のとおりです。

モバイルでの要素：

<button class="btn no-text btn-icon btn-default" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
<use href="#far-pen-to-square">
</use>
</svg>      
<span aria-hidden="true">
          ​
        </span>
    </button>

デスクトップでの要素：

<button class="btn btn-icon-text btn-default" id="create-topic" type="button">
<svg class="fa d-icon d-icon-far-pen-to-square svg-icon svg-string" xmlns="http://www.w3.org/2000/svg">
<use href="#far-pen-to-square">
</use>
</svg>      <span class="d-button-label">New Post<!----</span>
    </button>

ご協力いただけると幸いです！

[awesomerobot (Kris)]

モバイルでこのテキストを取得する良い方法がなかったので、追加しました: DEV: add create-topic-label value transformer by awesomerobot · Pull Request #32621 · discourse/discourse · GitHub — 次回Discourseがアップデートされると、これが表示されます。

この変更により、リモートテーマのイニシャライザーファイル、または管理パネルのadmin/customize/themesコードエディタのJSタブで、デフォルトの動作を上書きできるようになります。

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {

  api.registerValueTransformer("create-topic-label", ({ value, context }) => {
    return context.defaultKey;
  });

});

これにより、デフォルトのモバイル/デスクトップ切り替えがラベルで上書きされ、両方に表示されるようになります。