* customizeCSS: client dialog

* remove hardcoded width from most dialogs (move to css)
* add helper to easily get dialog from its widget
* rework some dialog buttons to use current object instead of calling dialog by name

1 files changed, 49 insertions, 26 deletions

diff --git a/js/PrefHelpers.js b/js/PrefHelpers.js
index 4edb3eb4d..966e8151e 100644
--- a/js/PrefHelpers.js
+++ b/js/PrefHelpers.js
@@ -1,6 +1,6 @@
 'use strict';
 
-/* global __, dijit, dojo, Tables, xhrPost, Notify, xhrJson */
+/* global __, dijit, dojo, Tables, xhrPost, Notify, xhrJson, App */
 
 const	Helpers = {
 	AppPasswords: {
@@ -93,7 +93,6 @@ const	Helpers = {
 		const dialog = new dijit.Dialog({
 			id: "profileEditDlg",
 			title: __("Settings Profiles"),
-			style: "width: 600px",
 			getSelectedProfiles: function () {
 				return Tables.getSelected("pref-profiles-list");
 			},
@@ -159,33 +158,58 @@ const	Helpers = {
 		dialog.show();
 	},
 	customizeCSS: function() {
-		const query = "backend.php?op=pref-prefs&method=customizeCSS";
-
-		if (dijit.byId("cssEditDlg"))
-			dijit.byId("cssEditDlg").destroyRecursive();
+		xhrJson("backend.php", {op: "pref-prefs", method: "customizeCSS"}, (reply) => {
+
+			const dialog = new dijit.Dialog({
+				title: __("Customize stylesheet"),
+				apply: function() {
+					xhrPost("backend.php", this.attr('value'), () => {
+						new Effect.Appear("css_edit_apply_msg");
+						$("user_css_style").innerText = this.attr('value');
+					});
+				},
+				execute: function () {
+					Notify.progress('Saving data...', true);
 
-		const dialog = new dijit.Dialog({
-			id: "cssEditDlg",
-			title: __("Customize stylesheet"),
-			style: "width: 600px",
-			apply: function() {
-				xhrPost("backend.php", this.attr('value'), () => {
-					new Effect.Appear("css_edit_apply_msg");
-					$("user_css_style").innerText = this.attr('value');
-				});
-			},
-			execute: function () {
-				Notify.progress('Saving data...', true);
+					xhrPost("backend.php", this.attr('value'), () => {
+						window.location.reload();
+					});
+				},
+				content: `
+					<div class='alert alert-info'>
+						${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")}
+					</div>
+
+					${App.FormFields.hidden('op', 'rpc')}
+					${App.FormFields.hidden('method', 'setpref')}
+					${App.FormFields.hidden('key', 'USER_STYLESHEET')}
+
+					<div id='css_edit_apply_msg' style='display : none'>
+						<div class='alert alert-warning'>
+							${__("User CSS has been applied, you might need to reload the page to see all changes.")}
+						</div>
+					</div>
+
+					<textarea class='panel user-css-editor' dojoType='dijit.form.SimpleTextarea'
+						style='font-size : 12px;' name='value'>${reply.value}</textarea>
+
+					<footer>
+						<button dojoType='dijit.form.Button' class='alt-success' onclick="App.dialogOf(this).apply()">
+							${__('Apply')}
+						</button>
+						<button dojoType='dijit.form.Button' class='alt-primary' type='submit'>
+							${__('Save and reload')}
+						</button>
+						<button dojoType='dijit.form.Button' onclick="App.dialogOf(this).hide()">
+							${__('Cancel')}
+						</button>
+					</footer>
+				`
+			});
 
-				xhrPost("backend.php", this.attr('value'), () => {
-					window.location.reload();
-				});
+			dialog.show();
 
-			},
-			href: query
 		});
-
-		dialog.show();
 	},
 	confirmReset: function() {
 		if (confirm(__("Reset to defaults?"))) {
@@ -228,7 +252,6 @@ const	Helpers = {
 
 					const dialog = new dijit.Dialog({
 						title: __("OPML Import"),
-						style: "width: 600px",
 						onCancel: function () {
 							window.location.reload();
 						},