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

Switches the default logo color depending on the primary color
This commit is contained in:
Morris Jobke 2018-10-08 10:33:22 +02:00 committed by GitHub
commit 7971ba5cc6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 237 additions and 53 deletions

View File

@ -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');
}

View File

@ -83,7 +83,7 @@ class ImageManager {
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;
}

View File

@ -33,7 +33,6 @@
namespace OCA\Theming;
use OCP\App\AppPathNotFoundException;
use OCP\App\IAppManager;
use OCP\Files\NotFoundException;
@ -217,9 +216,9 @@ class ThemingDefaults extends \OC_Defaults {
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;
}

View File

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

View File

@ -144,9 +144,9 @@ class ImageManagerTest extends TestCase {
->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() {

View File

@ -593,11 +593,11 @@ class ThemingDefaultsTest extends TestCase {
}
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() {

View File

@ -92,7 +92,7 @@ class UtilTest extends TestCase {
$invert = $this->util->invertTextColor('aaabbbcccddd123');
$this->assertEquals(false, $invert);
}
public function testInvertTextColorEmpty() {
$invert = $this->util->invertTextColor('');
$this->assertEquals(false, $invert);
@ -139,7 +139,7 @@ class UtilTest extends TestCase {
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 @@ class UtilTest extends TestCase {
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],

View File

@ -194,7 +194,7 @@ class LoginController extends Controller {
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'

View File

@ -29,7 +29,6 @@ use OCP\AppFramework\Http;
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,7 +90,7 @@ class SvgController extends Controller {
$appRootPath = $this->appManager->getAppPath($app);
$appPath = substr($appRootPath, strlen($this->serverRoot));
if (!$appPath) {
return new NotFoundResponse();
}
@ -99,7 +98,6 @@ class SvgController extends Controller {
return $this->getSvg($path, $color, $fileName);
}
/**
* Generate svg from filename with the requested color
*
@ -120,7 +118,6 @@ class SvgController extends Controller {
// 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

View File

@ -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});
}

View File

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

View File

@ -1 +0,0 @@
<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>

Before

Width:  |  Height:  |  Size: 258 B

View File

Before

Width:  |  Height:  |  Size: 2.6 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 3.5 KiB

After

Width:  |  Height:  |  Size: 3.5 KiB

1
core/img/logo/logo.svg Normal file
View File

@ -0,0 +1 @@
<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>

After

Width:  |  Height:  |  Size: 321 B

View File

@ -315,9 +315,9 @@ class OC_Defaults {
}
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()));
}

View File

@ -0,0 +1,139 @@
<?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());
}
}

View File

@ -0,0 +1 @@
<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>

After

Width:  |  Height:  |  Size: 410 B

View File

@ -0,0 +1 @@
<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>

After

Width:  |  Height:  |  Size: 392 B

View File

@ -0,0 +1 @@
<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>

After

Width:  |  Height:  |  Size: 190 B

View File

@ -0,0 +1 @@
<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>

After

Width:  |  Height:  |  Size: 202 B

View File

@ -60,7 +60,7 @@ class ScannerTest extends \Test\TestCase {
$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');
@ -98,7 +98,7 @@ class ScannerTest extends \Test\TestCase {
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);

View File

@ -42,7 +42,7 @@ class UpdaterLegacyTest extends \Test\TestCase {
$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);
@ -84,7 +84,7 @@ class UpdaterLegacyTest extends \Test\TestCase {
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']);
@ -145,7 +145,7 @@ class UpdaterLegacyTest extends \Test\TestCase {
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']);
@ -206,7 +206,7 @@ class UpdaterLegacyTest extends \Test\TestCase {
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']);

View File

@ -179,7 +179,7 @@ class WatcherTest extends \Test\TestCase {
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);

View File

@ -38,7 +38,7 @@ class NoopScannerTest extends \Test\TestCase {
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);

View File

@ -142,7 +142,7 @@ class ViewTest extends \Test\TestCase {
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('');
@ -658,7 +658,7 @@ class ViewTest extends \Test\TestCase {
*/
$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);