Merge pull request #4617 from nextcloud/theming-plain-background

Theming app: Add plain background color option

8 files changed, 157 insertions, 20 deletions

diff --git a/apps/theming/css/settings-admin.css b/apps/theming/css/settings-admin.css
index 8cc3f0dfe14..e401d77e4b6 100644
--- a/apps/theming/css/settings-admin.css
+++ b/apps/theming/css/settings-admin.css
@@ -26,10 +26,20 @@
     display: inline-block;
     visibility: hidden;
 }
-#theming form .theme-undo {
+form.uploadButton {
+    width: 356px;
+}
+#theming form .theme-undo,
+#theming .theme-remove-bg {
+    cursor: pointer;
+    opacity: .3;
+    padding: 7px;
+    vertical-align: top;
+    display: inline-block;
+    float: right;
     position: relative;
     top: 4px;
-    left: 158px;
+    right: 0px;
     visibility: visible;
 }
 #theming input[type='text']:focus + .theme-undo,
@@ -54,7 +64,8 @@
     margin: 2px 0px;
 }
 
-#theming .icon-upload {
+#theming .icon-upload,
+#theming .icon-loading-small {
     padding: 8px 20px;
     width: 20px;
     margin: 2px 0px;
diff --git a/apps/theming/css/theming.scss b/apps/theming/css/theming.scss
index 71e0df6735e..2a5a0e5cd46 100644
--- a/apps/theming/css/theming.scss
+++ b/apps/theming/css/theming.scss
@@ -64,4 +64,50 @@ input.primary {
 	#body-login input.login {
 		background-image: url('../../../core/img/actions/confirm.svg');
 	}
+}
+
+// plain background color for login page
+@if $image-login-plain == 'true' {
+	#body-login, #firstrunwizard .firstrunwizard-header, #theming-preview {
+		background-image: none !important;
+		background-color: $color-primary;
+	}
+	#body-login {
+
+		a, label, p {
+			color: $color-primary-text !important;
+		}
+
+		@if (lightness($color-primary) > 50) {
+			#submit {
+				border-color: nc-darken($color-primary, 20%);
+				background-color: nc-darken($color-primary, 20%);
+			}
+			#submit:hover {
+				border-color: nc-darken($color-primary, 10%);
+				background-color: nc-darken($color-primary, 10%);
+			}
+			input[type='checkbox'].checkbox--white + label:before {
+				border-color: nc-darken($color-primary, 40%) !important;
+			}
+			input[type='checkbox'].checkbox--white:not(:disabled):not(:checked) + label:hover:before,
+			input[type='checkbox'].checkbox--white:focus + label:before {
+				border-color: nc-darken($color-primary, 30%) !important;
+			}
+			input[type='checkbox'].checkbox--white:checked + label:before {
+				border-color: nc-darken($color-primary, 30%) !important;
+				background-image: url('../../../core/img/actions/checkbox-mark.svg');
+				background-color: nc-darken($color-primary, 30%) !important;
+			}
+		} @else {
+			#submit {
+				border-color: nc-lighten($color-primary, 20%);
+				background-color: nc-lighten($color-primary, 20%);
+			}
+			#submit:hover {
+				border-color: nc-lighten($color-primary, 10%);
+				background-color: nc-lighten($color-primary, 10%);
+			}
+		}
+	}
 }
\ No newline at end of file
diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index 802f6e05c07..5d91892c007 100644
--- a/apps/theming/js/settings-admin.js
+++ b/apps/theming/js/settings-admin.js
@@ -35,6 +35,7 @@ function setThemingValue(setting, value) {
 		OC.msg.finishedSaving('#theming_settings_msg', response);
 		$('#theming_settings_loading').hide();
 	});
+
 }
 
 function preview(setting, value) {
@@ -74,18 +75,13 @@ function preview(setting, value) {
 			previewImageLogo.src = OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp;
 		}
 	}
-	if (setting === 'backgroundMime') {
-		var previewImage = document.getElementById('theming-preview');
-		if (value !== '') {
-			previewImage.style.backgroundImage = "url('" + OC.generateUrl('/apps/theming/loginbackground') + "?v" + timestamp + "')";
-		} else {
-			previewImage.style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/background.jpg?v' + timestamp + "')";
-		}
-	}
 
 	if (setting === 'name') {
 		window.document.title = t('core', 'Admin') + " - " + value;
 	}
+
+	hideUndoButton(setting, value);
+
 }
 
 function hideUndoButton(setting, value) {
@@ -103,6 +99,14 @@ function hideUndoButton(setting, value) {
 	} else {
 		$('.theme-undo[data-setting=' + setting + ']').show();
 	}
+
+	if(setting === 'backgroundMime' && value !== 'backgroundColor')  {
+		$('.theme-remove-bg').show();
+	}
+	if(setting === 'backgroundMime' && value === 'backgroundColor')  {
+		$('.theme-remove-bg').hide();
+		$('.theme-undo[data-setting=backgroundMime]').show();
+	}
 }
 
 $(document).ready(function () {
@@ -116,6 +120,7 @@ $(document).ready(function () {
 		}
 		hideUndoButton(setting, value);
 	});
+
 	var uploadParamsLogo = {
 		pasteZone: null,
 		dropZone: null,
@@ -208,4 +213,16 @@ $(document).ready(function () {
 			preview(setting, response.data.value);
 		});
 	});
+
+	$('.theme-remove-bg').click(function() {
+		startLoading();
+		$.post(
+			OC.generateUrl('/apps/theming/ajax/updateLogo'), {'backgroundColor' : true}
+		).done(function(response) {
+			preview('backgroundMime', 'backgroundColor');
+		}).fail(function(response) {
+			OC.msg.finishedSaving('#theming_settings_msg', response);
+		});
+	});
+	
 });
diff --git a/apps/theming/lib/Controller/ThemingController.php b/apps/theming/lib/Controller/ThemingController.php
index faaff1f2174..225673079a3 100644
--- a/apps/theming/lib/Controller/ThemingController.php
+++ b/apps/theming/lib/Controller/ThemingController.php
@@ -185,6 +185,20 @@ class ThemingController extends Controller {
 	 * @return DataResponse
 	 */
 	public function updateLogo() {
+		$backgroundColor = $this->request->getParam('backgroundColor', false);
+		if($backgroundColor) {
+			$this->themingDefaults->set('backgroundMime', 'backgroundColor');
+			return new DataResponse(
+				[
+					'data' =>
+						[
+							'name' => 'backgroundColor',
+							'message' => $this->l10n->t('Saved')
+						],
+					'status' => 'success'
+				]
+			);
+		}
 		$newLogo = $this->request->getUploadedFile('uploadlogo');
 		$newBackgroundLogo = $this->request->getUploadedFile('upload-login-background');
 		if (empty($newLogo) && empty($newBackgroundLogo)) {
diff --git a/apps/theming/lib/ThemingDefaults.php b/apps/theming/lib/ThemingDefaults.php
index 39547af4916..9509fc11077 100644
--- a/apps/theming/lib/ThemingDefaults.php
+++ b/apps/theming/lib/ThemingDefaults.php
@@ -190,6 +190,7 @@ class ThemingDefaults extends \OC_Defaults {
 
 		$variables['image-logo'] = "'".$this->urlGenerator->getAbsoluteURL($this->getLogo())."'";
 		$variables['image-login-background'] = "'".$this->urlGenerator->getAbsoluteURL($this->getBackground())."'";
+		$variables['image-login-plain'] = 'false';
 
 		if ($this->config->getAppValue('theming', 'color', null) !== null) {
 			if ($this->util->invertTextColor($this->getColorPrimary())) {
@@ -200,6 +201,10 @@ class ThemingDefaults extends \OC_Defaults {
 			$variables['color-primary'] = $this->getColorPrimary();
 			$variables['color-primary-text'] = $colorPrimaryText;
 		}
+
+		if ($this->config->getAppValue('theming', 'backgroundMime', null) === 'backgroundColor') {
+			$variables['image-login-plain'] = 'true';
+		}
 		$cache->set('getScssVariables', $variables);
 		return $variables;
 	}
diff --git a/apps/theming/templates/settings-admin.php b/apps/theming/templates/settings-admin.php
index 858329eca48..858b916c932 100644
--- a/apps/theming/templates/settings-admin.php
+++ b/apps/theming/templates/settings-admin.php
@@ -67,7 +67,7 @@ style('theming', 'settings-admin');
 		</label>
 	</div>
 	<div>
-		<form class="uploadButton inlineblock" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
+		<form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
 			<input type="hidden" id="current-logoMime" name="current-logoMime" value="<?php p($_['logoMime']); ?>" />
 			<label for="uploadlogo"><span><?php p($l->t('Logo')) ?></span></label>
 			<input id="uploadlogo" class="upload-logo-field" name="uploadlogo" type="file" />
@@ -76,16 +76,16 @@ style('theming', 'settings-admin');
 		</form>
 	</div>
 	<div>
-		<form class="uploadButton inlineblock" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
+		<form class="uploadButton" method="post" action="<?php p($_['uploadLogoRoute']) ?>">
 			<input type="hidden" id="current-backgroundMime" name="current-backgroundMime" value="<?php p($_['backgroundMime']); ?>" />
 			<label for="upload-login-background"><span><?php p($l->t('Login image')) ?></span></label>
 			<input id="upload-login-background" class="upload-logo-field" name="upload-login-background" type="file">
 			<label for="upload-login-background" class="button icon-upload svg" id="upload-login-background" title="<?php p($l->t("Upload new login background")) ?>"></label>
 			<div data-setting="backgroundMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></div>
+			<div class="theme-remove-bg icon icon-delete" data-toggle="tooltip" data-original-title="<?php p($l->t('Remove background image')); ?>"></div>
 		</form>
 	</div>
-
-	<div id="theming-preview" style="background-color:<?php p($_['color']);?>; background-image:url(<?php p($_['background']); ?>);">
+	<div id="theming-preview">
 		<img src="<?php p($_['logo']); ?>" id="theming-preview-logo" />
 	</div>
 	<?php } ?>
diff --git a/apps/theming/tests/Controller/ThemingControllerTest.php b/apps/theming/tests/Controller/ThemingControllerTest.php
index f22c317d73d..cbdb86d0358 100644
--- a/apps/theming/tests/Controller/ThemingControllerTest.php
+++ b/apps/theming/tests/Controller/ThemingControllerTest.php
@@ -152,11 +152,16 @@ class ThemingControllerTest extends TestCase {
 	public function testUpdateLogoNoData() {
 		$this->request
 			->expects($this->at(0))
+			->method('getParam')
+			->with('backgroundColor')
+			->willReturn(false);
+		$this->request
+			->expects($this->at(1))
 			->method('getUploadedFile')
 			->with('uploadlogo')
 			->willReturn(null);
 		$this->request
-			->expects($this->at(1))
+			->expects($this->at(2))
 			->method('getUploadedFile')
 			->with('upload-login-background')
 			->willReturn(null);
@@ -179,6 +184,29 @@ class ThemingControllerTest extends TestCase {
 		$this->assertEquals($expected, $this->themingController->updateLogo());
 	}
 
+	public function testUpdateBackgroundColor() {
+		$this->request
+			->expects($this->at(0))
+			->method('getParam')
+			->with('backgroundColor')
+			->willReturn(true);
+		$this->themingDefaults
+			->expects($this->once())
+			->method('set')
+			->with('backgroundMime', 'backgroundColor');
+		$expected = new DataResponse(
+			[
+				'data' =>
+					[
+						'name' => 'backgroundColor',
+						'message' => $this->l10n->t('Saved')
+					],
+				'status' => 'success'
+			]
+		);
+		$this->assertEquals($expected, $this->themingController->updateLogo());
+	}
+
 	public function dataUpdateImages() {
 		return [
 			[false],
@@ -194,6 +222,11 @@ class ThemingControllerTest extends TestCase {
 		touch($tmpLogo);
 		$this->request
 			->expects($this->at(0))
+			->method('getParam')
+			->with('backgroundColor')
+			->willReturn(false);
+		$this->request
+			->expects($this->at(1))
 			->method('getUploadedFile')
 			->with('uploadlogo')
 			->willReturn([
@@ -202,7 +235,7 @@ class ThemingControllerTest extends TestCase {
 				'name' => 'logo.svg',
 			]);
 		$this->request
-			->expects($this->at(1))
+			->expects($this->at(2))
 			->method('getUploadedFile')
 			->with('upload-login-background')
 			->willReturn(null);
@@ -259,11 +292,16 @@ class ThemingControllerTest extends TestCase {
 		file_put_contents($tmpLogo, file_get_contents(__DIR__  . '/../../../../tests/data/desktopapp.png'));
 		$this->request
 			->expects($this->at(0))
+			->method('getParam')
+			->with('backgroundColor')
+			->willReturn(false);
+		$this->request
+			->expects($this->at(1))
 			->method('getUploadedFile')
 			->with('uploadlogo')
 			->willReturn(null);
 		$this->request
-			->expects($this->at(1))
+			->expects($this->at(2))
 			->method('getUploadedFile')
 			->with('upload-login-background')
 			->willReturn([
@@ -322,11 +360,16 @@ class ThemingControllerTest extends TestCase {
 		file_put_contents($tmpLogo, file_get_contents(__DIR__  . '/../../../../tests/data/data.zip'));
 		$this->request
 			->expects($this->at(0))
+			->method('getParam')
+			->with('backgroundColor')
+			->willReturn(false);
+		$this->request
+			->expects($this->at(1))
 			->method('getUploadedFile')
 			->with('uploadlogo')
 			->willReturn(null);
 		$this->request
-			->expects($this->at(1))
+			->expects($this->at(2))
 			->method('getUploadedFile')
 			->with('upload-login-background')
 			->willReturn([
diff --git a/apps/theming/tests/ThemingDefaultsTest.php b/apps/theming/tests/ThemingDefaultsTest.php
index 7535eddb4f0..e3acab78bb7 100644
--- a/apps/theming/tests/ThemingDefaultsTest.php
+++ b/apps/theming/tests/ThemingDefaultsTest.php
@@ -525,7 +525,8 @@ class ThemingDefaultsTest extends TestCase {
 			'image-logo' => "'absolute-custom-logo?v=0'",
 			'image-login-background' => "'absolute-custom-background?v=0'",
 			'color-primary' => $this->defaults->getColorPrimary(),
-			'color-primary-text' => '#ffffff'
+			'color-primary-text' => '#ffffff',
+			'image-login-plain' => 'false'
 
 		];
 		$this->assertEquals($expected, $this->template->getScssVariables());