Merge pull request #525 from nextcloud/fix-theme-logo-position

Fix theme logo position and shape

3 files changed, 12 insertions, 8 deletions

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index 85e781411ed..941ec5c711b 100644
--- a/apps/theming/js/settings-admin.js
+++ b/apps/theming/js/settings-admin.js
@@ -75,11 +75,11 @@ function preview(setting, value) {
 		var logos = document.getElementsByClassName('logo-icon');
 		var timestamp = new Date().getTime();
 		if (value !== '') {
-			logos[0].style.background = "url('" + OC.generateUrl('/apps/theming/logo') + "?v" + timestamp + "')";
-			logos[0].style.backgroundSize = "62px 34px";
+			logos[0].style.backgroundImage = "url('" + OC.generateUrl('/apps/theming/logo') + "?v" + timestamp + "')";
+			logos[0].style.backgroundSize = "contain";
 		} else {
-			logos[0].style.background = "url('" + OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp +"')";
-			logos[0].style.backgroundSize = "62px 34px";
+			logos[0].style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp +"')";
+			logos[0].style.backgroundSize = "contain";
 		}
 	}
 }
diff --git a/apps/theming/lib/controller/themingcontroller.php b/apps/theming/lib/controller/themingcontroller.php
index 571e0ab79a5..3e5d6f3e0d1 100644
--- a/apps/theming/lib/controller/themingcontroller.php
+++ b/apps/theming/lib/controller/themingcontroller.php
@@ -224,10 +224,11 @@ class ThemingController extends Controller {
 		if($logo !== '') {
 			$responseCss .= sprintf('#header .logo {
 				background-image: url(\'./logo?v='.$cacheBusterValue.'\');
+				background-size: contain;
 			}
 			#header .logo-icon {
 				background-image: url(\'./logo?v='.$cacheBusterValue.'\');
-				background-size: 62px 34px;
+				background-size: contain;
 			}'
 			);
 		}
diff --git a/apps/theming/tests/lib/controller/ThemingControllerTest.php b/apps/theming/tests/lib/controller/ThemingControllerTest.php
index 1acfdff020c..24eb0510f99 100644
--- a/apps/theming/tests/lib/controller/ThemingControllerTest.php
+++ b/apps/theming/tests/lib/controller/ThemingControllerTest.php
@@ -383,10 +383,11 @@ class ThemingControllerTest extends TestCase {
 
 		$expected = new Http\DataDownloadResponse('#header .logo {
 				background-image: url(\'./logo?v=0\');
+				background-size: contain;
 			}
 			#header .logo-icon {
 				background-image: url(\'./logo?v=0\');
-				background-size: 62px 34px;
+				background-size: contain;
 			}', 'style', 'text/css');
 		$expected->cacheFor(3600);
 		@$this->assertEquals($expected, $this->themingController->getStylesheet());
@@ -445,10 +446,11 @@ class ThemingControllerTest extends TestCase {
 
 		$expected = new Http\DataDownloadResponse('#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}#header .logo {
 				background-image: url(\'./logo?v=0\');
+				background-size: contain;
 			}
 			#header .logo-icon {
 				background-image: url(\'./logo?v=0\');
-				background-size: 62px 34px;
+				background-size: contain;
 			}#body-login {
 				background-image: url(\'./loginbackground?v=0\');
 			}', 'style', 'text/css');
@@ -479,10 +481,11 @@ class ThemingControllerTest extends TestCase {
 
 		$expected = new Http\DataDownloadResponse('#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}#header .logo {
 				background-image: url(\'./logo?v=0\');
+				background-size: contain;
 			}
 			#header .logo-icon {
 				background-image: url(\'./logo?v=0\');
-				background-size: 62px 34px;
+				background-size: contain;
 			}#body-login {
 				background-image: url(\'./loginbackground?v=0\');
 			}#header .header-appname, #expandDisplayName { color: #000000; } #header .icon-caret { background-image: url(\'' . \OC::$WEBROOT . '/core/img/actions/caret-dark.svg\'); } .searchbox input[type="search"] { background: transparent url(\'' . \OC::$WEBROOT . '/core/img/actions/search.svg\') no-repeat 6px center; color: #000; }.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); }', 'style', 'text/css');