Topic List Previews Theme Component

Theme component
530

Well, it looks like that Component has yet to be updated for Glimmer Topic Lists in any case:

2 Likes
531

I use so rarely a phone, but Iā€™m quite sure this is part of this conversation. I upgraded quite late yesterday and users started complain. And I took your fix few minutes ago. The theme is Discourse default.

The image is a screenshot of an Alpha News article featuring an emoji, highlighting the potential spread of COVID-19 through touchscreens at meit stores. (Captioned by AI)
The image is a screenshot of an Alpha News article featuring an emoji, highlighting the potential spread of COVID-19 through touchscreens at meit stores. (Captioned by AI)1290Ɨ756 143 KB

I checked here and Iā€™m almost sure latest avatar wasnā€™t in use here either.

It just not look nice. But It isnā€™t just yours issue, both of similar components are now showing both avatar and thumbnail. Sure, I know how to hide avatars, so it is easy solution.

Honestly, I donā€™t know if here is not anything more than (my) matter of taste. But something has changed, otherwise my users wouldnā€™t start asking. Iā€™m a bit early now, because up here it is just 6 oā€™clock and I havenā€™t yet got any confirmations what is actually off.

532

This is not intended and imho it looks terrible, but I cannot reproduce.

As per my screenshot this isnā€™t happening on my instances.

Please make sure there are no other components active that influence the topic list presentation. This is now an API and other components can interfere if active. Then see if it persists. Then share your settings if it does.

533

And btw, this theme component was never designed to be compatible with any other component that influences the Topic list so feel free to experiment combinations but there is no guarantee.

534

Of course I forgot to tell this, but I tried it right away as the only component. Because I trust you are on latest Discourse, I have to ask do you think is there a chance it comes from some plugin?

535

It might be an edge case Iā€™ve missed. Can you share the html of one topic list item (the whole row)?

Or PM me the web link

536

This much?

html snippet 
<tr data-creator-name="Jagster" id="ember42" class="topic-list-item category-chattifoorumi tag-meemit has-excerpt liked visited ember-view">
<div class="hidden">
<div class="hidden">
<td class="topic-list-data">
<div class="pull-left">
<a href="/t/meemit-ja-muut-tuplavitsit/1263/549" aria-label="KƤyttƤjƤn Jagster profiili, viimeisin kirjoittaja" data-user-card="Jagster">
<img alt width="48" height="48" src="/user_avatar/foorumi.katiska.eu/jagster/96/6057_2.png" class="avatar" title="Jagster">
</a>
</div>
<div class="topic-item-metadata right">
<span id="_render_glimmer_25" class="hbr-ember-outlet">
<div class="topic-thumbnail">
<a>
<img class="thumbnail non-tiles-thumbnail" src="https://cdnfoorumi.katiska.eu/optimized/2X/b/b5fdeed33ad48a86cc12ecb1fb0acfc55f62247c_2_536x800.jpeg" loading="lazy">
</a>
</div>
</span>
<div class="main-link">

Oh godā€¦ that looks bad. Hard to read.

Well, url is public anyway and I donā€™t think a full Finnish forum wakes any interest ā€” and in the case someone sees a link as spam, editing it afterward is easy.

https://foorumi.katiska.eu (letā€™s not wake automatic systems) and scroll some lines. You find it. And if you want cleaner view, theme test is a good option.

1 Like
537

Perfect.

The line with the issue is this:

<tr data-creator-name="Jagster" id="ember42" class="topic-list-item category-chattifoorumi tag-meemit has-excerpt liked visited ember-view">

that class should contain has-thumbnail for the CSS to hide the avatar ā€¦

let me double check this assignment is working on the very latest discourse.

1 Like
538

Basically it does same, but shorter and conditionally, what I used for mobiles?

.topic-list td div.pull-left a {
    display: none;
}
.topic-list td div.right {
    margin-left: 0px;
}
539

Yes:

541

Still cannot reproduce your issue on very latest commit, neither in Latest at home nor in a Category. :frowning:

Make sure Glimmer Topic List setting is Enabled, not Auto?

542

It is on auto :flushed: Iā€™ll change it.

edit

o damn ā€” it was that.

So auto, that includes enabled, is not same as enabled. Is there some mechanism that need explicity tell glimmer is ok, unless it falls back to old system?

2 Likes
543

Thatā€™s very useful info.

And surprising! At least my setup instructions were correct :slight_smile:

Iā€™ll check with David.

1 Like
544

For now, thereā€™s this:

I believe it thinks something is not compatible, so it falls back to old system.

2 Likes
545

Yup exactly. ā€œAutoā€ will be the same as ā€œenabledā€ if all your installed themes and plugins are compatible with the upgrades.

If theyā€™re not compatible, then it will act like ā€œdisabledā€, and a message will be printed to the browser console explaining which theme/plugin needs to be upgraded.

For our official themes/plugins, weā€™ve made them compatible with both old and new topic-list implementations simultaneously, so that people can upgrade other themes and plugins one-by-one without needing to worry about the site setting. The implementation switch will then happen automatically once the last theme/plugin is ready.

But, ensuring that backwards-compatibility is a lot more work, especially for complex cases. So I can see why itā€™s been skipped for topic-list-previews :+1:

One thing you could do here @robert is add a clear error for people? Something like

import { withSilencedDeprecations } from "discourse/lib/deprecated";

...

withSilencedDeprecations("discourse.hbr-topic-list-overrides", () => {
    api.modifyClass("component:topic-list", {
      init(){
        alert("topic-list-previews cannot be run alongside other themes/plugins which are incompatible with the glimmer topic list. See https://meta.discourse.org/t/209973/521 for details");
        return this._super(...arguments);
      }
    });
  });

That will modify the old topic list to pop an error if itā€™s rendered while topic-list-previews is running.

4 Likes
546

Extremely useful, thanks, Iā€™ll add.

Yes, I have to be rational about how much time I spend :sweat_smile: so backwards compatibility was dropped.

However, the update is pinned, so a half-way house.

2 Likes
547

Thanks David, I used this one of my theme component. But before I found this in solved plugin repo I used the site.useGlimmerTopicList which seems worked too. Is that also a good option? I used this in initializers and template.

1 Like
548

Itā€™s fine for now, but itā€™ll be removed (i.e. become undefined) once the glimmer topic list is the only option. So make sure you use it like

if(!site.useGlimmerTopicList){
  // do old stuff
}

and not

if(site.useGlimmerTopicList){
  // do new stuff
}
3 Likes
549

btw, added:

very much appreciated.

@Jagster if you have time could you please update, set to Auto and check if this pops up?

2 Likes
550

btw, @david FYI, also needed eslint suppression I think? (and pluginId)

1 Like