Tema diferente para a lista de tópicos de mensagens pessoais?

[rahim123]

Olá, existe alguma maneira de usar um tema diferente apenas para a lista de tópicos de mensagens pessoais? Atualmente estou usando o tema Sam’s Sam's Simple Theme que eu e minha comunidade preferimos fortemente para a lista de /latest, pois ele exibe os nomes de usuário do OP e do postador mais recente em texto, e elimina a desordem da lista de avatares dos postadores frequentes que ninguém se importa. Infelizmente, o mesmo paradigma falha para a lista de /my/messages, especialmente quando o criador do tópico de PM é o mesmo que o postador mais recente:

Portanto, no caso de /my/messages, idealmente eu gostaria apenas de injetar a coluna td.posters.topic-list-data do tema Discourse padrão nesta visualização. Mas se isso for muito trabalho, seria bom ter a opção de alternar para o tema Discourse padrão para a visualização de PM.

Existem outros temas personalizados que têm o mesmo problema, como o Kris’s Minima Theme.

[Don]

Olá

É possível substituir o tema, então você terá que criar um fork dele primeiro ou criar uma solicitação para o tema. No modelo personalizado, você pode usar o seguinte para alterar apenas os itens da lista de tópicos de mensagens privadas.

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

Ocultar algo no item da lista de tópicos de mensagens privadas.

{{#unless topic.isPrivateMessage}}
...
{{/unless}}

[rahim123]

Muito obrigado, consegui fazer funcionar quase tudo com um componente de tema:

[rahim123]

@rahim123

Parece que a instrução #if topic.isPrivateMessage não funciona para o topic-list-header,

Então, minha solução preguiçosa é não usar a lógica {{#if topic.isPrivateMessage}} e simplesmente colocar posters.topic-list-data em /latest e em /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>

Mas meus usuários não gostam da poluição visual em /latest, então estou escondendo-a lá via CSS:

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

Se alguém tiver alguma dica para implementar a lógica na substituição do handlebars, eu ainda preferiria isso, em vez de desperdiçar ciclos de CPU gerando posters.topic-list-data e depois escondendo-o.

[Arkshine]

Você está certo; os dados do tópico não estão disponíveis no cabeçalho, o que faz sentido!

CSS pode ser uma solução. Mantenha a condição em topic-list-item e renderize-a por padrão para o cabeçalho.

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

E com CSS, você pode dizer: “Selecione a lista que não tem (não tem) as linhas de pôsteres e oculte-a”

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

Funciona para você?

[rahim123]

Olá, obrigado, é uma ótima ideia. Algo não funcionou com o CSS como sugerido, pois ele ainda mostra a coluna vazia Participantes em /latest, mas meu CSS original parece funcionar bem para ocultá-la apenas lá:

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

Alguma desvantagem nisso?

[Arkshine]

Estou confuso, funciona para mim

Último:

Mensagem:

[rahim123]

Hmm, será que é porque você não tem a condição em topic-list-item?

[Arkshine]

Eu tenho a condição. Caso contrário, você não veria a coluna de participantes na lista de mensagens das minhas capturas de tela!

Acho que o que você descreveu acima é que o CSS não está sendo aplicado.
Aqui está o que eu tenho:

Você pode ver que o CSS está aplicado na página /latest.

Certifique-se de copiar e colar o CSS corretamente no lugar certo!

[rahim123]

Muito obrigado pela ajuda específica, não estou no meu computador agora, mas tentarei novamente assim que voltar.

[rahim123]

Não tenho certeza do que pensar, definitivamente não está funcionando para mim.

Só para confirmar, você também está usando o Sam’s Simple Theme?

Além disso, você colocou o código do handlebars em Head ou Header?

Realmente aprecio seu tempo e ajuda.

[Arkshine]

Sim, estou usando o tema do Sam.

Criei um componente de tema para colocar o CSS e o script lá, anexado ao tema do 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='Participantes'}}
      {{raw "topic-list-header-column" sortable='true' number='true' order='posts' forceName='Respostas'}}
      {{raw "topic-list-header-column" sortable='true' order='activity' forceName='Última Postagem'}}
    </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>

[rahim123]

Obrigado novamente pela ajuda. Está se comportando da mesma forma, há um cabeçalho de coluna Participantes em /latest que faz com que as colunas fiquem desalinhadas com as colunas da lista de tópicos. Devo ter outras personalizações em outros componentes que estão em conflito.

@rahim123

meu CSS original parece funcionar bem para escondê-lo em Latest:

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

Existem problemas ou desvantagens potenciais com esta solução CSS?

[Don]

Como vejo que você está usando o Firefox, isso pode fazer com que o seletor :has não funcione do seu lado. Ele só é suportado a partir do Firefox 121.

"has" | Can I use... Support tables for HTML5, CSS3, etc

[rahim123]

@Don

Como vejo que você está usando o Firefox, isso pode causar o seletor has não funcionar do seu lado. Ele só é suportado a partir do Firefox 121.

"has" | Can I use... Support tables for HTML5, CSS3, etc

Isso explicaria! E estava funcionando no Chromium, mas presumi que era porque eu não estava logado lá como administrador. Estou usando o Firefox 115 ESR do Debian 12. Muito obrigado, eu estava ficando louco com isso.

[Arkshine]

Ah, sério. Eu não sabia, e é bem decepcionante para ser honesto . Definitivamente testarei mais vezes no Firefox da próxima vez. Obrigado pelo feedback!

[rahim123]

Há uma melhoria adicional de CSS que eu gostaria de implementar para tornar isso mais útil: Em janelas de navegador mais largas, agora ele mostra os participantes do PM como esperado:

Mas em janelas mais estreitas, ele reduz o número de avatares de participantes para apenas um, então acabamos com o mesmo problema descrito na primeira postagem deste tópico:

Existe uma maneira de corrigir isso via CSS para que, em janelas mais estreitas, ele oculte a coluna Replies e oculte o avatar na coluna Last Post, deixando assim mais espaço para a coluna Participants?

[Arkshine]

@rahim123

Existe uma forma de corrigir isto via CSS para que em janelas mais estreitas ele oculte a coluna Respostas e oculte o avatar na coluna Última Publicação, deixando assim mais espaço para a coluna Participantes?

Você pode tentar este 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;
      }
    }
  }
}

[rahim123]

Obrigado! Quase perfeito, exceto que com larguras entre aproximadamente 1380px - 1020px, ele ainda mostra todas as colunas e reduz os avatares dos participantes a apenas um. Mais estreito que isso funciona bem.

[Arkshine]

Substitua medium por extra-large em breakpoint(). Agora deve começar a partir de \u003c= 1140px. O comportamento original que oculta os avatares do participante acontece neste breakpoint, na verdade. Funciona?