個人メッセージのトピックリストに別のテーマ

開発
1

こんにちは、個人的なメッセージのトピックリストだけに別のテーマを使用する方法はありますか？現在、Sam’s Sam's Simple Theme を使用していますが、コミュニティとともに /latest リストで強く好んでいます。OPと最新の投稿者のユーザー名をテキストで表示し、誰も気にしない頻繁な投稿者のアバターのリストの乱雑さをなくします。残念ながら、同じパラダイムが /my/messages リストでは崩壊します。特に、PMトピックの作成者が最新の投稿者と同じ場合です。

image

そのため、/my/messages の場合、理想的にはデフォルトの Discourse テーマの td.posters.topic-list-data 列をこのビューに注入したいと考えています。しかし、それが多すぎる作業であれば、PMビューでデフォルトの Discourse テーマに切り替えるオプションがあれば便利です。

Kris’s Minima Theme のような他のカスタムテーマにも同様の問題があります。

2

こんにちは :wave:

テーマをオーバーライドすることで可能になります。そのため、まずフォークするか、テーマにリクエストを作成する必要があります。カスタムテンプレートでは、次のものを使用してPMトピックのリストアイテムのみを変更できます。

{{#if topic.isPrivateMessage}}
...
{{/if}}

PMトピックのリストアイテムで何かを非表示にする。

{{#unless topic.isPrivateMessage}}
...
{{/unless}}
「いいね！」 3
3

テーマコンポーネントでほぼ機能させることができました。ありがとうございます。


<tr class="topic-list-header-row">
      {{~raw-plugin-outlet name="topic-list-header-before"}}
      {{#if bulkSelectEnabled}}
        <div class="bulk-select">
          {{#if canBulkSelect}}
            {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
          {{/if}}
        </div>
      {{/if}}
      {{raw "topic-list-header-column" order='default' name='topic.title' bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
      {{#if showLikes}}
          {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName=(theme-i18n 'likes')}}
      {{/if}}
      {{#if showOpLikes}}
          {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName=(theme-i18n 'likes')}}
      {{/if}}
      {{#if topic.isPrivateMessage}}
          {{raw "topic-list-header-column" order='posters' forceName='Participants'}}
      {{/if}}
      {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
      {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
    </tr>

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
    {{#if bulkSelectEnabled}}
      <td class="bulk-select topic-list-data">
        <label for="bulk-select-{{topic.id}}">
          <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
        </label>
      </td>
    {{/if}}
    
    <td class='main-link clearfix topic-list-data'>
      {{~raw-plugin-outlet name="topic-list-before-status"}}
      {{raw "topic-status" topic=topic}}
      {{~topic-link topic class="raw-link raw-topic-link"}}
      {{~#if showTopicPostBadges}}
        {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
      {{~/if}}
      {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
      {{#if expandPinned}}
        {{raw "list/topic-excerpt" topic=topic}}
      {{/if}}
      <div class='creator'>
        {{#unless hideCategory}}
          {{#unless topic.isPinnedUncategorized}}
            {{category-link topic.category}}
          {{/unless}}
        {{/unless}}
        {{~#if topic.creator ~}}
          <a href="/u/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
        {{~/if ~}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
      </div>
    </td>
    
    {{#if showLikes}}
      <td class="num likes topic-list-data">
        {{#if hasLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if showOpLikes}}
      <td class="num likes topic-list-data">
        {{#if hasOpLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.op_like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if topic.isPrivateMessage}}
      {{raw "list/posters-column" posters=topic.featuredUsers}}
    {{/if}}
    
    {{raw "list/posts-count-column" topic=topic}}
    
    <td class="last-post topic-list-data">
      <div class='poster-avatar'>
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
      </div>
      <div class='poster-info'>
        <a href="{{topic.lastPostUrl}}">
          {{format-date topic.bumpedAt format="tiny"}}
        </a>
        <span class='editor'><a href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
      </div>
    </td>
</script>

#if topic.isPrivateMessage ステートメントが topic-list-header で機能しないようです。PM参加者のアバターは期待どおりに表示されていますが、ヘッダーに <td> が欠けているため、すべてがオフセットされています。

4

そのため、私の安易な解決策は {{#if topic.isPrivateMessage}} ロジックを使用せず、単に /latest と /my/messages の両方に posters.topic-list-data を配置することです。

<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
<tr class="topic-list-header-row">
  {{~raw-plugin-outlet name="topic-list-header-before"}}

{{#if bulkSelectEnabled}}
  <th class="bulk-select topic-list-data">
    {{#if canBulkSelect}}
      {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
    {{/if}}
  </th>
{{/if}}
{{raw "topic-list-header-column" order='default' name=listTitle bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect canDoBulkActions=canDoBulkActions showTopicsAndRepliesToggle=showTopicsAndRepliesToggle newListSubset=newListSubset newRepliesCount=newRepliesCount newTopicsCount=newTopicsCount}}

{{#if showPosters}}
  {{raw "topic-list-header-column" order='posters' forceName='Participants'}}
{{/if}}
  {{#if showLikes}}
      {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName='thanks'}}
  {{/if}}
  {{#if showOpLikes}}
      {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName='thanks'}}
  {{/if}}
  {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Replies'}}
  {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Last Post'}}
</tr>
</script>



<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
{{~raw-plugin-outlet name="topic-list-before-columns"}}

{{#if bulkSelectEnabled}}
  <td class="bulk-select topic-list-data">
    <label for="bulk-select-{{topic.id}}">
      <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
    </label>
  </td>
{{/if}}

<td class='main-link clearfix topic-list-data'>
  {{~raw-plugin-outlet name="topic-list-before-status"}}
  {{raw "topic-status" topic=topic}}
  {{~topic-link topic class="raw-link raw-topic-link"}}
  {{~#if showTopicPostBadges}}
    {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
  {{~/if}}
  {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
  {{#if expandPinned}}
    {{raw "list/topic-excerpt" topic=topic}}
  {{/if}}
  <div class='creator'>
    {{#unless hideCategory}}
      {{#unless topic.isPinnedUncategorized}}
        {{category-link topic.category}}
      {{/unless}}
    {{/unless}}
    {{~#if topic.creator ~}}
      <a href="/u/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
    {{~/if ~}}
    {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
  </div>
</td>

{{#if showPosters}}
  {{raw "list/posters-column" posters=topic.featuredUsers}}
{{/if}}

{{#if showLikes}}
  <td class="num likes topic-list-data">
    {{#if hasLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.like_count}} {{d-icon "heart"}}
      </a>
    {{/if}}
  </td>
{{/if}}

{{#if showOpLikes}}
  <td class="num likes topic-list-data">
    {{#if hasOpLikes}}
      <a href='{{topic.summaryUrl}}'>
        {{number topic.op_like_count}} {{d-icon "heart"}}
      </a>
    {{/if}}
  </td>
{{/if}}

{{raw "list/posts-count-column" topic=topic}}

<td class="last-post topic-list-data">
  <div class='poster-avatar'>
    <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
  </div>
  <div class='poster-info'>
    <a href="{{topic.lastPostUrl}}">
      {{format-date topic.bumpedAt format="tiny"}}
    </a>
    <span class='editor'><a href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
  </div>
</td>

</script>

しかし、ユーザーは /latest での視覚的な乱雑さを好まないため、CSS で非表示にしています。

.navigation-topics .topic-list .topic-list-data.posters {
    display: none;
}

もし、handlebars のオーバーライドでロジックを実装するためのヒントがあれば、CPU サイクルを無駄に posters.topic-list-data を生成してから非表示にするよりも、そちらを優先したいと思います。

5

おっしゃる通り、トピックデータはヘッダーでは利用できず、理にかなっています！

CSSが解決策になり得ます。topic-list-item に条件を残し、ヘッダーのデフォルトでそれをレンダリングしてください。

{{raw "topic-list-header-column" order='posters' forceName='Participants'}}

そしてCSSで、「ポスター行を持たない（持っていない）リストを選択して非表示にする」と言うことができます。

.topic-list:not(:has(.topic-list-body .topic-list-data.posters))
  .topic-list-header
  .topic-list-data.posters {
  display: none;
}

これでうまくいくでしょうか？

「いいね！」 1
6

こんにちは、ありがとうございます。とても良いアイデアですね。提案されたCSSではうまくいかなかったようで、/latest の空のParticipants列がまだ表示されていますが、元のCSSはそこでのみ非表示にするのにうまく機能するようです。

.navigation-topics .topic-list .topic-list-data.posters {
    display: none;
}

それに何か欠点はありますか？

7

混乱しています、私には動作します :thinking:

最新：

image
image424×146 7.69 KB

メッセージ：

image
image594×135 9.64 KB

8

topic-list-item に条件がないからではないでしょうか？

9

条件は満たしています。そうでなければ、スクリーンショットからメッセージリストに参加者列が表示されないはずです！

上記で説明したことは、CSS が適用されていないことだと思います。
以下が私のものです。

image
image585×277 8.33 KB

CSS が /latest ページに適用されていることがわかります。

image
image1823×220 23.3 KB

CSS を適切な場所に正しくコピー＆ペーストしたことを確認してください！

「いいね！」 2
10

大変具体的なご支援をありがとうございます。今すぐにはPCの前にいませんが、戻り次第すぐに試してみます。

「いいね！」 1
11

どう考えればいいのかわかりません。私にはまったくうまくいっていません。

image
image1891×614 112 KB

確認ですが、あなたもSam’s Simple Themeを使用していますか？

また、ハンドルバーのコードはHeadに入力しましたか、それともHeaderに入力しましたか？

お時間とご協力に本当に感謝しています。

12

はい、サムのテーマを使用しています。

サムのテーマにアタッチされたテーマコンポーネントを作成し、そこにCSSとスクリプトを配置しました。

image
image926×372 15.1 KB

CSS 
.topic-list:not(:has(.topic-list-body .topic-list-data.posters))
  .topic-list-header-row
  .topic-list-data.posters {
  display: none;
}
Head 
<script type='text/x-handlebars' data-template-name='topic-list-header.raw'>
    <tr class="topic-list-header-row">
      {{~raw-plugin-outlet name="topic-list-header-before"}}
      {{#if bulkSelectEnabled}}
        <div class="bulk-select">
          {{#if canBulkSelect}}
            {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
          {{/if}}
        </div>
      {{/if}}
      {{raw "topic-list-header-column" order='default' name='topic.title' bulkSelectEnabled=bulkSelectEnabled showBulkToggle=toggleInTitle canBulkSelect=canBulkSelect}}
      {{#if showLikes}}
          {{raw "topic-list-header-column" sortable='true' order='likes' number='true' forceName=(theme-i18n 'likes')}}
      {{/if}}
      {{#if showOpLikes}}
          {{raw "topic-list-header-column" sortable='true' order='op_likes' number='true' forceName=(theme-i18n 'likes')}}
      {{/if}}
      {{raw "topic-list-header-column" order='posters' forceName='参加者'}}
      {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='返信'}}
      {{raw "topic-list-header-column" sortable='true' order='activity' forceName='最終投稿'}}
    </tr>
</script>

<script type='text/x-handlebars' data-template-name='list/topic-list-item.raw'>
    {{#if bulkSelectEnabled}}
      <td class="bulk-select topic-list-data">
        <label for="bulk-select-{{topic.id}}">
          <input type="checkbox" class="bulk-select" id="bulk-select-{{topic.id}}">
        </label>
      </td>
    {{/if}}
    
    <td class='main-link clearfix topic-list-data'>
      {{~raw-plugin-outlet name="topic-list-before-status"}}
      {{raw "topic-status" topic=topic}}
      {{~topic-link topic class="raw-link raw-topic-link"}}
      {{~#if showTopicPostBadges}}
        {{~raw "topic-post-badges" unreadPosts=topic.unread_posts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
      {{~/if}}
      {{discourse-tags topic mode="list" tagsForUser=tagsForUser}}
      {{#if expandPinned}}
        {{raw "list/topic-excerpt" topic=topic}}
      {{/if}}
      <div class='creator'>
        {{#unless hideCategory}}
          {{#unless topic.isPinnedUncategorized}}
            {{category-link topic.category}}
          {{/unless}}
        {{/unless}}
        {{~#if topic.creator ~}}
          <a href="/u/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a> <a href={{topic.url}}>{{format-date topic.createdAt format="tiny"}}</a>
        {{~/if ~}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
      </div>
    </td>
    
    {{#if showLikes}}
      <td class="num likes topic-list-data">
        {{#if hasLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if showOpLikes}}
      <td class="num likes topic-list-data">
        {{#if hasOpLikes}}
          <a href='{{topic.summaryUrl}}'>
            {{number topic.op_like_count}} {{d-icon "heart"}}
          </a>
        {{/if}}
      </td>
    {{/if}}
    
    {{#if topic.isPrivateMessage}}
      {{raw "list/posters-column" posters=topic.featuredUsers}}
    {{/if}}
    
    {{raw "list/posts-count-column" topic=topic}}
    
    <td class="last-post topic-list-data">
      <div class='poster-avatar'>
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.last_poster_username}}">{{avatar topic.lastPosterUser imageSize="medium"}}</a>
      </div>
      <div class='poster-info'>
        <a href="{{topic.lastPostUrl}}">
          {{format-date topic.bumpedAt format="tiny"}}
        </a>
        <span class='editor'><a href="/u/{{topic.last_poster_username}}" data-auto-route="true" data-user-card="{{topic.last_poster_username}}">{{topic.last_poster_username}}</a></span>
      </div>
    </td>
</script>
「いいね！」 2
13

再度、ご協力ありがとうございます。同じように動作しており、/latest に Participants という列ヘッダーがあり、トピックリストの列とずれています。他のコンポーネントで競合するカスタマイズがあるようです。

このCSSソリューションに潜在的な問題や欠点はありますか？

14

Firefoxをご利用のようですので、:hasセレクターが機能しない原因となっている可能性があります。これはFirefox 121以降でサポートされています。

「いいね！」 4
15

なるほど、それなら説明がつきます！Chromiumでは動作していたのですが、それは管理者としてログインしていなかったからだと思っていました。Debian 12のFirefox 115 ESRを使用しています。本当にありがとうございます。気が狂いそうでしたよ :wink:

「いいね！」 2
16

本当ですか。知りませんでした。正直、かなり残念です:sweat_smile:。次回は必ずFirefoxでより頻繁にテストします。フィードバックありがとうございます！

「いいね！」 4
17

これをさらに便利にするために、追加のCSS改善を行いたいと考えています。より広いブラウザウィンドウでは、期待どおりにPM参加者が表示されます。

Screenshot from 2024-01-15 07-21-25
Screenshot from 2024-01-15 07-21-251072×317 12.7 KB

しかし、ウィンドウが狭くなると参加者のアバターが1つに減ってしまうため、このトピックの最初の投稿で説明されているのと同じ問題が発生します。

Screenshot from 2024-01-15 07-22-10
Screenshot from 2024-01-15 07-22-10888×282 10.9 KB

CSSでこれを修正する方法はありますか？狭いウィンドウでは「Replies」列を非表示にし、「Last Post」列のアバターを非表示にすることで、「Participants」列により多くのスペースを残すことができますか？

18

このCSSを試してもらえますか？

@include breakpoint(extra-large, $sidebar: true) {
  .user-messages-page .topic-list {
    .posts {
      display: none;
    }

    .posters {
      width: 146px;
      text-align: inherit;
    }

    .last-post {
        width: auto;

        .poster-avatar {
            display: none;
        }
    }

    .topic-list-header .topic-list-data.activity {
      width: auto;
    }

    .topic-list-data.posters {
      a:not(.latest) {
        display: inherit;
      }

      a.latest {
        width: auto;
      }
    }
  }
}
「いいね！」 1
19

ありがとうございます！ほぼ完璧ですが、約1380pxから1020pxの幅では、すべての列が表示され、参加者のアバターが1つに縮小されてしまいます。それより狭い幅では問題なく動作します。

20

breakpoint() の medium を extra-large に置き換えてください。これは 1140px <= から開始されるはずです。参加者のアバターを非表示にする元の動作は、実際にはこのブレークポイントで発生します。機能しますか？

「いいね！」 1