Theming: Add preview and hide undo buttons

apps/theming/css/settings-admin.css

@@ -32,3 +32,17 @@
 div#theming_settings_msg {
     margin-left: 10px;
 }
+
+#theming-preview {
+    width: 230px;
+    height: 140px;
+    background-size: cover;
+    background-position: center center;
+    text-align: center;
+    margin-left: 93px;
+}
+#theming-preview img {
+    max-width: 20%;
+    max-height: 20%;
+    margin-top: 20px;
+}

apps/theming/js/settings-admin.js

@@ -68,7 +68,7 @@ function preview(setting, value) {
 			textColor = "#ffffff";
 			icon = 'caret';
 		}
-		if (luminance>0.8) {
+		if (luminance > 0.8) {
 			elementColor = '#555555';
 		}
 
@@ -87,17 +87,47 @@ function preview(setting, value) {
 			'background-image: url(\'data:image/svg+xml;base64,' + generateRadioButton(elementColor) + '\'); }'
 		);
 	}
+
+	var timestamp = new Date().getTime();
 	if (setting === 'logoMime') {
-		console.log(setting);
 		var logos = document.getElementsByClassName('logo-icon');
-		var timestamp = new Date().getTime();
+		var previewImageLogo = document.getElementById('theming-preview-logo');
 		if (value !== '') {
 			logos[0].style.backgroundImage = "url('" + OC.generateUrl('/apps/theming/logo') + "?v" + timestamp + "')";
 			logos[0].style.backgroundSize = "contain";
+			previewImageLogo.src = OC.generateUrl('/apps/theming/logo') + "?v" + timestamp;
 		} else {
-			logos[0].style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp +"')";
+			logos[0].style.backgroundImage = "url('" + OC.getRootPath() + '/core/img/logo-icon.svg?v' + timestamp + "')";
 			logos[0].style.backgroundSize = "contain";
+			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 + "')";
 		}
+
+	}
+	hideUndoButton(setting, value);
+}
+
+function hideUndoButton(setting, value) {
+	var themingDefaults = {
+		name: 'Nextcloud',
+		slogan: t('lib', 'a safe home for all your data'),
+		url: 'https://nextcloud.com',
+		color: '#0082c9',
+		logoMime: '',
+		backgroundMime: ''
+	};
+
+	if (value === themingDefaults[setting] || value === '') {
+		$('.theme-undo[data-setting=' + setting + ']').hide();
+	} else {
+		$('.theme-undo[data-setting=' + setting + ']').show();
 	}
 }
 
@@ -106,6 +136,14 @@ $(document).ready(function () {
 
 	$('html > head').append($('<style type="text/css" id="previewStyles"></style>'));
 
+	$('#theming .theme-undo').each(function() {
+		var setting = $(this).data('setting');
+		var value = $('#theming-'+setting).val();
+		if(setting === 'logoMime' || setting === 'backgroundMime') {
+			var value = $('#current-'+setting).val();
+		}
+		hideUndoButton(setting, value);
+	});
 	var uploadParamsLogo = {
 		pasteZone: null,
 		dropZone: null,
@@ -181,11 +219,12 @@ $(document).ready(function () {
 			if (setting === 'color') {
 				var colorPicker = document.getElementById('theming-color');
 				colorPicker.style.backgroundColor = response.data.value;
-				colorPicker.value = response.data.value.slice(1);
+				colorPicker.value = response.data.value.slice(1).toUpperCase();
 			} else if (setting !== 'logoMime' && setting !== 'backgroundMime') {
 				var input = document.getElementById('theming-'+setting);
 				input.value = response.data.value;
 			}
+
 			preview(setting, response.data.value);
 			OC.msg.finishedSaving('#theming_settings_msg', response);
 		});

apps/theming/lib/Settings/Admin.php

@@ -72,6 +72,10 @@ public function getForm() {
 			'url'             => $this->themingDefaults->getBaseUrl(),
 			'slogan'          => $this->themingDefaults->getSlogan(),
 			'color'           => $this->themingDefaults->getMailHeaderColor(),
+			'logo'			  => $this->themingDefaults->getLogo(),
+			'logoMime'		  => $this->config->getAppValue('theming', 'logoMime', ''),
+			'background'	  => $this->themingDefaults->getBackground(),
+			'backgroundMime'  => $this->config->getAppValue('theming', 'backgroundMime', ''),
 			'uploadLogoRoute' => $path,
 		];
 

apps/theming/lib/ThemingDefaults.php

@@ -28,6 +28,7 @@
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IURLGenerator;
+use OCP\Files\IRootFolder;
 
 
 class ThemingDefaults extends \OC_Defaults {
@@ -46,6 +47,8 @@ class ThemingDefaults extends \OC_Defaults {
 	private $slogan;
 	/** @var string */
 	private $color;
+	/** @var IRootFolder */
+	private $rootFolder;
 
 	/**
 	 * ThemingDefaults constructor.
@@ -54,16 +57,19 @@ class ThemingDefaults extends \OC_Defaults {
 	 * @param IL10N $l
 	 * @param IURLGenerator $urlGenerator
 	 * @param \OC_Defaults $defaults
+	 * @param IRootFolder $rootFolder
 	 */
 	public function __construct(IConfig $config,
 								IL10N $l,
 								IURLGenerator $urlGenerator,
-								\OC_Defaults $defaults
+								\OC_Defaults $defaults,
+								IRootFolder $rootFolder
 	) {
 		parent::__construct();
 		$this->config = $config;
 		$this->l = $l;
 		$this->urlGenerator = $urlGenerator;
+		$this->rootFolder = $rootFolder;
 
 		$this->name = $defaults->getName();
 		$this->url = $defaults->getBaseUrl();
@@ -113,6 +119,32 @@ public function getMailHeaderColor() {
 		return $this->config->getAppValue('theming', 'color', $this->color);
 	}
 
+	/**
+	 * Themed logo url
+	 *
+	 * @return string
+	 */
+	public function getLogo() {
+		$logo = $this->config->getAppValue('theming', 'logoMime');
+		if(!$logo || !$this->rootFolder->nodeExists('themedinstancelogo')) {
+			return $this->urlGenerator->imagePath('core','logo.svg');
+		} else {
+			return $this->urlGenerator->linkToRoute('theming.Theming.getLogo');
+		}
+	}
+	/**
+	 * Themed background image url
+	 *
+	 * @return string
+	 */
+	public function getBackground() {
+		$backgroundLogo = $this->config->getAppValue('theming', 'backgroundMime');
+		if(!$backgroundLogo || !$this->rootFolder->nodeExists('themedbackgroundlogo')) {
+			return $this->urlGenerator->imagePath('core','background.jpg');
+		} else {
+			return $this->urlGenerator->linkToRoute('theming.Theming.getLoginBackground');
+		}
+	}
 	/**
 	 * Increases the cache buster key
 	 */

apps/theming/templates/settings-admin.php

@@ -60,19 +60,24 @@
 	</p>
 	<p>
 		<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">
+			<input id="uploadlogo" class="upload-logo-field" name="uploadlogo" type="file" />
 			<label for="uploadlogo" class="button icon-upload svg" id="uploadlogo" title="<?php p($l->t('Upload new logo')) ?>"></label>
 			<span data-setting="logoMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
 		</form>
 	</p>
 	<p>
 		<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('Log in 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>
 			<span data-setting="backgroundMime" data-toggle="tooltip" data-original-title="<?php p($l->t('reset to default')); ?>" class="theme-undo icon icon-history"></span>
 		</form>
-		</p>
+	</p>
+		<div id="theming-preview" style="background-color:<?php p($_['color']);?>; background-image:url(<?php p($_['background']); ?>);">
+			<img src="<?php p($_['logo']); ?>" id="theming-preview-logo" />
+		</div>
 	<?php } ?>
 </div>

apps/theming/tests/Settings/AdminTest.php

@@ -93,6 +93,10 @@ public function testGetFormNoErrors() {
 			'slogan' => 'MySlogan',
 			'color' => '#fff',
 			'uploadLogoRoute' => '/my/route',
+			'logo' => null,
+			'logoMime' => null,
+			'background' => null,
+			'backgroundMime' => null,
 		];
 
 		$expected = new TemplateResponse('theming', 'settings-admin', $params, '');
@@ -139,6 +143,10 @@ public function testGetFormWithErrors() {
 			'slogan' => 'MySlogan',
 			'color' => '#fff',
 			'uploadLogoRoute' => '/my/route',
+			'logo' => null,
+			'logoMime' => null,
+			'background' => null,
+			'backgroundMime' => null,
 		];
 
 		$expected = new TemplateResponse('theming', 'settings-admin', $params, '');

apps/theming/tests/ThemingDefaultsTest.php

@@ -27,6 +27,7 @@
 use OCP\IConfig;
 use OCP\IL10N;
 use OCP\IURLGenerator;
+use OCP\Files\IRootFolder;
 use Test\TestCase;
 
 class ThemingDefaultsTest extends TestCase {
@@ -40,11 +41,14 @@ class ThemingDefaultsTest extends TestCase {
 	private $defaults;
 	/** @var ThemingDefaults */
 	private $template;
+	/** @var IRootFolder */
+	private $rootFolder;
 
 	public function setUp() {
 		$this->config = $this->getMock('\\OCP\\IConfig');
 		$this->l10n = $this->getMock('\\OCP\\IL10N');
 		$this->urlGenerator = $this->getMock('\\OCP\\IURLGenerator');
+		$this->rootFolder = $this->getMock('\\OCP\\Files\\IRootFolder');
 		$this->defaults = $this->getMockBuilder('\\OC_Defaults')
 			->disableOriginalConstructor()
 			->getMock();
@@ -68,7 +72,8 @@ public function setUp() {
 			$this->config,
 			$this->l10n,
 			$this->urlGenerator,
-			$this->defaults
+			$this->defaults,
+			$this->rootFolder
 		);
 
 		return parent::setUp();
@@ -368,4 +373,44 @@ public function testUndoDefaultAction() {
 
 		$this->assertSame('', $this->template->undo('defaultitem'));
 	}
+
+	public function testGetBackgroundDefault() {
+		$this->config
+			->expects($this->once())
+			->method('getAppValue')
+			->with('theming', 'backgroundMime')
+			->willReturn('');
+		$expected = $this->urlGenerator->imagePath('core','background.jpg');
+		$this->assertEquals($expected, $this->template->getBackground());
+	}
+
+	public function testGetBackgroundCustom() {
+		$this->config
+			->expects($this->once())
+			->method('getAppValue')
+			->with('theming', 'backgroundMime')
+			->willReturn('image/svg+xml');
+		$expected = $this->urlGenerator->linkToRoute('theming.Theming.getLoginBackground');
+		$this->assertEquals($expected, $this->template->getBackground());
+	}
+
+	public function testGetLogoDefault() {
+		$this->config
+			->expects($this->once())
+			->method('getAppValue')
+			->with('theming', 'logoMime')
+			->willReturn('');
+		$expected = $this->urlGenerator->imagePath('core','logo.svg');
+		$this->assertEquals($expected, $this->template->getLogo());
+	}
+
+	public function testGetLogoCustom() {
+		$this->config
+			->expects($this->once())
+			->method('getAppValue')
+			->with('theming', 'logoMime')
+			->willReturn('image/svg+xml');
+		$expected = $this->urlGenerator->linkToRoute('theming.Theming.getLogo');
+		$this->assertEquals($expected, $this->template->getLogo());
+	}
 }

lib/private/Server.php

@@ -655,7 +655,8 @@ public function __construct($webRoot, \OC\Config $config) {
 					$this->getConfig(),
 					$this->getL10N('theming'),
 					$this->getURLGenerator(),
-					new \OC_Defaults()
+					new \OC_Defaults(),
+					$this->getRootFolder()
 				);
 			}
 			return new \OC_Defaults();