Como exibir o nome do usuário ao lado do avatar na navegação quando logado?

Dev
1

Olá a todos,

Existe uma maneira de mostrar o nome do usuário na barra de navegação ao lado do avatar quando o usuário está logado? Veja a captura de tela abaixo.

name
name258×187 3.48 KB

2

Olá, bem-vindo de volta, Auston!

Você poderia experimentar este HTML/CSS personalizado, por favor?
Isso deve funcionar bem com todos os emblemas de notificação com ou sem o novo menu de notificações ativado.

Sugiro que você crie um componente de tema. Caso não saiba, tudo está explicado aqui: Beginner's guide to using Discourse Themes

Observação: está desativado na visualização móvel.
Observação: O CSS é baseado no tema padrão; talvez você precise ajustá-lo. Sinta-se à vontade para perguntar.

Não testei extensivamente, mas espero que isso funcione para você!

Head 
<script type="text/discourse-plugin" version="0.8.13">

api.decorateWidget('header-notifications:after', dec => {
    const { currentUser, site } = dec.widget;

    if (site.mobileView) {
        return;
    }
    
    return dec.h('span.username', currentUser.displayName);
})

</script>
CSS 
html:not(.mobile-view) #current-user {
    span.username {
        display: inline-block;
        vertical-align: middle;
        margin-left: 5px;
    }
    
    .icon.btn-flat {
        width: auto;
    }
    
    .user-status-background {
        left: 22px;
    }
    
    .badge-notification {
        &.with-icon.new-pms {
            left: -3px;
            right: auto;
            top: 4px;
        }
    }
    
    .unread-notifications {
        left: 25px;
        right: auto;
    }
    
    .unread-high-priority-notifications,
    .ring {
        left: -3px;
        right: auto;
    }
}
4 curtidas
3

Muito obrigado. Funciona :slight_smile:

2 curtidas