Lista de temas MD Componente móvil

[Steven]

Es factible

No sé si pondría esto en la configuración predeterminada, pero si quieres probarlo, aquí tienes el código para añadir en la sección header

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

Para mi pantalla, usé esto:

<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>
        {{!--
          La sintaxis `~` elimina los espacios entre los elementos, produciendo
          `<a class=topic-post-badges>Some text</a><span class=topic-post-badges>`
          sin espacio entre ellos.
          Esto hace que el topic-post-badge se considere la misma palabra que "text"
          al final del enlace, impidiendo que se divida en su propia línea.
        --}}
        {{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)]

El ojo no se muestra. Añadí el script que publicaste a un nuevo complemento de componente temático en tu tema principal.

[Steven]

Para algunos iconos, necesitas registrar el carácter de Font Awesome que va con él.

Comprueba el ajuste svg icon subset y añade fa-eye

[Heliosurge (Dan DeMontmorency)]

Gracias, eso lo solucionó. Pensé que lo había agregado pero debo haber olvidado confirmar el cambio.

[Heliosurge (Dan DeMontmorency)]

Todo funciona bien en Stable. Pero test passed parece no mostrar vistas ni me gusta. Incluso en la vista previa para asegurar que otros componentes no interfieren con cosas como Air Theme. Tu componente base funciona como se esperaba. La extensión no muestra vistas ni me gusta.

[satonotdead]

Lo siento, pero ¿qué significa el icono rojo? ¿Es como una etiqueta o algo así?

¿Podemos usar el icono de Font Awesome en su lugar, para mantener la armonía con el resto del foro?

¡Gracias por compartir!

[Steven]

Tuve algunos problemas con la etiqueta d-icon en caso de que no hubiera etiquetas.

He probado una nueva solución ahora, he enviado una actualización, para usar el icono de font-awesome en lugar de un emoji, házmelo saber si funciona bien.

editar: revertido, funciona en el escritorio pero no en el móvil.

Si quieres probarlo, este es el css que puedes 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]

Hola, la opción de selección masiva en el móvil no funciona cuando este componente temático está habilitado.

[Steven]

Gracias, he implementado una actualización

Ahora deberías tener la casilla de verificación junto al título del tema

[digitaldominica]

Gracias, el problema se ha resuelto para mí.

[Steven]

No veo una forma de hacerlo funcionar con la nueva lista de temas de Glimmer.

Creo que este componente temático será abandonado. Por ahora, podemos etiquetarlo como deprecated.

Puede que intente algo nuevo utilizando solo Plugin Outlets, pero definitivamente no tendrá el mismo aspecto.

[CAX.DO (Max)]

Este es, de hecho, un componente muy útil, especialmente su apariencia, que permite al foro mostrar más contenido. Es una verdadera lástima que no sea utilizable en el futuro.

[Canapin (Coin-coin le Canapin)]

Soy un gran admirador de este componente, ya que considero que la vista móvil predeterminada es inferior (el avatar del último publicador a la izquierda es lo más extraño). Sería una pena abandonarlo, desafortunadamente no sé programar, y tampoco lo sabe ChatGPT para este asunto

[Arkshine]

¡Lo intentaré!

[Arkshine]

Hice un PR

DEV: Modernize using plugin outlet

[Steven]

¡Gran trabajo!

Aún no he tenido la oportunidad de probarlo, ¿lograste incluir también la insignia del tema (publicaciones no leídas)? Hice algunas pruebas y la insignia del tema junto al título del tema no fue tan fácil de añadir.

Pero no estoy ni cerca de tu nivel.

[Arkshine]

@Steven ¡No probé! Con las modificaciones actuales, no reemplaza nada, por lo que puedes esperar que se muestre (pero quizás no en el lugar esperado).

EDITAR:
Así es como se ve:

La vista original sin el componente se ve así:

¿Todavía quieres reemplazar el avatar o está bien como está?
Déjame ver si puedo reemplazar el avatar.

EDITAR2:

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

[Steven]

¡Gracias @Arskshine por el trabajo que hiciste!

Trabajé un poco en el componente, tengo una propuesta para todos ustedes.

Esta es la vista actual:

Trabajé en una alternativa que restaura el extracto y mueve la insignia del tema al lado del título (disculpen que la captura de pantalla esté en francés, pero el diseño es la parte más importante)

¿Qué quieren para la versión oficial?

[CAX.DO (Max)]

Hola @Steven @Arkshine
Muchas gracias por tu trabajo.

Tengo otro asunto: las dos imágenes a continuación son capturas de pantalla de la Nueva versión y la Versión antigua, respectivamente. Como puedes ver, el ancho de los títulos de los artículos difiere entre las dos versiones, lo que es evidente por los saltos de línea (lo siento, los títulos están en chino, pero lo que importa es la posición de los saltos de línea).

¿Es posible aumentar la longitud de los títulos en la nueva versión? Uno de los propósitos de usar este componente es mostrar más información.

No sé programar, así que mi descripción podría no ser muy profesional.

[CAX.DO (Max)]

Intenté agregar este fragmento de CSS y funcionó.

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