Only make non-image project icons rounded

Before the change:

After the change:

This is a completely subjective change - it might be that all of our logos just don't fit into the circle. Feel free to close.

Related: https://gitlab.com/gitlab-org/gitlab-ce/issues/2948

There was at least one more that I can't seem to find at the moment.

@rspeicher, here's one you may have been looking for: #2738 (closed)

Anecdotally, I am also having trouble with my image icons getting inappropriately cropped by the circle.

@scott113341 That was it, thanks!

cc @dzaporozhets @skyruler What do you think about not applying the circle cropping to user-uploaded avatars?

@rspeicher it would make icons that have non-transparent background looks ugly aside with rounded icons. But I see how cropping makes things ugly too.

@skyruler what do you think?

May it make it to 8.10 ?

Added 1 commit:

253d837e - Use .identicon rather than div.avatar for border radius

@skyruler ping

My main issue with this is squared avatars that can have give an ugly look to the list when mixed with rounded one:

compared to current behaviour:

The reason I put this MR up is because all of our avatars are icons that have transparent backgrounds and get clipped by the 50% border radius. We could do what GitHub do and have a 3px radius? It's unfortunate that having a 50% radius works really well for user accounts because they are generally images of people's faces, however, project icons are generally transparent icons. As I could understand from the code, this only effects the project icons, so should I change it to:

.dash-project-avatar {
   float: left;
   @include border-radius(5%);

   .identicon {
     @include border-radius(50%);
   }
 }

Then the 'square' ones have a slight rounding on the edges and the ones that don't have an icon image are still round.

mentioned in merge request !5058 (closed)

@skyruler @hazelyang what do you think about this proposal - https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3620#note_12865040 ?

How about adding 1px light gray border? The border will let the pictures without background still look complete and clean. I think if we can keep the avatars with the same pattern would be better.

Current page

Adding border

More examples

@hazelyang, the icons still get clipped, which is what I was trying to solve. You can see the clipping on the Hazel Yang / test, release-tools, beta-blog, hazel / hazel's project and test-project.

Another option would be to have an algorithm that shrinks any transparent icons on upload and made sure that they fit in the circle.

I agree with @mattyclarkson, as I wrote in issue #2948 (closed) the main issue is the change introduced on Gitlab 8 that totally neglected icons which were not designed on a round basis. Assuming that every icon out there is designed to fit in a circle like the ones at Gitlab is the real problem. And the fact that round icons looks better is arguable.

My initial suggestion was to revert back to square icons but from what I've read around (issues and comments) about design decisions concerning Gitlab, I'm afraid that you will not be willing to roll back.

The algorithm option doesn't solve the bigger issue IMHO. What about non-transparent square icons (like the ones in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3620#note_12864793) ? Shrinking them to make them fit in the circle is obviously not an option.

The 3px radius solution from https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3620#note_12865040 seems to me the best alternative so far.

(PS: [slightly off-topic] and look at my QR-code avatar from Gravatar )

mentioned in issue #19015 (closed)

We are not going to have different border radius for different icons inside one list because its ugly. I think @hazelyang proposal is quite good so we are going to implement it.

@hazelyang I propose add transparent border to all avatars like 1px solid rgba(0,0,0,.1). Do you agree?

Milestone changed to %8.11

Added ~19492 label

That will still mean that all my icons are cropped, but they'll look nicer with the border!

Is it possible to make this a global option in the admin settings? If you can point me in the right direction, I would happily implement it so that you have a checkbox for rounded/non-rounded icons. Then you have the best of both worlds.

I'm sorry to insist, but I agree with @mattyclarkson.

@dzaporozhets since the beginning of the reporting of this issue (since version 8.0), I've seen no acknowledgment that the switch to rounded icons was dismissive of icons which were not designed to fit into a circle. I mean, it looks like you (not you "personally", you as "Gitlab's team") seem to either sidestep the issue (like if not seeing it) or presenting examples like in your https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/3620#note_12864793 where even if the original icon that you chose as an example was squared, it still look "nice" when cropped into a circle. That the icons of GitLab and some other examples well chosen fit "nice" into a circle doesn't mean that all icons that users would like to use will also fit "nicely". So how can you argument in your previous comment that mixing square and circle is "ugly", when to me and to many other users that have reported this issue, this is the current situation (cropping icons) which is ugly!? And adding a border doesn't solve the issue at all. User uploaded icons are still being mutilated.
If Gitlab's team still doesn't want to stop mutilating icons by default (that's your choice after all), please consider the suggestion of @mattyclarkson, which I originally proposed in issue #2948 (closed), to add a global design parameter allowing to switch back to the (sane) world of not mutilating user uploaded icons.

Sorry if this sounds a bit like a rant, I don't mean at all to be mean since I really love the work done at Gitlab, but it looks like the real issue here is being sidestepped and I find it sad...

@dzaporozhets Agree.

We are not going to have different border radius for different icons inside one list because its ugly

@dzaporozhets, re-reading that, I'm not sure I understand; there wouldn't be a mixture in the same list, all of the project icons in the list will be un-cropped. User profile icons will still be rounded, is that what you mean? i.e., the project list will all be un-cropped and any profile icons on the page will be cropped?

Border radius for avatars is part of application design. Take a look at google design - all their avatars are rounded. Does it make their products worse? I don't think so.
We are not adding any design parameters to switch back to something. Thats not how we build software as it benefit small group while affecting quality of software for everyone.
Adding border around avatars is a way telling people that avatar is rounded by UI to prevent confusion. This is an improvement we are going to make.
Some avatars does not look rounded. Thats the price for good application design. Sorry but nothing we can do.

Added frontend label

Milestone changed to %8.12

Removed ~19492 label

mentioned in issue #20128 (closed)

I created an issue for adding border - https://gitlab.com/gitlab-org/gitlab-ce/issues/20128.

@mattyclarkson sorry but we are not going to accept your merge request as it is because we decided to address problem in different way.

Milestone changed to %8.11

Status changed to closed

Well, if that's your decision, let be it.

Just noting some things:

we were not speaking about the user avatars but the project icons
I'm still waiting for a convincing argument about why round is better. "Google does it" is not an argument: youtube, twitter, github, bitbucket and facebook to only name few have (almost) square icons, does that mean that their products are bad?
the only thing that's left is a unilateral decision from GitLab's team. Had the logos of Gitlab been cropped by this change, I'm wondering if the decision would have been the same. To me that looks more like "not my problem" than "we solved the problem".

Unfortunate that this was closed without resolution. The current cropping behavior is objectively wrong, and therefore should be changed.

Square icons look bad because they get cropped. If avatars were not cropped, then both square and circular icons would look good. If you wanted a square avatar, then you would upload a square avatar. If you wanted a circular avatar, then you would upload a circular avatar.

In the meantime, I made a Stylish rule to correct the cropping.

I have to agree. User avatars are fine rounded - that's fairly standard and they usually only show a small portion of the uploaded image anyway. The default project icons look fine too and keep the GitLab defaults consistent. Even just browsing through the public projects on GitLab.com though it's easy to see that many uploaded project icons are awkwardly cropped in the corners. I think that shows pretty well that it's not just a small group that's affected.

To look at it another way: why should GitLab force a design choice on me? The code editor doesn't enforce an arbitrary curly bracket placement just because Microsoft puts them all on a new line - that's what my company's code style guide is for. Our corporate design guide says that all program icons must be square, but GitLab crops them.

Bottom line: make the GitLab defaults consistent and the way you think is best, but if you give me the ability to override the defaults with something I've designed myself, then please don't alter my work. If I want a round project icon, then I'll make it round.

Why are images round in the first place?

Admin message

Admin message

Only make non-image project icons rounded

Merge request reports

Activity

Current page

Adding border

More examples