Switches the default logo color depending on the primary color #10898

weeman1337 · 2018-08-28T10:32:11Z

These changes add switching the default logo from white to blue depending on the primary color.
The switch happens between #cccccc and #dddddd

A custom logo doesn't use this mechanism.

Closes #10684

weeman1337 · 2018-08-28T10:34:09Z

core/img/logo-blue.svg

@@ -0,0 +1,76 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>


I added the blue versions and didn't use the svg api, because it may not be available e.g. on the guest page.
There was another issue also taking out some icons for that reason.

jancborchardt · 2018-08-28T13:30:05Z

@weeman1337 cool! I will come over to you in a bit :) Meanwhile – what would happen, say, when you have a light yellow or green theming color? Cause then the logo color would clash, right? That's why I would make it dark instead of blue, just like the top bar icons.

weeman1337 · 2018-08-28T13:39:02Z

@jancborchardt I made it blue because of #10684 (comment)

We had some discussion about that in the past, and the conclusion was that we don't want to invert the logo, because the Nextcloud logo should either be blue or white.

weeman1337 · 2018-08-28T14:22:54Z

@skjnldsv I moved the logos to img/logo and started using the SVG API as suggested.
Let's see what the build says..

jancborchardt · 2018-08-28T15:04:59Z

So @weeman1337 and me just looked at it and we just have to pick a tradeoff:

Logo always ⚪ white: Looks bad as soon as the color is light and all icons are dark
Logo ⚪ white on dark background, and 🔵 blue on light background: Looks really bad on any light color which is not grey.
Logo ⚪ white on dark background, and ⚫ black on light background: Looks decent.

So we are going for option 3. cc for info @nextcloud/designers

Only thing to adjust is that the threshold for change is the same as for the app icons in the top bar. :) Then 👍 from me.

MorrisJobke · 2018-08-28T15:52:52Z

Please wait for the stable14 branch until merging. I would like to not merge this into 14 that short before a release.

weeman1337 · 2018-08-28T16:23:02Z

After a short discussion I updated it to work like the app icons. Looks quite nice:

skjnldsv

Good stuff :)
Some small nitpicks ;)

skjnldsv · 2018-08-29T09:22:27Z

apps/theming/css/theming.scss

+
+@if ($has-custom-logo == false) {
+	@if ($invert) {
+		$image-logo: url('../../../../svg/core/logo/logo/000000?v=1');


Please use the scss function for that :)

server/core/css/functions.scss

Lines 34 to 48 in 7210b11

@mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {

// remove # from color

// inspect cast int to string

$index: str-index(inspect($color), '#');

@if $index {

$color: str-slice(inspect($color), 2);

}

$varName: "--icon-#{$icon}-#{$color}";

@if $core {

#{$varName}: url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}');

} @else {

#{$varName}: url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}');

}

background-image: var(#{$varName});

}

skjnldsv · 2018-08-29T09:27:07Z

core/img/logo/logo.svg

@@ -0,0 +1,71 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>


why this change of the logo file? :)

I just removed the grouping of the three circles. The svg coloring freaked out..

Can you clean things up then? :)
We use scour ;)

scour --create-groups --enable-id-stripping --enable-comment-stripping --shorten-ids --remove-metadata --strip-xml-prolog --no-line-breaks -i old.svg new.svg

skjnldsv · 2018-08-29T09:27:41Z

core/Controller/SvgController.php

@@ -119,8 +119,7 @@ private function getSvg(string $path, string $color, string $fileName) {
 		}

 		// add fill (fill is not present on black elements)
-		$fillRe = '/<((circle|rect|path)((?!fill)[a-z0-9 =".\-#():;])+)\/>/mi';
-
+		$fillRe = '/<((circle|rect|path)((!fill)[a-z0-9 =".\-#():;])+)\/>/mi';


If you change the regex, please update the tests to make sure we also cover the reason why you changed this ;)

I'll add a test!
It changes the regex to do what the comment says ;) The actual version replaces existing fills. Removing the ? only matches if there isn't a fill already.

weeman1337 · 2018-08-30T19:12:35Z

@skjnldsv I added a SvgControllerTest. The SVG coloring has some pitfalls. E.g. applying it on a black circle (without stroke/fill) or a group (applying it to child elements) may result in unwanted filled elements. I tweaked the Nextcloud logo to work.

With the new test we may extend the behavior in the future.

weeman1337 · 2018-08-30T19:14:42Z

core/css/functions.scss

 * @param string $icon the icon filename
 * @param string $dir the icon folder within /core/img if $core or app name
 * @param string $color the desired color in hexadecimal
 * @param int $version the version of the file
 * @param bool [$core] search icon in core
 *
- * @returns string the url to the svg api endpoint
+ * @returns A background image with the url to the set to the requested icon.
 */
 @mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {


I took this apart, because it didn't do what the comment said...

skjnldsv · 2018-08-30T19:54:38Z

With the new test we may extend the behavior in the future.

Maybe we should enforce a fill attribute and only replace in the future :)

suntorytimed · 2018-08-31T07:31:46Z

Could this be implemented for the favicon as well? Would be nice to have a favicon that corresponds to the primary color and the different color of the Nextcloud logo. Currently it is necessary to use imagmagick to do any changes to the favicon.

skjnldsv · 2018-08-31T10:25:23Z

@suntorytimed unfortunately, no. Svg as favicon are nowhere near to be supported: https://caniuse.com/#feat=link-icon-svg

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

rullzer · 2018-10-02T06:38:21Z

Rebased

skjnldsv

Code looks good! Let's wait the input of our lord and master @juliushaertl 😉

juliushaertl · 2018-10-02T07:40:31Z

@weeman1337 There is one test failing:

There was 1 failure:

1) OCA\Theming\Tests\UtilTest::testGetAppImage with data set #0 ('core', 'logo.svg', '/drone/src/github.com/nextclo...go.svg')
Failed asserting that false matches expected '/drone/src/github.com/nextcloud/server/core/img/logo.svg'.

/drone/src/github.com/nextcloud/server/apps/theming/tests/UtilTest.php:172

Besides that it looks good to me, the favicon could also use the inverted logo, as we generate a png from with imagemagick for that anyway, but we can do that in a follow up pr.

jancborchardt

Nice, looking good! 👍

And yes, @juliushaertl follow-up PR to adjust the favicon would be great! :)

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

MorrisJobke · 2018-10-03T19:39:38Z

@weeman1337 Tests still fail 😢

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

weeman1337 commented Aug 28, 2018

View reviewed changes

weeman1337 requested review from skjnldsv, juliushaertl and MorrisJobke August 28, 2018 11:43

weeman1337 added design Design, UI, UX, etc. 3. to review Waiting for reviews labels Aug 28, 2018

MorrisJobke added this to the Nextcloud 15 milestone Aug 28, 2018

skjnldsv requested changes Aug 29, 2018

View reviewed changes

juliushaertl added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Aug 30, 2018

weeman1337 force-pushed the feature/10684/default-logo-color-theme-colors branch from 7210b11 to 0576f82 Compare August 30, 2018 19:09

weeman1337 commented Aug 30, 2018

View reviewed changes

weeman1337 force-pushed the feature/10684/default-logo-color-theme-colors branch from 0576f82 to d1478a9 Compare September 6, 2018 17:45

weeman1337 added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Sep 22, 2018

weeman1337 added 4 commits October 2, 2018 08:37

Switches the default logo color depending on the primary color

92049c3

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

Moves the logo files to logo

d855c38

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

Updates inverted logo handling to work like the app icons

c7e81e1

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

Refactors the scss svg functions

a45ec3d

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

rullzer force-pushed the feature/10684/default-logo-color-theme-colors branch from d1478a9 to a45ec3d Compare October 2, 2018 06:38

skjnldsv approved these changes Oct 2, 2018

View reviewed changes

MorrisJobke added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Oct 2, 2018

jancborchardt approved these changes Oct 3, 2018

View reviewed changes

Fixes the logo test

065e0c0

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

Adapts the theming util to the new core logo image path

044ab0c

Signed-off-by: Michael Weimann <mail@michael-weimann.eu>

weeman1337 added 4. to release Ready to be released and/or waiting for tests to finish and removed 2. developing Work in progress labels Oct 4, 2018

MorrisJobke merged commit 7971ba5 into master Oct 8, 2018

MorrisJobke deleted the feature/10684/default-logo-color-theme-colors branch October 8, 2018 08:33

MorrisJobke mentioned this pull request Dec 6, 2018

Default logo is not shown #12888

Closed

nickvergessen mentioned this pull request Mar 8, 2023

Move encrypt-all password email to EmailTemplate #36351

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Switches the default logo color depending on the primary color #10898

Switches the default logo color depending on the primary color #10898

weeman1337 commented Aug 28, 2018

weeman1337 Aug 28, 2018

jancborchardt commented Aug 28, 2018

weeman1337 commented Aug 28, 2018

weeman1337 commented Aug 28, 2018

jancborchardt commented Aug 28, 2018

MorrisJobke commented Aug 28, 2018

weeman1337 commented Aug 28, 2018

skjnldsv left a comment

skjnldsv Aug 29, 2018

skjnldsv Aug 29, 2018

skjnldsv Aug 29, 2018

weeman1337 Aug 29, 2018

skjnldsv Aug 29, 2018

weeman1337 Aug 30, 2018

skjnldsv Aug 29, 2018

weeman1337 Aug 29, 2018

weeman1337 commented Aug 30, 2018

weeman1337 Aug 30, 2018

skjnldsv Aug 30, 2018

skjnldsv commented Aug 30, 2018

suntorytimed commented Aug 31, 2018

skjnldsv commented Aug 31, 2018

rullzer commented Oct 2, 2018

skjnldsv left a comment

juliushaertl commented Oct 2, 2018

jancborchardt left a comment

MorrisJobke commented Oct 3, 2018

		@@ -0,0 +1,76 @@
		<?xml version="1.0" encoding="UTF-8" standalone="no"?>

	@mixin icon-color($icon, $dir, $color, $version: 1, $core: false) {
	// remove # from color
	// inspect cast int to string
	$index: str-index(inspect($color), '#');
	@if $index {
	$color: str-slice(inspect($color), 2);
	}
	$varName: "--icon-#{$icon}-#{$color}";
	@if $core {
	#{$varName}: url('#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
	} @else {
	#{$varName}: url('#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}');
	}
	background-image: var(#{$varName});
	}

		@@ -0,0 +1,71 @@
		<?xml version="1.0" encoding="UTF-8" standalone="no"?>

Switches the default logo color depending on the primary color #10898

Switches the default logo color depending on the primary color #10898

Conversation

weeman1337 commented Aug 28, 2018

Choose a reason for hiding this comment

jancborchardt commented Aug 28, 2018

weeman1337 commented Aug 28, 2018

weeman1337 commented Aug 28, 2018

jancborchardt commented Aug 28, 2018

MorrisJobke commented Aug 28, 2018

weeman1337 commented Aug 28, 2018

skjnldsv left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

weeman1337 commented Aug 30, 2018

Choose a reason for hiding this comment

Choose a reason for hiding this comment

skjnldsv commented Aug 30, 2018

suntorytimed commented Aug 31, 2018

skjnldsv commented Aug 31, 2018

rullzer commented Oct 2, 2018

skjnldsv left a comment

Choose a reason for hiding this comment

juliushaertl commented Oct 2, 2018

jancborchardt left a comment

Choose a reason for hiding this comment

MorrisJobke commented Oct 3, 2018