From 9ebe0c8d640a555c5d82da3832ea8da0dd22ea67 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Tue, 12 Jul 2016 21:35:43 +0200 Subject: [PATCH 1/7] Colorize checkboxes depending on theming color --- apps/theming/lib/controller/themingcontroller.php | 8 ++++++++ core/img/actions/checkmark-white.svg | 5 +---- 2 files changed, 9 insertions(+), 4 deletions(-) diff --git a/apps/theming/lib/controller/themingcontroller.php b/apps/theming/lib/controller/themingcontroller.php index 3e5d6f3e0d..eb377f27ff 100644 --- a/apps/theming/lib/controller/themingcontroller.php +++ b/apps/theming/lib/controller/themingcontroller.php @@ -219,6 +219,14 @@ class ThemingController extends Controller { '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}', $color ); + $responseCss .= sprintf(' + input[type="checkbox"].checkbox:checked + label:before { + background-image:url(/core/img/actions/checkmark-white.svg); + background-color: %s; background-position: center center; background-size:contain; + width:12px; height:12px; padding:0; margin:1px 6px 7px 2px; + }', + $color + ); } $logo = $this->config->getAppValue($this->appName, 'logoMime'); if($logo !== '') { diff --git a/core/img/actions/checkmark-white.svg b/core/img/actions/checkmark-white.svg index 964624a9ce..b294cb0294 100644 --- a/core/img/actions/checkmark-white.svg +++ b/core/img/actions/checkmark-white.svg @@ -1,4 +1 @@ - - - - + \ No newline at end of file From 0acfbd5b47487871eb50a91da0765aae5b6a9636 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Tue, 19 Jul 2016 13:53:47 +0200 Subject: [PATCH 2/7] Theming: Preview for colorized checkboxes --- apps/theming/js/settings-admin.js | 23 ++++++++++++++++++----- 1 file changed, 18 insertions(+), 5 deletions(-) diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index 941ec5c711..bf3571e243 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -51,24 +51,35 @@ function preview(setting, value) { var headerClass = document.getElementById('header'); var expandDisplayNameClass = document.getElementById('expandDisplayName'); var headerAppName = headerClass.getElementsByClassName('header-appname')[0]; - var textColor, icon; + var textColor, elementColor, icon; - if (calculateLuminance(value) > 0.5) { + var luminance = calculateLuminance(value); + var elementColor = value; + + if (luminance > 0.5) { textColor = "#000000"; icon = 'caret-dark'; } else { textColor = "#ffffff"; icon = 'caret'; } + if (luminance>0.8) { + elementColor = '#969696'; + } headerClass.style.background = value; headerClass.style.backgroundImage = '../img/logo-icon.svg'; expandDisplayNameClass.style.color = textColor; headerAppName.style.color = textColor; - $(headerClass).find('.icon-caret').each(function() { - $(this).css('background-image', "url('" + OC.getRootPath() + '/core/img/actions/' + icon + ".svg')"); - }); + $('#previewStyles').html( + '#header .icon-caret { background-image: url(\'' + OC.getRootPath() + '/core/img/actions/' + icon + '.svg\') }' + + 'input[type="checkbox"].checkbox:checked + label:before {' + + 'background-image: url(\'' + OC.getRootPath() + '/core/img/actions/checkmark-white.svg\');' + + 'background-color: ' + elementColor + ';' + + 'background-position: center center; background-size:contain;' + + 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px; }' + ); } if (setting === 'logoMime') { console.log(setting); @@ -87,6 +98,8 @@ function preview(setting, value) { $(document).ready(function () { $('#theming [data-toggle="tooltip"]').tooltip(); + $('html > head').append($('')); + var uploadParamsLogo = { pasteZone: null, dropZone: null, From d07f04e4f761798a59ef1fc2545950ef4678c53e Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Tue, 19 Jul 2016 14:00:33 +0200 Subject: [PATCH 3/7] Theming: Colorize checkboxes depending on luminance --- apps/theming/lib/controller/themingcontroller.php | 5 +++-- apps/theming/lib/util.php | 15 +++++++++++++++ apps/theming/tests/lib/UtilTest.php | 10 ++++++++++ 3 files changed, 28 insertions(+), 2 deletions(-) diff --git a/apps/theming/lib/controller/themingcontroller.php b/apps/theming/lib/controller/themingcontroller.php index eb377f27ff..32d96203d6 100644 --- a/apps/theming/lib/controller/themingcontroller.php +++ b/apps/theming/lib/controller/themingcontroller.php @@ -214,6 +214,7 @@ class ThemingController extends Controller { $cacheBusterValue = $this->config->getAppValue('theming', 'cachebuster', '0'); $responseCss = ''; $color = $this->config->getAppValue($this->appName, 'color'); + $elementColor = Util::elementColor($color); if($color !== '') { $responseCss .= sprintf( '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}', @@ -221,11 +222,11 @@ class ThemingController extends Controller { ); $responseCss .= sprintf(' input[type="checkbox"].checkbox:checked + label:before { - background-image:url(/core/img/actions/checkmark-white.svg); + background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\'); background-color: %s; background-position: center center; background-size:contain; width:12px; height:12px; padding:0; margin:1px 6px 7px 2px; }', - $color + $elementColor ); } $logo = $this->config->getAppValue($this->appName, 'logoMime'); diff --git a/apps/theming/lib/util.php b/apps/theming/lib/util.php index 2088650b19..d342073d83 100644 --- a/apps/theming/lib/util.php +++ b/apps/theming/lib/util.php @@ -38,6 +38,21 @@ class Util { } } + /** + * get color for on-page elements: + * theme color by default, grey if theme color is to bright + * @param $color + * @return string + */ + public static function elementColor($color) { + $l = self::calculateLuminance($color); + if($l>0.8) { + return '#969696'; + } else { + return $color; + } + } + /** * @param string $color rgb color value * @return float diff --git a/apps/theming/tests/lib/UtilTest.php b/apps/theming/tests/lib/UtilTest.php index 9ebb11d628..6451b65d02 100644 --- a/apps/theming/tests/lib/UtilTest.php +++ b/apps/theming/tests/lib/UtilTest.php @@ -65,4 +65,14 @@ class UtilTest extends TestCase { $invert = Util::invertTextColor(''); $this->assertEquals(false, $invert); } + + public function testElementColorDefault() { + $elementColor = Util::elementColor("#000000"); + $this->assertEquals('#000000', $elementColor); + } + + public function testElementColorOnBrightBackground() { + $elementColor = Util::elementColor('#ffffff'); + $this->assertEquals('#969696', $elementColor); + } } From acd11729987004edbcb1244577a80585a3d20a21 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Tue, 19 Jul 2016 14:39:53 +0200 Subject: [PATCH 4/7] Theming: Clean up css generation and fix tests --- .../lib/controller/themingcontroller.php | 42 ++++---- .../lib/controller/ThemingControllerTest.php | 100 ++++++++++++------ 2 files changed, 87 insertions(+), 55 deletions(-) diff --git a/apps/theming/lib/controller/themingcontroller.php b/apps/theming/lib/controller/themingcontroller.php index 32d96203d6..ed3e23b0c1 100644 --- a/apps/theming/lib/controller/themingcontroller.php +++ b/apps/theming/lib/controller/themingcontroller.php @@ -217,41 +217,39 @@ class ThemingController extends Controller { $elementColor = Util::elementColor($color); if($color !== '') { $responseCss .= sprintf( - '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}', + '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}'."\n", $color ); - $responseCss .= sprintf(' - input[type="checkbox"].checkbox:checked + label:before { - background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\'); - background-color: %s; background-position: center center; background-size:contain; - width:12px; height:12px; padding:0; margin:1px 6px 7px 2px; - }', + $responseCss .= sprintf('input[type="checkbox"].checkbox:checked + label:before {' . + 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . + 'background-color: %s; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . + '}' . PHP_EOL, $elementColor ); } $logo = $this->config->getAppValue($this->appName, 'logoMime'); if($logo !== '') { - $responseCss .= sprintf('#header .logo { - background-image: url(\'./logo?v='.$cacheBusterValue.'\'); - background-size: contain; - } - #header .logo-icon { - background-image: url(\'./logo?v='.$cacheBusterValue.'\'); - background-size: contain; - }' + $responseCss .= sprintf( + '#header .logo {' . + 'background-image: url(\'./logo?v='.$cacheBusterValue.'\')' . + 'background-size: contain;' . + '}' . PHP_EOL . + '#header .logo-icon {' . + 'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' . + 'background-size: contain;' . + '}' . PHP_EOL ); } $backgroundLogo = $this->config->getAppValue($this->appName, 'backgroundMime'); if($backgroundLogo !== '') { - $responseCss .= '#body-login { - background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\'); - }'; + $responseCss .= '#body-login {background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\');}' . PHP_EOL; } if(Util::invertTextColor($color)) { - $responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; } '; - $responseCss .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); } '; - $responseCss .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }'; - $responseCss .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }'; + $responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . PHP_EOL; + $responseCss .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . PHP_EOL; + $responseCss .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . PHP_EOL; + $responseCss .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . PHP_EOL; } \OC_Response::setExpiresHeader(gmdate('D, d M Y H:i:s', time() + (60*60*24*45)) . ' GMT'); diff --git a/apps/theming/tests/lib/controller/ThemingControllerTest.php b/apps/theming/tests/lib/controller/ThemingControllerTest.php index 24eb0510f9..5ad6beb18e 100644 --- a/apps/theming/tests/lib/controller/ThemingControllerTest.php +++ b/apps/theming/tests/lib/controller/ThemingControllerTest.php @@ -327,7 +327,13 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn(''); - $expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}', 'style', 'text/css'); + $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}' . PHP_EOL . + 'input[type="checkbox"].checkbox:checked + label:before {' . + 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . + 'background-color: #000; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . + '}' . PHP_EOL; + $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); } @@ -354,7 +360,17 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn(''); - $expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); } .searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }', 'style', 'text/css'); + $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}' . PHP_EOL . + 'input[type="checkbox"].checkbox:checked + label:before {' . + 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . + 'background-color: #969696; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . + '}' . PHP_EOL . + '#header .header-appname, #expandDisplayName { color: #000000; }' . PHP_EOL . + '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . PHP_EOL . + '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . PHP_EOL . + '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . PHP_EOL; + $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); } @@ -381,14 +397,15 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn(''); - $expected = new Http\DataDownloadResponse('#header .logo { - background-image: url(\'./logo?v=0\'); - background-size: contain; - } - #header .logo-icon { - background-image: url(\'./logo?v=0\'); - background-size: contain; - }', 'style', 'text/css'); + $expectedCss = '#header .logo {' . + 'background-image: url(\'./logo?v=0\')' . + 'background-size: contain;' . + '}' . PHP_EOL . + '#header .logo-icon {' . + 'background-image: url(\'./logo?v=0\');' . + 'background-size: contain;' . + '}' . PHP_EOL; + $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); } @@ -415,9 +432,8 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn('text/svg'); - $expected = new Http\DataDownloadResponse('#body-login { - background-image: url(\'./loginbackground?v=0\'); - }', 'style', 'text/css'); + $expectedCss = '#body-login {background-image: url(\'./loginbackground?v=0\');}' . PHP_EOL; + $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); } @@ -444,16 +460,23 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn('image/png'); - $expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}#header .logo { - background-image: url(\'./logo?v=0\'); - background-size: contain; - } - #header .logo-icon { - background-image: url(\'./logo?v=0\'); - background-size: contain; - }#body-login { - background-image: url(\'./loginbackground?v=0\'); - }', 'style', 'text/css'); + $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}' . PHP_EOL . + 'input[type="checkbox"].checkbox:checked + label:before {' . + 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . + 'background-color: #000; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . + '}' . PHP_EOL; + $expectedCss .= '#header .logo {' . + 'background-image: url(\'./logo?v=0\')' . + 'background-size: contain;' . + '}' . PHP_EOL . + '#header .logo-icon {' . + 'background-image: url(\'./logo?v=0\');' . + 'background-size: contain;' . + '}' . PHP_EOL; + $expectedCss .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . PHP_EOL; + + $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); } @@ -479,16 +502,27 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn('image/png'); - $expected = new Http\DataDownloadResponse('#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}#header .logo { - background-image: url(\'./logo?v=0\'); - background-size: contain; - } - #header .logo-icon { - background-image: url(\'./logo?v=0\'); - background-size: contain; - }#body-login { - background-image: url(\'./loginbackground?v=0\'); - }#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); } .searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }', 'style', 'text/css'); + + $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}' . PHP_EOL . + 'input[type="checkbox"].checkbox:checked + label:before {' . + 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . + 'background-color: #969696; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . + '}' . PHP_EOL; + $expectedCss .= '#header .logo {' . + 'background-image: url(\'./logo?v=0\')' . + 'background-size: contain;' . + '}' . PHP_EOL . + '#header .logo-icon {' . + 'background-image: url(\'./logo?v=0\');' . + 'background-size: contain;' . + '}' . PHP_EOL; + $expectedCss .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . PHP_EOL; + $expectedCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . PHP_EOL . + '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . PHP_EOL . + '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . PHP_EOL . + '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . PHP_EOL; + $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); } From 7ff19e342e8c44def7fe9aeb3a209e91c3ff107e Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Mon, 25 Jul 2016 16:44:56 +0200 Subject: [PATCH 5/7] Theming: Colorize radio buttons and append new styles on preview --- apps/theming/js/settings-admin.js | 16 ++- .../lib/controller/themingcontroller.php | 34 +++-- apps/theming/lib/util.php | 2 +- apps/theming/tests/lib/UtilTest.php | 2 +- .../lib/controller/ThemingControllerTest.php | 120 +++++++++++++----- core/css/inputs.css | 2 +- core/img/actions/radio-checked-white.svg | 1 + 7 files changed, 121 insertions(+), 56 deletions(-) create mode 100644 core/img/actions/radio-checked-white.svg diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index bf3571e243..a45694b9aa 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -64,7 +64,7 @@ function preview(setting, value) { icon = 'caret'; } if (luminance>0.8) { - elementColor = '#969696'; + elementColor = '#555555'; } headerClass.style.background = value; @@ -74,11 +74,15 @@ function preview(setting, value) { $('#previewStyles').html( '#header .icon-caret { background-image: url(\'' + OC.getRootPath() + '/core/img/actions/' + icon + '.svg\') }' + - 'input[type="checkbox"].checkbox:checked + label:before {' + - 'background-image: url(\'' + OC.getRootPath() + '/core/img/actions/checkmark-white.svg\');' + - 'background-color: ' + elementColor + ';' + - 'background-position: center center; background-size:contain;' + - 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px; }' + 'html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' + + 'background-image:url(\'' + OC.getRootPath() + '/core/img/actions/checkmark-white.svg\');' + + 'background-color: ' + elementColor + '; background-position: center center; background-size:contain;' + + 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;}' + + 'html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' + + '-webkit-mask-image: url(\'' + OC.getRootPath() + '/core/img/actions/radio-checked-white.svg\');' + + '-webkit-mask-repeat: no-repeat;' + + 'background-color: ' + elementColor+ ';' + + 'background-image: none; }' ); } if (setting === 'logoMime') { diff --git a/apps/theming/lib/controller/themingcontroller.php b/apps/theming/lib/controller/themingcontroller.php index ed3e23b0c1..7d828d7798 100644 --- a/apps/theming/lib/controller/themingcontroller.php +++ b/apps/theming/lib/controller/themingcontroller.php @@ -217,14 +217,24 @@ class ThemingController extends Controller { $elementColor = Util::elementColor($color); if($color !== '') { $responseCss .= sprintf( - '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}'."\n", + '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n", $color ); - $responseCss .= sprintf('input[type="checkbox"].checkbox:checked + label:before {' . - 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . + $responseCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . 'background-color: %s; background-position: center center; background-size:contain;' . - 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . - '}' . PHP_EOL, + 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . + "}\n", + \OC::$WEBROOT, + $elementColor + ); + $responseCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . + '-webkit-mask-repeat: no-repeat;' . + 'background-color: %s;' . + 'background-image: none; '. + "}\n", + \OC::$WEBROOT, $elementColor ); } @@ -234,22 +244,22 @@ class ThemingController extends Controller { '#header .logo {' . 'background-image: url(\'./logo?v='.$cacheBusterValue.'\')' . 'background-size: contain;' . - '}' . PHP_EOL . + '}' . "\n" . '#header .logo-icon {' . 'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' . 'background-size: contain;' . - '}' . PHP_EOL + '}' . "\n" ); } $backgroundLogo = $this->config->getAppValue($this->appName, 'backgroundMime'); if($backgroundLogo !== '') { - $responseCss .= '#body-login {background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\');}' . PHP_EOL; + $responseCss .= '#body-login {background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\');}' . "\n"; } if(Util::invertTextColor($color)) { - $responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . PHP_EOL; - $responseCss .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . PHP_EOL; - $responseCss .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . PHP_EOL; - $responseCss .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . PHP_EOL; + $responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n"; + $responseCss .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n"; + $responseCss .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n"; + $responseCss .= '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n"; } \OC_Response::setExpiresHeader(gmdate('D, d M Y H:i:s', time() + (60*60*24*45)) . ' GMT'); diff --git a/apps/theming/lib/util.php b/apps/theming/lib/util.php index d342073d83..e83d854b99 100644 --- a/apps/theming/lib/util.php +++ b/apps/theming/lib/util.php @@ -47,7 +47,7 @@ class Util { public static function elementColor($color) { $l = self::calculateLuminance($color); if($l>0.8) { - return '#969696'; + return '#555555'; } else { return $color; } diff --git a/apps/theming/tests/lib/UtilTest.php b/apps/theming/tests/lib/UtilTest.php index 6451b65d02..fd3a963d5c 100644 --- a/apps/theming/tests/lib/UtilTest.php +++ b/apps/theming/tests/lib/UtilTest.php @@ -73,6 +73,6 @@ class UtilTest extends TestCase { public function testElementColorOnBrightBackground() { $elementColor = Util::elementColor('#ffffff'); - $this->assertEquals('#969696', $elementColor); + $this->assertEquals('#555555', $elementColor); } } diff --git a/apps/theming/tests/lib/controller/ThemingControllerTest.php b/apps/theming/tests/lib/controller/ThemingControllerTest.php index 5ad6beb18e..737d351919 100644 --- a/apps/theming/tests/lib/controller/ThemingControllerTest.php +++ b/apps/theming/tests/lib/controller/ThemingControllerTest.php @@ -327,12 +327,25 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn(''); - $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}' . PHP_EOL . - 'input[type="checkbox"].checkbox:checked + label:before {' . - 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . - 'background-color: #000; background-position: center center; background-size:contain;' . - 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . - '}' . PHP_EOL; + $elementColor = '#000'; + $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}' . "\n"; + $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . + 'background-color: %s; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . + "}\n", + \OC::$WEBROOT, + $elementColor + ); + $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . + '-webkit-mask-repeat: no-repeat;' . + 'background-color: %s;' . + 'background-image: none; '. + "}\n", + \OC::$WEBROOT, + $elementColor + ); $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); @@ -359,17 +372,29 @@ class ThemingControllerTest extends TestCase { ->method('getAppValue') ->with('theming', 'backgroundMime', '') ->willReturn(''); - - $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}' . PHP_EOL . - 'input[type="checkbox"].checkbox:checked + label:before {' . - 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . - 'background-color: #969696; background-position: center center; background-size:contain;' . - 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . - '}' . PHP_EOL . - '#header .header-appname, #expandDisplayName { color: #000000; }' . PHP_EOL . - '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . PHP_EOL . - '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . PHP_EOL . - '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . PHP_EOL; + $elementColor = '#555555'; + $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}' . "\n"; + $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . + 'background-color: %s; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . + "}\n", + \OC::$WEBROOT, + $elementColor + ); + $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . + '-webkit-mask-repeat: no-repeat;' . + 'background-color: %s;' . + 'background-image: none; '. + "}\n", + \OC::$WEBROOT, + $elementColor + ); + $expectedCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n" . + '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n" . + '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n" . + '.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid { color: #000; border: 1px solid rgba(0, 0, 0, .5); }' . "\n"; $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); @@ -400,11 +425,11 @@ class ThemingControllerTest extends TestCase { $expectedCss = '#header .logo {' . 'background-image: url(\'./logo?v=0\')' . 'background-size: contain;' . - '}' . PHP_EOL . + '}' . "\n" . '#header .logo-icon {' . 'background-image: url(\'./logo?v=0\');' . 'background-size: contain;' . - '}' . PHP_EOL; + '}' . "\n"; $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); @@ -432,7 +457,7 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn('text/svg'); - $expectedCss = '#body-login {background-image: url(\'./loginbackground?v=0\');}' . PHP_EOL; + $expectedCss = '#body-login {background-image: url(\'./loginbackground?v=0\');}' . "\n"; $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); @@ -460,20 +485,33 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn('image/png'); - $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}' . PHP_EOL . - 'input[type="checkbox"].checkbox:checked + label:before {' . - 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . - 'background-color: #000; background-position: center center; background-size:contain;' . - 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . - '}' . PHP_EOL; + $elementColor = '#000'; + $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}' . "\n"; + $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . + 'background-color: %s; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . + "}\n", + \OC::$WEBROOT, + $elementColor + ); + $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . + '-webkit-mask-repeat: no-repeat;' . + 'background-color: %s;' . + 'background-image: none; '. + "}\n", + \OC::$WEBROOT, + $elementColor + ); $expectedCss .= '#header .logo {' . 'background-image: url(\'./logo?v=0\')' . 'background-size: contain;' . - '}' . PHP_EOL . + '}' . "\n" . '#header .logo-icon {' . 'background-image: url(\'./logo?v=0\');' . 'background-size: contain;' . - '}' . PHP_EOL; + '}' . "\n"; $expectedCss .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . PHP_EOL; $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); @@ -502,13 +540,25 @@ class ThemingControllerTest extends TestCase { ->with('theming', 'backgroundMime', '') ->willReturn('image/png'); - - $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}' . PHP_EOL . - 'input[type="checkbox"].checkbox:checked + label:before {' . - 'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . - 'background-color: #969696; background-position: center center; background-size:contain;' . - 'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . - '}' . PHP_EOL; + $elementColor = '#555555'; + $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}' . "\n"; + $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . + 'background-color: %s; background-position: center center; background-size:contain;' . + 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . + "}\n", + \OC::$WEBROOT, + $elementColor + ); + $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . + '-webkit-mask-repeat: no-repeat;' . + 'background-color: %s;' . + 'background-image: none; '. + "}\n", + \OC::$WEBROOT, + $elementColor + ); $expectedCss .= '#header .logo {' . 'background-image: url(\'./logo?v=0\')' . 'background-size: contain;' . diff --git a/core/css/inputs.css b/core/css/inputs.css index cad627ac31..e56f06082e 100644 --- a/core/css/inputs.css +++ b/core/css/inputs.css @@ -187,7 +187,7 @@ input[type="radio"].radio--white + label:before { } input[type="radio"].radio--white:checked + label:before { - background-image: url('../img/actions/radio-checked.svg'); + background-image: url('../img/actions/radio-checked-white.svg'); } input[type="radio"].radio--white:disabled + label:before { diff --git a/core/img/actions/radio-checked-white.svg b/core/img/actions/radio-checked-white.svg new file mode 100644 index 0000000000..d024c91ff1 --- /dev/null +++ b/core/img/actions/radio-checked-white.svg @@ -0,0 +1 @@ + \ No newline at end of file From cc457cd6650c1fd3c1cc6f85c961f65de38615d8 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Mon, 25 Jul 2016 17:32:11 +0200 Subject: [PATCH 6/7] Theming: Generate colorized radio buttons dynamically --- apps/theming/js/settings-admin.js | 15 +++-- .../lib/controller/themingcontroller.php | 14 ++--- apps/theming/lib/util.php | 10 ++++ apps/theming/tests/lib/UtilTest.php | 11 ++++ .../lib/controller/ThemingControllerTest.php | 57 ++++++------------- 5 files changed, 51 insertions(+), 56 deletions(-) diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index a45694b9aa..8b0df5f4bf 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -46,6 +46,12 @@ function calculateLuminance(rgb) { return (0.299*r + 0.587*g + 0.114*b)/255; } +function generateRadioButton(color) { + var radioButton = '' + + ''; + return btoa(radioButton); +} + function preview(setting, value) { if (setting === 'color') { var headerClass = document.getElementById('header'); @@ -74,15 +80,12 @@ function preview(setting, value) { $('#previewStyles').html( '#header .icon-caret { background-image: url(\'' + OC.getRootPath() + '/core/img/actions/' + icon + '.svg\') }' + - 'html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' + + 'input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' + 'background-image:url(\'' + OC.getRootPath() + '/core/img/actions/checkmark-white.svg\');' + 'background-color: ' + elementColor + '; background-position: center center; background-size:contain;' + 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;}' + - 'html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' + - '-webkit-mask-image: url(\'' + OC.getRootPath() + '/core/img/actions/radio-checked-white.svg\');' + - '-webkit-mask-repeat: no-repeat;' + - 'background-color: ' + elementColor+ ';' + - 'background-image: none; }' + 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' + + 'background-image: url(\'data:image/svg+xml;base64,' + generateRadioButton(elementColor) + '\'); }' ); } if (setting === 'logoMime') { diff --git a/apps/theming/lib/controller/themingcontroller.php b/apps/theming/lib/controller/themingcontroller.php index 7d828d7798..6a61293828 100644 --- a/apps/theming/lib/controller/themingcontroller.php +++ b/apps/theming/lib/controller/themingcontroller.php @@ -220,7 +220,7 @@ class ThemingController extends Controller { '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: %s}' . "\n", $color ); - $responseCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + $responseCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . 'background-color: %s; background-position: center center; background-size:contain;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . @@ -228,15 +228,9 @@ class ThemingController extends Controller { \OC::$WEBROOT, $elementColor ); - $responseCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . - '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . - '-webkit-mask-repeat: no-repeat;' . - 'background-color: %s;' . - 'background-image: none; '. - "}\n", - \OC::$WEBROOT, - $elementColor - ); + $responseCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . + "}\n"; } $logo = $this->config->getAppValue($this->appName, 'logoMime'); if($logo !== '') { diff --git a/apps/theming/lib/util.php b/apps/theming/lib/util.php index e83d854b99..f0ce30ac5b 100644 --- a/apps/theming/lib/util.php +++ b/apps/theming/lib/util.php @@ -71,4 +71,14 @@ class Util { return (0.299 * $r + 0.587 * $g + 0.114 * $b)/255; } + /** + * @param $color + * @return string base64 encoded radio button svg + */ + public static function generateRadioButton($color) { + $radioButtonIcon = '' . + ''; + return base64_encode($radioButtonIcon); + } + } diff --git a/apps/theming/tests/lib/UtilTest.php b/apps/theming/tests/lib/UtilTest.php index fd3a963d5c..cf64b389d1 100644 --- a/apps/theming/tests/lib/UtilTest.php +++ b/apps/theming/tests/lib/UtilTest.php @@ -75,4 +75,15 @@ class UtilTest extends TestCase { $elementColor = Util::elementColor('#ffffff'); $this->assertEquals('#555555', $elementColor); } + + public function testGenerateRadioButtonWhite() { + $button = Util::generateRadioButton('#ffffff'); + $expected = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+PHBhdGggZD0iTTggMWE3IDcgMCAwIDAtNyA3IDcgNyAwIDAgMCA3IDcgNyA3IDAgMCAwIDctNyA3IDcgMCAwIDAtNy03em0wIDFhNiA2IDAgMCAxIDYgNiA2IDYgMCAwIDEtNiA2IDYgNiAwIDAgMS02LTYgNiA2IDAgMCAxIDYtNnptMCAyYTQgNCAwIDEgMCAwIDggNCA0IDAgMCAwIDAtOHoiIGZpbGw9IiNmZmZmZmYiLz48L3N2Zz4='; + $this->assertEquals($expected, $button); + } + public function testGenerateRadioButtonBlack() { + $button = Util::generateRadioButton('#000000'); + $expected = 'PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNiI+PHBhdGggZD0iTTggMWE3IDcgMCAwIDAtNyA3IDcgNyAwIDAgMCA3IDcgNyA3IDAgMCAwIDctNyA3IDcgMCAwIDAtNy03em0wIDFhNiA2IDAgMCAxIDYgNiA2IDYgMCAwIDEtNiA2IDYgNiAwIDAgMS02LTYgNiA2IDAgMCAxIDYtNnptMCAyYTQgNCAwIDEgMCAwIDggNCA0IDAgMCAwIDAtOHoiIGZpbGw9IiMwMDAwMDAiLz48L3N2Zz4='; + $this->assertEquals($expected, $button); + } } diff --git a/apps/theming/tests/lib/controller/ThemingControllerTest.php b/apps/theming/tests/lib/controller/ThemingControllerTest.php index 737d351919..59e33c755d 100644 --- a/apps/theming/tests/lib/controller/ThemingControllerTest.php +++ b/apps/theming/tests/lib/controller/ThemingControllerTest.php @@ -26,6 +26,7 @@ namespace OCA\Theming\Tests\Controller; use OCA\Theming\Controller\ThemingController; use OCA\Theming\Template; +use OCA\Theming\Util; use OCP\AppFramework\Http; use OCP\AppFramework\Http\DataResponse; use OCP\Files\IRootFolder; @@ -329,7 +330,7 @@ class ThemingControllerTest extends TestCase { $elementColor = '#000'; $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}' . "\n"; - $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + $expectedCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . 'background-color: %s; background-position: center center; background-size:contain;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . @@ -337,15 +338,9 @@ class ThemingControllerTest extends TestCase { \OC::$WEBROOT, $elementColor ); - $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . - '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . - '-webkit-mask-repeat: no-repeat;' . - 'background-color: %s;' . - 'background-image: none; '. - "}\n", - \OC::$WEBROOT, - $elementColor - ); + $expectedCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . + "}\n"; $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected->cacheFor(3600); @$this->assertEquals($expected, $this->themingController->getStylesheet()); @@ -374,7 +369,7 @@ class ThemingControllerTest extends TestCase { ->willReturn(''); $elementColor = '#555555'; $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}' . "\n"; - $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + $expectedCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . 'background-color: %s; background-position: center center; background-size:contain;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . @@ -382,15 +377,9 @@ class ThemingControllerTest extends TestCase { \OC::$WEBROOT, $elementColor ); - $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . - '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . - '-webkit-mask-repeat: no-repeat;' . - 'background-color: %s;' . - 'background-image: none; '. - "}\n", - \OC::$WEBROOT, - $elementColor - ); + $expectedCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . + "}\n"; $expectedCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n" . '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n" . '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n" . @@ -487,7 +476,7 @@ class ThemingControllerTest extends TestCase { $elementColor = '#000'; $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #000}' . "\n"; - $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + $expectedCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . 'background-color: %s; background-position: center center; background-size:contain;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . @@ -495,15 +484,9 @@ class ThemingControllerTest extends TestCase { \OC::$WEBROOT, $elementColor ); - $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . - '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . - '-webkit-mask-repeat: no-repeat;' . - 'background-color: %s;' . - 'background-image: none; '. - "}\n", - \OC::$WEBROOT, - $elementColor - ); + $expectedCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . + "}\n"; $expectedCss .= '#header .logo {' . 'background-image: url(\'./logo?v=0\')' . 'background-size: contain;' . @@ -542,7 +525,7 @@ class ThemingControllerTest extends TestCase { $elementColor = '#555555'; $expectedCss = '#body-user #header,#body-settings #header,#body-public #header,#body-login,.searchbox input[type="search"]:focus,.searchbox input[type="search"]:active,.searchbox input[type="search"]:valid {background-color: #fff}' . "\n"; - $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . + $expectedCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' . 'background-color: %s; background-position: center center; background-size:contain;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' . @@ -550,15 +533,9 @@ class ThemingControllerTest extends TestCase { \OC::$WEBROOT, $elementColor ); - $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . - '-webkit-mask-image: url(\'%s/core/img/actions/radio-checked-white.svg\');' . - '-webkit-mask-repeat: no-repeat;' . - 'background-color: %s;' . - 'background-image: none; '. - "}\n", - \OC::$WEBROOT, - $elementColor - ); + $expectedCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . + 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . + "}\n"; $expectedCss .= '#header .logo {' . 'background-image: url(\'./logo?v=0\')' . 'background-size: contain;' . From 217b02aaa0a3cac88938e8968cee05830cacaf81 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Wed, 27 Jul 2016 20:03:53 +0200 Subject: [PATCH 7/7] Theming: Cleanup and remove opacity from checkbox/radiobutton --- apps/theming/js/settings-admin.js | 3 +-- core/css/inputs.css | 2 -- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js index 8b0df5f4bf..01ff912384 100644 --- a/apps/theming/js/settings-admin.js +++ b/apps/theming/js/settings-admin.js @@ -57,8 +57,7 @@ function preview(setting, value) { var headerClass = document.getElementById('header'); var expandDisplayNameClass = document.getElementById('expandDisplayName'); var headerAppName = headerClass.getElementsByClassName('header-appname')[0]; - var textColor, elementColor, icon; - + var textColor, icon; var luminance = calculateLuminance(value); var elementColor = value; diff --git a/core/css/inputs.css b/core/css/inputs.css index e56f06082e..b58310a5c5 100644 --- a/core/css/inputs.css +++ b/core/css/inputs.css @@ -93,7 +93,6 @@ input[type="checkbox"].checkbox + label:before { vertical-align: middle; background: url('../img/actions/checkbox.svg') left top no-repeat; - opacity: 0.7; } input[type="checkbox"].checkbox:disabled +label:before { opacity: .6; } @@ -167,7 +166,6 @@ input[type="radio"].radio + label:before { vertical-align: middle; background: url('../img/actions/radio.svg') left top no-repeat; - opacity: 0.7; } input[type="radio"].radio:checked + label:before {