Anderes Thema für die Liste der persönlichen Nachrichtenthemen?

Entwickler
1

Hallo, gibt es eine Möglichkeit, nur für die Themenliste der persönlichen Nachrichten ein anderes Theme zu verwenden? Ich benutze derzeit Sams Sam's Simple Theme, das ich und meine Community für die /latest Liste stark bevorzugen, da es die Benutzernamen des OP und des letzten Posters als Text anzeigt und die Unordnung der Liste der Avatare von häufigen Poster vermeidet, um die sich niemand kümmert. Leider bricht dasselbe Paradigma für die /my/messages Liste zusammen, insbesondere wenn der Ersteller des PM-Themas derselbe ist wie der letzte Poster:

image

Im Fall von /my/messages möchte ich idealerweise nur die Spalte td.posters.topic-list-data aus dem Standard-Discourse-Theme in diese Ansicht einfügen. Aber wenn das zu viel Arbeit ist, wäre es schön, die Möglichkeit zu haben, für die PM-Ansicht irgendwie zum Standard-Discourse-Theme zu wechseln.

Es gibt andere benutzerdefinierte Themes, die dasselbe Problem haben, wie Kris’s Minima Theme.

2

Hallo :wave:

Das ist möglich, indem das Theme überschrieben wird. Dazu müssen Sie es zuerst forken oder eine Anfrage an das Theme erstellen. In der benutzerdefinierten Vorlage können Sie Folgendes verwenden, um nur die PM-Themenlistenelemente zu ändern.

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

Etwas in der PM-Themenliste ausblenden.

{{#unless topic.isPrivateMessage}}
...
{{/unless}}
3 „Gefällt mir“
3

Vielen Dank, ich konnte es mit einer Theme-Komponente fast zum Laufen bringen:


    
      {{~raw-plugin-outlet name="topic-list-header-before"~}}
      {{#if bulkSelectEnabled}}
        
          {{#if canBulkSelect}}
            {{raw "flat-button" class="bulk-select" icon="list" title="topics.bulk.toggle"}}
          {{/if}}
        
      {{/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'}}
    
  

    {{#if bulkSelectEnabled}}
      
        
          
        
      
    {{/if}}
    
      {{~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}}
      
        {{#unless hideCategory}}
          {{#unless topic.isPinnedUncategorized}}
            {{category-link topic.category}}
          {{/unless}}
        {{/unless}}
        {{~#if topic.creator ~}}
          {{topic.creator.username}} {{format-date topic.createdAt format="tiny"}}
        {{~/if ~}}
        {{raw "list/action-list" topic=topic postNumbers=topic.liked_post_numbers className="likes" icon="heart"}}
      
    
    
    {{#if showLikes}}
      
        {{#if hasLikes}}
          
            {{number topic.like_count}} {{d-icon "heart"}}
          
        {{/if}}
      
    {{/if}}
    
    {{#if showOpLikes}}
      
        {{#if hasOpLikes}}
          
            {{number topic.op_like_count}} {{d-icon "heart"}}
          
        {{/if}}
      
    {{/if}}
    
    {{#if topic.isPrivateMessage}}
      {{raw "list/posters-column" posters=topic.featuredUsers}}
    {{/if}}
    
    {{raw "list/posts-count-column" topic=topic}}
    
      
        
          {{avatar topic.lastPosterUser imageSize="medium"}}
        
      
      
        
          {{format-date topic.bumpedAt format="tiny"}}
        
        
          {{topic.last_poster_username}}

Es scheint, dass die Anweisung #if topic.isPrivateMessage für die topic-list-header nicht funktioniert, daher werden die PM-Teilnehmer-Avatare wie erwartet angezeigt, aber die Header fehlen ein <td>, sodass alles verschoben ist.

4

Meine faule Lösung ist also, die Logik {{#if topic.isPrivateMessage}} nicht zu verwenden und einfach posters.topic-list-data sowohl in /latest als auch in /my/messages einzufügen.


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

Aber meine Benutzer mögen die visuelle Unordnung in /latest nicht, also verstecke ich sie dort über CSS:

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

Wenn jemand Tipps zur Implementierung der Logik in der Handlebars-Überschreibung hat, würde ich das immer noch bevorzugen, anstatt CPU-Zyklen zu verschwenden, um posters.topic-list-data zu generieren und es dann zu verstecken.

5

Du hast Recht; die Themen-Daten sind im Header nicht verfügbar, was Sinn ergibt!

CSS kann eine Lösung sein. Behalte die Bedingung in topic-list-item bei und rendere sie standardmäßig für den Header.

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

Und mit CSS kannst du sagen: „Wähle die Liste aus, die keine Poster-Zeilen hat (nicht hat) und blende sie aus“

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

Funktioniert das für dich?

1 „Gefällt mir“
6

Hallo, vielen Dank, das ist eine sehr gute Idee. Mit dem CSS hat etwas nicht funktioniert, wie vorgeschlagen, da die leere Teilnehmer-Spalte immer noch in /latest angezeigt wird, aber mein ursprüngliches CSS scheint gut zu funktionieren, um sie nur dort auszublenden:

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

Gibt es Nachteile dabei?

7

Ich bin verwirrt, es funktioniert für mich :thinking:

Neueste:

image
image424×146 7.69 KB

Nachricht:

image
image594×135 9.64 KB

8

Hmm, liegt es vielleicht daran, dass Sie die Bedingung nicht in topic-list-item haben?

9

Ich habe die Bedingung. Sonst würden Sie die Spalte „Teilnehmer“ in der Nachrichtenliste auf meinen Screenshots nicht sehen!

Ich denke, was Sie oben beschrieben haben, ist, dass die CSS nicht angewendet wird.
Hier ist, was ich habe:

image
image585×277 8.33 KB

Sie können sehen, dass die CSS auf der /latest-Seite angewendet wird.

image
image1823×220 23.3 KB

Stellen Sie sicher, dass Sie die CSS richtig an der richtigen Stelle kopieren und einfügen!

2 „Gefällt mir“
10

Vielen Dank für die spezifische Hilfe. Ich bin gerade nicht an meinem Computer, werde es aber ausprobieren, sobald ich zurück bin.

1 „Gefällt mir“
11

Ich bin mir nicht sicher, was ich davon halten soll, es funktioniert definitiv nicht für mich.

image
image1891×614 112 KB

Nur zur Bestätigung, verwenden Sie auch Sam’s Simple Theme?

Haben Sie den Handlebars-Code auch in Head oder Header eingefügt?

Ich schätze Ihre Zeit und Hilfe wirklich.

12

Ja, ich benutze Sams Theme.

Ich habe eine Theme-Komponente erstellt, um die CSS und das Skript dort unterzubringen, angehängt an Sams Theme.

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='Teilnehmer'}}
      {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Antworten'}}
      {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Letzter Beitrag'}}
    </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 „Gefällt mir“
13

Vielen Dank nochmals für die Hilfe. Es verhält sich genauso, es gibt eine Teilnehmer-Spaltenüberschrift in /latest, die die Spalten mit den Spalten der Themenliste falsch ausrichtet. Ich muss einige andere Anpassungen in anderen Komponenten haben, die sich überschneiden.

Gibt es potenzielle Probleme oder Nachteile bei dieser CSS-Lösung?

14

Da ich sehe, dass Sie Firefox verwenden, könnte dies der Grund sein, warum der :has-Selektor auf Ihrer Seite nicht funktioniert. Er wird erst ab Firefox 121 unterstützt.

4 „Gefällt mir“
15

Das würde es erklären! Und es funktionierte in Chromium, aber ich ging davon aus, dass das daran lag, dass ich dort nicht als Administrator angemeldet war. Ich benutze Firefox 115 ESR von Debian 12. Vielen Dank, ich wurde damit verrückt. :wink:

2 „Gefällt mir“
16

Wirklich. Das wusste ich nicht, und ehrlich gesagt ist es ziemlich enttäuschend :sweat_smile:. Ich werde das nächste Mal definitiv öfter unter Firefox testen. Danke für das Feedback!

4 „Gefällt mir“
17

Es gibt eine zusätzliche CSS-Verbesserung, die ich gerne implementieren würde, um dies nützlicher zu machen: Auf breiteren Browserfenstern werden nun wie erwartet die PM-Teilnehmer angezeigt:

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

Aber auf schmaleren Fenstern wird die Anzahl der Teilnehmer-Avatare auf nur einen reduziert, sodass wir wieder mit demselben Problem konfrontiert sind, das im ersten Beitrag dieses Themas beschrieben wurde:

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

Gibt es eine Möglichkeit, dies per CSS zu beheben, sodass auf schmaleren Fenstern die Spalte Antworten ausgeblendet wird und der Avatar in der Spalte Letzter Beitrag ausgeblendet wird, wodurch mehr Platz für die Spalte Teilnehmer bleibt?

18

Können Sie dieses CSS ausprobieren?

@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 „Gefällt mir“
19

Vielen Dank! Fast perfekt, außer dass bei Breiten zwischen etwa 1380px und 1020px immer noch alle Spalten angezeigt werden und die Teilnehmer-Avatare auf nur einen reduziert werden. Schmaler als das funktioniert großartig.

20

Ersetze medium durch extra-large in breakpoint(). Es sollte nun ab <= 1140px beginnen. Das ursprüngliche Verhalten, das die Avatare des Teilnehmers ausblendet, tritt tatsächlich bei diesem Breakpoint auf. Funktioniert es?

1 „Gefällt mir“