From 7ff19e342e8c44def7fe9aeb3a209e91c3ff107e Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Mon, 25 Jul 2016 16:44:56 +0200 Subject: [PATCH] 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