This topic contains 7 replies, has 3 voices, and was last updated by Jai Jai 1 month, 3 weeks ago.

User initial name widget


  • vinicius.big
    Participant

    Posts: 12
    Member Reply #17614

    I’ve noticed the userpic component in the topbar and a slight different approach in the user menu

    <span class="m-topbar__userpic">

    </span>

    <div class="m-card-user m-card-user--skin-dark">
    <div class="m-card-user__pic">

    </div>
    <div class="m-card-user__details">
    <span class="m-card-user__name m--font-weight-500">Mark Andre</span>
    mark.andre@gmail.com
    </div>
    </div>

    And a different structure in Profile page itself

    <div class="m-card-profile__pic"> <div class="m-card-profile__pic-wrapper"> </div> </div>

    It would be nice to have a standard widget with the user profile picture or an option to display the initial name instead of an image.

    I know we have an example in datatable pages (Colum rendering) but it was hard to put this example, in all other places above.

    How can I accomplish that?
    Thanks

    Sean
    Sean
    Keymaster

    Posts: 4522
    Support Staff Reply #17636

    Hi :),

    You can try to remove the user pic from the topbar and replace it with username as shown below:

    <a href=”#” class=”m-nav__link m-dropdown__toggle”>

    <span class=”m-topbar__username m–font-primary”>Nick</span>

    </a>

    Thanks


    vinicius.big
    Participant

    Posts: 12
    Member Reply #17720

    Hello, thanks for your answer.

    Unfortunately, this doesn’t help much.

    I’m looking for a way to replace all user images (topbar, user menu, profile page) with the “colored circle with the user initial”. Your suggestion doesn’t have a rounded color background.

    I’ve found an example in the datatable pages but it’s nos working when I replace in other places.

    Please check the attached files.

    Do you have other suggestions? Can you consider create this option? To use a colored circle instead of the profile picture?

    Thanks!

    Attachments:
    You must be logged in to view attached files.
    Sean
    Sean
    Keymaster

    Posts: 4522
    Support Staff Reply #17811

    Hi,

    In this case we will need to implement this feature as reusable component in order to use it to replace the user image. We will consider adding this in the next update.

    Thanks.


    vinicius.big
    Participant

    Posts: 12
    Member Reply #17817

    Thanks!

    It’ll be very helpful!

    Jai
    Jai
    Keymaster

    Posts: 2627
    Support Staff Reply #17850

    All the best 🙂

    Thanks


    vinicius.big
    Participant

    Posts: 12
    Member Reply #18220

    I saw the new “Types” section in the typography page.

    It works perfectly!

    Thanks!

    Jai
    Jai
    Keymaster

    Posts: 2627
    Support Staff Reply #18244

    Thanks your feedback 🙂

Tagged: 

You must be logged in to reply to this topic.