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

Merge pull request #620 from nextcloud/theming-firstrunwizard 

apply theme to the firstrunwizard
This commit is contained in:
Björn Schießle 2016-07-28 14:49:53 +02:00 committed by GitHub
parent d6c680051c ee1be23b37
commit 5e07f9ee38
2 changed files with 159 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -231,6 +231,15 @@ class ThemingController extends Controller {
$responseCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $responseCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' .
"}\n"; "}\n";
$responseCss .= '
#firstrunwizard .firstrunwizard-header {
background-color: ' . $color . ';
}
#firstrunwizard p a {
color: ' . $color . ';
}
';
} }
$logo = $this->config->getAppValue($this->appName, 'logoMime'); $logo = $this->config->getAppValue($this->appName, 'logoMime');
if($logo !== '') { if($logo !== '') {
@ -242,12 +251,19 @@ class ThemingController extends Controller {
'#header .logo-icon {' . '#header .logo-icon {' .
'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' . 'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' .
'background-size: contain;' . 'background-size: contain;' .
'}' . "\n" .
'#firstrunwizard .firstrunwizard-header .logo {' .
'background-image: url(\'./logo?v='.$cacheBusterValue.'\');' .
'background-size: contain;' .
'}' . "\n" '}' . "\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.'\');}' . "\n"; $responseCss .= '#body-login {background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\');}' . "\n";
$responseCss .= 'firstrunwizard .firstrunwizard-header {' .
'background-image: url(\'./loginbackground?v='.$cacheBusterValue.'\');' .
'}' . "\n";
} }
if(Util::invertTextColor($color)) { if(Util::invertTextColor($color)) {
$responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n"; $responseCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n";

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

@ -307,6 +307,9 @@ class ThemingControllerTest extends TestCase {
} }
public function testGetStylesheetWithOnlyColor() { public function testGetStylesheetWithOnlyColor() {
$color = '#000';
$this->config $this->config
->expects($this->at(0)) ->expects($this->at(0))
->method('getAppValue') ->method('getAppValue')
@ -316,7 +319,7 @@ class ThemingControllerTest extends TestCase {
->expects($this->at(1)) ->expects($this->at(1))
->method('getAppValue') ->method('getAppValue')
->with('theming', 'color', '') ->with('theming', 'color', '')
->willReturn('#000'); ->willReturn($color);
$this->config $this->config
->expects($this->at(2)) ->expects($this->at(2))
->method('getAppValue') ->method('getAppValue')
@ -328,25 +331,41 @@ class ThemingControllerTest extends TestCase {
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn(''); ->willReturn('');
$elementColor = '#000'; $expectedData = sprintf(
$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"; '#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",
$expectedCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . $color
);
$expectedData .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-image:url(\'%s/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:2px 6px 6px 2px; border-radius:1px;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
"}\n", "}\n",
\OC::$WEBROOT, \OC::$WEBROOT,
$elementColor $color
); );
$expectedCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($color).'\');' .
"}\n"; "}\n";
$expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css');
$expectedData .= '
#firstrunwizard .firstrunwizard-header {
background-color: ' . $color . ';
}
#firstrunwizard p a {
color: ' . $color . ';
}
';
$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
} }
public function testGetStylesheetWithOnlyColorInvert() { public function testGetStylesheetWithOnlyColorInvert() {
$color = '#fff';
$this->config $this->config
->expects($this->at(0)) ->expects($this->at(0))
->method('getAppValue') ->method('getAppValue')
@ -356,7 +375,7 @@ class ThemingControllerTest extends TestCase {
->expects($this->at(1)) ->expects($this->at(1))
->method('getAppValue') ->method('getAppValue')
->with('theming', 'color', '') ->with('theming', 'color', '')
->willReturn('#fff'); ->willReturn($color);
$this->config $this->config
->expects($this->at(2)) ->expects($this->at(2))
->method('getAppValue') ->method('getAppValue')
@ -367,24 +386,38 @@ 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}' . "\n"; $expectedData = sprintf(
$expectedCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . '#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
);
$expectedData .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-image:url(\'%s/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: #555555; 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:2px 6px 6px 2px; border-radius:1px;' .
"}\n", "}\n",
\OC::$WEBROOT, \OC::$WEBROOT
$elementColor
); );
$expectedCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton('#555555').'\');' .
"}\n"; "}\n";
$expectedCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n" .
'#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n" . $expectedData .= '
'.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n" . #firstrunwizard .firstrunwizard-header {
'.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"; background-color: ' . $color . ';
$expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); }
#firstrunwizard p a {
color: ' . $color . ';
}
';
$expectedData .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n";
$expectedData .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n";
$expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
$expectedData .= '.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($expectedData, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
} }
@ -411,15 +444,21 @@ class ThemingControllerTest extends TestCase {
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn(''); ->willReturn('');
$expectedCss = '#header .logo {' . $expectedData = '#header .logo {' .
'background-image: url(\'./logo?v=0\')' . 'background-image: url(\'./logo?v=0\')' .
'background-size: contain;' . 'background-size: contain;' .
'}' . "\n" . '}' . "\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;' .
'}' . "\n" .
'#firstrunwizard .firstrunwizard-header .logo {' .
'background-image: url(\'./logo?v=0\');' .
'background-size: contain;' .
'}' . "\n"; '}' . "\n";
$expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css');
$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
} }
@ -446,13 +485,21 @@ 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\');}' . "\n"; $expectedData = '#body-login {background-image: url(\'./loginbackground?v=0\');}' . "\n";
$expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expectedData .= 'firstrunwizard .firstrunwizard-header {' .
'background-image: url(\'./loginbackground?v=0\');' .
'}' . "\n";
$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
} }
public function testGetStylesheetWithAllCombined() { public function testGetStylesheetWithAllCombined() {
$color = '#000';
$this->config $this->config
->expects($this->at(0)) ->expects($this->at(0))
->method('getAppValue') ->method('getAppValue')
@ -462,7 +509,7 @@ class ThemingControllerTest extends TestCase {
->expects($this->at(1)) ->expects($this->at(1))
->method('getAppValue') ->method('getAppValue')
->with('theming', 'color', '') ->with('theming', 'color', '')
->willReturn('#000'); ->willReturn($color);
$this->config $this->config
->expects($this->at(2)) ->expects($this->at(2))
->method('getAppValue') ->method('getAppValue')
@ -474,34 +521,57 @@ class ThemingControllerTest extends TestCase {
->with('theming', 'backgroundMime', '') ->with('theming', 'backgroundMime', '')
->willReturn('image/png'); ->willReturn('image/png');
$elementColor = '#000'; $expectedData = sprintf(
$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"; '#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",
$expectedCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . $color);
$expectedData .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-image:url(\'%s/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:2px 6px 6px 2px; border-radius:1px;' . 'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;' .
"}\n", "}\n",
\OC::$WEBROOT, \OC::$WEBROOT,
$elementColor $color
); );
$expectedCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($color).'\');' .
"}\n"; "}\n";
$expectedCss .= '#header .logo {' . $expectedData .= '
#firstrunwizard .firstrunwizard-header {
background-color: ' . $color . ';
}
#firstrunwizard p a {
color: ' . $color . ';
}
';
$expectedData .= sprintf(
'#header .logo {' .
'background-image: url(\'./logo?v=0\')' . 'background-image: url(\'./logo?v=0\')' .
'background-size: contain;' . 'background-size: contain;' .
'}' . "\n" . '}' . "\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;' .
'}' . "\n" .
'#firstrunwizard .firstrunwizard-header .logo {' .
'background-image: url(\'./logo?v=0\');' .
'background-size: contain;' .
'}' . "\n"
);
$expectedData .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . "\n";
$expectedData .= 'firstrunwizard .firstrunwizard-header {' .
'background-image: url(\'./loginbackground?v=0\');' .
'}' . "\n"; '}' . "\n";
$expectedCss .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . PHP_EOL; $expected = new Http\DataDownloadResponse($expectedData, '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());
} }
public function testGetStylesheetWithAllCombinedInverted() { public function testGetStylesheetWithAllCombinedInverted() {
$color = '#fff';
$this->config $this->config
->expects($this->at(0)) ->expects($this->at(0))
->method('getAppValue') ->method('getAppValue')
@ -523,33 +593,53 @@ 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}' . "\n"; $expectedData = sprintf(
$expectedCss .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' . '#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);
$expectedData .= sprintf('input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' .
'background-image:url(\'%s/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: #555555; 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:2px 6px 6px 2px; border-radius:1px;' .
"}\n", "}\n",
\OC::$WEBROOT, \OC::$WEBROOT
$elementColor
); );
$expectedCss .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' . $expectedData .= 'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' .
'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton($elementColor).'\');' . 'background-image: url(\'data:image/svg+xml;base64,'.Util::generateRadioButton('#555555').'\');' .
"}\n"; "}\n";
$expectedCss .= '#header .logo {' . $expectedData .= '
#firstrunwizard .firstrunwizard-header {
background-color: ' . $color . ';
}
#firstrunwizard p a {
color: ' . $color . ';
}
';
$expectedData .= sprintf(
'#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; '#firstrunwizard .firstrunwizard-header .logo {' .
$expectedCss .= '#header .header-appname, #expandDisplayName { color: #000000; }' . PHP_EOL . 'background-image: url(\'./logo?v=0\');' .
'#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . PHP_EOL . 'background-size: contain;' .
'.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . PHP_EOL . '}' . "\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); }' . PHP_EOL; );
$expected = new Http\DataDownloadResponse($expectedCss, 'style', 'text/css'); $expectedData .= '#body-login {background-image: url(\'./loginbackground?v=0\');}' . "\n";
$expectedData .= 'firstrunwizard .firstrunwizard-header {' .
'background-image: url(\'./loginbackground?v=0\');' .
'}' . "\n";
$expectedData .= '#header .header-appname, #expandDisplayName { color: #000000; }' . "\n";
$expectedData .= '#header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); }' . "\n";
$expectedData .= '.searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }' . "\n";
$expectedData .= '.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($expectedData, 'style', 'text/css');
$expected->cacheFor(3600); $expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getStylesheet()); @$this->assertEquals($expected, $this->themingController->getStylesheet());
} }