Svg color api

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-06-25 11:17:00 +02:00 committed by Julius Härtl
parent b7e32df660
commit 84e90e26c0
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
5 changed files with 121 additions and 18 deletions

View File

@ -57,8 +57,8 @@ class JsController extends Controller {
* @PublicPage * @PublicPage
* @NoCSRFRequired * @NoCSRFRequired
* *
* @param string $fileName css filename with extension * @param string $fileName js filename with extension
* @param string $appName css folder name * @param string $appName js folder name
* @return FileDisplayResponse|NotFoundResponse * @return FileDisplayResponse|NotFoundResponse
*/ */
public function getJs(string $fileName, string $appName): Response { public function getJs(string $fileName, string $appName): Response {

View File

@ -0,0 +1,97 @@
<?php
declare (strict_types = 1);
/**
* @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com)
*
* @author John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
*
* @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 OC\Core\Controller;
use OCP\AppFramework\Controller;
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\IRequest;
class SvgController extends Controller {
/** @var string */
protected $serverRoot;
/** @var ITimeFactory */
protected $timeFactory;
public function __construct(string $appName,
IRequest $request,
ITimeFactory $timeFactory) {
parent::__construct($appName, $request);
$this->serverRoot = \OC::$SERVERROOT;
$this->timeFactory = $timeFactory;
}
/**
* @NoAdminRequired
* @NoCSRFRequired
*
* Generate svg from filename with the requested color
*
* @param string $fileName
* @param string $color
* @return DataDisplayResponse|NotFoundException
*/
public function getSvg(string $fileName, $color = 'ffffff') {
$path = $this->serverRoot . "/core/img/actions/$fileName.svg";
if (!file_exists($path)) {
return new NotFoundResponse();
}
$svg = file_get_contents($path);
if (is_null($svg)) {
return new NotFoundResponse();
}
// 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
$svg = preg_replace('/stroke="#([a-z0-9]{3,6})"/mi', 'stroke="#' . $color . '"', $svg);
$svg = preg_replace('/fill="#([a-z0-9]{3,6})"/mi', 'fill="#' . $color . '"', $svg);
$response = new DataDisplayResponse($svg, Http::STATUS_OK, ['Content-Type' => 'image/svg+xml']);
// Set cache control
$ttl = 31536000;
$response->addHeader('Cache-Control', 'max-age=' . $ttl . ', immutable');
$response->addHeader('Content-Disposition', 'inline; filename="' . $fileName . '.svg"');
$expires = new \DateTime();
$expires->setTimestamp($this->timeFactory->getTime());
$expires->add(new \DateInterval('PT' . $ttl . 'S'));
$response->addHeader('Expires', $expires->format(\DateTime::RFC1123));
$response->addHeader('Pragma', 'cache');
return $response;
}
}

View File

@ -109,6 +109,9 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
.icon-address { .icon-address {
background-image: url('../img/actions/address.svg?v=1'); background-image: url('../img/actions/address.svg?v=1');
} }
.icon-address-white {
background-image: url('#{$webroot}/svg/address/fff?v=1');
}
.icon-audio { .icon-audio {
background-image: url('../img/actions/audio.svg?v=1'); background-image: url('../img/actions/audio.svg?v=1');
@ -140,14 +143,15 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
.icon-checkmark { .icon-checkmark {
background-image: url('../img/actions/checkmark.svg?v=1'); background-image: url('../img/actions/checkmark.svg?v=1');
} }
.icon-checkmark-white { .icon-checkmark-white {
background-image: url('../img/actions/checkmark-white.svg?v=1'); background-image: url('#{$webroot}/svg/icon-checkmark/fff?v=1');
} }
.icon-checkmark-color { .icon-checkmark-color {
background-image: url('../img/actions/checkmark-color.svg?v=1'); background-image: url('#{$webroot}/svg/icon-checkmark/#{$color-success}?v=1');
} }
.icon-clippy { .icon-clippy {
@ -159,7 +163,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-close-white { .icon-close-white {
background-image: url('../img/actions/close-white.svg?v=1'); background-image: url('#{$webroot}/svg/close/fff?v=1');
} }
.icon-comment { .icon-comment {
@ -175,7 +179,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-confirm-white { .icon-confirm-white {
background-image: url('../img/actions/confirm-white.svg?v=2'); background-image: url('#{$webroot}/svg/icon-confirm/fff?v=1');
} }
.icon-delete { .icon-delete {
@ -188,22 +192,22 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
&:hover, &:hover,
&:focus { &:focus {
background-image: url('../img/actions/delete-hover.svg?v=1'); background-image: url('#{$webroot}/svg/icon-delete/d40000?v=1');
filter: initial; filter: initial;
} }
} }
.icon-delete-white { .icon-delete-white {
background-image: url('../img/actions/delete-white.svg?v=1'); background-image: url('#{$webroot}/svg/icon-delete/fff?v=1');
&.no-permission { &.no-permission {
&:hover, &:hover,
&:focus { &:focus {
background-image: url('../img/actions/delete-white.svg?v=1'); background-image: url('#{$webroot}/svg/icon-delete/fff?v=1');
} }
} }
&:hover, &:hover,
&:focus { &:focus {
background-image: url('../img/actions/delete-hover.svg?v=1'); background-image: url('#{$webroot}/svg/icon-delete/d40000?v=1');
} }
} }
@ -216,7 +220,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-download-white { .icon-download-white {
background-image: url('../img/actions/download-white.svg?v=1'); background-image: url('#{$webroot}/svg/icon-download/fff?v=1');
} }
.icon-edit { .icon-edit {
@ -228,11 +232,11 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-error-white { .icon-error-white {
background-image: url('../img/actions/error-white.svg?v=1'); background-image: url('#{$webroot}/svg/icon-error/fff?v=1');
} }
.icon-error-color { .icon-error-color {
background-image: url('../img/actions/error-color.svg?v=1'); background-image: url('#{$webroot}/svg/icon-error/d40000?v=1');
} }
.icon-external { .icon-external {
@ -258,7 +262,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-info-white { .icon-info-white {
background-image: url('../img/actions/info-white.svg?v=1'); background-image: url('#{$webroot}/svg/icon-info/fff?v=1');
} }
.icon-logout { .icon-logout {
@ -278,7 +282,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-more-white { .icon-more-white {
background-image: url('../img/actions/more-white.svg?v=1'); background-image: url('#{$webroot}/svg/more/fff?v=1');
} }
.icon-password { .icon-password {
@ -342,7 +346,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-search-white { .icon-search-white {
background-image: url('../img/actions/search-white.svg?v=1'); background-image: url('#{$webroot}/svg/search/fff?v=1');
} }
.icon-settings { .icon-settings {
@ -354,7 +358,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-settings-white { .icon-settings-white {
background-image: url('../img/actions/settings-white.svg?v=1'); background-image: url('#{$webroot}/svg/settings-dark/fff?v=1');
} }
/* always use icon-shared, AdBlock blocks icon-share */ /* always use icon-shared, AdBlock blocks icon-share */
@ -435,7 +439,7 @@ img, object, video, button, textarea, input, select, div[contenteditable='true']
} }
.icon-upload-white { .icon-upload-white {
background-image: url('../img/actions/upload-white.svg?v=1'); background-image: url('#{$webroot}/svg/upload/fff?v=1');
} }
.icon-user { .icon-user {

View File

@ -61,6 +61,7 @@ $application->registerRoutes($this, [
['name' => 'OCJS#getConfig', 'url' => '/core/js/oc.js', 'verb' => 'GET'], ['name' => 'OCJS#getConfig', 'url' => '/core/js/oc.js', 'verb' => 'GET'],
['name' => 'Preview#getPreviewByFileId', 'url' => '/core/preview', 'verb' => 'GET'], ['name' => 'Preview#getPreviewByFileId', 'url' => '/core/preview', 'verb' => 'GET'],
['name' => 'Preview#getPreview', 'url' => '/core/preview.png', 'verb' => 'GET'], ['name' => 'Preview#getPreview', 'url' => '/core/preview.png', 'verb' => 'GET'],
['name' => 'Svg#getSvg', 'url' => '/svg/{fileName}/{color}', 'verb' => 'GET'],
['name' => 'Css#getCss', 'url' => '/css/{appName}/{fileName}', 'verb' => 'GET'], ['name' => 'Css#getCss', 'url' => '/css/{appName}/{fileName}', 'verb' => 'GET'],
['name' => 'Js#getJs', 'url' => '/js/{appName}/{fileName}', 'verb' => 'GET'], ['name' => 'Js#getJs', 'url' => '/js/{appName}/{fileName}', 'verb' => 'GET'],
['name' => 'contactsMenu#index', 'url' => '/contactsmenu/contacts', 'verb' => 'POST'], ['name' => 'contactsMenu#index', 'url' => '/contactsmenu/contacts', 'verb' => 'POST'],

View File

@ -233,6 +233,7 @@ class SCSSCacher {
// Compile // Compile
try { try {
$compiledScss = $scss->compile( $compiledScss = $scss->compile(
'$webroot: \'' . \OC::$WEBROOT. '\';'.
'@import "variables.scss";' . '@import "variables.scss";' .
$this->getInjectedVariables() . $this->getInjectedVariables() .
'@import "'.$fileNameSCSS.'";'); '@import "'.$fileNameSCSS.'";');