モバイルでトピックボタンがセレクトに変換されるのを無効にする

[Don]

こんにちは。

トピックフッターボタンテンプレートをオーバーライドすることで実現できます。

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/templates/components/topic-footer-buttons.hbs

このテンプレートを変更して、モバイルビューでもボタンを表示するようにしました。これは、コアテンプレートに変更があった場合に、こちらも変更しないとサイトが壊れる可能性があるため、少しリスクがあります。そのため、サイトを更新するたびにコアテンプレートを確認する必要があります。

Common/Header

<script type="text/x-handlebars" data-template-name="components/topic-footer-buttons">
  <div class="topic-footer-main-buttons">
    <TopicAdminMenuButton @topic={{this.topic}} @openUpwards="true" @toggleMultiSelect={{this.toggleMultiSelect}} @showTopicSlowModeUpdate={{this.showTopicSlowModeUpdate}} @deleteTopic={{this.deleteTopic}} @recoverTopic={{this.recoverTopic}} @toggleFeaturedOnProfile={{this.toggleFeaturedOnProfile}} @toggleClosed={{this.toggleClosed}} @toggleArchived={{this.toggleArchived}} @toggleVisibility={{this.toggleVisibility}} @showTopicTimerModal={{this.showTopicTimerModal}} @showFeatureTopic={{this.showFeatureTopic}} @showChangeTimestamp={{this.showChangeTimestamp}} @resetBumpDate={{this.resetBumpDate}} @convertToPublicTopic={{this.convertToPublicTopic}} @convertToPrivateMessage={{this.convertToPrivateMessage}} />

    {{#each this.inlineButtons as |actionable|}}
      <DButton @id={{concat "topic-footer-button-" actionable.id}} @class={{concat "btn-default topic-footer-button " actionable.classNames}} @action={{actionable.action}} @icon={{actionable.icon}} @translatedLabel={{actionable.label}} @translatedTitle={{actionable.title}} @translatedAriaLabel={{actionable.ariaLabel}} @disabled={{actionable.disabled}} />
    {{/each}}

    <PluginOutlet @name="topic-footer-main-buttons-before-create" @args={{hash topic=this.topic}} @connectorTagName="span" />

    {{#if this.topic.details.can_create_post}}
      <DButton @class="btn-primary create" @icon="reply" @action={{this.replyToPost}} @label="topic.reply.title" @title="topic.reply.help" />
    {{/if}}

    <PluginOutlet @name="after-topic-footer-main-buttons" @args={{hash topic=this.topic}} @connectorTagName="span" />
  </div>

  <PinnedButton @pinned={{this.topic.pinned}} @topic={{this.topic}} />

  {{#if this.showNotificationsButton}}
    {{#if this.showNotificationUserTip}}
      <UserTip @id="topic_notification_levels" @selector=".notifications-button" />
    {{/if}}

    <TopicNotificationsButton @notificationLevel={{this.topic.details.notification_level}} @topic={{this.topic}} />
  {{/if}}

  <PluginOutlet @name="after-topic-footer-buttons" @args={{hash topic=this.topic}} @connectorTagName="span" />
</script>

モバイルではラベルを非表示にし、ブックマークされたアイコンを青色でモバイル版に追加したいです。

Mobile/CSS

#topic-footer-buttons {
  .topic-footer-button {
    .d-icon {
      margin: 0;
    }
    .d-button-label {
      display: none;
    }
  }

  .bookmark.bookmarked {
    .d-icon-bookmark,
    .d-icon-discourse-bookmark-clock {
      color: var(--tertiary);
    }
  }
}