diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss index 35341159f1..e2cd8fb11e 100644 --- a/apps/theming/css/theming.scss +++ b/apps/theming/css/theming.scss @@ -12,9 +12,9 @@ $invert: luma($color-primary) > 0.6; @if ($has-custom-logo == false) { @if ($invert) { - $image-logo: url('../../../../svg/core/logo/logo/000000?v=1'); + $image-logo: url(icon-color-path('logo', 'logo', #000000, 1, true)); } @else { - $image-logo: url('../../../../svg/core/logo/logo/ffffff?v=1'); + $image-logo: url(icon-color-path('logo', 'logo', #ffffff, 1, true)); } } diff --git a/core/Controller/SvgController.php b/core/Controller/SvgController.php index f0fc1dac4d..c6bf7b94da 100644 --- a/core/Controller/SvgController.php +++ b/core/Controller/SvgController.php @@ -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; @@ -99,7 +98,6 @@ class SvgController extends Controller { return $this->getSvg($path, $color, $fileName); } - /** * Generate svg from filename with the requested color * @@ -119,7 +117,7 @@ class SvgController extends Controller { } // 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'; $svg = preg_replace($fillRe, '<$1 fill="#' . $color . '"/>', $svg); // replace any fill or stroke colors diff --git a/core/css/functions.scss b/core/css/functions.scss index 0815ba29ab..5007c3bbe7 100644 --- a/core/css/functions.scss +++ b/core/css/functions.scss @@ -19,31 +19,55 @@ * along with this program. If not, see . * */ - + +/** + * 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}); } diff --git a/core/img/logo/logo.svg b/core/img/logo/logo.svg index dbc3e7f3f8..076f295e4d 100644 --- a/core/img/logo/logo.svg +++ b/core/img/logo/logo.svg @@ -1 +1 @@ - + diff --git a/tests/Core/Controller/SvgControllerTest.php b/tests/Core/Controller/SvgControllerTest.php new file mode 100644 index 0000000000..7a31d02b90 --- /dev/null +++ b/tests/Core/Controller/SvgControllerTest.php @@ -0,0 +1,139 @@ + + * + * @author Michael Weimann + * + * @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 . + * + */ + +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()); + } +} diff --git a/tests/data/svg/mixed-red.svg b/tests/data/svg/mixed-red.svg new file mode 100644 index 0000000000..5e3727abd4 --- /dev/null +++ b/tests/data/svg/mixed-red.svg @@ -0,0 +1 @@ + diff --git a/tests/data/svg/mixed-source.svg b/tests/data/svg/mixed-source.svg new file mode 100644 index 0000000000..e4a94136c5 --- /dev/null +++ b/tests/data/svg/mixed-source.svg @@ -0,0 +1 @@ + diff --git a/tests/data/svg/rect-black.svg b/tests/data/svg/rect-black.svg new file mode 100644 index 0000000000..85ab8442c3 --- /dev/null +++ b/tests/data/svg/rect-black.svg @@ -0,0 +1 @@ + diff --git a/tests/data/svg/rect-red.svg b/tests/data/svg/rect-red.svg new file mode 100644 index 0000000000..8f0fae7f61 --- /dev/null +++ b/tests/data/svg/rect-red.svg @@ -0,0 +1 @@ +