Theming: Colorize radio buttons and append new styles on preview

5 files changed, 119 insertions, 55 deletions

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index bf3571e2438..a45694b9aa6 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 ed3e23b0c1f..7d828d7798b 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 d342073d83e..e83d854b997 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 6451b65d027..fd3a963d5c0 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 5ad6beb18e5..737d351919a 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;' .