Como alterar o link associado a um botão no painel do menu do usuário

Dev
1

Em vez de o botão destacado apontar para u/miles/summary, eu preferiria que apontasse para u/miles/activity. Como posso fazer isso? Tentei pesquisar online (parece que é necessário alterar o atributo data-url com JavaScript, mas a única maneira que vi de fazer isso era primeiro obter o ID do elemento, e este elemento não possui um ID.)

PIC
PIC1920×1080 480 KB

2

Você precisaria reabrir o widget relevante em um Componente de Tema, algo como:

api.reopenWidget("user-menu-links", {
  profileGlyph() {
    return {
      title: Titles["profile"],
      className: "user-preferences-link menu-link",
      id: QuickAccess.PROFILE,
      icon: "user",
      action: UserMenuAction.QUICK_ACCESS,
      actionParam: QuickAccess.PROFILE,
      data: { url: `${this.attrs.path}/activity` },
      role: "tab",
      tabAttrs: this._tabAttrs(QuickAccess.PROFILE),
    };
  },
})
3

Obrigado! Faz sentido, eu acho.
Uma coisa, porém: estou inserindo isso dentro de </head>, mas estou recebendo o erro: SyntaxError: unknown: Unexpected token, expected "," (28:6)

<script type="text/discourse-plugin" version="0.8">    
    api.reopenWidget("user-menu-links", {
      profileGlyph() {
        return {
          title: Titles["profile"],
          className: "user-preferences-link menu-link",
          id: QuickAccess.PROFILE,
          icon: "user",
          action: UserMenuAction.QUICK_ACCESS,
          actionParam: QuickAccess.PROFILE,
          data: { url: `${this.attrs.path}/activity` },
          role: "tab",
          tabAttrs: this._tabAttrs(QuickAccess.PROFILE),
        };
      },
    }
</script>
4

Acima faltava um parêntese de fechamento, atualizado

6

Sem erro agora, mas… Agora isso impede que o menu suspenso user-menu-links seja aberto. Alguma ideia do motivo?

7

O que você fez para depurá-lo?

Verificar o console de JavaScript no navegador é sempre um bom ponto de partida.

Se você der uma olhada, há três problemas óbvios (no final das contas).

A solução é bastante direta neste caso; você só precisa fornecer as constantes ausentes:

      const UserMenuAction = {
        QUICK_ACCESS: "quickAccess",
      };

      const QuickAccess = {
        BOOKMARKS: "bookmarks",
        MESSAGES: "messages",
        NOTIFICATIONS: "notifications",
        PROFILE: "profile",
      };
      
      const Titles = {
        bookmarks: "user.bookmarks",
        messages: "user.private_messages",
        notifications: "user.notifications",
        profile: "user.preferences",
      };

Assim que você adicionar essas (do código-fonte original), ele funciona :tada:

(Mas veja a otimização de Faizaan abaixo, que elimina a necessidade dessas, o que é ainda melhor :slight_smile:

8

Mais simplesmente

<script type="text/discourse-plugin" version="0.8">    
api.reopenWidget("user-menu-links", {
  profileGlyph() {
   const glyph = this._super(...arguments);
   glyph['data'] = { url: `${this.attrs.path}/activity` };
   return glyph;
  },
}

Ainda não testado :wink:

9

Sim, muito melhor e evita a necessidade de constantes — ótima otimização! :slight_smile:

10

Na verdade, você pode ir ainda mais longe e omitir isso:

      api.reopenWidget("user-menu-links", {
        profileGlyph() {
         const glyph = this._super();
         glyph['data'] = { url: `${this.attrs.path}/activity` };
         return glyph;
        }
      });

Como não há argumentos

11

Obrigado, pessoal! Está funcionando perfeitamente. Estou aprendendo muito sobre edição no Discourse também!