Merge pull request #10898 from nextcloud/feature/10684/default-logo-color-theme-colors

Switches the default logo color depending on the primary color

apps/theming/css/theming.scss

 	@return (0.2126 * $-local-red  + 0.7152 * $-local-green + 0.0722 * $-local-blue) / 255;
 }
 
+$has-custom-logo: variable_exists('theming-logo-mime') and $theming-logo-mime != '';
+$invert: luma($color-primary) > 0.6;
+
+@if ($has-custom-logo == false) {
+	@if ($invert) {
+		$image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true));
+	} @else {
+		$image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true));
+	}
+}
+
 .nc-theming-main-background {
 	background-color: $color-primary;
 }
 	color: $color-primary-text;
 }
 
-@if (luma($color-primary) > 0.6) {
+@if ($invert) {
 	#appmenu:not(.inverted) svg {
 		filter: invert(1);
 	}
 	background-image: url(./img/core/filetypes/folder-drag-accept.svg?v=#{$theming-cachebuster}) !important;
 }
 
+#theming-preview-logo,
+#header .logo {
+	background-image: $image-logo;
+}
+
 /* override styles for login screen in guest.css */
-@if variable_exists('theming-logo-mime') and $theming-logo-mime != '' {
+@if ($has-custom-logo) {
+	// custom logo
 	#theming-preview-logo,
 	#header .logo {
-		background-image: $image-logo;
 		background-size: contain;
 	}
+
 	#body-login #header .logo {
 		margin-bottom: 22px;
 	}
 } @else {
-	#theming-preview-logo {
-		background-image: $image-logo;
+	// default logo
+	@if ($invert) {
+		#theming-preview-logo,
+		#header .logo {
+			opacity: .6;
+		}
 	}
 }
 
 	color: $color-primary-text;
 }
 
-@if (luma($color-primary) > 0.6) {
+@if ($invert) {
 	#body-login #submit-wrapper .icon-confirm-white {
 		background-image: url('../../../core/img/actions/confirm.svg');
 	}

apps/theming/lib/ImageManager.php

 			case 'logo':
 			case 'logoheader':
 			case 'favicon':
-				return $this->urlGenerator->imagePath('core', 'logo.png') . '?v=' . $cacheBusterCounter;
+				return $this->urlGenerator->imagePath('core', 'logo/logo.png') . '?v=' . $cacheBusterCounter;
 			case 'background':
 				return $this->urlGenerator->imagePath('core', 'background.png') . '?v=' . $cacheBusterCounter;
 		}

apps/theming/lib/ThemingDefaults.php

 
 namespace OCA\Theming;
 
-
 use OCP\App\AppPathNotFoundException;
 use OCP\App\IAppManager;
 use OCP\Files\NotFoundException;
 
 		if(!$logo || !$logoExists) {
 			if($useSvg) {
-				$logo = $this->urlGenerator->imagePath('core', 'logo.svg');
+				$logo = $this->urlGenerator->imagePath('core', 'logo/logo.svg');
 			} else {
-				$logo = $this->urlGenerator->imagePath('core', 'logo.png');
+				$logo = $this->urlGenerator->imagePath('core', 'logo/logo.png');
 			}
 			return $logo . '?v=' . $cacheBusterCounter;
 		}

apps/theming/lib/Util.php

 				}
 			} catch (NotFoundException $e) {}
 		}
-		return \OC::$SERVERROOT . '/core/img/logo.svg';
+		return \OC::$SERVERROOT . '/core/img/logo/logo.svg';
 	}
 
 	/**
 
 	/**
 	 * Check if a custom theme is set in the server configuration
-	 * 
+	 *
 	 * @return bool
 	 */
 	public function isAlreadyThemed() {

apps/theming/tests/ImageManagerTest.php

 			->willReturnOnConsecutiveCalls(0, false);
 		$this->urlGenerator->expects($this->once())
 			->method('imagePath')
-			->with('core', 'logo.png')
-			->willReturn('logo.png');
-		$this->assertEquals('logo.png?v=0', $this->imageManager->getImageUrl('logo'));
+			->with('core', 'logo/logo.png')
+			->willReturn('logo/logo.png');
+		$this->assertEquals('logo/logo.png?v=0', $this->imageManager->getImageUrl('logo'));
 	}
 
 	public function testGetImageUrlAbsolute() {

apps/theming/tests/ThemingDefaultsTest.php

 	}
 
 	public function testGetLogoDefaultWithSvg() {
-		$this->getLogoHelper('logo.svg', true);
+		$this->getLogoHelper('logo/logo.svg', true);
 	}
 
 	public function testGetLogoDefaultWithoutSvg() {
-		$this->getLogoHelper('logo.png', false);
+		$this->getLogoHelper('logo/logo.png', false);
 	}
 
 	public function testGetLogoCustom() {

apps/theming/tests/UtilTest.php

 		$invert = $this->util->invertTextColor('aaabbbcccddd123');
 		$this->assertEquals(false, $invert);
 	}
-	
+
 	public function testInvertTextColorEmpty() {
 		$invert = $this->util->invertTextColor('');
 		$this->assertEquals(false, $invert);
 	public function dataGetAppIcon() {
 		return [
 			['user_ldap', \OC_App::getAppPath('user_ldap') . '/img/app.svg'],
-			['noapplikethis', \OC::$SERVERROOT . '/core/img/logo.svg'],
+			['noapplikethis', \OC::$SERVERROOT . '/core/img/logo/logo.svg'],
 			['comments', \OC_App::getAppPath('comments') . '/img/comments.svg'],
 		];
 	}
 
 	public function dataGetAppImage() {
 		return [
-			['core', 'logo.svg', \OC::$SERVERROOT . '/core/img/logo.svg'],
+			['core', 'logo/logo.svg', \OC::$SERVERROOT . '/core/img/logo/logo.svg'],
 			['files', 'external', \OC::$SERVERROOT . '/apps/files/img/external.svg'],
 			['files', 'external.svg', \OC::$SERVERROOT . '/apps/files/img/external.svg'],
 			['noapplikethis', 'foobar.svg', false],

core/Controller/LoginController.php

 		Util::addHeader('meta', ['property' => 'og:site_name', 'content' => Util::sanitizeHTML($this->defaults->getName())]);
 		Util::addHeader('meta', ['property' => 'og:url', 'content' => $this->urlGenerator->getAbsoluteURL('/')]);
 		Util::addHeader('meta', ['property' => 'og:type', 'content' => 'website']);
-		Util::addHeader('meta', ['property' => 'og:image', 'content' => $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core','favicon-touch.png'))]);
+		Util::addHeader('meta', ['property' => 'og:image', 'content' => $this->urlGenerator->getAbsoluteURL($this->urlGenerator->imagePath('core', 'favicon-touch.png'))]);
 
 		return new TemplateResponse(
 			$this->appName, 'login', $parameters, 'guest'

core/Controller/SvgController.php

 use OCP\AppFramework\Http\DataDisplayResponse;
 use OCP\AppFramework\Http\NotFoundResponse;
 use OCP\AppFramework\Utility\ITimeFactory;
-use OCP\Files\NotFoundException;
 use OCP\App\IAppManager;
 use OCP\IRequest;
 
 
 		$appRootPath = $this->appManager->getAppPath($app);
 		$appPath = substr($appRootPath, strlen($this->serverRoot));
-		
+
 		if (!$appPath) {
 			return new NotFoundResponse();
 		}
 		return $this->getSvg($path, $color, $fileName);
 	}
 
-
 	/**
 	 * Generate svg from filename with the requested color
 	 *
 
 		// add fill (fill is not present on black elements)
 		$fillRe = '/<((circle|rect|path)((?!fill)[a-z0-9 =".\-#():;])+)\/>/mi';
-
 		$svg = preg_replace($fillRe, '<$1 fill="#' . $color . '"/>', $svg);
 
 		// replace any fill or stroke colors

core/css/functions.scss

  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  *
  */
- 
+
+/**
+ * Removes the "#" from a color.
+ *
+ * @param string $color The color
+ * @return string The color without #
+ */
+@function remove-hash-from-color($color) {
+	$index: str-index(inspect($color), '#');
+	@if $index {
+		$color: str-slice(inspect($color), 2);
+	}
+	@return $color;
+}
+
+/**
+ * Calculates the URL to the svg under the SVG API.
+ *
+ * @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
+ * @return string The URL to the svg.
+ */
+@function icon-color-path($icon, $dir, $color, $version: 1, $core: false) {
+	$color: remove-hash-from-color($color);
+	@if $core {
+		@return '#{$webroot}/svg/core/#{$dir}/#{$icon}/#{$color}?v=#{$version}';
+	} @else {
+		@return '#{$webroot}/svg/#{$dir}/#{$icon}/#{$color}?v=#{$version}';
+	}
+}
+
 /**
  * SVG COLOR API
- * 
+ *
  * @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) {
-	// remove # from color
-	// inspect cast int to string
-	$index: str-index(inspect($color), '#');
-	@if $index {
-		$color: str-slice(inspect($color), 2);
-	}
+	$color: remove-hash-from-color($color);
 	$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}');
-	}
+	#{$varName}: url(icon-color-path($icon, $dir, $color, $version, $core));
 	background-image: var(#{$varName});
 }
 

core/css/guest.css

 }
 
 #header .logo {
-	background-image: url('../img/logo.svg?v=1');
+	background-image: url('../img/logo/logo.svg?v=1');
 	background-repeat: no-repeat;
 	background-size: 175px;
 	background-position: center;

core/img/logo.svg

-<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="128" width="256" viewBox="0 0 256 128" ><g stroke="#fff" stroke-width="22" fill="none"><circle cy="64" cx="40" r="26"/><circle cy="64" cx="216" r="26"/><circle cy="64" cx="128" r="46"/></g></svg>

core/img/logo/logo.svg

+<svg width="256" height="128" version="1.1" viewBox="0 0 256 128" xmlns="http://www.w3.org/2000/svg"><g fill="none" stroke-width="22"><circle cx="40" cy="64" r="26" stroke="#fff" fill="none"/><circle cx="216" cy="64" r="26" stroke="#fff" fill="none"/><circle cx="128" cy="64" r="46" stroke="#fff" fill="none"/></g></svg>

lib/private/legacy/defaults.php

 		}
 
 		if($useSvg) {
-			$logo = \OC::$server->getURLGenerator()->imagePath('core', 'logo.svg');
+			$logo = \OC::$server->getURLGenerator()->imagePath('core', 'logo/logo.svg');
 		} else {
-			$logo = \OC::$server->getURLGenerator()->imagePath('core', 'logo.png');
+			$logo = \OC::$server->getURLGenerator()->imagePath('core', 'logo/logo.png');
 		}
 	    return $logo . '?v=' . hash('sha1', implode('.', \OCP\Util::getVersion()));
 	}

tests/Core/Controller/SvgControllerTest.php

+<?php
+declare (strict_types = 1);
+/**
+ * @copyright Copyright (c) 2018 Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @author Michael Weimann <mail@michael-weimann.eu>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+namespace Tests\Core\Controller;
+
+use OC\AppFramework\Http;
+use OC\Core\Controller\SvgController;
+use OCP\App\IAppManager;
+use OCP\AppFramework\Utility\ITimeFactory;
+use OCP\IRequest;
+use Test\TestCase;
+
+/**
+ * This class provides test cases for the svg controller
+ */
+class SvgControllerTest extends TestCase {
+
+	const TEST_IMAGES_SOURCE_PATH = __DIR__ . '/../../data/svg';
+	const TEST_IMAGES_PATH = __DIR__ . '/../../../core/img/testImages';
+	const TEST_IMAGE_MIXED = 'mixed-source.svg';
+	const TEST_IMAGE_RECT = 'rect-black.svg';
+	const TEST_IMAGES = [
+		self::TEST_IMAGE_MIXED,
+		self::TEST_IMAGE_RECT,
+	];
+
+	/**
+	 * @var SvgController
+	 */
+	private $svgController;
+
+	/**
+	 * Copy test svgs into the core img "test" directory.
+	 *
+	 * @beforeClass
+	 * @return void
+	 */
+	public static function copyTestImagesIntoPlace() {
+		mkdir(self::TEST_IMAGES_PATH);
+		foreach (self::TEST_IMAGES as $testImage) {
+			copy(
+				self::TEST_IMAGES_SOURCE_PATH .'/' . $testImage,
+				self::TEST_IMAGES_PATH . '/' . $testImage
+			);
+		}
+	}
+
+	/**
+	 * Removes the test svgs from the core img "test" directory.
+	 *
+	 * @afterClass
+	 * @return void
+	 */
+	public static function removeTestImages() {
+		foreach (self::TEST_IMAGES as $testImage) {
+			unlink(self::TEST_IMAGES_PATH . '/' . $testImage);
+		}
+		rmdir(self::TEST_IMAGES_PATH);
+	}
+
+	/**
+	 * Setups a SVG controller instance for tests.
+	 *
+	 * @before
+	 * @return void
+	 */
+	public function setupSvgController() {
+		$request = $this->getMockBuilder(IRequest::class)->getMock();
+		$timeFactory = $this->getMockBuilder(ITimeFactory::class)->getMock();
+		$appManager = $this->getMockBuilder(IAppManager::class)->getMock();
+		$this->svgController = new SvgController('core', $request, $timeFactory, $appManager);
+	}
+
+	/**
+	 * Checks that requesting an unknown image results in a 404.
+	 *
+	 * @test
+	 * @return void
+	 */
+	public function testGetSvgFromCoreNotFound() {
+		$response = $this->svgController->getSvgFromCore('huhuu', '2342', '#ff0000');
+		self::assertEquals(Http::STATUS_NOT_FOUND, $response->getStatus());
+	}
+
+	/**
+	 * Provides svg coloring test data.
+	 *
+	 * @return array
+	 */
+	public function provideGetSvgFromCoreTestData(): array {
+		return [
+			'mixed' => ['mixed-source', 'f00', file_get_contents(self::TEST_IMAGES_SOURCE_PATH . '/mixed-red.svg')],
+			'black rect' => ['rect-black', 'f00', file_get_contents(self::TEST_IMAGES_SOURCE_PATH . '/rect-red.svg')],
+		];
+	}
+
+	/**
+	 * Tests that retrieving a colored SVG works.
+	 *
+	 * @test
+	 * @dataProvider provideGetSvgFromCoreTestData
+	 * @param string $name The requested svg name
+	 * @param string $color The requested color
+	 * @param string $expected The expected svg
+	 * @return void
+	 */
+	public function testGetSvgFromCore(string $name, string $color, string $expected) {
+		$response = $this->svgController->getSvgFromCore('testImages', $name, $color);
+
+		self::assertEquals(Http::STATUS_OK, $response->getStatus());
+
+		$headers = $response->getHeaders();
+		self::assertArrayHasKey('Content-Type', $headers);
+		self::assertEquals($headers['Content-Type'], 'image/svg+xml');
+
+		self::assertEquals($expected, $response->getData());
+	}
+}

tests/data/svg/mixed-red.svg

+<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0,-247)"><rect x="3.3609" y="250.93" width="16.253" height="15.497" fill="#f00"/><ellipse cx="37.089" cy="257.97" rx="8.5517" ry="7.9375" fill="#f00"/><circle cx="12.19" cy="281.31" r="10" fill="#f00"/><rect x="29.293" y="272.81" width="16.253" height="15.497" fill="#f00"/></g></svg>

tests/data/svg/mixed-source.svg

+<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0,-247)"><rect x="3.3609" y="250.93" width="16.253" height="15.497"/><ellipse cx="37.089" cy="257.97" rx="8.5517" ry="7.9375" fill="#123456"/><circle cx="12.19" cy="281.31" r="10"/><rect x="29.293" y="272.81" width="16.253" height="15.497" fill="#6474a5"/></g></svg>

tests/data/svg/rect-black.svg

+<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0,-247)"><rect x="10" y="257" width="30" height="30"/></g></svg>

tests/data/svg/rect-red.svg

+<svg width="50mm" height="50mm" version="1.1" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg"><g transform="translate(0,-247)"><rect x="10" y="257" width="30" height="30" fill="#f00"/></g></svg>

tests/lib/Files/Cache/ScannerTest.php

 		$this->assertEquals($cachedData['mimetype'], 'text/plain');
 		$this->assertNotEquals($cachedData['parent'], -1); //parent folders should be scanned automatically
 
-		$data = file_get_contents(\OC::$SERVERROOT . '/core/img/logo.png');
+		$data = file_get_contents(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$this->storage->file_put_contents('foo.png', $data);
 		$this->scanner->scanFile('foo.png');
 
 
 	private function fillTestFolders() {
 		$textData = "dummy file data\n";
-		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$this->storage->mkdir('folder');
 		$this->storage->file_put_contents('foo.txt', $textData);
 		$this->storage->file_put_contents('foo.png', $imgData);

tests/lib/Files/Cache/UpdaterLegacyTest.php

 
 		$this->storage = new \OC\Files\Storage\Temporary(array());
 		$textData = "dummy file data\n";
-		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$this->storage->mkdir('folder');
 		$this->storage->file_put_contents('foo.txt', $textData);
 		$this->storage->file_put_contents('foo.png', $imgData);
 
 	public function testWrite() {
 		$textSize = strlen("dummy file data\n");
-		$imageSize = filesize(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imageSize = filesize(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$this->cache->put('foo.txt', array('mtime' => 100, 'storage_mtime' => 150));
 		$rootCachedData = $this->cache->get('');
 		$this->assertEquals(3 * $textSize + $imageSize, $rootCachedData['size']);
 
 	public function testDelete() {
 		$textSize = strlen("dummy file data\n");
-		$imageSize = filesize(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imageSize = filesize(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$rootCachedData = $this->cache->get('');
 		$oldEtag = $rootCachedData['etag'];
 		$this->assertEquals(3 * $textSize + $imageSize, $rootCachedData['size']);
 
 	public function testRename() {
 		$textSize = strlen("dummy file data\n");
-		$imageSize = filesize(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imageSize = filesize(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$rootCachedData = $this->cache->get('');
 		$this->assertEquals(3 * $textSize + $imageSize, $rootCachedData['size']);
 

tests/lib/Files/Cache/WatcherTest.php

 	private function getTestStorage($scan = true) {
 		$storage = new \OC\Files\Storage\Temporary(array());
 		$textData = "dummy file data\n";
-		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$storage->mkdir('folder');
 		$storage->file_put_contents('foo.txt', $textData);
 		$storage->file_put_contents('foo.png', $imgData);

tests/lib/Files/ObjectStore/NoopScannerTest.php

 
 	private function fillTestFolders() {
 		$textData = "dummy file data\n";
-		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$this->storage->mkdir('folder');
 		$this->storage->file_put_contents('foo.txt', $textData);
 		$this->storage->file_put_contents('foo.png', $imgData);

tests/lib/Files/ViewTest.php

 		Filesystem::mount($storage2, array(), $root . '/substorage');
 		Filesystem::mount($storage3, array(), $root . '/folder/anotherstorage');
 		$textSize = strlen("dummy file data\n");
-		$imageSize = filesize(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imageSize = filesize(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$storageSize = $textSize * 2 + $imageSize;
 
 		$storageInfo = $storage3->getCache()->get('');
 		 */
 		$storage = new $class(array());
 		$textData = "dummy file data\n";
-		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo.png');
+		$imgData = file_get_contents(\OC::$SERVERROOT . '/core/img/logo/logo.png');
 		$storage->mkdir('folder');
 		$storage->file_put_contents('foo.txt', $textData);
 		$storage->file_put_contents('foo.png', $imgData);