Show transparent contact photo on a lighter background by hanzi · Pull Request #1415 · nextcloud/contacts

hanzi · 2020-01-17T13:28:59Z

This improves support for transparent contact photos by

Removing the still visible first letter in the contact list
Placing photos on a much lighter background colour so it doesn't clash with the transparent image

codecov · 2020-01-17T13:36:37Z

Codecov Report

Merging #1415 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master    #1415   +/-   ##
=======================================
  Coverage   62.31%   62.31%           
=======================================
  Files           4        4           
  Lines          69       69           
=======================================
  Hits           43       43           
  Misses         26       26

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 503be80...efb8aa8. Read the comment docs.

jancborchardt · 2020-01-18T12:31:59Z

Very cool @hanzi! Would this also fix it for the Mail app, as we have the same issue there: nextcloud/mail#1821

Possibly should be in the Vue component as well? @juliushaertl @skjnldsv @ChristophWurst, and cc @gary-kim as you were active in the issue too

jancborchardt · 2020-01-18T12:33:43Z

 			<div class="contact-header-avatar__background" @click="toggleModal" />
 			<div v-if="contact.photo"
-				:style="{ 'backgroundImage': `url(${contact.photoUrl})` }"
+				:style="{ 'backgroundImage': `url(${contact.photoUrl})`, 'backgroundColor': 'rgba(255, 255, 255, 0.8)' }"


Just use #fff here, since it looks weird with the color still shining through. :) Also we don’t need to theme it because with dark mode, the backgrounds of these images should still be white.

I've changed it now, though I liked the old style a bit better. Made the contrast seem less harsh.

hanzi · 2020-01-18T15:36:46Z

@jancborchardt On second thought, you were probably referring to the contacts list and not the title bar of the details area (which is the code you've annotated.)

I've given this some thought beforehand: Making the background transparent/white at the very least makes the list look less structured. But it starts looking really weird and confusing when an irregularly shaped avatar gets cropped in a circle shape: (see Santa's photo)

So as an alternative, I tried setting it to lightgrey:

But to me, this also looks a bit dull, so the current version was actually my favourite:

hanzi · 2020-01-18T19:10:45Z

Here's another one, using #eee as a background (which is the same as the 'selected contact' background colour in the default theme).

jancborchardt · 2020-01-19T12:37:11Z

This screenshot with white background actually looks best by far. :) It does not interfere with the icons and avatars, especially not with the color generated from our placeholder, which does not have anything to do with the actual avatars. 👍
(And yes, white #fff background for both contact list and contact detail view, and also for dark theme because otherwise logos/icons will not be visible.)

hanzi · 2020-01-20T21:27:09Z

I still prefer the last one I posted, with the very light grey background.

Reason being (as I said before) that this way it feels less 'broken' when a transparent image (such as Santa's hat in my example) gets cropped. Because it's such an irregular shape, you don't really see that it's just cropped into a circle. Just seems like parts of the picture are missing for no good reason.

With the light grey background you can always see the full circle so the cropping doesn't feel as surprising to me.

But if you still want the white version, that's your call to make. Just let me know and I'll fix it.

jancborchardt · 2020-01-20T21:38:10Z

Right, so for that we could do it like Twitter – they seem to use a veeery very slight box-shadow: inset on the avatars to show a super thin border around the avatar.

If we do that, we tick all the boxes:

Doesn't change the background of pictures but keeps it white
Makes clear that pictures are circular and cropped
Looks nice

What do you think? Best check at Twitter and inspect it there, or let me know and I can do it. :)

hanzi · 2020-01-20T22:27:20Z

I couldn't find any place on Twitter where they use an inset box shadow, but I like the idea.

How about it?

hanzi · 2020-01-24T11:23:25Z

@jancborchardt What do you think about the version with the very faint inset shadow?

Once we've decided on one, I would like to apply the same solution to the Avatar component on nextcloud/vue which should fix it in Mail as well.

Signed-off-by: Christian Kraus <hanzi@hanzi.cc>

jancborchardt · 2020-01-28T04:09:46Z

@hanzi sorry I haven’t had time to test it due to the time it takes updating the whole local instance and being on my way to vacation. :\ From looking at it it seems fine, but could be subdued a bit – less intense.

You can check the value Twitter uses on a profile with a transparent avatar, like https://twitter.com/osdiversity

jancborchardt · 2020-02-27T05:27:51Z

+					backgroundColor: '#fff',
+					// The contact photo gets cropped in a circular shape, which might look odd with transparent photos.
+					// This box shadow ensures that there's always a very faint edge hinting at the circle.
+					boxShadow: '0 0 6px rgba(0, 0, 0, 0.08) inset',


Suggested change

boxShadow: '0 0 6px rgba(0, 0, 0, 0.08) inset',

boxShadow: '0 0 5px rgba(0, 0, 0, 0.05) inset',

Let’s go for a bit more subdued here. :)

For reference, this is what Twitter uses and looks quite nice:

box-shadow: rgba(0, 0, 0, 0.02) 0px 0px 2px inset; border: 1px solid rgba(0, 0, 0, 0.04);

Also, we have a variable for this, no?

No, as this is very new. Also, in dark mode it can be exactly the same as it’s just very transparent black.

jancborchardt · 2020-02-27T05:28:30Z

Hi @hanzi, I’m back from vacation now. Any update on this one, did you check out the values Twitter uses? In any case I think making it a bit more subdued is better – I posted a suggestion in the code, what do you think?

Also cc @skjnldsv your input?

skjnldsv · 2020-03-11T07:37:03Z

Hey! So what is the status here? :)

jancborchardt · 2020-04-21T14:39:10Z

Hey! So what is the status here? :)

I’d say let’s merge this, I will submit a follow-up pull request to fix the details? :)

skjnldsv · 2020-04-21T14:40:23Z

 			<div class="contact-header-avatar__background" @click="toggleModal" />
 			<div v-if="contact.photo"
-				:style="{ 'backgroundImage': `url(${contact.photoUrl})` }"
+				:style="{ 'backgroundImage': `url(${contact.photoUrl})`, 'backgroundColor': '#fff' }"


Shall we use default background variable here @jancborchardt ?

No, as said above at #1415 (comment)

Just use #fff here, since it looks weird with the color still shining through. :) Also we don’t need to theme it because with dark mode, the backgrounds of these images should still be white.

Oups, sorry! Missed this! 🙈

skjnldsv

Code looks good to me! 👍
Thanks!

skjnldsv · 2020-04-21T16:27:17Z

@hanzi can you rebase? :)
@jancborchardt, final review?

jancborchardt · 2020-04-22T12:37:59Z

Not sure @hanzi will reply since they have not been active since January. I’ll create a pull request based on this and doing the adjustments I mentioned in the comments, and rebased. :)

jancborchardt · 2020-04-22T14:39:32Z

Rebased and with my added small adjustment at #1596, let’s continue there :)

hanzi · 2020-04-27T07:55:20Z

Hi! Sorry for my prolonged absence, got very busy with work and had to tune out all other distractions for a while. 😃

Thanks @jancborchardt for picking it up and getting it merged!

jancborchardt · 2020-05-03T14:35:07Z

No worries at all @hanzi, very cool collaboration! :) If you want to pick up something new, there’s plenty of other issues. :D

(Also, if you are interested, we can invite you to our Contacts team chat?)

skjnldsv added 3. to review Waiting for reviews bug Something isn't working design Related to the design labels Jan 18, 2020

skjnldsv requested a review from jancborchardt January 18, 2020 07:51

skjnldsv added this to the next milestone Jan 18, 2020

jancborchardt requested a review from gary-kim January 18, 2020 12:29

jancborchardt mentioned this pull request Jan 18, 2020

Avatars with transparency shown with avatar placeholder background nextcloud/mail#1821

Closed

jancborchardt reviewed Jan 18, 2020

View reviewed changes

hanzi force-pushed the transparent-photo-in-list branch from b0f97c1 to 199ae69 Compare January 20, 2020 22:27

hanzi force-pushed the transparent-photo-in-list branch from 199ae69 to e8f01f3 Compare January 20, 2020 22:29

Show transparent contact photos on a lighter background

efb8aa8

Signed-off-by: Christian Kraus <hanzi@hanzi.cc>

hanzi force-pushed the transparent-photo-in-list branch from e8f01f3 to efb8aa8 Compare January 24, 2020 11:26

skjnldsv added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Jan 28, 2020

jancborchardt reviewed Feb 27, 2020

View reviewed changes

skjnldsv reviewed Apr 21, 2020

View reviewed changes

skjnldsv approved these changes Apr 21, 2020

View reviewed changes

skjnldsv added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Apr 21, 2020

skjnldsv requested a review from jancborchardt April 21, 2020 16:26

jancborchardt mentioned this pull request Apr 22, 2020

Show transparent contact photos on a lighter background #1596

Merged

jancborchardt closed this Apr 22, 2020

hanzi deleted the transparent-photo-in-list branch April 27, 2020 07:55

skjnldsv modified the milestones: next, 3.4.0 Oct 1, 2020

	boxShadow: '0 0 6px rgba(0, 0, 0, 0.08) inset',
	boxShadow: '0 0 5px rgba(0, 0, 0, 0.05) inset',

Conversation

hanzi commented Jan 17, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov Bot commented Jan 17, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

jancborchardt commented Jan 18, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

hanzi commented Jan 18, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hanzi commented Jan 18, 2020

Uh oh!

jancborchardt commented Jan 19, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

hanzi commented Jan 20, 2020

Uh oh!

jancborchardt commented Jan 20, 2020

Uh oh!

hanzi commented Jan 20, 2020

Uh oh!

hanzi commented Jan 24, 2020

Uh oh!

jancborchardt commented Jan 28, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jancborchardt commented Feb 27, 2020

Uh oh!

skjnldsv commented Mar 11, 2020

Uh oh!

jancborchardt commented Apr 21, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skjnldsv left a comment

Choose a reason for hiding this comment

Uh oh!

skjnldsv commented Apr 21, 2020

Uh oh!

jancborchardt commented Apr 22, 2020

Uh oh!

jancborchardt commented Apr 22, 2020

Uh oh!

hanzi commented Apr 27, 2020

Uh oh!

jancborchardt commented May 3, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

hanzi commented Jan 17, 2020 •

edited

Loading

codecov Bot commented Jan 17, 2020 •

edited

Loading

hanzi commented Jan 18, 2020 •

edited

Loading

jancborchardt commented Jan 19, 2020 •

edited

Loading