Componente de Tema do Botão de Logout do Menu Superior

Dev
4

Não recomendo o uso de um widget; ele eventualmente desaparecerá como parte da modernização principal.

O mesmo vale para api.addToHeaderIcons; agora está obsoleto em favor de api.headerIcons.add.

Aqui estão algumas sugestões:

  • Encorajo você a usar o GitHub - discourse/discourse-theme-skeleton: Template for Discourse themes como referência ao criar um componente de tema. Ele contém os arquivos de configuração mais recentes. É útil para linting/prettifying de código e uma boa prática ter uma estrutura padrão.

  • Ao usar a sintaxe \u003ctemplate\u003e, renomeie o arquivo com .gjs (glimmer JS); caso contrário, pode não funcionar.

  • No meu exemplo, você poderia mover o template para seu próprio arquivo, por exemplo:
    /javascripts/discourse/components/logout-header-button.gjs

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

const LogoutHeaderButton = \u003ctemplate\u003e
  \u003cli class="logout"\u003e
    \u003cDButton
      @action={{routeAction "logout"}}
      class="btn-flat icon"
      @icon="sign-out-alt"
      @title="user.log_out"
      @label="user.log_out"
    /\u003e
  \u003c/li\u003e
\u003c/template\u003e;

export default LogoutHeaderButton;

Em seguida, no inicializador, importe o componente e use-o como parâmetro em headerIcons:

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

export default apiInitializer("1.28.0", (api) =\u003e {
  if (api.getCurrentUser()) {
    api.headerIcons.add("logout", LogoutHeaderButton, { before: "auth" });
  }
});
  • A localização do botão pode ser ajustada. Você pode ler a documentação:

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

Me avise se tiver dúvidas. Posso sempre criar um PR mais tarde se precisar de um exemplo. :+1: