Skip to content

Commit

Permalink
Refactors the scss svg functions
Browse files Browse the repository at this point in the history
Signed-off-by: Michael Weimann <mail@michael-weimann.eu>
  • Loading branch information
weeman1337 committed Aug 30, 2018
1 parent aff189c commit 0576f82
Show file tree
Hide file tree
Showing 9 changed files with 185 additions and 20 deletions.
4 changes: 2 additions & 2 deletions apps/theming/css/theming.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}
}

Expand Down
4 changes: 1 addition & 3 deletions core/Controller/SvgController.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;

Expand Down Expand Up @@ -99,7 +98,6 @@ public function getSvgFromApp(string $app, string $fileName, string $color = 'ff
return $this->getSvg($path, $color, $fileName);
}


/**
* Generate svg from filename with the requested color
*
Expand All @@ -119,7 +117,7 @@ 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';
$fillRe = '/<((circle|rect|path)((?!fill)[a-z0-9 =".\-#():;])+)\/>/mi';
$svg = preg_replace($fillRe, '<$1 fill="#' . $color . '"/>', $svg);

// replace any fill or stroke colors
Expand Down
52 changes: 38 additions & 14 deletions core/css/functions.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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});
}

Expand Down
2 changes: 1 addition & 1 deletion core/img/logo/logo.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
139 changes: 139 additions & 0 deletions tests/Core/Controller/SvgControllerTest.php
Original file line number Diff line number Diff line change
@@ -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 change: 1 addition & 0 deletions tests/data/svg/mixed-red.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions tests/data/svg/mixed-source.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions tests/data/svg/rect-black.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions tests/data/svg/rect-red.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0576f82

Please sign in to comment.