Mirrors
/
nextcloud-server
mirror of https://github.com/nextcloud/server
3
0
Fork 0
Code Releases Activity
Browse Source

Theming: Colorize radio buttons and append new styles on preview

pull/415/head
Julius Haertl 9 years ago
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
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 16
      apps/theming/js/settings-admin.js
  2. 34
      apps/theming/lib/controller/themingcontroller.php
  3. 2
      apps/theming/lib/util.php
  4. 2
      apps/theming/tests/lib/UtilTest.php
  5. 120
      apps/theming/tests/lib/controller/ThemingControllerTest.php
  6. 2
      core/css/inputs.css
  7. 1
      core/img/actions/radio-checked-white.svg

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

@ -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') {

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

@ -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');

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

@ -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;
}

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

@ -73,6 +73,6 @@ class UtilTest extends TestCase {
public function testElementColorOnBrightBackground() {
$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', '')
->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;' .

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 {
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 {

1
core/img/actions/radio-checked-white.svg
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>
Write Preview
Loading…
Cancel
Save