From 5bf85b727b6a5bc3f68abeb76c65344c286503b8 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Tue, 9 Aug 2016 22:54:25 +0200 Subject: [PATCH 1/2] Add css classes to allow app developers using the theming colors --- apps/theming/lib/Controller/ThemingController.php | 5 +++++ .../tests/Controller/ThemingControllerTest.php | 14 ++++++++++++++ 2 files changed, 19 insertions(+) diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index 8d9869b84a7c6..07bbee4323d45 100644 --- a/apps/theming/lib/Controller/ThemingController.php +++ b/apps/theming/lib/Controller/ThemingController.php @@ -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'); @@ -325,6 +327,9 @@ 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'); diff --git a/apps/theming/tests/Controller/ThemingControllerTest.php b/apps/theming/tests/Controller/ThemingControllerTest.php index 82eb8259af58a..1129baafe449d 100644 --- a/apps/theming/tests/Controller/ThemingControllerTest.php +++ b/apps/theming/tests/Controller/ThemingControllerTest.php @@ -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'); @@ -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'); @@ -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'); @@ -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'); @@ -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\');' . @@ -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); @@ -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\');' . @@ -680,6 +693,7 @@ 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); From 0b838b8eef3a0191cdd0ac1e495315852ef78605 Mon Sep 17 00:00:00 2001 From: Julius Haertl Date: Wed, 10 Aug 2016 11:53:33 +0200 Subject: [PATCH 2/2] Theming: Add OCA.Theming Js for app interaction --- apps/theming/appinfo/app.php | 12 ++++ apps/theming/appinfo/routes.php | 5 ++ .../lib/Controller/ThemingController.php | 22 ++++++ .../Controller/ThemingControllerTest.php | 68 +++++++++++++++++++ 4 files changed, 107 insertions(+) diff --git a/apps/theming/appinfo/app.php b/apps/theming/appinfo/app.php index 5ef506e5acd26..051a2e279e596 100644 --- a/apps/theming/appinfo/app.php +++ b/apps/theming/appinfo/app.php @@ -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, + ], '' +); diff --git a/apps/theming/appinfo/routes.php b/apps/theming/appinfo/routes.php index e062a68d69df8..4a8d4bac5bcab 100644 --- a/apps/theming/appinfo/routes.php +++ b/apps/theming/appinfo/routes.php @@ -55,5 +55,10 @@ 'url' => '/loginbackground', 'verb' => 'GET', ], + [ + 'name' => 'Theming#getJavascript', + 'url' => '/js/theming', + 'verb' => 'GET', + ], ]]; diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php index 07bbee4323d45..0db4dfe062700 100644 --- a/apps/theming/lib/Controller/ThemingController.php +++ b/apps/theming/lib/Controller/ThemingController.php @@ -337,4 +337,26 @@ public function getStylesheet() { $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; + } } diff --git a/apps/theming/tests/Controller/ThemingControllerTest.php b/apps/theming/tests/Controller/ThemingControllerTest.php index 1129baafe449d..81b6b886c9fc5 100644 --- a/apps/theming/tests/Controller/ThemingControllerTest.php +++ b/apps/theming/tests/Controller/ThemingControllerTest.php @@ -700,4 +700,72 @@ public function testGetStylesheetWithAllCombinedInverted() { $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()); + } }