Add icon without red dot for red theming colors

[juliusknorr]

This adds a fallback icon for primary colors that are red.

The fallback is not used on bright redish colors and on to dark colors where the red dot is clearly visible.

fixes #104

@nextcloud/designers

[MariusBluem]

By testing this PR, I saw we are not showing the notification icon permanently ... is this by intention? I thought we wanted to change this behavior? @nickvergessen

Ref.: #95 (PR), Issue: #2 🤔

[juliusknorr]

@MariusBluem Works fine for me here.

[nickvergessen]

Hmm, should we really pick white? Or use another color or black for the dot, so it's better spotable?

[MariusBluem]

We could simply take the opposite color:

[juliusknorr]

The issue with a black dot is that it might not be nicely visible on the various brightness levels of red colors we can have there:

@MariusBluem Complementary colors also don't work nicely in terms of contrast:

The white one still seems to be the most obvious one to me, that is clearly visible though all red color values. In cases when the theming color is bright enough, we still use the regular black icon with the red dot, which also looks good then:

[nickvergessen]

Yes, it's "visible" but not "disturbing" enough:
Just look at your screenshot:

Do you immediately see that there is a notification?

[juliusknorr]

Do you immediately see that there is a notification?

I'd say yes, since the icon also doesn't have any opacity as the other icons, but I welcome other ideas on how we can make it a more obvious.

[MariusBluem]

Or we make it flashing ...

[nickvergessen]

We have a little animation, but only for ~3secs. If you load the app in the background you miss it, anyway... lets continue with being productive

[jancborchardt]

I’d say it’s a good enhancement already.

In addition, in #104 (comment), @j-ed did a mockup with a blue notification bubble color (we could use Nextcloud blue) which would be used in these cases. Maybe worth a try @juliushaertl?

But I’m also fine with it being just white there, as mentioned the opacity is also different.

[skjnldsv]

let's make the dot pulse?

[jancborchardt]

Nothing in the interface should pulse consistently, that's irritating.

We do have the form (dot), we simply need to add the color here too.

[juliusknorr]

Here are some examples with the blue dot, but I also think that this doesn't work well in terms of contrast:

But I've no strong opinion on this, let's not invest to much time into an edgecase like this. I'd say we should merge the white one for now and we can still improve later if needed.

[jancborchardt]

Fine by me with the white dot. :)

[MorrisJobke]

This file does not exist 🙈

[juliusknorr]

Fixed.

[nickvergessen]

Sorry, we are not using background images, but a normal image.
The path is calculated in

notifications/js-src/components/root.vue

Lines 38 to 49 in 94309c8

	iconPath: function() {
	var iconPath = 'notifications';
	if (/*this.backgroundFetching &&*/ this.notifications.length) {
	iconPath += '-new';
	}
	if (this.invertedTheme) {
	iconPath += '-dark';
	}
	return OC.imagePath('notifications', iconPath);

Can we do this calculation properly there as well?

[MorrisJobke]

Beside that I'm fine with the white one 👍

[MorrisJobke]

I checked out this branch and changed the color to #FF0000 but it still shows the old avatar. Even after clearing the browser cache.

Even after clearing the SCSS caches via occ maintenance:repair it still shows the old one.

[nickvergessen]

Replaced by #156