Merge pull request #10898 from nextcloud/feature/10684/default-logo-c…

…olor-theme-colors

Switches the default logo color depending on the primary color

apps/theming/css/theming.scss

@@ -7,6 +7,17 @@
 	@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;
 }
@@ -19,7 +30,7 @@
 	color: $color-primary-text;
 }
 
-@if (luma($color-primary) > 0.6) {
+@if ($invert) {
 	#appmenu:not(.inverted) svg {
 		filter: invert(1);
 	}
@@ -98,19 +109,29 @@
 	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;
+		}
 	}
 }
 
@@ -156,7 +177,7 @@ input.primary,
 	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

@@ -83,7 +83,7 @@ public function getImageUrl(string $key, bool $useSvg = true): string {
 			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

@@ -33,7 +33,6 @@
 
 namespace OCA\Theming;
 
-
 use OCP\App\AppPathNotFoundException;
 use OCP\App\IAppManager;
 use OCP\Files\NotFoundException;
@@ -217,9 +216,9 @@ public function getLogo($useSvg = true): string {
 
 		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

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

apps/theming/tests/ImageManagerTest.php

@@ -144,9 +144,9 @@ public function testGetImageUrlDefault() {
 			->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

@@ -593,11 +593,11 @@ private function getLogoHelper($withName, $useSvg) {
 	}
 
 	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

@@ -92,7 +92,7 @@ public function testInvertTextColorInvalid() {
 		$invert = $this->util->invertTextColor('aaabbbcccddd123');
 		$this->assertEquals(false, $invert);
 	}
-	
+
 	public function testInvertTextColorEmpty() {
 		$invert = $this->util->invertTextColor('');
 		$this->assertEquals(false, $invert);
@@ -139,7 +139,7 @@ public function testGetAppIcon($app, $expected) {
 	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'],
 		];
 	}
@@ -174,7 +174,7 @@ public function testGetAppImage($app, $image, $expected) {
 
 	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

@@ -194,7 +194,7 @@ public function showLoginForm(string $user = null, string $redirect_url = null):
 		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

@@ -29,7 +29,6 @@
 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;
 
@@ -91,15 +90,14 @@ public function getSvgFromApp(string $app, string $fileName, string $color = 'ff
 
 		$appRootPath = $this->appManager->getAppPath($app);
 		$appPath = substr($appRootPath, strlen($this->serverRoot));
-		
+
 		if (!$appPath) {
 			return new NotFoundResponse();
 		}
 		$path = $this->serverRoot . $appPath ."/img/$fileName.svg";
 		return $this->getSvg($path, $color, $fileName);
 	}
 
-
 	/**
 	 * Generate svg from filename with the requested color
 	 *
@@ -120,7 +118,6 @@ 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';
-
 		$svg = preg_replace($fillRe, '<$1 fill="#' . $color . '"/>', $svg);
 
 		// replace any fill or stroke colors

core/css/functions.scss

@@ -19,31 +19,55 @@
  * 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

@@ -78,7 +78,7 @@ body {
 }
 
 #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;

lib/private/legacy/defaults.php

@@ -315,9 +315,9 @@ public function getLogo($useSvg = true) {
 		}
 
 		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()));
 	}