Theming: Generate colorized radio buttons dynamically

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index a45694b9aa6909e2c7117a2e489a86feb9bf02c0..8b0df5f4bf0a1eec8635ad64a51ad99975685d7a 100644 (file)
--- 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 = '<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="' + color + '"/></svg>';
+       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 7d828d7798bb9bc7ee864492774b24ee539e3537..6a61293828f2c01be95f6300a8d8f140ee11a541 100644 (file)
--- 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 e83d854b997433f9a832a3de4444058ed293f01c..f0ce30ac5ba7d800868b1f2fed2cc81e6a76df2a 100644 (file)
--- 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 = '<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="'.$color.'"/></svg>';
+               return base64_encode($radioButtonIcon);
+       }
+
 }

diff --git a/apps/theming/tests/lib/UtilTest.php b/apps/theming/tests/lib/UtilTest.php
index fd3a963d5c04dd6592d60f73451f8f894d5f7e39..cf64b389d113ba3ea480519efe29c930a7240af7 100644 (file)
--- 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 737d351919a70f667ab7ec241ef786abce773f86..59e33c755dba864645d86ec001d972036a268644 100644 (file)
--- 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;' .