Merge pull request #833 from nextcloud/stable10-backport-819

[stable10] Theming support for apps

apps/theming/appinfo/app.php

@@ -39,3 +39,15 @@ $linkToCSS = \OC::$server->getURLGenerator()->linkToRoute(
 	]
 );
 
+$linkToJs = \OC::$server->getURLGenerator()->linkToRoute(
+	'theming.Theming.getJavascript',
+	[
+		'v' => \OC::$server->getConfig()->getAppValue('theming', 'cachebuster', '0'),
+	]
+);
+\OCP\Util::addHeader(
+	'script',
+	[
+		'src' => $linkToJs,
+	], ''
+);

apps/theming/appinfo/routes.php

@@ -55,5 +55,10 @@ return ['routes' => [
 		'url' => '/loginbackground',
 		'verb' => 'GET',
 	],
+	[
+		'name' => 'Theming#getJavascript',
+		'url' => '/js/theming',
+		'verb' => 'GET',
+	],
 ]];
 

apps/theming/lib/Controller/ThemingController.php

@@ -294,6 +294,8 @@ class ThemingController extends Controller {
 					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');
@@ -325,6 +327,9 @@ class ThemingController extends Controller {
 			$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');
@@ -332,4 +337,26 @@ class ThemingController extends Controller {
 		$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;
+	}
 }

apps/theming/tests/Controller/ThemingControllerTest.php

@@ -392,6 +392,9 @@ class ThemingControllerTest extends TestCase {
 					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');
 
@@ -448,10 +451,13 @@ class ThemingControllerTest extends TestCase {
 					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');
@@ -495,6 +501,7 @@ class ThemingControllerTest extends TestCase {
 			'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');
 
@@ -529,6 +536,7 @@ class ThemingControllerTest extends TestCase {
 		$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');
 
@@ -585,6 +593,8 @@ class ThemingControllerTest extends TestCase {
 					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\');' .
@@ -603,6 +613,7 @@ class ThemingControllerTest extends TestCase {
 		$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);
@@ -658,6 +669,8 @@ class ThemingControllerTest extends TestCase {
 					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\');' .
@@ -680,10 +693,79 @@ class ThemingControllerTest extends TestCase {
 		$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());
+	}
 }