Thème différent pour la liste des sujets des messages privés ?

Salut, y a-t-il un moyen d’utiliser un thème différent juste pour la liste des sujets de messages personnels ? J’utilise actuellement le thème de Sam Sam's Simple Theme que ma communauté et moi préférons fortement pour la liste /latest, car il affiche les noms d’utilisateur de l’OP et du dernier intervenant en texte, et il élimine l’encombrement de la liste des avatars des intervenants fréquents dont personne ne se soucie. Malheureusement, le même paradigme échoue pour la liste /my/messages, surtout lorsque le créateur du sujet de MP est le même que le dernier intervenant :

image

Donc, dans le cas de /my/messages, j’aimerais idéalement simplement injecter la colonne td.posters.topic-list-data du thème Discourse par défaut dans cette vue. Mais si cela demande trop de travail, ce serait bien d’avoir la possibilité de passer d’une manière ou d’une autre au thème Discourse par défaut pour la vue MP.

Il existe d’autres thèmes personnalisés qui ont le même problème, comme celui de Kris Minima Theme.

Bonjour :wave:

C’est possible en remplaçant le thème, vous devrez donc d’abord le forker ou créer une demande auprès du thème. Dans le modèle personnalisé, vous pouvez utiliser ce qui suit pour modifier uniquement les éléments de la liste des sujets de messagerie privée.

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

Masquer quelque chose dans l’élément de la liste des sujets de messagerie privée.

{{#unless topic.isPrivateMessage}}
...
{{/unless}}
3 « J'aime »

Merci beaucoup, j’ai réussi à le faire fonctionner presque entièrement avec un composant de thème :


    
    
      
        
          
        
      
      
      
        
      
      
        
      
      
        
      
      
      
      
    
    
      
        
          
        
      
    
    
      
      
      
      
      
      
      
      
        
          
            
          
        
        
          
            
          
        
        
          
            
          
        
      
      
        
          
            
            
          
        
      
      
        
          
            
            
          
        
      
      
        
          
            
            
          
        
      
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
    
      
        
          
            
            
          
        
      
    
  

Il semble que l’instruction #if topic.isPrivateMessage ne fonctionne pas pour l’en-tête de la liste des sujets, j’ai donc les avatars des participants aux messages privés qui s’affichent comme prévu, mais il manque une <td> dans les en-têtes, ce qui décale tout.

Ma solution de paresse est donc de ne pas utiliser la logique {{#if topic.isPrivateMessage}} et de simplement placer posters.topic-list-data à la fois dans /latest et dans /my/messages.

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

Mais mes utilisateurs n’aiment pas le désordre visuel dans /latest, je le cache donc là-bas via CSS :

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

Si quelqu’un a des astuces pour implémenter la logique dans la surcharge handlebars, je préférerais toujours cela, plutôt que de gaspiller des cycles CPU à générer posters.topic-list-data puis à le cacher.

Vous avez raison ; les données du sujet ne sont pas disponibles dans l’en-tête, ce qui est logique !

Le CSS peut être une solution. Conservez la condition dans topic-list-item et affichez-la par défaut pour l’en-tête.

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

Et avec le CSS, vous pouvez dire : « Sélectionnez la liste qui n’a pas (pas a) les lignes de posters et masquez-la »

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

Est-ce que cela fonctionne pour vous ?

1 « J'aime »

Salut, merci beaucoup, c’est une très bonne idée. Quelque chose n’a pas fonctionné avec le CSS comme suggéré car il affiche toujours la colonne vide Participants dans /latest, mais mon CSS d’origine semble bien fonctionner pour la masquer uniquement là :

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

Des inconvénients à cela ?

Je suis confus, ça marche pour moi :thinking:

Dernière version :

Message :

Hmm, serait-ce parce que vous n’avez pas la condition dans topic-list-item ?

J’ai bien la condition. Sinon, vous ne verriez pas la colonne des participants dans la liste des messages sur mes captures d’écran !

Je pense que ce que vous avez décrit ci-dessus est le CSS qui n’est pas appliqué.
Voici ce que j’ai :

Vous pouvez voir que le CSS est appliqué sur la page /latest.

Assurez-vous de copier-coller correctement le CSS au bon endroit !

2 « J'aime »

Merci beaucoup pour votre aide spécifique, je ne suis pas à mon ordinateur pour le moment mais j’essaierai à nouveau dès que je serai de retour.

1 « J'aime »

Je ne sais pas quoi penser, ça ne fonctionne vraiment pas pour moi.

Juste pour confirmer, utilisez-vous également le thème simple de Sam ?

De plus, avez-vous mis le code handlebars dans Head ou Header ?

J’apprécie vraiment votre temps et votre aide.

Oui, j’utilise le thème de Sam.

J’ai créé un composant de thème pour y placer le CSS et le script, attaché au thème de Sam.

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='Participants'}}
      {{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'>
    {{#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 « J'aime »

Merci encore pour votre aide. Il se comporte de la même manière, il y a un en-tête de colonne Participants dans /latest qui désaligne les colonnes avec les colonnes de la liste des sujets. Je dois avoir d’autres personnalisations dans d’autres composants qui entrent en conflit.

Y a-t-il des problèmes potentiels ou des inconvénients avec cette solution CSS ?

Comme je vois que vous utilisez Firefox, il est possible que le sélecteur :has ne fonctionne pas de votre côté. Il n’est pris en charge qu’à partir de Firefox 121.

4 « J'aime »

Cela expliquerait ! Et cela fonctionnait dans Chromium, mais j’avais supposé que c’était parce que je n’y étais pas connecté en tant qu’administrateur. J’utilise Firefox 115 ESR de Debian 12. Merci beaucoup, je devenais fou avec ça. :wink:

2 « J'aime »

Ah bon. Je ne le savais pas, et c’est assez décevant pour être honnête :sweat_smile:. Je testerai définitivement plus souvent sur Firefox la prochaine fois. Merci pour ce retour !

4 « J'aime »

Il y a une amélioration CSS supplémentaire que j’aimerais mettre en œuvre pour la rendre plus utile : sur des fenêtres de navigateur plus larges, elle affiche maintenant les participants PM comme prévu :

Mais sur des fenêtres plus étroites, elle réduit le nombre d’avatars de participants à un seul, nous nous retrouvons donc avec le même problème que celui décrit dans le premier message de ce sujet :

Existe-t-il un moyen de résoudre ce problème via CSS afin que sur des fenêtres plus étroites, la colonne Replies soit masquée et l’avatar dans la colonne Last Post soit masqué, laissant ainsi plus d’espace pour la colonne Participants ?

Pouvez-vous essayer ce 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 « J'aime »

Merci ! Presque parfait, sauf qu’avec des largeurs comprises entre environ 1380 px et 1020 px, toutes les colonnes sont toujours affichées et les avatars des participants sont réduits à un seul. Moins étroit que cela fonctionne très bien.

Remplacez medium par extra-large dans breakpoint(). Il devrait maintenant commencer à partir de <= 1140px. Le comportement d’origine qui masque les avatars des participants se produit en fait à ce point d’arrêt. Est-ce que cela fonctionne ?

1 « J'aime »