Разделение закрепленных тем

[Terise]

Привет!

Я не совсем уверен, как это сделать, и ищу небольшую помощь.

По сути, я хотел бы добавить визуальное разделение между закрепленными темами и обычными. Это будет для форумов сообщества игровой студии, и такое разделение было бы полезно для пользователей.

Я ищу что-то вроде этого:

[ЗАКРЕПЛЕНО] Название темы

Обычная тема

Вместо:

[ЗАКРЕПЛЕНО] Название темы
Обычная тема

Я уже изменил цвет фона закрепленных тем, чтобы создать небольшую разницу между ними. Я пробовал использовать CSS, и это сработало, но только после обновления страницы.

Я попытался создать свой собственный компонент темы, но именно здесь я застрял, так как мне нужно что-то добавить, но я не уверен, куда именно.

Моя цель — добавить перед оригинальным (обычными темами) tbody.

Любые советы будут очень кстати!

[Alteras (Steven Chang)]

Вы можете использовать компонент темы Filtered Topic Lists с запросом in:pinned.

Если же вы предпочитаете оставаться в рамках CSS, можно сделать так:

// выбираем последнюю закреплённую запись в списке
tr.topic-list-item.pinned:has(+ tr:not(.pinned)) td {
  // грубый способ добавить отступ внутри строки таблицы
  padding-bottom: 1.8em;
}

tr.topic-list-item.pinned:has(+ tr:not(.pinned))::after {
  // содержимое, которое нужно отобразить в пространстве, если требуется
  content: 'regular';
  width: 100%;
  position: absolute;
  display: flex;
  height: 1em;
  left: 0;
  right: 0;
  bottom: 0;
  justify-content: center;
  border-top: 1px solid var(--primary-low);
}

[Terise]

Спасибо за помощь! К сожалению, это не сработало. У меня есть попытка создания плагина, который должен выполнять то, что мне нужно, но я не могу заставить его работать на Discourse 3.4.0-beta2.

GitHub - darkpsy3934/discourse-mistflux-plugin

Любая помощь по этому вопросу будет очень признательна!

[Arkshine]

Привет, Териз,

Я посмотрел твой код, и ты уже близко к решению!

Вот несколько замечаний:

• Ты можешь изменить это с помощью компонента темы (не плагина). Я рекомендую использовать этот шаблон: GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub

• Использование коннектора — верный подход. Правильный путь: /discourse/connectors/…
  

  

• Аргументы, передаваемые в коннектор, можно получить через outletArgs. Вот пример коннектора:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/components/topic-list/list.gjs#L126-L136

Это означает, что код должен выглядеть так:

export default class PinnedTopicBody extends Component {
  get pinnedTopics() {
    return this.outletArgs.topics.filter((t) => t.get("pinned"));
  }
}

а шаблон:

{{#if this.pinnedTopics}}
  <tbody class="pinned-topics">
    {{#each this.pinnedTopics as |topic|}}
      <TopicListItem
        @topic={{topic}}
        @bulkSelectEnabled={{@outletArgs.bulkSelectEnabled}}
        @lastVisitedTopic={{@outletArgs.lastVisitedTopic}}
        @selected={{@outletArgs.selected}}
        @hideCategory={{@outletArgs.hideCategory}}
        @showPosters={{true}}
      />
    {{/each}}
    <tr class="table-break">
      <td colspan="10">&nbsp;</td>
    </tr>
  </tbody>
{{/if}}

• Примечание: К сожалению, showPosters не передаётся как аргумент; здесь его значение нужно прописать явно.

• Примечание: По умолчанию это будет выглядеть так:
  

  

  Генерируется обёртка div с уникальным ID, что нарушает CSS. Однако это необходимо, если ты хочешь привязать действия к элементу.
  

  

  Ты можешь использовать tagName и classNames, чтобы настроить обёртку.

import { classNames, tagName } from "@ember-decorators/component";

@tagName("tbody")
@classNames("pinned-topics")
export default class PinnedTopicBody extends Component {
  ...
}

{{#if this.pinnedTopics}}
  {{#each this.pinnedTopics as |topic|}}
    ...
  {{/each}}
  <tr class="table-break">
    <td colspan="10">&nbsp;</td>
  </tr>
{{/if}}

(если ты знаешь, что не будешь ничего делать с элементом, ты можешь оставить tbody в шаблоне и использовать tagName("")).

Тогда у тебя получится вот так:

Я не стал подробно изучать, есть ли более лучший способ.
Я просто хотел помочь сделать твой код рабочим!

[Terise]

Мне нужно что-то в директории компонентов, или все файлы должны находиться в коннекторах?

Единственная причина, по которой я делаю это как плагин, а не как компонент темы, заключается в том, что у меня есть планы добавить больше функциональности в будущем.

[Arkshine]

В этом коннекторе и контексте кода здесь не нужна папка components.
Вы видите её на моём скриншоте, потому что я модифицировал существующий компонент.

Тем не менее, это зависит от того, что вы планируете делать дальше. Также можно создать компонент внутри коннектора, который будет ссылаться на другой компонент (и его вы бы разместили в папке components).

[Terise]

Это отлично, большое спасибо!

У меня есть ещё один последний вопрос, если вы не против. Можно ли сделать так, чтобы закреплённые темы не отображались в обычном списке тем, чтобы они не дублировались?

Редактирование: На самом деле я смог это сделать с помощью небольшого CSS-кода.

Ещё раз огромное спасибо за вашу помощь!