Menu de links rápidos para perfil

Instalar este componente de tema

Olá :wave:

Navegar pelas preferências do usuário pode ser um pouco difícil às vezes, especialmente para novos usuários. Este componente de tema permite adicionar vários links importantes de configurações nas páginas do usuário e adicionar uma aba personalizada ao perfil do menu do usuário…

Links do menu das páginas do usuário

Este botão de menu é colocado na seção de botões de controle do perfil do usuário.



Clicar no item do menu redirecionará para o campo desejado. Para conseguir isso, adicionei um atributo id para cada campo que é o mesmo valor do atributo [data-setting-name]. Então agora podemos usá-lo como uma âncora. Como: /u/username/preferences/profile#user-bio

Você pode inspecionar isso clicando com o botão direito no título da configuração e verificando o id. Neste caso, o valor da setting deve ser user-username. Esta configuração é um campo opcional, então deixá-la em branco redirecionará para a página, não para a configuração.


Configuração de links do menu das páginas do usuário

Com a configuração profile links você pode adicionar estes links rápidos.

  1. ícone (ícone fontawesome) obrigatório
  2. rótulo (o rótulo do link) obrigatório
  3. página (para qual página você quer ser redirecionado)
    • account
    • security
    • profile
    • emails
    • notifications
    • tracking
    • users
    • interface
  4. configuração (para qual campo de configuração você quer ser redirecionado) opcional
Aqui estão alguns campos de configuração para usar.
  • account

    • user-username
    • user-avatar
    • user-email
    • user-associated-accounts
    • user-name
    • user-title
    • user-flair
    • user-data-export
  • profile

    • user-bio
    • user-timezone
    • user-location
    • user-website
    • user-profile-bg
    • user-card-bg
    • user-featured-topic
  • interface

    • user-theme
    • user-color-scheme
    • user-text-size
    • user-locale
    • user-home
    • user-other-settings

Aba de Perfil Personalizada do Menu do Usuário

Com a configuração enabled user menu tab você pode habilitar esta aba de perfil personalizada. Esta aba é uma recriação da aba de Perfil padrão.

O que faz?

  • oculta a aba de perfil padrão no menu do usuário
  • adiciona uma aba de perfil personalizada no menu do usuário no topo
    • o ícone da aba é alterável com a configuração user menu tab icon
  • adiciona itens personalizados sob o botão de preferências
    • estes itens são alteráveis com a configuração profile menu preference items
  • adiciona itens extras personalizados antes do botão de logout
    • estes itens são alteráveis com a configuração profile menu extra items

Configurações da aba de Perfil Personalizada

Para os itens de preferências (que estão sob o botão Preferências) com profile_menu_preference_items você pode adicionar/remover…

  1. ícone (ícone fontawesome) opcional
  2. rótulo (o rótulo do link) obrigatório
  3. página (para qual página você quer ser redirecionado)
    • account
    • security
    • profile
    • emails
    • notifications
    • tracking
    • users
    • interface
  4. configuração (para qual campo de configuração você quer ser redirecionado) opcional
Aqui estão alguns campos de configuração para usar.
  • account

    • user-username
    • user-avatar
    • user-email
    • user-associated-accounts
    • user-name
    • user-title
    • user-flair
    • user-data-export
  • profile

    • user-bio
    • user-timezone
    • user-location
    • user-website
    • user-profile-bg
    • user-card-bg
    • user-featured-topic
  • interface

    • user-theme
    • user-color-scheme
    • user-text-size
    • user-locale
    • user-home
    • user-other-settings

Os itens extras podem ser colocados acima do botão Sair com a configuração profile menu extra items.

  1. ícone (ícone fontawesome) opcional
  2. rótulo (o rótulo do link) obrigatório
  3. url (para qual url você quer ser redirecionado) obrigatório
17 curtidas

Aleluia!!! Finalmente alguém abordou isso - na minha opinião, este é um dos maiores problemas para novos usuários do Discourse.

Uma coisa que noto é que ainda são vários cliques para chegar lá através do avatar no canto superior direito. Este é o lugar intuitivo para onde os novos usuários vão.

5 curtidas

Olá @nathank :wave: Acho que é uma ótima ideia encontrar um caminho mais rápido. Adicionei-o à aba do menu do usuário.

4 curtidas

Uau! Bom trabalho!

Mas acho que poderíamos ir mais longe, com o conceito de alterar o foco principal/padrão do menu Avatar de Notificações (com um perfil como reflexão tardia) para Perfil + Notificações (o que eu acho que deveria ser). Já temos uma aba de Perfil, mas ela não é muito proeminente:

Uma maneira de conseguir isso:

  1. Utilizar a aba de Perfil existente no menu Avatar
  2. Colocar essa aba no topo (ou seja, onde está o ícone de edição para os links rápidos do perfil)
  3. Permitir que o administrador personalize o menu da aba de Perfil

Acho que a maneira fácil seria simplesmente ocultar a aba de Perfil existente e recriá-la usando o TC. O botão de Logout é a única parte complicada e pode exigir um pouco de código (há um TC existente para isso). A parte de notificações Online e Pausar também é um pouco sofisticada.

Talvez seja mais fácil reorganizar a Aba e adicionar / subtrair dela. O que você acha?

4 curtidas

Uau, bom trabalho Don. Esta é uma ótima adição. Obrigado! :slight_smile: :clap:

2 curtidas

Tenho um conceito para algo assim.
Acho que pode ser uma boa ideia separar as configurações.

  1. mover perfil para o topo
  2. ocultar Preferências
  3. remover borda superior

  1. alterar o ícone da aba personalizada para engrenagem por padrão
  2. adicionar borda inferior para separar das notificações
  3. adicionar botão ver todas as configurações na parte inferior (redirecionar para /my/preferences/account)

O que você acha?

4 curtidas

Mas as configurações do usuário são menos e raramente usadas. Não tenho certeza se o lugar delas deveria ser o primeiro, independentemente do que for selecionado por padrão.

2 curtidas

Os componentes que você desenvolve são um espetáculo a ser visto todas as vezes haha

5 curtidas

Como encontro o valor correto para setting?

Essa é uma ótima maneira de organizar! Mantém tudo limpo e simples.

No entanto, eu preferiria (bastante fortemente) que tudo fosse agrupado em uma única aba de Perfil, já que Resumo e Atividade também são links firmemente ligados ao Perfil - e isso acaba dividindo os links relacionados ao usuário em duas abas um pouco desnecessariamente.

É possível se conectar à aba de Perfil?

3 curtidas

Você pode encontrar no OP e também pode inspecioná-lo clicando com o botão direito no título da configuração e verificando o id aqui. Neste caso, o valor de setting deve ser user-username, mas acho que o tornarei um campo opcional para que seja possível redirecionar para a página sem adicionar a configuração.


Pequena atualização aqui:

Concordo com você.

  1. Recriei a aba de perfil e adicionei links rápidos a ela.
  2. ocultei a aba de perfil padrão
  3. alterei o ícone da aba personalizada para usuário

É assim que está agora.


Habilitei uma prévia disso no criador de temas: https://discourse.theme-creator.io/theme/Don/quick-profile-links-test

4 curtidas

Eu gosto desse plano de página, porque é para isso que eu o uso. Bem, a foto de perfil é outra história.

Eu estava com medo daquela coisa do clique com o botão direito :joy: Só porque eu trabalho quase totalmente com palavras, não uso meu laptop desde maio passado, acho. Mas não tem o que fazer, é apenas e somente minha escolha. Eu tenho um console no iPad, no entanto. Eu só não sabia o que procurar. Agora eu sei. Obrigado!

2 curtidas

Vai ficar bem apertado, não? Porque na vida real agora está assim:

1 curtida

Eu alterei o preenchimento dos botões, usei um tamanho de fonte menor para os subitens de preferências, etc… para que os itens tenham menos altura do que antes e também fiz com que o conteúdo desta aba seja rolável. Estou mesclando isso agora com uma atualização…

2 curtidas

Atualização :tada:
Também atualizei o OP.

Esta atualização oculta a aba padrão do Perfil e adiciona uma aba de Perfil personalizada no menu do usuário com a capacidade de adicionar itens personalizados sob o item Preferências e também pode adicionar itens personalizados antes do botão Sair.

Aba de Perfil personalizada no menu do usuário

Controlado pela configuração enabled_user_menu_tab.

  • ocultar aba padrão do perfil no menu do usuário
  • adiciona aba de perfil personalizada no menu do usuário no topo
    • o ícone da aba é alterável com a configuração user_menu_tab_icon
  • adiciona itens personalizados sob o botão de preferências
    • esses itens são alteráveis com a configuração profile_menu_preference_items
  • adiciona itens extras personalizados antes do botão sair
    • esses itens são alteráveis com a configuração profile_menu_extra_items

Configurações

  • profile_menu_preference_items e profile_menu_extra_items o campo de ícone é opcional agora.
  • profile_links e profile_menu_preference_items o campo de configuração é opcional agora, o que significa que ele pode adicionar links para redirecionar para uma página, não para uma configuração.


3 curtidas

Isso seria um grande problema de UX em dispositivos móveis, além de todas as telas sensíveis ao toque :man_shrugging:

Odiei dizer isso, mas a direção é apenas para desktop.

Eu estava errado sobre essa preocupação. Claro, agora está totalmente preenchido, mas funciona muito bem.

3 curtidas

Mas o que o desativar enabled user menu tab deveria fazer? Pensei que a aba de lápis anterior apareceria, mas não.

2 curtidas

Todo o recurso de perfil personalizado do menu do usuário. Se você o desativar, ele não fará nada com o menu do usuário.

2 curtidas

Sim, quando ativado. Mas quando desativado é basicamente a mesma coisa que desativar o componente inteiro :thinking:

Não, se você desabilitou, apenas o menu de links rápidos da página de usuários aparecerá.

2 curtidas