Lista de tópicos MD Componente móvel

[Steven]

É possível

Não sei se colocaria isso nas configurações padrão, mas se você quiser tentar, aqui está o código para adicionar na seção header

{{d-icon \"eye\"}} {{number topic.views numberKey=\"views_long\"}}
e
{{#if hasLikes}}{{d-icon \"heart\"}} <a>{{number topic.like_count}}</a>{{/if}}

Para a minha tela, usei isto:

<script type='text/x-handlebars' data-template-name='mobile/list/topic-list-item.hbr'>
<td class="topic-list-data">
  {{raw-plugin-outlet name="topic-list-before-columns"}}
  <div class='right'>
    <div>
        {{!--
          A sintaxe `~` remove espaços entre os elementos, produzindo
          `<a> class=topic-post-badgesAlgum texto</a><span class=topic-post-badges>` ,
          sem espaço entre eles.
          Isso faz com que o topic-post-badge seja considerado a mesma palavra que "texto"
          no final do link, impedindo que ele quebre a linha em sua própria linha.
        --}}
        {{raw-plugin-outlet name="topic-list-before-link"}}
        <div class='main-link'>
          {{raw-plugin-outlet name="topic-list-before-status"}}
          {{raw "topic-status" topic=topic}}
          {{topic-link topic class="raw-link raw-topic-link"}}
          {{#if topic.featured_link }}
          {{topic-featured-link topic}}
          {{/if}}
          {{raw-plugin-outlet name="topic-list-after-title"}}
          {{#if showTopicPostBadges}}
		    {{raw "topic-post-badges" unread=topic.unread newPosts=topic.displayNewPosts unseen=topic.unseen url=topic.lastUnreadUrl newDotText=newDotText}}
		  {{/if}}
          {{#if expandPinned }}
          {{raw "list/topic-excerpt" topic=topic}}
          {{/if}}
        </div>
        <div class="topic-item-stats clearfix">
          {{#if hideCategory }}
            <span class="topic-creator">
              {{d-icon "user"}} <a href="/users/{{topic.creator.username}}" data-auto-route="true" data-user-card="{{topic.creator.username}}">{{topic.creator.username}}</a>
            </span>
            {{else}}
            {{raw-plugin-outlet name="topic-list-before-category"}}
            <div class='category'>
              {{category-link topic.category}}
            </div>
          {{/if}}
          <span class="comments">
            {{d-icon "eye"}} {{number topic.views numberKey="views_long"}} &nbsp; {{d-icon "far-comment"}} <a href="{{topic.firstPostUrl}}">{{number topic.replyCount noTitle="true"}}</a> &nbsp; {{#if hasLikes}}{{d-icon "heart"}} <a href='{{topic.summaryUrl}}'>{{number topic.like_count}}</a>{{/if}}
          </span>
          {{discourse-tags topic mode="list"}}
        </div>
      </div>
      <div class="clearfix"></div>
    </div>
    <div class="pull-right">
      <div class="last-post-avatar">
        <a href="{{topic.lastPostUrl}}" data-user-card="{{topic.lastPosterUser.username}}">{{avatar topic.lastPosterUser imageSize="small"}}</a>
      </div>
      <div class='num activity last'>
        <span class="age activity" title="{{topic.bumpedAtTitle}}">
          <a href="{{topic.lastPostUrl}}">{{format-date topic.bumpedAt format="tiny" noTitle="true"}}</a></span>
      </div>
    </div>
</td>
</script>

[Heliosurge (Dan DeMontmorency)]

O olho não está aparecendo. Adicionei o script que você postou a um novo add-on de extensão de componente temático ao seu tema principal.

[Steven]

Para alguns ícones, você precisa registrar o caractere do Font Awesome que o acompanha.

Verifique a configuração svg icon subset e adicione fa-eye.

[Heliosurge (Dan DeMontmorency)]

Obrigado, isso corrigiu. Pensei que tinha adicionado, mas devo ter esquecido de confirmar a alteração.

[Heliosurge (Dan DeMontmorency)]

Tudo funciona bem no Stable. Mas o test passed parece não exibir visualizações ou curtidas. Mesmo na pré-visualização, para garantir que outros componentes não estejam interferindo com coisas como o Air Theme. Seu componente base funciona como pretendido. A extensão não mostra visualizações ou curtidas.

[satonotdead]

Desculpe, mas o que o ícone vermelho significa? É como uma tag ou algo assim?

Podemos usar o ícone do Font Awesome em vez disso, para manter a harmonia com o resto do fórum?

Obrigado por compartilhar!

[Steven]

Tive alguns problemas com a tag d-icon caso não houvesse tags.

Tentei uma nova solução agora, fiz um push de uma atualização, para usar o ícone font-awesome em vez de um emoji, me avisem se funcionar bem.

editar: revertido, funciona no desktop, mas não no mobile.

Se quiser experimentar, este é o CSS que você pode usar:

.topic-list .topic-item-stats .discourse-tags::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f02b";
  margin-left: 5px;
  margin-right: 2px;
}

[digitaldominica]

Olá, a opção de seleção em massa no celular não funciona quando este componente de tema está habilitado.

[Steven]

Obrigado, enviei uma atualização

Agora você deve ter a caixa de seleção ao lado do título do tópico

[digitaldominica]

Obrigado, o problema foi resolvido para mim.

[Steven]

Não vejo uma forma de fazer funcionar com a nova lista de tópicos do Glimmer.

Acho que este componente de tema será abandonado. Por enquanto, podemos marcá-lo como deprecated.

Posso tentar algo novo usando apenas Plugin Outlets, mas definitivamente não terá o mesmo visual.

[CAX.DO (Max)]

Este é realmente um componente muito útil, especialmente sua aparência, que permite ao fórum exibir mais conteúdo. É uma pena que não será utilizável no futuro.

[Canapin (Coin-coin le Canapin)]

Sou um grande fã deste componente, pois acho a visualização padrão para dispositivos móveis insatisfatória (o avatar do último post à esquerda é a coisa mais estranha). Seria uma pena abandoná-lo, infelizmente não sei programar, e o ChatGPT também não

[Arkshine]

Vou tentar!

[Arkshine]

Fiz um PR

DEV: Modernize using plugin outlet

[Steven]

Ótimo trabalho!

Ainda não tive a chance de testar, mas você conseguiu adicionar o selo de tópico (posts não lidos) também? Fiz alguns testes e o selo de tópico ao lado do título do tópico não foi tão fácil de adicionar.

Mas não estou nem perto do seu nível.

[Arkshine]

@Steven Não testei! Com as modificações atuais, ele não substitui nada, então você pode esperar que ele seja exibido (mas talvez não no lugar esperado).

EDIT:

Veja como fica:

A visualização original sem o componente fica assim:

Você ainda quer substituir o avatar ou está tudo bem como está?
Deixe-me ver se consigo substituir o avatar.

EDIT2:

DEV: Show topic post badges in place of the avatar when available

[Steven]

Obrigado @Arskshine pelo trabalho que você fez!

Trabalhei um pouco no componente, tenho uma proposta para todos vocês.

Esta é a visualização atual:

Trabalhei em uma alternativa que restaura o trecho e move o selo do tópico para perto do título (desculpe, a captura de tela está em francês, mas o design é a parte mais importante)

O que vocês querem para a versão oficial?

[CAX.DO (Max)]

Olá @Steven @Arkshine
Muito obrigado pelo seu trabalho.

Tenho outra questão: as duas imagens abaixo são capturas de tela da Nova versão e da Versão Antiga, respectivamente. Como podem ver, a largura dos títulos dos artigos difere entre as duas versões, o que é evidente pelas quebras de linha (desculpem, os títulos estão em chinês, mas o que importa é a posição das quebras de linha).

É possível aumentar o comprimento dos títulos na nova versão? Um dos propósitos de usar este componente é exibir mais informações.

Não sei codificar, então minha descrição pode não ser muito profissional.

[CAX.DO (Max)]

Tentei adicionar este trecho de CSS, e funcionou.

td .main-link {
    width: 100%;
    display: inline-block;
}