Switches the default logo color depending on the primary color by weeman1337 · Pull Request #10898 · nextcloud/server

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

@@ -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

+
+@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
@mixinicon-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

@@ -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

 // 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

- * @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 😉

juliusknorr · 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 MorrisJobke, juliusknorr and skjnldsv 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

juliusknorr 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 0576f82Compare 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 d1478a9Compare 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 a45ec3dCompare 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 masterOct 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

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

	@mixinicon-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"?>

Uh oh!

Uh oh!

Conversation

weeman1337 commented Aug 28, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

jancborchardt commented Aug 28, 2018

Uh oh!

weeman1337 commented Aug 28, 2018

Uh oh!

weeman1337 commented Aug 28, 2018

Uh oh!

jancborchardt commented Aug 28, 2018

Uh oh!

MorrisJobke commented Aug 28, 2018

Uh oh!

weeman1337 commented Aug 28, 2018

Uh oh!

skjnldsv left a comment

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!

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!

Choose a reason for hiding this comment

Uh oh!

weeman1337 commented Aug 30, 2018

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

skjnldsv commented Aug 30, 2018

Uh oh!

suntorytimed commented Aug 31, 2018

Uh oh!

skjnldsv commented Aug 31, 2018

Uh oh!

rullzer commented Oct 2, 2018

Uh oh!

skjnldsv left a comment

Choose a reason for hiding this comment

Uh oh!

juliusknorr commented Oct 2, 2018

Uh oh!

jancborchardt left a comment

Choose a reason for hiding this comment

Uh oh!

MorrisJobke commented Oct 3, 2018

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants