Use generated SCSS for theming preview

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

apps/theming/css/settings-admin.css

@@ -38,19 +38,39 @@
 
 #theming label span {
     display: inline-block;
-    min-width: 90px;
+    min-width: 120px;
     padding: 8px 0px;
+    vertical-align: top;
 }
 
-#theming .icon-upload,
 #theming .icon-loading-small {
     display: inline-flex;
     padding: 8px;
     margin: 2px 0px;
 }
 
+#theming .icon-upload {
+    padding: 8px 20px;
+    width: 20px;
+    margin: 2px 0px;
+    min-height: 32px;
+    display: inline-block;
+}
+
+#theming_settings_status {
+    height: 26px;
+    margin: 10px;
+
+}
+#theming_settings_loading.icon-loading-small {
+    float: left;
+    padding: 0;
+    margin-right: 10px;
+}
 div#theming_settings_msg {
-    margin-left: 10px;
+    margin: 8px;
+    margin-left:20px;
+    display: inline-block;
 }
 
 #theming-preview {
@@ -59,7 +79,8 @@ div#theming_settings_msg {
     background-size: cover;
     background-position: center center;
     text-align: center;
-    margin-left: 93px;
+    margin-left: 123px;
+    margin-top: 10px;
 }
 
 #theming-preview img {

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') {

apps/theming/lib/Controller/ThemingController.php

@@ -163,6 +163,10 @@ class ThemingController extends Controller {
 		}
 
 		$this->themingDefaults->set($setting, $value);
+
+		// reprocess server scss for preview
+		$cssCached = $this->scssCacher->process(\OC::$SERVERROOT, '/core/css/server.scss', 'core');
+
 		return new DataResponse(
 			[
 				'data' =>

apps/theming/templates/settings-admin.php

@@ -29,7 +29,10 @@ style('theming', 'settings-admin');
 <div id="theming" class="section">
 	<h2 class="inlineblock"><?php p($l->t('Theming')); ?></h2>
         <p class="settings-hint"><?php p($l->t('Theming makes it possible to easily customize the look and feel of your instance and supported clients. This will be visible for all users.')); ?></p>
-		<div id="theming_settings_msg" class="msg success inlineblock" style="display: none;">Saved</div>
+		<div id="theming_settings_status">
+			<div id="theming_settings_loading" class="icon-loading-small" style="display: none;"></div>
+			<span id="theming_settings_msg" class="msg success" style="display: none;">Saved</span>
+		</div>
 	<?php if ($_['themable'] === false) { ?>
 	<p>
 		<?php p($_['errorMessage']) ?>