diff --git a/apps/accessibility/css/themedark.scss b/apps/accessibility/css/themedark.scss index c0935165c7d7b..fc33b333ce957 100644 --- a/apps/accessibility/css/themedark.scss +++ b/apps/accessibility/css/themedark.scss @@ -37,12 +37,16 @@ $color-border-dark: lighten($color-main-background, 14%); } } } -.federation-menu .icon-federation-menu { - filter: invert(100%); -} .bubble, .app-navigation-entry-menu, .popovermenu, #header .menu { border: 1px solid var(--color-border); } + +// since svg icons are inverted, revert to white for the header +.header-right > * { + [class^='icon-'], [class*=' icon-'] { + filter: invert(100%); + } +} diff --git a/apps/accessibility/lib/Controller/AccessibilityController.php b/apps/accessibility/lib/Controller/AccessibilityController.php index ea4de77d7a062..4ee88b90a7a2c 100644 --- a/apps/accessibility/lib/Controller/AccessibilityController.php +++ b/apps/accessibility/lib/Controller/AccessibilityController.php @@ -36,6 +36,7 @@ use OCP\IURLGenerator; use OCP\IUserManager; use OCP\IUserSession; +use OC\Template\IconsCacher; class AccessibilityController extends Controller { @@ -66,6 +67,9 @@ class AccessibilityController extends Controller { /** @var IAppManager */ private $appManager; + /** @var IconsCacher */ + protected $iconsCacher; + /** * Account constructor. * @@ -87,7 +91,8 @@ public function __construct(string $appName, IURLGenerator $urlGenerator, ITimeFactory $timeFactory, IUserSession $userSession, - IAppManager $appManager) { + IAppManager $appManager, + IconsCacher $iconsCacher) { parent::__construct($appName, $request); $this->appName = $appName; $this->config = $config; @@ -97,6 +102,7 @@ public function __construct(string $appName, $this->timeFactory = $timeFactory; $this->userSession = $userSession; $this->appManager = $appManager; + $this->iconsCacher = $iconsCacher; $this->serverRoot = \OC::$SERVERROOT; $this->appRoot = $this->appManager->getAppPath($this->appName); @@ -147,7 +153,12 @@ public function getCss(): DataDisplayResponse { // Rebase all urls $appWebRoot = substr($this->appRoot, strlen($this->serverRoot) - strlen(\OC::$WEBROOT)); - $css = $this->rebaseUrls($css, $appWebRoot . '/css'); + $css = $this->rebaseUrls($css, $appWebRoot . '/css'); + + if (in_array('themedark', $userValues) && $this->iconsCacher->getCachedCSS() && $this->iconsCacher->getCachedCSS()->getSize() > 0) { + $iconsCss = $this->invertSvgIconsColor($this->iconsCacher->getCachedCSS()->getContent()); + $css = $css . $iconsCss; + } $response = new DataDisplayResponse($css, Http::STATUS_OK, ['Content-Type' => 'text/css']); @@ -199,4 +210,14 @@ private function rebaseUrls(string $css, string $webDir): string { return preg_replace($re, $subst, $css); } + + /** + * Remove all matches from the $rule regex + * + * @param string $css string to parse + * @return string + */ + private function invertSvgIconsColor(string $css) { + return str_replace(['/000', '/fff', '/***'], ['/***', '/000', '/fff'], $css); + } } diff --git a/apps/dav/lib/CalDAV/Activity/Filter/Calendar.php b/apps/dav/lib/CalDAV/Activity/Filter/Calendar.php index 7456074915bb1..f85ca1a77696f 100644 --- a/apps/dav/lib/CalDAV/Activity/Filter/Calendar.php +++ b/apps/dav/lib/CalDAV/Activity/Filter/Calendar.php @@ -72,7 +72,7 @@ public function getPriority() { * @since 11.0.0 */ public function getIcon() { - return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/calendar-dark.svg')); + return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/calendar.svg')); } /** diff --git a/apps/dav/tests/unit/CalDAV/Activity/Filter/CalendarTest.php b/apps/dav/tests/unit/CalDAV/Activity/Filter/CalendarTest.php index 0fdd50b54c48c..1c31508255a83 100644 --- a/apps/dav/tests/unit/CalDAV/Activity/Filter/CalendarTest.php +++ b/apps/dav/tests/unit/CalDAV/Activity/Filter/CalendarTest.php @@ -55,7 +55,7 @@ protected function setUp() { public function testGetIcon() { $this->url->expects($this->once()) ->method('imagePath') - ->with('core', 'places/calendar-dark.svg') + ->with('core', 'places/calendar.svg') ->willReturn('path-to-icon'); $this->url->expects($this->once()) diff --git a/apps/encryption/css/settings-personal.css b/apps/encryption/css/settings-personal.scss similarity index 85% rename from apps/encryption/css/settings-personal.css rename to apps/encryption/css/settings-personal.scss index 4bab1a8d46bcf..d9846cc77f6d8 100644 --- a/apps/encryption/css/settings-personal.css +++ b/apps/encryption/css/settings-personal.scss @@ -11,5 +11,5 @@ /* icons for sidebar */ .nav-icon-basic-encryption-module { - background-image: url('../img/app.svg?v=1'); + @include icon-color('app', 'encryption', $color-black); } \ No newline at end of file diff --git a/apps/files/css/files.scss b/apps/files/css/files.scss index 79dc2a26ebd06..85c59294803ec 100644 --- a/apps/files/css/files.scss +++ b/apps/files/css/files.scss @@ -84,30 +84,29 @@ /* icons for sidebar */ .nav-icon-files { - background-image: url('../img/folder.svg?v=1'); + @include icon-color('folder', 'files', $color-black); } .nav-icon-recent { - background-image: url('../img/recent.svg?v=1'); + @include icon-color('recent', 'files', $color-black); } .nav-icon-favorites { - background-image: url('../img/star.svg?v=1'); + @include icon-color('star-dark', 'files', $color-black, 2, true); } .nav-icon-sharingin, -.nav-icon-sharingout, -.nav-icon-shareoverview { - background-image: url('../img/share.svg?v=1'); +.nav-icon-sharingout { + @include icon-color('share', 'files', $color-black); } .nav-icon-sharinglinks { - background-image: url('../img/public.svg?v=1'); + @include icon-color('public', 'files', $color-black); } .nav-icon-extstoragemounts { - background-image: url('../img/external.svg?v=1'); + @include icon-color('external', 'files', $color-black); } .nav-icon-trashbin { - background-image: url('../img/delete.svg?v=1'); + @include icon-color('delete', 'files', $color-black); } .nav-icon-deletedshares { - background-image: url('../img/unshare.svg?v=1'); + @include icon-color('unshare', 'files', $color-black); } #app-navigation .nav-files a.nav-icon-files { @@ -668,7 +667,7 @@ table.dragshadow td.size { background-image: none; } & .icon-starred { - background-image: url('../../../core/img/actions/starred.svg?v=1'); + @include icon-color('star-dark', 'actions', 'FC0', 1, true); } } diff --git a/apps/files/lib/Activity/Filter/FileChanges.php b/apps/files/lib/Activity/Filter/FileChanges.php index 122dc4250f998..c828755a659ae 100644 --- a/apps/files/lib/Activity/Filter/FileChanges.php +++ b/apps/files/lib/Activity/Filter/FileChanges.php @@ -74,7 +74,7 @@ public function getPriority() { * @since 11.0.0 */ public function getIcon() { - return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/files-dark.svg')); + return $this->url->getAbsoluteURL($this->url->imagePath('core', 'places/files.svg')); } /** diff --git a/apps/files_external/css/settings.scss b/apps/files_external/css/settings.scss index bd45b57f6d5a4..04ecfc4162068 100644 --- a/apps/files_external/css/settings.scss +++ b/apps/files_external/css/settings.scss @@ -122,5 +122,5 @@ td.mountPoint, td.backend { width:160px; } } .nav-icon-external-storage { - background-image: url('../img/app-dark.svg?v=1'); + @include icon-color('app-dark', 'files_external', $color-black); } diff --git a/apps/systemtags/css/systemtagsfilelist.css b/apps/systemtags/css/systemtagsfilelist.scss similarity index 88% rename from apps/systemtags/css/systemtagsfilelist.css rename to apps/systemtags/css/systemtagsfilelist.scss index ad711f747337d..3c188e7644942 100644 --- a/apps/systemtags/css/systemtagsfilelist.css +++ b/apps/systemtags/css/systemtagsfilelist.scss @@ -13,7 +13,7 @@ } .nav-icon-systemtagsfilter { - background-image: url('../img/tag.svg'); + @include icon-color('tag', 'systemtags', $color-black); } #app-sidebar .mainFileInfoView .tag-label { diff --git a/autotest-js.sh b/autotest-js.sh index 5f03132ee426e..b5bb9965553b9 100755 --- a/autotest-js.sh +++ b/autotest-js.sh @@ -28,7 +28,7 @@ for SCSSFILE in core/css/*.scss do FILE=$(basename $SCSSFILE) FILENAME="${FILE%.*}" - printf "@import 'variables.scss'; @import '${FILE}';" | ./build/bin/node-sass --include-path core/css/ > tests/css/${FILE}.css + printf "\$webroot:''; @import 'functions.scss'; @import 'variables.scss'; @import '${FILE}';" | ./build/bin/node-sass --include-path core/css/ > tests/css/${FILE}.css done KARMA="$PREFIX/node_modules/karma/bin/karma" diff --git a/core/Controller/JsController.php b/core/Controller/JsController.php index 3fc48e9a38072..f91fe8f75d525 100644 --- a/core/Controller/JsController.php +++ b/core/Controller/JsController.php @@ -57,8 +57,8 @@ public function __construct($appName, IRequest $request, Factory $appDataFactory * @PublicPage * @NoCSRFRequired * - * @param string $fileName css filename with extension - * @param string $appName css folder name + * @param string $fileName js filename with extension + * @param string $appName js folder name * @return FileDisplayResponse|NotFoundResponse */ public function getJs(string $fileName, string $appName): Response { diff --git a/core/Controller/SvgController.php b/core/Controller/SvgController.php new file mode 100644 index 0000000000000..3d1c55d01431f --- /dev/null +++ b/core/Controller/SvgController.php @@ -0,0 +1,144 @@ + + * + * @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 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\App\IAppManager; +use OCP\IRequest; + +class SvgController extends Controller { + + /** @var string */ + protected $serverRoot; + + /** @var ITimeFactory */ + protected $timeFactory; + + /** @var IAppManager */ + protected $appManager; + + public function __construct(string $appName, + IRequest $request, + ITimeFactory $timeFactory, + IAppManager $appManager) { + parent::__construct($appName, $request); + + $this->serverRoot = \OC::$SERVERROOT; + $this->timeFactory = $timeFactory; + $this->appManager = $appManager; + } + + /** + * @NoAdminRequired + * @NoCSRFRequired + * + * Generate svg from filename with the requested color + * + * @param string $folder + * @param string $fileName + * @param string $color + * @return DataDisplayResponse|NotFoundResponse + */ + public function getSvgFromCore(string $folder, string $fileName, string $color = 'ffffff') { + $path = $this->serverRoot . "/core/img/$folder/$fileName.svg"; + return $this->getSvg($path, $color, $fileName); + } + + /** + * @NoAdminRequired + * @NoCSRFRequired + * + * Generate svg from filename with the requested color + * + * @param string $app + * @param string $fileName + * @param string $color + * @return DataDisplayResponse|NotFoundResponse + */ + public function getSvgFromApp(string $app, string $fileName, string $color = 'ffffff') { + + if ($app === 'settings') { + $path = $this->serverRoot . "/settings/img/$fileName.svg"; + return $this->getSvg($path, $color, $fileName); + } + + $appRootPath = $this->appManager->getAppPath($app); + $appPath = substr($appRootPath, strlen($this->serverRoot)); + + if (!$appPath) { + return new NotFoundResponse(); + } + $path = $this->serverRoot . $appPath ."/img/$fileName.svg"; + return $this->getSvg($path, $color, $fileName); + } + + + /** + * Generate svg from filename with the requested color + * + * @param string $path + * @param string $color + * @return DataDisplayResponse|NotFoundResponse + */ + private function getSvg(string $path, string $color, string $fileName) { + 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->cacheFor($ttl); + $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; + } +} \ No newline at end of file diff --git a/core/css/apps.scss b/core/css/apps.scss index 6645b6868d5e5..a7898948f74eb 100644 --- a/core/css/apps.scss +++ b/core/css/apps.scss @@ -693,7 +693,7 @@ kbd { padding: 0; margin: 0; background-color: var(--color-main-background); - background-image: url('../img/actions/settings-dark.svg?v=1'); + @include icon-color('settings-dark', 'actions', $color-black, 1, true); background-position: 14px center; background-repeat: no-repeat; box-shadow: none; diff --git a/core/css/functions.scss b/core/css/functions.scss new file mode 100644 index 0000000000000..2875230b51263 --- /dev/null +++ b/core/css/functions.scss @@ -0,0 +1,48 @@ +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * + * @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 . + * + */ + +/** + * 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 + */ +@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); + } + $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}'); + } + background-image: var(#{$varName}); +} \ No newline at end of file diff --git a/core/css/header.scss b/core/css/header.scss index e218f86fa9b04..a3566f9a21e10 100644 --- a/core/css/header.scss +++ b/core/css/header.scss @@ -322,7 +322,6 @@ nav[role='navigation'] { } /* Apps management */ - #apps { max-height: calc(100vh - 100px); overflow: auto; @@ -336,7 +335,6 @@ nav[role='navigation'] { } /* USER MENU -----------------------------------------------------------------*/ - #settings { display: inline-block; height: 100%; @@ -405,6 +403,7 @@ nav[role='navigation'] { } } +/* Settings menu */ #expanddiv { &.menu { right: 17px; @@ -438,6 +437,7 @@ nav[role='navigation'] { } } +/* Apps menu */ #appmenu { display: inline-block; width: auto; @@ -585,3 +585,57 @@ nav[role='navigation'] { top: 50px; } } + +/* SEARCHBOX --------------------------------------------------------------- */ +.searchbox { + position: relative; + display: flex; + align-items: center; + input[type='search'] { + position: relative; + font-size: 1.2em; + padding: 3px; + padding-left: 25px; + padding-right: 20px; + background-color: transparent; + color: var(--color-primary-text); + border: 0; + border-radius: var(--border-radius); + height: 34px; + width: 0; + cursor: pointer; + -webkit-transition: all 100ms; + transition: all 100ms; + opacity: .6; + &:focus, &:active, &:valid { + background-position-x: 6px; + color: var(--color-primary-text); + width: 155px; + cursor: text; + background-color: var(--color-primary) !important; + border: 1px solid var(--color-primary-text-dark) !important; + } + &:hover, &:focus, &:active { + opacity: 1; + } + & ~ .icon-close-white { + display: inline; + position: absolute; + width: 30px; + height: 100%; + right: 0; + top: 0; + margin: 0; + &, &:focus, &:active, &:hover { + border: none; + background-color: transparent; + } + } + &:not(:valid) ~ .icon-close-white { + display: none; + } + &::-webkit-search-cancel-button { + -webkit-appearance: none; + } + } +} \ No newline at end of file diff --git a/core/css/icons.scss b/core/css/icons.scss index 91a90abe27e76..27863f017f444 100644 --- a/core/css/icons.scss +++ b/core/css/icons.scss @@ -1,15 +1,30 @@ /** - * @copyright Copyright (c) 2016, John Molakvoæ - * @copyright Copyright (c) 2016, Joas Schilling - * @copyright Copyright (c) 2016, Lukas Reschke - * @copyright Copyright (c) 2016, Roeland Jago Douma - * @copyright Copyright (c) 2016, Vincent Chan - * @copyright Copyright (c) 2015, Thomas Müller - * @copyright Copyright (c) 2015, Hendrik Leppelsack - * @copyright Copyright (c) 2015, Jan-Christoph Borchardt + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * @author Joas Schilling + * @author Lukas Reschke + * @author Roeland Jago Douma + * @author Vincent Chan + * @author Thomas Müller + * @author Hendrik Leppelsack + * @author Jan-Christoph Borchardt * * @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 . + * */ /* GLOBAL ------------------------------------------------------------------- */ @@ -101,545 +116,545 @@ img, object, video, button, textarea, input, select, div[contenteditable='true'] } } -/* ICONS -------------------------------------------------------------------- */ +/* ICONS ------------------------------------------------------------------- */ .icon-add { - background-image: url('../img/actions/add.svg?v=1'); + @include icon-color('add', 'actions', $color-black, 1, true); } .icon-address { - background-image: url('../img/actions/address.svg?v=1'); + @include icon-color('address', 'actions', $color-black, 1, true); +} +.icon-address-white { + @include icon-color('address', 'actions', $color-white, 1, true); } .icon-audio { - background-image: url('../img/actions/audio.svg?v=1'); + @include icon-color('audio', 'actions', $color-black, 2, true); } -/* TODO: to be deprecated; use .icon-audio.icon-white.icon-shadow */ .icon-audio-white { - background-image: url('../img/actions/audio.svg?v=2'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + @include icon-color('audio', 'actions', $color-white, 1, true); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-audio-off { - background-image: url('../img/actions/audio-off.svg?v=1'); + @include icon-color('audio-off', 'actions', $color-black, 1, true); } -/* TODO: to be deprecated; use .icon-audio-off.icon-white.icon-shadow */ .icon-audio-off-white { - background-image: url('../img/actions/audio-off.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + @include icon-color('audio-off', 'actions', $color-white, 1, true); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } +.icon-caret-white, .icon-caret { - background-image: url('../img/actions/caret.svg?v=1'); + @include icon-color('caret', 'actions', $color-white, 1, true); } .icon-caret-dark { - background-image: url('../img/actions/caret-dark.svg?v=1'); + @include icon-color('caret', 'actions', $color-black, 1, true); } .icon-checkmark { - background-image: url('../img/actions/checkmark.svg?v=1'); + @include icon-color('checkmark', 'actions', $color-black, 1, true); + } .icon-checkmark-white { - background-image: url('../img/actions/checkmark-white.svg?v=1'); + @include icon-color('checkmark', 'actions', $color-white, 1, true); } .icon-checkmark-color { - background-image: url('../img/actions/checkmark-color.svg?v=1'); + @include icon-color('checkmark', 'actions', $color-success, 1, true); } .icon-clippy { - background-image: url('../img/actions/clippy.svg?v=2'); + @include icon-color('clippy', 'actions', $color-black, 2, true); } .icon-close { - background-image: url('../img/actions/close.svg?v=1'); + @include icon-color('close', 'actions', $color-black, 1, true); } .icon-close-white { - background-image: url('../img/actions/close-white.svg?v=1'); + @include icon-color('close', 'actions', $color-white, 1, true); } .icon-comment { - background-image: url('../img/actions/comment.svg?v=1'); + @include icon-color('comment', 'actions', $color-black, 1, true); } .icon-confirm { - background-image: url('../img/actions/confirm.svg?v=2'); + @include icon-color('confirm', 'actions', $color-black, 2, true); } .icon-confirm-fade { - background-image: url('../img/actions/confirm-fade.svg?v=2'); + @include icon-color('confirm-fade', 'actions', $color-black, 2, true); } .icon-confirm-white { - background-image: url('../img/actions/confirm-white.svg?v=2'); + @include icon-color('confirm', 'actions', $color-white, 2, true); } .icon-delete { - background-image: url('../img/actions/delete.svg?v=1'); + @include icon-color('delete', 'actions', $color-black, 1, true); &.no-permission { &:hover, &:focus { - background-image: url('../img/actions/delete.svg?v=1'); + @include icon-color('delete', 'actions', $color-black, 1, true); } } &:hover, &:focus { - background-image: url('../img/actions/delete-hover.svg?v=1'); + @include icon-color('delete', 'actions', $color-error, 1, true); filter: initial; } } .icon-delete-white { - background-image: url('../img/actions/delete-white.svg?v=1'); + @include icon-color('delete', 'actions', $color-white, 1, true); &.no-permission { &:hover, &:focus { - background-image: url('../img/actions/delete-white.svg?v=1'); + @include icon-color('delete', 'actions', $color-white, 1, true); } } &:hover, &:focus { - background-image: url('../img/actions/delete-hover.svg?v=1'); + @include icon-color('delete', 'actions', $color-error, 1, true); } } .icon-details { - background-image: url('../img/actions/details.svg?v=1'); + @include icon-color('details', 'actions', $color-black, 1, true); } .icon-download { - background-image: url('../img/actions/download.svg?v=1'); + @include icon-color('download', 'actions', $color-black, 1, true); } .icon-download-white { - background-image: url('../img/actions/download-white.svg?v=1'); + @include icon-color('download', 'actions', $color-white, 1, true); } .icon-edit { - background-image: url('../img/actions/edit.svg?v=1'); + @include icon-color('edit', 'actions', $color-black, 1, true); } .icon-error { - background-image: url('../img/actions/error.svg?v=1'); + @include icon-color('error', 'actions', $color-black, 1, true); } .icon-error-white { - background-image: url('../img/actions/error-white.svg?v=1'); + @include icon-color('error', 'actions', $color-white, 1, true); } .icon-error-color { - background-image: url('../img/actions/error-color.svg?v=1'); + @include icon-color('error', 'actions', $color-error, 1, true); } .icon-external { - background-image: url('../img/actions/external.svg?v=1'); + @include icon-color('external', 'actions', $color-black, 1, true); } .icon-fullscreen { - background-image: url('../img/actions/fullscreen.svg?v=1'); + @include icon-color('fullscreen', 'actions', $color-black, 1, true); } -/* TODO: to be deprecated; use .icon-fullscreen.icon-white.icon-shadow */ .icon-fullscreen-white { - background-image: url('../img/actions/fullscreen.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + @include icon-color('fullscreen', 'actions', $color-white, 1, true); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-history { - background-image: url('../img/actions/history.svg?v=1'); + @include icon-color('history', 'actions', $color-black, 1, true); } .icon-info { - background-image: url('../img/actions/info.svg?v=1'); + @include icon-color('info', 'actions', $color-black, 1, true); } .icon-info-white { - background-image: url('../img/actions/info-white.svg?v=1'); + @include icon-color('info', 'actions', $color-white, 1, true); } .icon-logout { - background-image: url('../img/actions/logout.svg?v=1'); + @include icon-color('logout', 'actions', $color-black, 1, true); } .icon-mail { - background-image: url('../img/actions/mail.svg?v=1'); + @include icon-color('mail', 'actions', $color-black, 1, true); } .icon-menu { - background-image: url('../img/actions/menu.svg?v=1'); + @include icon-color('menu', 'actions', $color-black, 1, true); } .icon-more { - background-image: url('../img/actions/more.svg?v=1'); + @include icon-color('more', 'actions', $color-black, 1, true); } .icon-more-white { - background-image: url('../img/actions/more-white.svg?v=1'); + @include icon-color('more', 'actions', $color-white, 1, true); } .icon-password { - background-image: url('../img/actions/password.svg?v=1'); + @include icon-color('password', 'actions', $color-black, 1, true); } .icon-pause { - background-image: url('../img/actions/pause.svg?v=1'); + @include icon-color('pause', 'actions', $color-black, 1, true); } .icon-play { - background-image: url('../img/actions/play.svg?v=1'); + @include icon-color('play', 'actions', $color-black, 1, true); } .icon-play-add { - background-image: url('../img/actions/play-add.svg?v=1'); + @include icon-color('play-add', 'actions', $color-black, 1, true); } .icon-play-next { - background-image: url('../img/actions/play-next.svg?v=1'); + @include icon-color('play-next', 'actions', $color-black, 1, true); } .icon-play-previous { - background-image: url('../img/actions/play-previous.svg?v=1'); + @include icon-color('play-previous', 'actions', $color-black, 1, true); } .icon-public { - background-image: url('../img/actions/public.svg?v=1'); + @include icon-color('public', 'actions', $color-black, 1, true); } .icon-quota { - background-image: url('../img/actions/quota.svg?v=1'); + @include icon-color('quota', 'actions', $color-black, 1, true); } .icon-rename { - background-image: url('../img/actions/rename.svg?v=1'); + @include icon-color('rename', 'actions', $color-black, 1, true); } .icon-screen { - background-image: url('../img/actions/screen.svg?v=1'); + @include icon-color('screen', 'actions', $color-black, 1, true); } -/* TODO: to be deprecated; use .icon-screen.icon-white.icon-shadow */ .icon-screen-white { - background-image: url('../img/actions/screen.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + @include icon-color('screen', 'actions', $color-white, 1, true); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-screen-off { - background-image: url('../img/actions/screen-off.svg?v=1'); + @include icon-color('screen-off', 'actions', $color-black, 1, true); } -/* TODO: to be deprecated; use .icon-screen-off.icon-white.icon-shadow */ .icon-screen-off-white { - background-image: url('../img/actions/screen-off.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + @include icon-color('screen-off', 'actions', $color-white, 1, true); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-search { - background-image: url('../img/actions/search.svg?v=1'); + @include icon-color('search', 'actions', $color-black, 1, true); } .icon-search-white { - background-image: url('../img/actions/search-white.svg?v=1'); + @include icon-color('search', 'actions', $color-white, 1, true); } +/* default icon have a .5 opacity */ .icon-settings { - background-image: url('../img/actions/settings.svg?v=1'); + @include icon-color('settings', 'actions', $color-black, 1, true); } .icon-settings-dark { - background-image: url('../img/actions/settings-dark.svg?v=1'); + @include icon-color('settings-dark', 'actions', $color-black, 1, true); } .icon-settings-white { - background-image: url('../img/actions/settings-white.svg?v=1'); + @include icon-color('settings-dark', 'actions', $color-white, 1, true); } /* always use icon-shared, AdBlock blocks icon-share */ .icon-shared, .icon-share { - background-image: url('../img/actions/share.svg?v=1'); + @include icon-color('share', 'actions', $color-black, 1, true); } .icon-sound { - background-image: url('../img/actions/sound.svg?v=1'); + @include icon-color('sound', 'actions', $color-black, 1, true); } .icon-sound-off { - background-image: url('../img/actions/sound-off.svg?v=1'); + @include icon-color('sound-off', 'actions', $color-black, 1, true); } .icon-favorite { - background-image: url('../img/actions/star-dark.svg?v=1'); + @include icon-color('star-dark', 'actions', $color-black, 1, true); } .icon-star { - background-image: url('../img/actions/star.svg?v=1'); + @include icon-color('star', 'actions', $color-black, 1, true); } .icon-star-dark { - background-image: url('../img/actions/star-dark.svg?v=1'); + @include icon-color('star', 'actions', $color-black, 1, true); } .icon-starred { &:hover, &:focus { - background-image: url('../img/actions/star.svg?v=1'); + @include icon-color('star', 'actions', $color-black, 1, true); } - background-image: url('../img/actions/starred.svg?v=1'); + @include icon-color('star-dark', 'actions', 'FC0', 1, true); } .icon-star { &:hover, &:focus { - background-image: url('../img/actions/starred.svg?v=1'); + @include icon-color('star-dark', 'actions', 'FC0', 1, true); } } .icon-tag { - background-image: url('../img/actions/tag.svg?v=1'); + @include icon-color('tag', 'actions', $color-black, 1, true); } .icon-timezone { - background-image: url('../img/actions/timezone.svg?v=1'); + @include icon-color('timezone', 'actions', $color-black, 1, true); } .icon-toggle { - background-image: url('../img/actions/toggle.svg?v=1'); + @include icon-color('toggle', 'actions', $color-black, 1, true); } .icon-toggle-background { - background-image: url('../img/actions/toggle-background.svg?v=1'); + @include icon-color('toggle-background', 'actions', $color-black, 1, true); } .icon-toggle-pictures { - background-image: url('../img/actions/toggle-pictures.svg?v=1'); + @include icon-color('toggle-pictures', 'actions', $color-black, 1, true); } .icon-triangle-e { - background-image: url('../img/actions/triangle-e.svg?v=1'); + @include icon-color('triangle-e', 'actions', $color-black, 1, true); } .icon-triangle-n { - background-image: url('../img/actions/triangle-n.svg?v=1'); + @include icon-color('triangle-n', 'actions', $color-black, 1, true); } .icon-triangle-s { - background-image: url('../img/actions/triangle-s.svg?v=1'); + @include icon-color('triangle-s', 'actions', $color-black, 1, true); } .icon-upload { - background-image: url('../img/actions/upload.svg?v=1'); + @include icon-color('upload', 'actions', $color-black, 1, true); } .icon-upload-white { - background-image: url('../img/actions/upload-white.svg?v=1'); + @include icon-color('upload', 'actions', $color-white, 1, true); } .icon-user { - background-image: url('../img/actions/user.svg?v=1'); + @include icon-color('user', 'actions', $color-black, 1, true); } .icon-video { - background-image: url('../img/actions/video.svg?v=1'); + @include icon-color('video', 'actions', $color-black, 2, true); } -/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */ .icon-video-white { - background-image: url('../img/actions/video.svg?v=2'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + @include icon-color('video', 'actions', $color-white, 1, true); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-video-off { - background-image: url('../img/actions/video-off.svg?v=1'); + @include icon-color('video-off', 'actions', $color-black, 1, true); } -/* TODO: to be deprecated; use .icon-video-off.icon-white.icon-shadow */ .icon-video-off-white { - background-image: url('../img/actions/video-off.svg?v=1'); - filter: invert(100%) drop-shadow(1px 1px 4px var(--color-box-shadow)); + @include icon-color('video-off', 'actions', $color-white, 1, true); + filter: drop-shadow(1px 1px 4px var(--color-box-shadow)); } .icon-video-switch { - background-image: url('../img/actions/video-switch.svg?v=1'); + @include icon-color('video-switch', 'actions', $color-black, 1, true); } .icon-view-close { - background-image: url('../img/actions/view-close.svg?v=1'); + @include icon-color('view-close', 'actions', $color-black, 1, true); } .icon-view-download { - background-image: url('../img/actions/view-download.svg?v=1'); + @include icon-color('view-download', 'actions', $color-black, 1, true); } .icon-view-next { - background-image: url('../img/actions/arrow-right.svg?v=1'); + @include icon-color('arrow-right', 'actions', $color-black, 1, true); } .icon-view-pause { - background-image: url('../img/actions/view-pause.svg?v=1'); + @include icon-color('view-pause', 'actions', $color-black, 1, true); } .icon-view-play { - background-image: url('../img/actions/view-play.svg?v=1'); + @include icon-color('view-play', 'actions', $color-black, 1, true); } .icon-view-previous { - background-image: url('../img/actions/arrow-left.svg?v=1'); + @include icon-color('arrow-left', 'actions', $color-black, 1, true); } .icon-disabled-user { - background-image: url('../img/actions/disabled-user.svg?v=1'); + @include icon-color('disabled-user', 'actions', $color-black, 1, true); } .icon-disabled-users { - background-image: url('../img/actions/disabled-users.svg?v=1'); + @include icon-color('disabled-users', 'actions', $color-black, 1, true); } .icon-user-admin { - background-image: url('../img/actions/user-admin.svg?v=1'); + @include icon-color('user-admin', 'actions', $color-black, 1, true); } /* PLACES ------------------------------------------------------------------- */ .icon-calendar { - background-image: url('../img/places/calendar.svg?v=1'); + @include icon-color('calendar', 'places', $color-white, 1, true); } .icon-calendar-dark { - background-image: url('../img/places/calendar-dark.svg?v=1'); + @include icon-color('calendar', 'places', $color-black, 1, true); } .icon-contacts { - background-image: url('../img/places/contacts.svg?v=1'); + @include icon-color('contacts', 'places', $color-white, 1, true); } .icon-contacts-dark { - background-image: url('../img/places/contacts-dark.svg?v=1'); + @include icon-color('contacts', 'places', $color-black, 1, true); } .icon-files { - background-image: url('../img/places/files.svg?v=1'); + @include icon-color('files', 'places', $color-white, 1, true); } .icon-files-dark { - background-image: url('../img/places/files-dark.svg?v=1'); + @include icon-color('files', 'places', $color-black, 1, true); } .icon-file, .icon-filetype-text { - background-image: url('../img/filetypes/text.svg?v=1'); + @include icon-color('text', 'filetypes', $color-black, 1, true); } .icon-folder, .icon-filetype-folder { - background-image: url('../img/filetypes/folder.svg?v=1'); + @include icon-color('folder', 'filetypes', $color-black, 1, true); } .icon-filetype-folder-drag-accept { - background-image: url('../img/filetypes/folder-drag-accept.svg?v=1') !important; + @include icon-color('folder-drag-accept', 'filetypes', $color-black, 1, true); } .icon-home { - background-image: url('../img/places/home.svg?v=1'); + @include icon-color('home', 'places', $color-black, 1, true); } .icon-link { - background-image: url('../img/places/link.svg?v=1'); + @include icon-color('link', 'places', $color-black, 1, true); } .icon-music { - background-image: url('../img/places/music.svg?v=1'); + @include icon-color('music', 'places', $color-black, 1, true); } .icon-picture { - background-image: url('../img/places/picture.svg?v=1'); + @include icon-color('picture', 'places', $color-black, 1, true); } /* CLIENTS ------------------------------------------------------------------- */ .icon-desktop { - background-image: url('../img/clients/desktop.svg?v=1'); + @include icon-color('desktop', 'clients', $color-black, 1, true); } .icon-phone { - background-image: url('../img/clients/phone.svg?v=1'); + @include icon-color('phone', 'clients', $color-black, 1, true); } .icon-tablet { - background-image: url('../img/clients/tablet.svg?v=1'); + @include icon-color('tablet', 'clients', $color-black, 1, true); } /* APP CATEGORIES ------------------------------------------------------------------- */ .icon-category-installed { - background-image: url('../img/actions/user.svg?v=1'); + @include icon-color('user', 'actions', $color-black, 1, true); } .icon-category-enabled { - background-image: url('../img/actions/checkmark.svg?v=1'); + @include icon-color('checkmark', 'actions', $color-black, 1, true); } .icon-category-disabled { - background-image: url('../img/actions/close.svg?v=1'); + @include icon-color('close', 'actions', $color-black, 1, true); } .icon-category-app-bundles { - background-image: url('../img/categories/bundles.svg?v=1'); + @include icon-color('bundles', 'categories', $color-black, 1, true); } .icon-category-updates { - background-image: url('../img/actions/download.svg?v=1'); + @include icon-color('download', 'actions', $color-black, 1, true); } .icon-category-files { - background-image: url('../img/categories/files.svg?v=1'); + @include icon-color('files', 'categories', $color-black, 1, true); } .icon-category-social { - background-image: url('../img/categories/social.svg?v=1'); + @include icon-color('social', 'categories', $color-black, 1, true); } .icon-category-office { - background-image: url('../img/categories/office.svg?v=1'); + @include icon-color('office', 'categories', $color-black, 1, true); } .icon-category-auth { - background-image: url('../img/categories/auth.svg?v=1'); + @include icon-color('auth', 'categories', $color-black, 1, true); } .icon-category-monitoring { - background-image: url('../img/categories/monitoring.svg?v=1'); + @include icon-color('monitoring', 'categories', $color-black, 1, true); } .icon-category-multimedia { - background-image: url('../img/categories/multimedia.svg?v=1'); + @include icon-color('multimedia', 'categories', $color-black, 1, true); } .icon-category-organization { - background-image: url('../img/categories/organization.svg?v=1'); + @include icon-color('organization', 'categories', $color-black, 1, true); } .icon-category-customization { - background-image: url('../img/categories/customization.svg?v=1'); + @include icon-color('customization', 'categories', $color-black, 1, true); } .icon-category-integration { - background-image: url('../img/categories/integration.svg?v=1'); + @include icon-color('integration', 'categories', $color-black, 1, true); } .icon-category-tools { - background-image: url('../img/actions/settings-dark.svg?v=1'); + @include icon-color('settings-dark', 'actions', $color-black, 1, true); } .icon-category-games { - background-image: url('../img/categories/games.svg?v=1'); + @include icon-color('games', 'categories', $color-black, 1, true); } .icon-category-security { - background-image: url('../img/actions/password.svg?v=1'); + @include icon-color('password', 'actions', $color-black, 1, true); } .icon-category-search { - background-image: url('../img/actions/search.svg?v=1'); + @include icon-color('search', 'actions', $color-black, 1, true); } + diff --git a/core/css/inputs.scss b/core/css/inputs.scss index a3ff713d813f3..925069917e076 100644 --- a/core/css/inputs.scss +++ b/core/css/inputs.scss @@ -242,7 +242,7 @@ input { cursor: pointer; &:disabled { cursor: default; - background-image: url('../img/actions/confirm-fade.svg?v=2') !important; + @include icon-color('confirm-fade', 'actions', $color-black, 2, true); } } diff --git a/core/css/styles.scss b/core/css/styles.scss index 6ff8d30a59023..eac6af307a2f2 100644 --- a/core/css/styles.scss +++ b/core/css/styles.scss @@ -160,59 +160,6 @@ body { border-radius: var(--border-radius); } -/* Searchbox */ - -.searchbox { - position: relative; - input[type='search'] { - position: relative; - font-size: 1.2em; - padding: 3px; - padding-left: 25px; - padding-right: 20px; - background: transparent url('../img/actions/search-white.svg?v=1') no-repeat center center; - color: var(--color-primary-text); - border: 0; - border-radius: var(--border-radius); - margin-top: 9px; - width: 0; - cursor: pointer; - -webkit-transition: all 100ms; - transition: all 100ms; - opacity: .6; - &:focus, &:active, &:valid { - background-position-x: 6px; - color: var(--color-primary-text); - width: 155px; - cursor: text; - background-color: var(--color-primary) !important; - border: 1px solid var(--color-primary-text-dark) !important; - } - &:hover, &:focus, &:active { - opacity: 1; - } - & ~ .icon-close-white { - display: inline; - position: absolute; - width: 30px; - height: 100%; - right: 0; - top: 0; - margin: 0; - &, &:focus, &:active, &:hover { - border: none; - background-color: transparent; - } - } - &:not(:valid) ~ .icon-close-white { - display: none; - } - &::-webkit-search-cancel-button { - -webkit-appearance: none; - } - } -} - /* CONTENT ------------------------------------------------------------------ */ #controls { diff --git a/core/css/variables.scss b/core/css/variables.scss index 43e3c6b97bb0d..3cf77849395df 100644 --- a/core/css/variables.scss +++ b/core/css/variables.scss @@ -1,4 +1,26 @@ -// SCSS darken/lighten function override +/** + * @copyright Copyright (c) 2018, John Molakvoæ (skjnldsv@protonmail.com) + * + * @author John Molakvoæ (skjnldsv) + * + * @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 . + * + */ + + // SCSS darken/lighten function override @function nc-darken($color, $value) { @return darken($color, $value); } @@ -27,6 +49,9 @@ $color-primary-element-light: lighten($color-primary-element, 15%) !default; $color-error: #e9322d; $color-warning: #eca700; $color-success: #46ba61; +// used for svg +$color-white: #fff; +$color-black: #000; // rgb(118, 118, 118) / #767676 // min. color contrast for normal text on white background according to WCAG AA diff --git a/core/img/actions/audio-off-white.svg b/core/img/actions/audio-off-white.svg deleted file mode 100644 index d0699a959d0cb..0000000000000 --- a/core/img/actions/audio-off-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/audio-white.svg b/core/img/actions/audio-white.svg deleted file mode 100644 index 209177deb3f2c..0000000000000 --- a/core/img/actions/audio-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/caret-dark.svg b/core/img/actions/caret-dark.svg deleted file mode 100644 index 89ce37bc3e7bf..0000000000000 --- a/core/img/actions/caret-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/caret.svg b/core/img/actions/caret.svg index a7c34f699c7e5..89ce37bc3e7bf 100644 --- a/core/img/actions/caret.svg +++ b/core/img/actions/caret.svg @@ -1 +1 @@ - + diff --git a/core/img/actions/checkmark-color.svg b/core/img/actions/checkmark-color.svg deleted file mode 100644 index 89f6960834d6f..0000000000000 --- a/core/img/actions/checkmark-color.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/checkmark-white.svg b/core/img/actions/checkmark-white.svg deleted file mode 100644 index 6190902ea2da1..0000000000000 --- a/core/img/actions/checkmark-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/close-white.svg b/core/img/actions/close-white.svg deleted file mode 100644 index f24a6914b0f50..0000000000000 --- a/core/img/actions/close-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/confirm-white.svg b/core/img/actions/confirm-white.svg deleted file mode 100644 index 98a41adefe55f..0000000000000 --- a/core/img/actions/confirm-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/delete-hover.svg b/core/img/actions/delete-hover.svg deleted file mode 100644 index 286f060d46235..0000000000000 --- a/core/img/actions/delete-hover.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/delete-white.svg b/core/img/actions/delete-white.svg deleted file mode 100644 index 15a364c1006e7..0000000000000 --- a/core/img/actions/delete-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/download-white.svg b/core/img/actions/download-white.svg deleted file mode 100644 index b6de7996024ae..0000000000000 --- a/core/img/actions/download-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/error-color.svg b/core/img/actions/error-color.svg deleted file mode 100644 index 19957ad7c73f7..0000000000000 --- a/core/img/actions/error-color.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/error-white.svg b/core/img/actions/error-white.svg deleted file mode 100644 index 9558c998c3084..0000000000000 --- a/core/img/actions/error-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/fullscreen-white.svg b/core/img/actions/fullscreen-white.svg deleted file mode 100644 index c920885bf6be4..0000000000000 --- a/core/img/actions/fullscreen-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/info-white.svg b/core/img/actions/info-white.svg deleted file mode 100644 index 92f6e44add22e..0000000000000 --- a/core/img/actions/info-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/screen-off-white.svg b/core/img/actions/screen-off-white.svg deleted file mode 100644 index a022b933808ca..0000000000000 --- a/core/img/actions/screen-off-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/screen-white.svg b/core/img/actions/screen-white.svg deleted file mode 100644 index e279dc48270ba..0000000000000 --- a/core/img/actions/screen-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/search-white.svg b/core/img/actions/search-white.svg deleted file mode 100644 index 73aa5d3fa2fd3..0000000000000 --- a/core/img/actions/search-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/settings-white.svg b/core/img/actions/settings-white.svg deleted file mode 100644 index ba8d925d8a40f..0000000000000 --- a/core/img/actions/settings-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/starred.svg b/core/img/actions/starred.svg deleted file mode 100644 index 5635ea94e8591..0000000000000 --- a/core/img/actions/starred.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/upload-white.svg b/core/img/actions/upload-white.svg deleted file mode 100644 index 3bd04bb8de67e..0000000000000 --- a/core/img/actions/upload-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/video-off-white.svg b/core/img/actions/video-off-white.svg deleted file mode 100644 index 95e39de06d458..0000000000000 --- a/core/img/actions/video-off-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/actions/video-white.svg b/core/img/actions/video-white.svg deleted file mode 100644 index f24bb373add2c..0000000000000 --- a/core/img/actions/video-white.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/places/calendar-dark.svg b/core/img/places/calendar-dark.svg deleted file mode 100644 index 020ae8fe6ca7a..0000000000000 --- a/core/img/places/calendar-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/places/calendar.svg b/core/img/places/calendar.svg index 0d6e85a3ac047..020ae8fe6ca7a 100644 --- a/core/img/places/calendar.svg +++ b/core/img/places/calendar.svg @@ -1 +1 @@ - + diff --git a/core/img/places/contacts-dark.svg b/core/img/places/contacts-dark.svg deleted file mode 100644 index 5bc91dc59ab29..0000000000000 --- a/core/img/places/contacts-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/places/contacts.svg b/core/img/places/contacts.svg index 205224878e7b2..5bc91dc59ab29 100644 --- a/core/img/places/contacts.svg +++ b/core/img/places/contacts.svg @@ -1 +1 @@ - + diff --git a/core/img/places/default-app-icon.svg b/core/img/places/default-app-icon.svg index ba8d925d8a40f..0db6804a92345 100644 --- a/core/img/places/default-app-icon.svg +++ b/core/img/places/default-app-icon.svg @@ -1 +1 @@ - + diff --git a/core/img/places/files-dark.svg b/core/img/places/files-dark.svg deleted file mode 100644 index 1536502790293..0000000000000 --- a/core/img/places/files-dark.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/core/img/places/files.svg b/core/img/places/files.svg index 003e8b3fb80dd..1536502790293 100644 --- a/core/img/places/files.svg +++ b/core/img/places/files.svg @@ -1 +1 @@ - + diff --git a/core/img/places/music.svg b/core/img/places/music.svg index 26fe2017f184c..5746247ea78af 100644 --- a/core/img/places/music.svg +++ b/core/img/places/music.svg @@ -1 +1 @@ - + diff --git a/core/img/places/picture.svg b/core/img/places/picture.svg index 738f1b3b50529..ffb0840ac0efd 100644 --- a/core/img/places/picture.svg +++ b/core/img/places/picture.svg @@ -1 +1 @@ - + diff --git a/core/routes.php b/core/routes.php index c5df3a362f5aa..4ac51dc2364e4 100644 --- a/core/routes.php +++ b/core/routes.php @@ -61,6 +61,9 @@ ['name' => 'OCJS#getConfig', 'url' => '/core/js/oc.js', 'verb' => 'GET'], ['name' => 'Preview#getPreviewByFileId', 'url' => '/core/preview', 'verb' => 'GET'], ['name' => 'Preview#getPreview', 'url' => '/core/preview.png', 'verb' => 'GET'], + ['name' => 'Svg#getSvgFromCore', 'url' => '/svg/core/{folder}/{fileName}/{color}', 'verb' => 'GET'], + ['name' => 'Svg#getSvgFromSettings', 'url' => '/svg/settings/{folder}/{fileName}/{color}', 'verb' => 'GET'], + ['name' => 'Svg#getSvgFromApp', 'url' => '/svg/{app}/{fileName}/{color}', 'verb' => 'GET'], ['name' => 'Css#getCss', 'url' => '/css/{appName}/{fileName}', 'verb' => 'GET'], ['name' => 'Js#getJs', 'url' => '/js/{appName}/{fileName}', 'verb' => 'GET'], ['name' => 'contactsMenu#index', 'url' => '/contactsmenu/contacts', 'verb' => 'POST'], diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php index 3cac14b4ab3c2..b9eab8f41496c 100644 --- a/core/templates/layout.user.php +++ b/core/templates/layout.user.php @@ -105,7 +105,7 @@ t('Search'));?> diff --git a/lib/composer/composer/autoload_classmap.php b/lib/composer/composer/autoload_classmap.php index 1c67fb9327f88..234aa418f5679 100644 --- a/lib/composer/composer/autoload_classmap.php +++ b/lib/composer/composer/autoload_classmap.php @@ -594,6 +594,7 @@ 'OC\\Core\\Controller\\PreviewController' => $baseDir . '/core/Controller/PreviewController.php', 'OC\\Core\\Controller\\SearchController' => $baseDir . '/core/Controller/SearchController.php', 'OC\\Core\\Controller\\SetupController' => $baseDir . '/core/Controller/SetupController.php', + 'OC\\Core\\Controller\\SvgController' => $baseDir . '/core/Controller/SvgController.php', 'OC\\Core\\Controller\\TwoFactorChallengeController' => $baseDir . '/core/Controller/TwoFactorChallengeController.php', 'OC\\Core\\Controller\\UserController' => $baseDir . '/core/Controller/UserController.php', 'OC\\Core\\Controller\\WalledGardenController' => $baseDir . '/core/Controller/WalledGardenController.php', @@ -1016,6 +1017,7 @@ 'OC\\TemplateLayout' => $baseDir . '/lib/private/TemplateLayout.php', 'OC\\Template\\Base' => $baseDir . '/lib/private/Template/Base.php', 'OC\\Template\\CSSResourceLocator' => $baseDir . '/lib/private/Template/CSSResourceLocator.php', + 'OC\\Template\\IconsCacher' => $baseDir . '/lib/private/Template/IconsCacher.php', 'OC\\Template\\JSCombiner' => $baseDir . '/lib/private/Template/JSCombiner.php', 'OC\\Template\\JSConfigHelper' => $baseDir . '/lib/private/Template/JSConfigHelper.php', 'OC\\Template\\JSResourceLocator' => $baseDir . '/lib/private/Template/JSResourceLocator.php', diff --git a/lib/composer/composer/autoload_static.php b/lib/composer/composer/autoload_static.php index e40a5ea75db5d..c54120586f969 100644 --- a/lib/composer/composer/autoload_static.php +++ b/lib/composer/composer/autoload_static.php @@ -624,6 +624,7 @@ class ComposerStaticInit53792487c5a8370acc0b06b1a864ff4c 'OC\\Core\\Controller\\PreviewController' => __DIR__ . '/../../..' . '/core/Controller/PreviewController.php', 'OC\\Core\\Controller\\SearchController' => __DIR__ . '/../../..' . '/core/Controller/SearchController.php', 'OC\\Core\\Controller\\SetupController' => __DIR__ . '/../../..' . '/core/Controller/SetupController.php', + 'OC\\Core\\Controller\\SvgController' => __DIR__ . '/../../..' . '/core/Controller/SvgController.php', 'OC\\Core\\Controller\\TwoFactorChallengeController' => __DIR__ . '/../../..' . '/core/Controller/TwoFactorChallengeController.php', 'OC\\Core\\Controller\\UserController' => __DIR__ . '/../../..' . '/core/Controller/UserController.php', 'OC\\Core\\Controller\\WalledGardenController' => __DIR__ . '/../../..' . '/core/Controller/WalledGardenController.php', @@ -1046,6 +1047,7 @@ class ComposerStaticInit53792487c5a8370acc0b06b1a864ff4c 'OC\\TemplateLayout' => __DIR__ . '/../../..' . '/lib/private/TemplateLayout.php', 'OC\\Template\\Base' => __DIR__ . '/../../..' . '/lib/private/Template/Base.php', 'OC\\Template\\CSSResourceLocator' => __DIR__ . '/../../..' . '/lib/private/Template/CSSResourceLocator.php', + 'OC\\Template\\IconsCacher' => __DIR__ . '/../../..' . '/lib/private/Template/IconsCacher.php', 'OC\\Template\\JSCombiner' => __DIR__ . '/../../..' . '/lib/private/Template/JSCombiner.php', 'OC\\Template\\JSConfigHelper' => __DIR__ . '/../../..' . '/lib/private/Template/JSConfigHelper.php', 'OC\\Template\\JSResourceLocator' => __DIR__ . '/../../..' . '/lib/private/Template/JSResourceLocator.php', diff --git a/lib/private/Server.php b/lib/private/Server.php index c9f8001631eb6..0f406ebe9b7cf 100644 --- a/lib/private/Server.php +++ b/lib/private/Server.php @@ -116,6 +116,7 @@ use OC\Share20\ShareHelper; use OC\SystemTag\ManagerFactory as SystemTagManagerFactory; use OC\Tagging\TagMapper; +use OC\Template\IconsCacher; use OC\Template\JSCombiner; use OC\Template\SCSSCacher; use OCA\Theming\ImageManager; @@ -963,7 +964,8 @@ public function __construct($webRoot, \OC\Config $config) { $c->getConfig(), $c->getThemingDefaults(), \OC::$SERVERROOT, - $this->getMemCacheFactory() + $this->getMemCacheFactory(), + $c->query(IconsCacher::class) ); }); $this->registerService(JSCombiner::class, function (Server $c) { diff --git a/lib/private/Settings/Manager.php b/lib/private/Settings/Manager.php index 82cb223bb9f64..e9f2a6f597685 100644 --- a/lib/private/Settings/Manager.php +++ b/lib/private/Settings/Manager.php @@ -231,7 +231,7 @@ public function getAdminSections(): array { 5 => [new Section('sharing', $this->l->t('Sharing'), 0, $this->url->imagePath('core', 'actions/share.svg'))], 10 => [new Section('security', $this->l->t('Security'), 0, $this->url->imagePath('core', 'actions/password.svg'))], 45 => [new Section('encryption', $this->l->t('Encryption'), 0, $this->url->imagePath('core', 'actions/password.svg'))], - 50 => [new Section('groupware', $this->l->t('Groupware'), 0, $this->url->imagePath('core', 'places/contacts-dark.svg'))], + 50 => [new Section('groupware', $this->l->t('Groupware'), 0, $this->url->imagePath('core', 'places/contacts.svg'))], 98 => [new Section('additional', $this->l->t('Additional settings'), 0, $this->url->imagePath('core', 'actions/settings-dark.svg'))], ]; diff --git a/lib/private/Template/IconsCacher.php b/lib/private/Template/IconsCacher.php new file mode 100644 index 0000000000000..c262d26654ff6 --- /dev/null +++ b/lib/private/Template/IconsCacher.php @@ -0,0 +1,147 @@ + + * + * @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 OC\Template; + +use OCP\Files\IAppData; +use OCP\Files\NotFoundException; +use OCP\Files\SimpleFS\ISimpleFolder; +use OCP\Files\SimpleFS\ISimpleFile; +use OCP\ILogger; +use OCP\IURLGenerator; +use OC\Files\AppData\Factory; + +class IconsCacher { + + /** @var ILogger */ + protected $logger; + + /** @var IAppData */ + protected $appData; + + /** @var ISimpleFolder */ + private $folder; + + /** @var IURLGenerator */ + protected $urlGenerator; + + /** @var string */ + private $iconVarRE = '/--(icon-[a-z0-9-]+): url\(["\']([a-z0-9-_\~\/\?\&\=\.]+)[^;]+;/m'; + + /** @var string */ + private $fileName = 'icons-vars.css'; + + /** + * @param ILogger $logger + * @param Factory $appDataFactory + * @param IURLGenerator $urlGenerator + */ + public function __construct(ILogger $logger, + Factory $appDataFactory, + IURLGenerator $urlGenerator) { + $this->logger = $logger; + $this->appData = $appDataFactory->get('css'); + $this->urlGenerator = $urlGenerator; + + try { + $this->folder = $this->appData->getFolder('icons'); + } catch (NotFoundException $e) { + $this->folder = $this->appData->newFolder('icons'); + } + } + + private function getIconsFromCss(string $css): array{ + preg_match_all($this->iconVarRE, $css, $matches, PREG_SET_ORDER); + $icons = []; + foreach ($matches as $icon) { + $icons[$icon[1]] = $icon[2]; + } + + return $icons; + } + /** + * Parse and cache css + * + * @param string $css + */ + public function setIconsCss(string $css) { + + $cachedFile = $this->getCachedCSS(); + if (!$cachedFile) { + $currentData = ''; + } else { + $currentData = $cachedFile->getContent(); + } + + // remove :root + $currentData = str_replace([':root {', '}'], '', $currentData); + + $icons = $this->getIconsFromCss($currentData . $css); + + $data = ''; + foreach ($icons as $icon => $url) { + $data .= "--$icon: url('$url?v=1');"; + } + + if (strlen($data) > 0) { + if (!$cachedFile) { + $cachedFile = $this->folder->newFile($this->fileName); + } + + $data = ":root { + $data + }"; + $cachedFile->putContent($data); + } + + return preg_replace($this->iconVarRE, '', $css); + } + + /** + * Get icons css file + * @return ISimpleFile|boolean + */ + public function getCachedCSS() { + try { + return $this->folder->getFile($this->fileName); + } catch (NotFoundException $e) { + return false; + } + } + + public function injectCss() { + // Only inject once + foreach (\OC_Util::$headers as $header) { + if ( + array_key_exists('attributes', $header) && + array_key_exists('href', $header['attributes']) && + strpos($header['attributes']['href'], $this->fileName) !== false) { + return; + } + } + $linkToCSS = substr($this->urlGenerator->linkToRoute('core.Css.getCss', ['appName' => 'icons', 'fileName' => $this->fileName]), strlen(\OC::$WEBROOT)); + \OC_Util::addHeader('link', ['rel' => 'stylesheet', 'href' => $linkToCSS], null, true); + } + +} \ No newline at end of file diff --git a/lib/private/Template/SCSSCacher.php b/lib/private/Template/SCSSCacher.php index 6e25e1fa5def3..9dcedb94daf6b 100644 --- a/lib/private/Template/SCSSCacher.php +++ b/lib/private/Template/SCSSCacher.php @@ -32,7 +32,6 @@ use Leafo\ScssPhp\Exception\ParserException; use Leafo\ScssPhp\Formatter\Crunched; use Leafo\ScssPhp\Formatter\Expanded; -use OC\Files\AppData\Factory; use OCP\Files\IAppData; use OCP\Files\NotFoundException; use OCP\Files\NotPermittedException; @@ -43,6 +42,8 @@ use OCP\IConfig; use OCP\ILogger; use OCP\IURLGenerator; +use OC\Files\AppData\Factory; +use OC\Template\IconsCacher; class SCSSCacher { @@ -73,6 +74,9 @@ class SCSSCacher { /** @var ICacheFactory */ private $cacheFactory; + /** @var IconsCacher */ + private $iconsCacher; + /** * @param ILogger $logger * @param Factory $appDataFactory @@ -81,6 +85,7 @@ class SCSSCacher { * @param \OC_Defaults $defaults * @param string $serverRoot * @param ICacheFactory $cacheFactory + * @param IconsCacher $iconsCacher */ public function __construct(ILogger $logger, Factory $appDataFactory, @@ -88,15 +93,17 @@ public function __construct(ILogger $logger, IConfig $config, \OC_Defaults $defaults, $serverRoot, - ICacheFactory $cacheFactory) { - $this->logger = $logger; - $this->appData = $appDataFactory->get('css'); + ICacheFactory $cacheFactory, + IconsCacher $iconsCacher) { + $this->logger = $logger; + $this->appData = $appDataFactory->get('css'); $this->urlGenerator = $urlGenerator; - $this->config = $config; - $this->defaults = $defaults; - $this->serverRoot = $serverRoot; + $this->config = $config; + $this->defaults = $defaults; + $this->serverRoot = $serverRoot; $this->cacheFactory = $cacheFactory; - $this->depsCache = $cacheFactory->createDistributed('SCSS-' . md5($this->urlGenerator->getBaseUrl())); + $this->depsCache = $cacheFactory->createDistributed('SCSS-' . md5($this->urlGenerator->getBaseUrl())); + $this->iconsCacher = $iconsCacher; } /** @@ -112,23 +119,34 @@ public function process(string $root, string $file, string $app): bool { $path = explode('/', $root . '/' . $file); $fileNameSCSS = array_pop($path); - $fileNameCSS = $this->prependVersionPrefix($this->prependBaseurlPrefix(str_replace('.scss', '.css', $fileNameSCSS)), $app); + $fileNameCSS = $this->prependVersionPrefix($this->prependBaseurlPrefix(str_replace('.scss', '.css', $fileNameSCSS)), $app); - $path = implode('/', $path); + $path = implode('/', $path); $webDir = $this->getWebDir($path, $app, $this->serverRoot, \OC::$WEBROOT); try { $folder = $this->appData->getFolder($app); - } catch(NotFoundException $e) { + } catch (NotFoundException $e) { // creating css appdata folder $folder = $this->appData->newFolder($app); } - - if(!$this->variablesChanged() && $this->isCached($fileNameCSS, $folder)) { + if (!$this->variablesChanged() && $this->isCached($fileNameCSS, $folder)) { + // Inject icons vars css if any + if ($this->iconsCacher->getCachedCSS() && $this->iconsCacher->getCachedCSS()->getSize() > 0) { + $this->iconsCacher->injectCss(); + } return true; } - return $this->cache($path, $fileNameCSS, $fileNameSCSS, $folder, $webDir); + + $cached = $this->cache($path, $fileNameCSS, $fileNameSCSS, $folder, $webDir); + + // Inject icons vars css if any + if ($this->iconsCacher->getCachedCSS() && $this->iconsCacher->getCachedCSS()->getSize() > 0) { + $this->iconsCacher->injectCss(); + } + + return $cached; } /** @@ -137,8 +155,9 @@ public function process(string $root, string $file, string $app): bool { * @return ISimpleFile */ public function getCachedCSS(string $appName, string $fileName): ISimpleFile { - $folder = $this->appData->getFolder($appName); + $folder = $this->appData->getFolder($appName); $cachedFileName = $this->prependVersionPrefix($this->prependBaseurlPrefix($fileName), $appName); + return $folder->getFile($cachedFileName); } @@ -153,24 +172,26 @@ private function isCached(string $fileNameCSS, ISimpleFolder $folder) { $cachedFile = $folder->getFile($fileNameCSS); if ($cachedFile->getSize() > 0) { $depFileName = $fileNameCSS . '.deps'; - $deps = $this->depsCache->get($folder->getName() . '-' . $depFileName); + $deps = $this->depsCache->get($folder->getName() . '-' . $depFileName); if ($deps === null) { $depFile = $folder->getFile($depFileName); - $deps = $depFile->getContent(); + $deps = $depFile->getContent(); //Set to memcache for next run $this->depsCache->set($folder->getName() . '-' . $depFileName, $deps); } $deps = json_decode($deps, true); - foreach ((array)$deps as $file=>$mtime) { + foreach ((array) $deps as $file => $mtime) { if (!file_exists($file) || filemtime($file) > $mtime) { return false; } } + return true; } + return false; - } catch(NotFoundException $e) { + } catch (NotFoundException $e) { return false; } } @@ -181,11 +202,13 @@ private function isCached(string $fileNameCSS, ISimpleFolder $folder) { */ private function variablesChanged(): bool { $injectedVariables = $this->getInjectedVariables(); - if($this->config->getAppValue('core', 'scss.variables') !== md5($injectedVariables)) { + if ($this->config->getAppValue('core', 'scss.variables') !== md5($injectedVariables)) { $this->resetCache(); $this->config->setAppValue('core', 'scss.variables', md5($injectedVariables)); + return true; } + return false; } @@ -204,11 +227,12 @@ private function cache(string $path, string $fileNameCSS, string $fileNameSCSS, $scss = new Compiler(); $scss->setImportPaths([ $path, - $this->serverRoot . '/core/css/', + $this->serverRoot . '/core/css/' ]); + // Continue after throw $scss->setIgnoreErrors(true); - if($this->config->getSystemValue('debug')) { + if ($this->config->getSystemValue('debug')) { // Debug mode $scss->setFormatter(Expanded::class); $scss->setLineNumberStyle(Compiler::LINE_COMMENTS); @@ -219,7 +243,7 @@ private function cache(string $path, string $fileNameCSS, string $fileNameSCSS, try { $cachedfile = $folder->getFile($fileNameCSS); - } catch(NotFoundException $e) { + } catch (NotFoundException $e) { $cachedfile = $folder->newFile($fileNameCSS); } @@ -233,14 +257,20 @@ private function cache(string $path, string $fileNameCSS, string $fileNameSCSS, // Compile try { $compiledScss = $scss->compile( + '$webroot: \'' . $this->getRoutePrefix() . '\';' . '@import "variables.scss";' . + '@import "functions.scss";' . $this->getInjectedVariables() . - '@import "'.$fileNameSCSS.'";'); - } catch(ParserException $e) { + '@import "' . $fileNameSCSS . '";'); + } catch (ParserException $e) { $this->logger->error($e, ['app' => 'core']); + return false; } + // Parse Icons and create related css variables + $compiledScss = $this->iconsCacher->setIconsCss($compiledScss); + // Gzip file try { $gzipFile = $folder->getFile($fileNameCSS . '.gzip'); # Safari doesn't like .gz @@ -255,10 +285,12 @@ private function cache(string $path, string $fileNameCSS, string $fileNameSCSS, $depFile->putContent($deps); $this->depsCache->set($folder->getName() . '-' . $depFileName, $deps); $gzipFile->putContent(gzencode($data, 9)); - $this->logger->debug('SCSSCacher: '.$webDir.'/'.$fileNameSCSS.' compiled and successfully cached', ['app' => 'core']); + $this->logger->debug('SCSSCacher: ' . $webDir . '/' . $fileNameSCSS . ' compiled and successfully cached', ['app' => 'core']); + return true; - } catch(NotPermittedException $e) { + } catch (NotPermittedException $e) { $this->logger->error('SCSSCacher: unable to cache: ' . $fileNameSCSS); + return false; } } @@ -275,7 +307,7 @@ public function resetCache() { foreach ($folder->getDirectoryListing() as $file) { try { $file->delete(); - } catch(NotPermittedException $e) { + } catch (NotPermittedException $e) { $this->logger->logException($e, ['message' => 'SCSSCacher: unable to delete file: ' . $file->getName()]); } } @@ -313,8 +345,9 @@ private function getInjectedVariables(): string { * @return string */ private function rebaseUrls(string $css, string $webDir): string { - $re = '/url\([\'"]([^\/][\.\w?=\/-]*)[\'"]\)/x'; - $subst = 'url(\''.$webDir.'/$1\')'; + $re = '/url\([\'"]([^\/][\.\w?=\/-]*)[\'"]\)/x'; + $subst = 'url(\'' . $webDir . '/$1\')'; + return preg_replace($re, $subst, $css); } @@ -326,8 +359,8 @@ private function rebaseUrls(string $css, string $webDir): string { */ public function getCachedSCSS(string $appName, string $fileName): string { $tmpfileLoc = explode('/', $fileName); - $fileName = array_pop($tmpfileLoc); - $fileName = $this->prependVersionPrefix($this->prependBaseurlPrefix(str_replace('.scss', '.css', $fileName)), $appName); + $fileName = array_pop($tmpfileLoc); + $fileName = $this->prependVersionPrefix($this->prependBaseurlPrefix(str_replace('.scss', '.css', $fileName)), $appName); return substr($this->urlGenerator->linkToRoute('core.Css.getCss', ['fileName' => $fileName, 'appName' => $appName]), strlen(\OC::$WEBROOT) + 1); } @@ -338,8 +371,16 @@ public function getCachedSCSS(string $appName, string $fileName): string { * @return string */ private function prependBaseurlPrefix(string $cssFile): string { - $frontendController = ($this->config->getSystemValue('htaccess.IgnoreFrontController', false) === true || getenv('front_controller_active') === 'true'); - return substr(md5($this->urlGenerator->getBaseUrl() . $frontendController), 0, 4) . '-' . $cssFile; + return substr(md5($this->urlGenerator->getBaseUrl() . $this->getRoutePrefix()), 0, 4) . '-' . $cssFile; + } + + private function getRoutePrefix() { + $frontControllerActive = ($this->config->getSystemValue('htaccess.IgnoreFrontController', false) === true || getenv('front_controller_active') === 'true'); + $prefix = \OC::$WEBROOT . '/index.php'; + if ($frontControllerActive) { + $prefix = \OC::$WEBROOT; + } + return $prefix; } /** @@ -354,6 +395,7 @@ private function prependVersionPrefix(string $cssFile, string $appId): string { return substr(md5($appVersion), 0, 4) . '-' . $cssFile; } $coreVersion = \OC_Util::getVersionString(); + return substr(md5($coreVersion), 0, 4) . '-' . $cssFile; } @@ -367,12 +409,14 @@ private function prependVersionPrefix(string $cssFile, string $appId): string { */ private function getWebDir(string $path, string $appName, string $serverRoot, string $webRoot): string { // Detect if path is within server root AND if path is within an app path - if ( strpos($path, $serverRoot) === false && $appWebPath = \OC_App::getAppWebPath($appName)) { + if (strpos($path, $serverRoot) === false && $appWebPath = \OC_App::getAppWebPath($appName)) { // Get the file path within the app directory $appDirectoryPath = explode($appName, $path)[1]; // Remove the webroot - return str_replace($webRoot, '', $appWebPath.$appDirectoryPath); + + return str_replace($webRoot, '', $appWebPath . $appDirectoryPath); } - return $webRoot.substr($path, strlen($serverRoot)); + + return $webRoot . substr($path, strlen($serverRoot)); } } diff --git a/lib/private/legacy/util.php b/lib/private/legacy/util.php index ab595d885cb76..5e9a46d44a918 100644 --- a/lib/private/legacy/util.php +++ b/lib/private/legacy/util.php @@ -687,13 +687,20 @@ private static function addExternalResource($application, $prepend, $path, $type * @param string $tag tag name of the element * @param array $attributes array of attributes for the element * @param string $text the text content for the element + * @param bool $prepend prepend the header to the beginning of the list */ - public static function addHeader($tag, $attributes, $text=null) { - self::$headers[] = array( + public static function addHeader($tag, $attributes, $text = null, $prepend = false) { + $header = array( 'tag' => $tag, 'attributes' => $attributes, 'text' => $text ); + if ($prepend === true) { + array_unshift (self::$headers, $header); + + } else { + self::$headers[] = $header; + } } /** diff --git a/settings/css/settings.scss b/settings/css/settings.scss index 1ca14b8f1d38b..60c7f368bf117 100644 --- a/settings/css/settings.scss +++ b/settings/css/settings.scss @@ -15,23 +15,23 @@ input { /* icons for sidebar */ .nav-icon-personal-settings { - background-image: url('../img/personal.svg?v=1'); + @include icon-color('personal', 'settings', $color-black); } .nav-icon-security { - background-image: url('../img/toggle-filelist.svg?v=1'); + @include icon-color('toggle-filelist', 'settings', $color-black); } .nav-icon-clientsbox { - background-image: url('../img/change.svg?v=1'); + @include icon-color('change', 'settings', $color-black); } .nav-icon-federated-cloud { - background-image: url('../img/share.svg?v=1'); + @include icon-color('share', 'settings', $color-black); } .nav-icon-second-factor-backup-codes, .nav-icon-ssl-root-certificate { - background-image: url('../img/password.svg?v=1'); + @include icon-color('password', 'settings', $color-black); } #avatarform { diff --git a/tests/lib/Settings/ManagerTest.php b/tests/lib/Settings/ManagerTest.php index 30a5b7bd1039e..76f6d867d3aef 100644 --- a/tests/lib/Settings/ManagerTest.php +++ b/tests/lib/Settings/ManagerTest.php @@ -122,7 +122,7 @@ public function testGetAdminSections() { ['core', 'actions/settings-dark.svg', '1'], ['core', 'actions/share.svg', '2'], ['core', 'actions/password.svg', '3'], - ['core', 'places/contacts-dark.svg', '5'], + ['core', 'places/contacts.svg', '5'], ['settings', 'help.svg', '4'], ]); @@ -175,7 +175,7 @@ public function testGetAdminSectionsEmptySection() { ['core', 'actions/settings-dark.svg', '1'], ['core', 'actions/share.svg', '2'], ['core', 'actions/password.svg', '3'], - ['core', 'places/contacts-dark.svg', '5'], + ['core', 'places/contacts.svg', '5'], ['settings', 'help.svg', '4'], ]); diff --git a/tests/lib/Template/CSSResourceLocatorTest.php b/tests/lib/Template/CSSResourceLocatorTest.php index a8b123b8d5b9a..3fb7972b21151 100644 --- a/tests/lib/Template/CSSResourceLocatorTest.php +++ b/tests/lib/Template/CSSResourceLocatorTest.php @@ -31,6 +31,7 @@ use OCP\IURLGenerator; use OCP\IConfig; use OCA\Theming\ThemingDefaults; +use OC\Template\IconsCacher; use OC\Template\SCSSCacher; use OC\Template\CSSResourceLocator; @@ -47,6 +48,8 @@ class CSSResourceLocatorTest extends \Test\TestCase { protected $cacheFactory; /** @var ILogger|\PHPUnit_Framework_MockObject_MockObject */ protected $logger; + /** @var IconsCacher|\PHPUnit_Framework_MockObject_MockObject */ + protected $iconsCacher; protected function setUp() { parent::setUp(); @@ -57,6 +60,7 @@ protected function setUp() { $this->config = $this->createMock(IConfig::class); $this->cacheFactory = $this->createMock(ICacheFactory::class); $this->themingDefaults = $this->createMock(ThemingDefaults::class); + $this->iconsCacher = $this->createMock(IconsCacher::class); } private function cssResourceLocator() { @@ -70,7 +74,8 @@ private function cssResourceLocator() { $this->config, $this->themingDefaults, \OC::$SERVERROOT, - $this->cacheFactory + $this->cacheFactory, + $this->iconsCacher ); return new CSSResourceLocator( $this->logger, diff --git a/tests/lib/Template/IconsCacherTest.php b/tests/lib/Template/IconsCacherTest.php new file mode 100644 index 0000000000000..106f08d5fa89b --- /dev/null +++ b/tests/lib/Template/IconsCacherTest.php @@ -0,0 +1,127 @@ + + * + * @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 Test\Template; + +use OC\Files\AppData\AppData; +use OC\Files\AppData\Factory; +use OC\Template\IconsCacher; +use OCA\Theming\ThemingDefaults; +use OCP\Files\IAppData; +use OCP\Files\NotFoundException; +use OCP\Files\SimpleFS\ISimpleFile; +use OCP\Files\SimpleFS\ISimpleFolder; +use OCP\ICache; +use OCP\ICacheFactory; +use OCP\IConfig; +use OCP\ILogger; +use OCP\IURLGenerator; +use OC_App; + +class IconsCacherTest extends \Test\TestCase { + /** @var ILogger|\PHPUnit_Framework_MockObject_MockObject */ + protected $logger; + /** @var IAppData|\PHPUnit_Framework_MockObject_MockObject */ + protected $appData; + /** @var IURLGenerator|\PHPUnit_Framework_MockObject_MockObject */ + protected $urlGenerator; + + protected function setUp() { + $this->logger = $this->createMock(ILogger::class); + $this->appData = $this->createMock(AppData::class); + + /** @var Factory|\PHPUnit_Framework_MockObject_MockObject $factory */ + $factory = $this->createMock(Factory::class); + $factory->method('get')->with('css')->willReturn($this->appData); + + $this->folder = $this->createMock(ISimpleFolder::class); + $this->appData->method('getFolder')->willReturn($this->folder); + + $this->urlGenerator = $this->createMock(IURLGenerator::class); + + $this->iconsCacher = new IconsCacher( + $this->logger, + $factory, + $this->urlGenerator + ); + } + + public function testGetIconsFromEmptyCss() { + $css = " + icon.test { + color: #aaa; + } + "; + $icons = self::invokePrivate($this->iconsCacher, 'getIconsFromCss', [$css]); + $this->assertTrue(empty($icons)); + } + + public function testGetIconsFromValidCss() { + $css = " + icon.test { + --icon-test: url('/svg/core/actions/add/000'); + background-image: var(--icon-test); + } + "; + $actual = self::invokePrivate($this->iconsCacher, 'getIconsFromCss', [$css]); + $expected = array( + 'icon-test' => '/svg/core/actions/add/000' + ); + $this->assertEquals($expected, $actual); + } + + public function testSetIconsFromEmptyCss() { + $expected = " + icon.test { + color: #aaa; + } + "; + $actual = $this->iconsCacher->setIconsCss($expected); + $this->assertEquals($expected, $actual); + } + + public function testSetIconsFromValidCss() { + $css = " + icon.test { + --icon-test: url('/svg/core/actions/add/000'); + background-image: var(--icon-test); + } + "; + $expected = " + icon.test { + + background-image: var(--icon-test); + } + "; + + $iconsFile = $this->createMock(ISimpleFile::class); + $this->folder->expects($this->once()) + ->method('getFile') + ->willReturn($iconsFile); + + $actual = $this->iconsCacher->setIconsCss($css); + $this->assertEquals($expected, $actual); + } + +} \ No newline at end of file diff --git a/tests/lib/Template/SCSSCacherTest.php b/tests/lib/Template/SCSSCacherTest.php index 5e3700477ff98..f32b87edcbbb5 100644 --- a/tests/lib/Template/SCSSCacherTest.php +++ b/tests/lib/Template/SCSSCacherTest.php @@ -26,6 +26,7 @@ use OC\Files\AppData\AppData; use OC\Files\AppData\Factory; use OC\Template\SCSSCacher; +use OC\Template\IconsCacher; use OCA\Theming\ThemingDefaults; use OCP\Files\IAppData; use OCP\Files\NotFoundException; @@ -55,11 +56,14 @@ class SCSSCacherTest extends \Test\TestCase { protected $depsCache; /** @var ICacheFactory|\PHPUnit_Framework_MockObject_MockObject */ protected $cacheFactory; + /** @var IconsCacher|\PHPUnit_Framework_MockObject_MockObject */ + protected $iconsCacher; protected function setUp() { parent::setUp(); $this->logger = $this->createMock(ILogger::class); $this->appData = $this->createMock(AppData::class); + $this->iconsCacher = $this->createMock(IconsCacher::class); /** @var Factory|\PHPUnit_Framework_MockObject_MockObject $factory */ $factory = $this->createMock(Factory::class); @@ -80,6 +84,11 @@ protected function setUp() { $this->themingDefaults = $this->createMock(ThemingDefaults::class); $this->themingDefaults->expects($this->any())->method('getScssVariables')->willReturn([]); + $iconsFile = $this->createMock(ISimpleFile::class); + $this->iconsCacher->expects($this->any()) + ->method('getCachedCSS') + ->willReturn($iconsFile); + $this->scssCacher = new SCSSCacher( $this->logger, $factory, @@ -87,7 +96,8 @@ protected function setUp() { $this->config, $this->themingDefaults, \OC::$SERVERROOT, - $this->cacheFactory + $this->cacheFactory, + $this->iconsCacher ); } @@ -103,7 +113,7 @@ public function testProcessUncachedFileNoAppDataFolder() { $fileDeps = $this->createMock(ISimpleFile::class); $gzfile = $this->createMock(ISimpleFile::class); $filePrefix = substr(md5(\OC_Util::getVersionString('core')), 0, 4) . '-' . - substr(md5('http://localhost/nextcloud'), 0, 4) . '-'; + substr(md5('http://localhost/nextcloud/index.php'), 0, 4) . '-'; $folder->method('getFile') ->will($this->returnCallback(function($path) use ($file, $gzfile, $filePrefix) { @@ -126,6 +136,10 @@ public function testProcessUncachedFileNoAppDataFolder() { ->method('getBaseUrl') ->willReturn('http://localhost/nextcloud'); + $this->iconsCacher->expects($this->any()) + ->method('setIconsCss') + ->willReturn('scss {}'); + $actual = $this->scssCacher->process(\OC::$SERVERROOT, '/core/css/styles.scss', 'core'); $this->assertTrue($actual); } @@ -139,7 +153,7 @@ public function testProcessUncachedFile() { $fileDeps = $this->createMock(ISimpleFile::class); $gzfile = $this->createMock(ISimpleFile::class); $filePrefix = substr(md5(\OC_Util::getVersionString('core')), 0, 4) . '-' . - substr(md5('http://localhost/nextcloud'), 0, 4) . '-'; + substr(md5('http://localhost/nextcloud/index.php'), 0, 4) . '-'; $folder->method('getFile') ->will($this->returnCallback(function($path) use ($file, $gzfile, $filePrefix) { @@ -158,6 +172,10 @@ public function testProcessUncachedFile() { ->with($filePrefix.'styles.css.deps') ->willReturn($fileDeps); + $this->iconsCacher->expects($this->any()) + ->method('setIconsCss') + ->willReturn('scss {}'); + $actual = $this->scssCacher->process(\OC::$SERVERROOT, '/core/css/styles.scss', 'core'); $this->assertTrue($actual); } @@ -171,7 +189,7 @@ public function testProcessCachedFile() { $fileDeps->expects($this->any())->method('getSize')->willReturn(1); $gzFile = $this->createMock(ISimpleFile::class); $filePrefix = substr(md5(\OC_Util::getVersionString('core')), 0, 4) . '-' . - substr(md5('http://localhost/nextcloud'), 0, 4) . '-'; + substr(md5('http://localhost/nextcloud/index.php'), 0, 4) . '-'; $folder->method('getFile') ->will($this->returnCallback(function($name) use ($file, $fileDeps, $gzFile, $filePrefix) { @@ -185,6 +203,10 @@ public function testProcessCachedFile() { $this->fail(); })); + $this->iconsCacher->expects($this->any()) + ->method('setIconsCss') + ->willReturn('scss {}'); + $actual = $this->scssCacher->process(\OC::$SERVERROOT, '/core/css/styles.scss', 'core'); $this->assertTrue($actual); } @@ -205,9 +227,8 @@ public function testProcessCachedFileMemcache() { $fileDeps->expects($this->any())->method('getSize')->willReturn(1); $gzFile = $this->createMock(ISimpleFile::class); - $filePrefix = substr(md5('http://localhost/nextcloud'), 0, 8) . '-'; $filePrefix = substr(md5(\OC_Util::getVersionString('core')), 0, 4) . '-' . - substr(md5('http://localhost/nextcloud'), 0, 4) . '-'; + substr(md5('http://localhost/nextcloud/index.php'), 0, 4) . '-'; $folder->method('getFile') ->will($this->returnCallback(function($name) use ($file, $fileDeps, $gzFile, $filePrefix) { if ($name === $filePrefix.'styles.css') { @@ -220,6 +241,10 @@ public function testProcessCachedFileMemcache() { $this->fail(); })); + $this->iconsCacher->expects($this->any()) + ->method('setIconsCss') + ->willReturn('scss {}'); + $actual = $this->scssCacher->process(\OC::$SERVERROOT, '/core/css/styles.scss', 'core'); $this->assertTrue($actual); } @@ -276,6 +301,10 @@ public function testCacheNoFile() { throw new \Exception(); })); + $this->iconsCacher->expects($this->any()) + ->method('setIconsCss') + ->willReturn('scss {}'); + $file->expects($this->once())->method('putContent'); $depsFile->expects($this->once())->method('putContent'); $gzipFile->expects($this->once())->method('putContent'); @@ -310,6 +339,10 @@ public function testCache() { $depsFile->expects($this->once())->method('putContent'); $gzipFile->expects($this->once())->method('putContent'); + $this->iconsCacher->expects($this->any()) + ->method('setIconsCss') + ->willReturn('scss {}'); + $actual = self::invokePrivate($this->scssCacher, 'cache', [$path, $fileNameCSS, $fileNameSCSS, $folder, $webDir]); $this->assertTrue($actual); } @@ -336,6 +369,10 @@ public function testCacheSuccess() { throw new \Exception(); })); + $this->iconsCacher->expects($this->at(0)) + ->method('setIconsCss') + ->willReturn('body{background-color:#0082c9}'); + $file->expects($this->at(0))->method('putContent')->with($this->callback( function ($content){ return 'body{background-color:#0082c9}' === $content; @@ -409,7 +446,7 @@ public function testGetCachedSCSS($appName, $fileName, $result, $version) { ->method('linkToRoute') ->with('core.Css.getCss', [ 'fileName' => substr(md5($version), 0, 4) . '-' . - substr(md5('http://localhost/nextcloud'), 0, 4) . '-styles.css', + substr(md5('http://localhost/nextcloud/index.php'), 0, 4) . '-styles.css', 'appName' => $appName ]) ->willReturn(\OC::$WEBROOT . $result);