Use generated SCSS for theming preview

Signed-off-by: Julius Härtl <jus@bitgrid.net>

1 files changed, 29 insertions, 40 deletions

diff --git a/apps/theming/js/settings-admin.js b/apps/theming/js/settings-admin.js
index 216463b15e0..709243594ba 100644
--- a/apps/theming/js/settings-admin.js
+++ b/apps/theming/js/settings-admin.js
@@ -21,15 +21,18 @@
 
 function setThemingValue(setting, value) {
 	OC.msg.startSaving('#theming_settings_msg');
+	$('#theming_settings_loading').show();
 	$.post(
 		OC.generateUrl('/apps/theming/ajax/updateStylesheet'), {'setting' : setting, 'value' : value}
 	).done(function(response) {
-		OC.msg.finishedSaving('#theming_settings_msg', response);
+		//OC.msg.finishedSaving('#theming_settings_msg', response);
+		OC.msg.startAction('#theming_settings_msg', t('theming', 'Loading preview…'));
 		hideUndoButton(setting, value);
+		preview(setting, value);
 	}).fail(function(response) {
 		OC.msg.finishedSaving('#theming_settings_msg', response);
+		$('#theming_settings_loading').hide();
 	});
-	preview(setting, value);
 }
 
 function calculateLuminance(rgb) {
@@ -47,47 +50,33 @@ function calculateLuminance(rgb) {
 	return (0.299*r + 0.587*g + 0.114*b)/255;
 }
 
-function generateRadioButton(color) {
-	var radioButton = '<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16">' +
-		'<path d="M8 1a7 7 0 0 0-7 7 7 7 0 0 0 7 7 7 7 0 0 0 7-7 7 7 0 0 0-7-7zm0 1a6 6 0 0 1 6 6 6 6 0 0 1-6 6 6 6 0 0 1-6-6 6 6 0 0 1 6-6zm0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8z" fill="' + color + '"/></svg>';
-	return btoa(radioButton);
-}
 
 function preview(setting, value) {
-	if (setting === 'color') {
-		var headerClass = document.getElementById('header');
-		var expandDisplayNameClass = document.getElementById('expandDisplayName');
-		var headerAppName = headerClass.getElementsByClassName('header-appname')[0];
-		var textColor, icon;
-		var luminance = calculateLuminance(value);
-		var elementColor = value;
-
-		if (luminance > 0.5) {
-			textColor = "#000000";
-			icon = 'caret-dark';
-		} else {
-			textColor = "#ffffff";
-			icon = 'caret';
-		}
-		if (luminance > 0.8) {
-			elementColor = '#555555';
-		}
 
-		headerClass.style.background = value;
-		headerClass.style.backgroundImage = '../img/logo-icon.svg';
-		expandDisplayNameClass.style.color = textColor;
-		headerAppName.style.color = textColor;
-
-		$('#previewStyles').html(
-			'#header .icon-caret { background-image: url(\'' + OC.getRootPath() + '/core/img/actions/' + icon + '.svg\') }' +
-			'input[type="checkbox"].checkbox:checked:enabled:not(.checkbox--white) + label:before {' +
-			'background-image:url(\'' + OC.getRootPath() + '/core/img/actions/checkmark-white.svg\');' +
-			'background-color: ' + elementColor + '; background-position: center center; background-size:contain;' +
-			'width:12px; height:12px; padding:0; margin:2px 6px 6px 2px; border-radius:1px;}' +
-			'input[type="radio"].radio:checked:not(.radio--white):not(:disabled) + label:before {' +
-			'background-image: url(\'data:image/svg+xml;base64,' + generateRadioButton(elementColor) + '\'); }'
-		);
-	}
+	var stylesheetsLoaded = 2;
+	var reloadStylesheets = function(cssFile) {
+		var queryString = '?reload=' + new Date().getTime();
+		var url = OC.generateUrl(cssFile) + queryString;
+		var old = $('link[href*="' + cssFile.replace("/","\/") + '"]');
+		var stylesheet = $("<link/>", {
+			rel: "stylesheet",
+			type: "text/css",
+			href: url
+		});
+		stylesheet.load(function () {
+			$(old).remove();
+			stylesheetsLoaded--;
+			if(stylesheetsLoaded === 0) {
+				$('#theming_settings_loading').hide();
+				var response = { status: 'success', data: {message: t('theming', 'Saved')}};
+				OC.msg.finishedSaving('#theming_settings_msg', response);
+			}
+		});
+		stylesheet.appendTo("head");
+	};
+
+	reloadStylesheets('/css/core/server.css');
+	reloadStylesheets('/apps/theming/styles');
 
 	var timestamp = new Date().getTime();
 	if (setting === 'logoMime') {