Browse Source

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

Switches the default logo color depending on the primary color
tags/v15.0.0beta1
Morris Jobke 5 years ago
parent
commit
7971ba5cc6
No account linked to committer's email address

+ 27
- 6
apps/theming/css/theming.scss 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');
}

+ 1
- 1
apps/theming/lib/ImageManager.php 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;
}

+ 2
- 3
apps/theming/lib/ThemingDefaults.php 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;
}

+ 2
- 2
apps/theming/lib/Util.php 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() {

+ 3
- 3
apps/theming/tests/ImageManagerTest.php 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() {

+ 2
- 2
apps/theming/tests/ThemingDefaultsTest.php 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() {

+ 3
- 3
apps/theming/tests/UtilTest.php 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],

+ 1
- 1
core/Controller/LoginController.php 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'

+ 1
- 4
core/Controller/SvgController.php 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

+ 38
- 14
core/css/functions.scss 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});
}


+ 1
- 1
core/css/guest.css 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;

+ 0
- 1
core/img/logo.svg 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>

core/img/logo-icon-175px.png → core/img/logo/logo-icon-175px.png View File


core/img/logo-mail.png → core/img/logo/logo-mail.png View File


core/img/logo.png → core/img/logo/logo.png View File


+ 1
- 0
core/img/logo/logo.svg 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>

+ 2
- 2
lib/private/legacy/defaults.php 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()));
}

+ 139
- 0
tests/Core/Controller/SvgControllerTest.php 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());
}
}

+ 1
- 0
tests/data/svg/mixed-red.svg 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>

+ 1
- 0
tests/data/svg/mixed-source.svg 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>

+ 1
- 0
tests/data/svg/rect-black.svg 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>

+ 1
- 0
tests/data/svg/rect-red.svg 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>

+ 2
- 2
tests/lib/Files/Cache/ScannerTest.php 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);

+ 4
- 4
tests/lib/Files/Cache/UpdaterLegacyTest.php 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']);


+ 1
- 1
tests/lib/Files/Cache/WatcherTest.php 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);

+ 1
- 1
tests/lib/Files/ObjectStore/NoopScannerTest.php 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);

+ 2
- 2
tests/lib/Files/ViewTest.php 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);

Loading…
Cancel
Save