Skip to content

[stable10] Theming support for apps #833

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
LukasReschke merged 2 commits into from
Aug 11, 2016
Merged

[stable10] Theming support for apps #833

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5bf85b7
Add css classes to allow app developers using the theming colors
juliusknorr Aug 9, 2016
0b838b8
Theming: Add OCA.Theming Js for app interaction
juliusknorr Aug 10, 2016
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions apps/theming/appinfo/app.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,3 +39,15 @@
]
);

$linkToJs = \OC::$server->getURLGenerator()->linkToRoute(
'theming.Theming.getJavascript',
[
'v' => \OC::$server->getConfig()->getAppValue('theming', 'cachebuster', '0'),
]
);
\OCP\Util::addHeader(
'script',
[
'src' => $linkToJs,
], ''
);
5 changes: 5 additions & 0 deletions apps/theming/appinfo/routes.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,10 @@
'url' => '/loginbackground',
'verb' => 'GET',
],
[
'name' => 'Theming#getJavascript',
'url' => '/js/theming',
'verb' => 'GET',
],
]];

27 changes: 27 additions & 0 deletions apps/theming/lib/Controller/ThemingController.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -294,6 +294,8 @@ public function getStylesheet() {
color: ' . $color . ';
}
';
$responseCss .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
$responseCss .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);

}
$logo = $this->config->getAppValue($this->appName, 'logoMime');
Expand Down Expand Up @@ -325,11 +327,36 @@ public function getStylesheet() {
$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";
$responseCss .= '.nc-theming-contrast {color: #000000}' . "\n";
} else {
$responseCss .= '.nc-theming-contrast {color: #ffffff}' . "\n";
}

$response = new DataDownloadResponse($responseCss, 'style', 'text/css');
$response->addHeader('Expires', date(\DateTime::RFC2822, $this->timeFactory->getTime()));
$response->cacheFor(3600);
return $response;
}
/**
* @NoCSRFRequired
* @PublicPage
*
* @return DataDownloadResponse
*/
public function getJavascript() {
$responseJS = '(function() {
OCA.Theming = {
name: ' . json_encode($this->template->getName()) . ',
url: ' . json_encode($this->template->getBaseUrl()) . ',
slogan: ' . json_encode($this->template->getSlogan()) . ',
color: ' . json_encode($this->template->getMailHeaderColor()) . ',
inverted: ' . json_encode($this->util->invertTextColor($this->template->getMailHeaderColor())) . ',
};
})();';
$response = new Http\DataDisplayResponse($responseJS);
$response->addHeader("Content-type","text/javascript");
$response->addHeader('Expires', date(\DateTime::RFC2822, $this->timeFactory->getTime()));
$response->cacheFor(3600);
return $response;
}
}
82 changes: 82 additions & 0 deletions apps/theming/tests/Controller/ThemingControllerTest.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -392,6 +392,9 @@ public function testGetStylesheetWithOnlyColor() {
color: ' . $color . ';
}
';
$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";

$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');

Expand Down Expand Up @@ -448,10 +451,13 @@ public function testGetStylesheetWithOnlyColorInvert() {
color: ' . $color . ';
}
';
$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $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";
$expectedData .= '.nc-theming-contrast {color: #000000}' . "\n";


$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');
Expand Down Expand Up @@ -495,6 +501,7 @@ public function testGetStylesheetWithOnlyHeaderLogo() {
'background-image: url(\'./logo?v=0\');' .
'background-size: contain;' .
'}' . "\n";
$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";

$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');

Expand Down Expand Up @@ -529,6 +536,7 @@ public function testGetStylesheetWithOnlyBackgroundLogin() {
$expectedData .= '#firstrunwizard .firstrunwizard-header {' .
'background-image: url(\'./loginbackground?v=0\');' .
'}' . "\n";
$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";

$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');

Expand Down Expand Up @@ -585,6 +593,8 @@ public function testGetStylesheetWithAllCombined() {
color: ' . $color . ';
}
';
$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
$expectedData .= sprintf(
'#header .logo {' .
'background-image: url(\'./logo?v=0\');' .
Expand All @@ -603,6 +613,7 @@ public function testGetStylesheetWithAllCombined() {
$expectedData .= '#firstrunwizard .firstrunwizard-header {' .
'background-image: url(\'./loginbackground?v=0\');' .
'}' . "\n";
$expectedData .= '.nc-theming-contrast {color: #ffffff}' . "\n";
$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');

$expected->cacheFor(3600);
Expand Down Expand Up @@ -658,6 +669,8 @@ public function testGetStylesheetWithAllCombinedInverted() {
color: ' . $color . ';
}
';
$expectedData .= sprintf('.nc-theming-main-background {background-color: %s}' . "\n", $color);
$expectedData .= sprintf('.nc-theming-main-text {color: %s}' . "\n", $color);
$expectedData .= sprintf(
'#header .logo {' .
'background-image: url(\'./logo?v=0\');' .
Expand All @@ -680,10 +693,79 @@ public function testGetStylesheetWithAllCombinedInverted() {
$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";
$expectedData .= '.nc-theming-contrast {color: #000000}' . "\n";
$expected = new Http\DataDownloadResponse($expectedData, 'style', 'text/css');

$expected->cacheFor(3600);
$expected->addHeader('Expires', date(\DateTime::RFC2822, 123));
@$this->assertEquals($expected, $this->themingController->getStylesheet());
}

public function testGetJavascript() {
$this->template
->expects($this->at(0))
->method('getName')
->willReturn("");
$this->template
->expects($this->at(1))
->method('getBaseUrl')
->willReturn("");
$this->template
->expects($this->at(2))
->method('getSlogan')
->willReturn("");
$this->template
->expects($this->at(3))
->method('getMailHeaderColor')
->willReturn("#000");


$expectedResponse = '(function() {
OCA.Theming = {
name: "",
url: "",
slogan: "",
color: "#000",
inverted: false,
};
})();';
$expected = new Http\DataDisplayResponse($expectedResponse);
$expected->addHeader("Content-type","text/javascript");
$expected->addHeader('Expires', date(\DateTime::RFC2822, $this->timeFactory->getTime()));
$expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getJavascript());
}
public function testGetJavascriptInverted() {
$this->template
->expects($this->at(0))
->method('getName')
->willReturn("Nextcloud");
$this->template
->expects($this->at(1))
->method('getBaseUrl')
->willReturn("nextcloudurl");
$this->template
->expects($this->at(2))
->method('getSlogan')
->willReturn("awesome");
$this->template
->expects($this->any())
->method('getMailHeaderColor')
->willReturn("#ffffff");

$expectedResponse = '(function() {
OCA.Theming = {
name: "Nextcloud",
url: "nextcloudurl",
slogan: "awesome",
color: "#ffffff",
inverted: true,
};
})();';
$expected = new Http\DataDisplayResponse($expectedResponse);
$expected->addHeader("Content-type","text/javascript");
$expected->addHeader('Expires', date(\DateTime::RFC2822, $this->timeFactory->getTime()));
$expected->cacheFor(3600);
@$this->assertEquals($expected, $this->themingController->getJavascript());
}
}