Skip to content
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

Jump to bottom

Theming support for apps #819

Merged
merged 2 commits into from
Aug 10, 2016
Merged

Theming support for apps #819

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
ef17f8b
Add css classes to allow app developers using the theming colors
juliusknorr Aug 9, 2016
5f4e88e
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());
}
}