Theming: Colorize radio buttons and append new styles on preview

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index bf3571e24385eab36c5974156de3e067767c0fc5..a45694b9aa6909e2c7117a2e489a86feb9bf02c0 100644 (file)
--- 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 ed3e23b0c1f15337818aea5819fb6c796ac5d265..7d828d7798bb9bc7ee864492774b24ee539e3537 100644 (file)
--- 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 d342073d83e9eb785e26adddc655eecc6271275d..e83d854b997433f9a832a3de4444058ed293f01c 100644 (file)
--- 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 6451b65d0271df63aaa409420ef4bde6048ba123..fd3a963d5c04dd6592d60f73451f8f894d5f7e39 100644 (file)
--- 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 5ad6beb18e539819acea508775ac7691797ea862..737d351919a70f667ab7ec241ef786abce773f86 100644 (file)
--- 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 cad627ac311b797c2591117a6d078c68479cc912..e56f06082e749e4486795c611446ca564a8034e8 100644 (file)
--- 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 (file)
index 0000000..d024c91
--- /dev/null
+++ b/core/img/actions/radio-checked-white.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="#fff"/></svg>
\ No newline at end of file