LetterAvatar: not rendered correctly using small height values

[primefaces-extensions]

LetterAvatar: not rendered correctly using small height values

[melloware]

can you paste your before and after screenshots too please

[marcelocaser]

added images

[jepsar]

@melloware do you want me to have a look?

[melloware]

yep looks like a regression of this issue: primefaces-extensions/primefaces-extensions.github.com#695

attached test case: https://github.com/primefaces-extensions/primefaces-extensions.github.com/files/3141695/pfe-la.zip

[melloware]

assigned to you @jepsar

[jepsar]

I cannot fully reproduce this. I added this to the showcase:

<p:dataTable value="#{['Optimus Prime','PrimeFaces Extensions']}" var="name">
    <p:column headerText="Name">
        <pe:letterAvatar value="#{name}" size="1rem" rounded="false"/>
        #{name}
    </p:column>
</p:dataTable>

which renders as

The line height is not perfect, but that's all (it seems). (Chrome Version 85.0.4183.121 (Official Build) (64-bit) on MacOS).

[melloware]

what happens when you update="datatable" same as sorting or paging or filtering

[jepsar]

Looks the same..

[melloware]

Agreed I can't reproduce...
pfe-la.zip

However I do notice the color spread is not that great?

[jepsar]

However I do notice the color spread is not that great?

Caused by:

    public static int hue(final String str) {
        return Math.abs(hash(str) % 360);
    }

This is giving you all the possible hue values. A better spread would be something like:

    public static int hue(final String str) {
        return Math.abs((hash(str) % 60) * 6);
    }

which gives 60 possibilities instead of all 360.

[melloware]

maybe do 60 if string length == 1 and 360 for all others?

[melloware]

oh i actually like your solution better. i see the * 6 now

[jepsar]

Also, I think we can simply use string.hashCode() instead of calculating a hash.

[jepsar]

I'll do some tweaks, but that won't fix the reported issue. I don't think there were changes between 8.0.4 and 9.0.

[melloware]

up to you! yeah i think this is a non issue.

[marcelocaser]

Look: with sample (pfe-la.zip)

<pe:letterAvatar value="#{car.brand}" height="24" width="24" rounded="false"/>

<pe:letterAvatar value="#{car.brand}" size="1rem" rounded="false"/>

[jepsar]

@marcelocaser can you please inspect the inner span with class ui-letteravatar-initials and disable the top property. Does that solve the issue for you?

[jepsar]