Add avatar component with contacts menu

[juliushaertl]

Fixes #14

Example usage:

<!-- own avatar -->
<avatar user="admin" displayName="Julius" />

<!-- other users avatar -->
<avatar user="anexistinguser" displayName="An existing user" />

<!-- user to avatar image -->
<avatar :url="url" />

<!-- non-existing user -->
<avatar user="nonexistinguser" />

Fixed.

[ChristophWurst]

While trying to test this in Mail I found a use case that is not yet supported: non-Nextcloud user but without an URL.

We don't always have a URL to an avatar. In those cases we still want to render an avatar with the sender's email address or name. This should more or less assemble what I've developed at https://github.com/nextcloud/mail/blob/b5ad1a0ddf3ca03d0b43e7c0fa835f4607279b34/js/components/Avatar.vue (simple placeholder with first letter).

[ChristophWurst]

• Bug/limitation?: user of the component has to always specify the displayName in order to get a tooltip. If only the UID is available that won't be possible. Should we just use the user prop as fallback in that case?

[juliushaertl]

We don't always have a URL to an avatar. In those cases we still want to render an avatar with the sender's email address or name. This should more or less assemble what I've developed at nextcloud/mail:js/components/Avatar.vue@b5ad1a0 (simple placeholder with first letter).

Yep, let's include that as well. I'll look into that.

[juliushaertl]

user of the component has to always specify the displayName in order to get a tooltip. If only the UID is available that won't be possible. Should we just use the user prop as fallback in that case?

I don't see a big use case in adding that, also showing the user id might not be very useful on ldap setups for example. If the displayname is not available app devs can still just set the displayname to the same value as the user id to get a tooltip with it.

Besides that, all the comments should be addressed. Ready for another round of review. 😉

[ChristophWurst]

Any solution for #64 (comment)?

I've (again) integrated this new component in Mail: nextcloud/mail#1224.

Right now it looks like this:

What's missing from my POV:

• Add avatar component with contacts menu #64 (comment) I'd like to show a placeholder instead
• The possibility to prevent the tooltip as it doesn't add much if the display name is already displayed next to the avatar

Works great otherwise ✌️

[ChristophWurst]

Would it make sense to show a placeholder for unknown users with known displayName and :allowPlaceholder="true"? I see you already took the $.imageplaceholder logic from server (which I used at https://github.com/nextcloud/mail/blob/c1c875db07b59f500dd5ed695f772d8f979238f9/src/components/Avatar.vue#L18) to build the placeholder for known users. This should cover my use case from #64 (comment).

[juliushaertl]

Would it make sense to show a placeholder for unknown users with known displayName and :allowPlaceholder="true"? I see you already took the $.imageplaceholder logic from server (which I used at nextcloud/mail:src/components/Avatar.vue@c1c875d#L18) to build the placeholder for known users. This should cover my use case from #64 (comment).

This should already work with :user and :allowPlaceholder="true". Is there a specific reason you might want to use displayname only instead of a user id? Ah right, because using :user will always try to fetch the avatar first, which doesn't make sense for the mail app 😉 I'll add that as well.

[ChristophWurst]

Ah right, because using :user will always try to fetch the avatar first, which doesn't make sense for the mail app wink I'll add that as well.

Exactly. Thanks ✌️

[juliushaertl]

@ChristophWurst

#64 (comment) I'd like to show a placeholder instead

<avatar displayName="Example" /> will do that now, as discussed.

The possibility to prevent the tooltip as it doesn't add much if the display name is already displayed next to the avatar

Combined with the above, you can also disable the tooltip with:

<avatar displayName="FooBar" disableTooltip="true" />

@skjnldsv I've tried to be a bit more descriptive with the variable names.

[juliushaertl]

CI is also failing on master :/ https://travis-ci.com/nextcloud/vue-components/builds/89187769

[ChristophWurst]

Thanks a lot 🚀 🎊 🌮

✔️ works with display names only 🚀

✔️ works with custom URLs 🚀

[ChristophWurst]

Awesome! Tested it at nextcloud/mail#1224 and it works really well.

Fixed