mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Theming: Colorize radio buttons and append new styles on preview

This commit is contained in:
Julius Haertl 2016-07-25 16:44:56 +02:00
parent acd1172998
commit 7ff19e342e
No known key found for this signature in database
GPG Key ID: 4C614C6ED2CDE6DF
7 changed files with 121 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/theming/js/settings-admin.js
View File

@ -64,7 +64,7 @@ function preview(setting, value) {
icon = 'caret'; icon = 'caret';
} }
if (luminance>0.8) { if (luminance>0.8) {
elementColor = '#969696'; elementColor = '#555555';
} }
headerClass.style.background = value; headerClass.style.background = value;
@ -74,11 +74,15 @@ function preview(setting, value) {
$('#previewStyles').html( $('#previewStyles').html(
'#header .icon-caret { background-image: url(\'' + OC.getRootPath() + '/core/img/actions/' + icon + '.svg\') }' + '#header .icon-caret { background-image: url(\'' + OC.getRootPath() + '/core/img/actions/' + icon + '.svg\') }' +
'input[type="checkbox"].checkbox:checked + label:before {' + '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-image:url(\'' + OC.getRootPath() + '/core/img/actions/checkmark-white.svg\');' +
'background-color: ' + elementColor + ';' + 'background-color: ' + elementColor + '; background-position: center center; background-size:contain;' +
'background-position: center center; background-size:contain;' + 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;}' +
'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px; }' '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') { if (setting === 'logoMime') {

34
apps/theming/lib/controller/themingcontroller.php
View File

@ -217,14 +217,24 @@ class ThemingController extends Controller {
$elementColor = Util::elementColor($color); $elementColor = Util::elementColor($color);
if($color !== '') { if($color !== '') {
$responseCss .= sprintf( $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 $color
); );
$responseCss .= sprintf('input[type="checkbox"].checkbox:checked + label:before {' . $responseCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
'background-color: %s; background-position: center center; background-size:contain;' . 'background-color: %s; background-position: center center; background-size:contain;' .
'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
'}' . PHP_EOL, "}\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 $elementColor
); );
} }
@ -234,22 +244,22 @@ class ThemingController extends Controller {
'#header .logo {' . '#header .logo {' .
'background-image: url(\'./logo?v='.$cacheBusterValue.'\')' . 'background-image: url(\'./logo?v='.$cacheBusterValue.'\')' .
'background-size: contain;' . 'background-size: contain;' .
'}' . PHP_EOL . '}' . "\n" .
'#header .logo-icon {' . '#header .logo-icon {' .
'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' . 'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' .
'background-size: contain;' . 'background-size: contain;' .
'}' . PHP_EOL '}' . "\n"
); );
} }
$backgroundLogo = $this->config->getAppValue($this->appName, 'backgroundMime'); $backgroundLogo = $this->config->getAppValue($this->appName, 'backgroundMime');
if($backgroundLogo !== '') { 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)) { if(Util::invertTextColor($color)) {
$responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . 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\'); }' . PHP_EOL; $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; }' . PHP_EOL; $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); }' . 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); }' . "\n";
} }
\OC_Response::setExpiresHeader(gmdate('D, d M Y H:i:s', time() + (60*60*24*45)) . ' GMT'); \OC_Response::setExpiresHeader(gmdate('D, d M Y H:i:s', time() + (60*60*24*45)) . ' GMT');

2
apps/theming/lib/util.php
View File

@ -47,7 +47,7 @@ class Util {
public static function elementColor($color) { public static function elementColor($color) {
$l = self::calculateLuminance($color); $l = self::calculateLuminance($color);
if($l>0.8) { if($l>0.8) {
return '#969696'; return '#555555';
} else { } else {
return $color; return $color;
} }

2
apps/theming/tests/lib/UtilTest.php
View File

@ -73,6 +73,6 @@ class UtilTest extends TestCase {
public function testElementColorOnBrightBackground() { public function testElementColorOnBrightBackground() {
$elementColor = Util::elementColor('#ffffff'); $elementColor = Util::elementColor('#ffffff');
$this->assertEquals('#969696', $elementColor); $this->assertEquals('#555555', $elementColor);
} }
} }

120
apps/theming/tests/lib/controller/ThemingControllerTest.php
View File

@ -327,12 +327,25 @@ class ThemingControllerTest extends TestCase {
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn(''); ->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 . $elementColor = '#000';
'input[type="checkbox"].checkbox:checked + label:before {' . $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";
'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-color: #000; background-position: center center; background-size:contain;' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . 'background-color: %s; background-position: center center; background-size:contain;' .
'}' . PHP_EOL; '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 = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
@ -359,17 +372,29 @@ class ThemingControllerTest extends TestCase {
->method('getAppValue') ->method('getAppValue')
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn(''); ->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}' . PHP_EOL . $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";
'input[type="checkbox"].checkbox:checked + label:before {' . $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
'background-color: #969696; background-position: center center; background-size:contain;' . 'background-color: %s; background-position: center center; background-size:contain;' .
'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
'}' . PHP_EOL . "}\n",
'#header .header-appname, #expandDisplayName { color: #000000; }' . PHP_EOL . \OC::$WEBROOT,
'#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . PHP_EOL . $elementColor
'.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; $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 = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
@ -400,11 +425,11 @@ class ThemingControllerTest extends TestCase {
$expectedCss = '#header .logo {' . $expectedCss = '#header .logo {' .
'background-image: url(\'./logo?v=0\')' . 'background-image: url(\'./logo?v=0\')' .
'background-size: contain;' . 'background-size: contain;' .
'}' . PHP_EOL . '}' . "\n" .
'#header .logo-icon {' . '#header .logo-icon {' .
'background-image: url(\'./logo?v=0\');' . 'background-image: url(\'./logo?v=0\');' .
'background-size: contain;' . 'background-size: contain;' .
'}' . PHP_EOL; '}' . "\n";
$expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
@ -432,7 +457,7 @@ class ThemingControllerTest extends TestCase {
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn('text/svg'); ->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 = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
@ -460,20 +485,33 @@ class ThemingControllerTest extends TestCase {
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn('image/png'); ->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 . $elementColor = '#000';
'input[type="checkbox"].checkbox:checked + label:before {' . $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";
'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-color: #000; background-position: center center; background-size:contain;' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . 'background-color: %s; background-position: center center; background-size:contain;' .
'}' . PHP_EOL; '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 {' . $expectedCss .= '#header .logo {' .
'background-image: url(\'./logo?v=0\')' . 'background-image: url(\'./logo?v=0\')' .
'background-size: contain;' . 'background-size: contain;' .
'}' . PHP_EOL . '}' . "\n" .
'#header .logo-icon {' . '#header .logo-icon {' .
'background-image: url(\'./logo?v=0\');' . 'background-image: url(\'./logo?v=0\');' .
'background-size: contain;' . 'background-size: contain;' .
'}' . PHP_EOL; '}' . "\n";
$expectedCss .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . PHP_EOL; $expectedCss .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . PHP_EOL;
$expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css');
@ -502,13 +540,25 @@ class ThemingControllerTest extends TestCase {
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn('image/png'); ->willReturn('image/png');
$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}' . PHP_EOL . $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";
'input[type="checkbox"].checkbox:checked + label:before {' . $expectedCss .= sprintf('html:not(.ie):not(.edge) input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-image:url(\'' . \OC::$WEBROOT . '/core/img/actions/checkmark-white.svg\');' . 'background-image:url(\'%s/core/img/actions/checkmark-white.svg\');' .
'background-color: #969696; background-position: center center; background-size:contain;' . 'background-color: %s; background-position: center center; background-size:contain;' .
'width:12px; height:12px; padding:0; margin:1px 6px 7px 2px;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
'}' . PHP_EOL; "}\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 {' . $expectedCss .= '#header .logo {' .
'background-image: url(\'./logo?v=0\')' . 'background-image: url(\'./logo?v=0\')' .
'background-size: contain;' . 'background-size: contain;' .

2
core/css/inputs.css
View File

@ -187,7 +187,7 @@ input[type="radio"].radio--white + label:before {
} }
input[type="radio"].radio--white:checked + 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 { input[type="radio"].radio--white:disabled + label:before {

1
core/img/actions/radio-checked-white.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 248 B