Компонент темы кнопки выхода в верхнем меню

Разработка
1

Я подготовлю и выложу на GitHub компонент темы для добавления кнопки «Выйти» в верхнее меню, если кто-нибудь сможет подсказать, как обновить код @pfaffman здесь…

:folded_hands: :folded_hands: :folded_hands:

(В данный момент следование этим инструкциям и включение компонента приводит к тому, что всё верхнее меню исчезает :crying_cat_face: )

2

Что-то вроде этого. Не стесняйтесь адаптировать под свои нужды.

import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";
import { apiInitializer } from "discourse/lib/api";

export default apiInitializer("1.28.0", (api) => {
  if (api.getCurrentUser()) {
    api.headerIcons.add(
      "logout",
      <template>
        <li class="logout">
          <DButton
            @action={{routeAction "logout"}}
            class="btn-flat icon"
            @icon="sign-out-alt"
            @title="user.log_out"
            @label="user.log_out"
          />
        </li>
      </template>,
      { before: "auth" }
    );
  }
});

.d-header-icons .logout {
  margin-left: 1em;

  button.icon {
    width: auto;

    padding-left: 0.5em;
    padding-right: 0.5em;

    svg {
      margin-right: 0.2em;
      width: 1em;
    }
  }
}

image

3

Окей, я его сверстал, но буду признателен за тестирование перед отправкой в Meta…

(В итоге я использовал Central Theme Header User Icons - #4 by carson Карсона в качестве отправной точки)

discourse-header-logout-button
discourse-header-logout-button3792×1850 317 KB

4

Я бы не рекомендовал использовать виджет: в конечном итоге он исчезнет в рамках модернизации ядра.

То же самое касается api.addToHeaderIcons: теперь он устарел в пользу api.headerIcons.add.

Вот несколько рекомендаций:

  • Я рекомендую использовать GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes · GitHub в качестве справочника при создании компонента темы. В нём содержатся актуальные файлы конфигурации. Это полезно для линтинга/форматирования кода, а наличие стандартной структуры — хорошая практика.

  • При использовании синтаксиса <template> переименуйте файл в .gjs (Glimmer JS); в противном случае он может не работать.

  • В моём примере вы можете переместить шаблон в отдельный файл, например:
    /javascripts/discourse/components/logout-header-button.gjs

import DButton from "discourse/components/d-button";
import routeAction from "discourse/helpers/route-action";

const LogoutHeaderButton = <template>
  <li class="logout">
    <DButton
      @action={{routeAction "logout"}}
      class="btn-flat icon"
      @icon="sign-out-alt"
      @title="user.log_out"
      @label="user.log_out"
    />
  </li>
</template>;

export default LogoutHeaderButton;

Затем в инициализаторе импортируйте компонент и используйте его как параметр в headerIcons:

import LogoutHeaderButton from "../components/logout-header-button";

export default apiInitializer("1.28.0", (api) => {
  if (api.getCurrentUser()) {
    api.headerIcons.add("logout", LogoutHeaderButton, { before: "auth" });
  }
});
  • Расположение кнопки можно настроить. Вы можете ознакомиться с документацией:

https://github.com/discourse/discourse/blob/main/app/assets/javascripts/discourse/app/lib/plugin-api.gjs#L1838-L1886

Дайте знать, если возникнут вопросы. Если понадобится пример, я всегда могу отправить pull request. :+1:

5

Просто восхитительно. Большое спасибо за то, что нашли время провести меня!