* 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

classes/pref/prefs.php

@@ -1168,7 +1168,9 @@ class Pref_Prefs extends Handler_Protected {
 		$value = get_pref("USER_STYLESHEET");
 		$value = str_replace("<br/>", "\n", $value);
 
-		print_notice(__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here."));
+		print json_encode(["value" => $value]);
+
+		/*print_notice(__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here."));
 
 		print_hidden("op", "rpc");
 		print_hidden("method", "setpref");
@@ -1188,7 +1190,7 @@ class Pref_Prefs extends Handler_Protected {
 			onclick=\"dijit.byId('cssEditDlg').execute()\">".__('Save and reload')."</button> ";
 		print "<button dojoType='dijit.form.Button'
 			onclick=\"dijit.byId('cssEditDlg').hide()\">".__('Cancel')."</button>";
-		print "</footer>";
+		print "</footer>";*/
 
 	}
 

js/App.js

@@ -16,6 +16,11 @@ const App = {
    hotkey_actions: {},
    is_prefs: false,
    LABEL_BASE_INDEX: -1024,
+   FormFields: {
+      hidden: function(name, value) {
+         return `<input dojoType="dijit.form.TextBox" style="display : none" name="${name}" value="${value}"></input>`
+      }
+   },
    Scrollable: {
 		scrollByPages: function (elem, page_offset) {
 			if (!elem) return;
@@ -49,6 +54,9 @@ const App = {
 				elem.offsetTop >= ctr.scrollTop;
 		}
    },
+   dialogOf: function (widget) {
+      return dijit.getEnclosingWidget(widget.domNode.closest('.dijitDialog'));
+   },
    label_to_feed_id: function(label) {
       return this.LABEL_BASE_INDEX - 1 - Math.abs(label);
    },
@@ -300,20 +308,15 @@ const App = {
       }
    },
    helpDialog: function(topic) {
-		if (dijit.byId("helpDlg"))
+      xhrPost("backend.php", {op: "backend", method: "help", topic: topic}, (transport) => {
-			dijit.byId("helpDlg").destroyRecursive();
+         const dialog = new dijit.Dialog({
+            title: __("Help"),
+            content: transport.responseText,
+         });
 
-	   xhrPost("backend.php", {op: "backend", method: "help", topic: topic}, (transport) => {
+         dialog.show();
-		   const dialog = new dijit.Dialog({
+      });
-			   id: "helpDlg",
+   },
-			   title: __("Help"),
-			   style: "width: 600px",
-			   content: transport.responseText,
-		   });
-
-		   dialog.show();
-	   });
-	},
 	displayDlg: function(title, id, param, callback) {
 		Notify.progress("Loading, please wait...", true);
 
@@ -329,7 +332,6 @@ const App = {
 					dialog = new dijit.Dialog({
 						title: title,
 						id: 'infoBox',
-						style: "width: 600px",
 						onCancel: function () {
 							return true;
 						},
@@ -596,7 +598,6 @@ const App = {
 				const dialog = new dijit.Dialog({
 					id: "exceptionDlg",
 					title: params.title || __("Unhandled exception"),
-					style: "width: 600px",
 					content: content
 				});
 

js/Article.js

@@ -258,7 +258,6 @@ const Article = {
 			const dialog = new dijit.Dialog({
 				id: "editTagsDlg",
 				title: __("Edit article Tags"),
-				style: "width: 600px",
 				content: transport.responseText,
 				execute: function () {
 					if (this.validate()) {

js/CommonDialogs.js

@@ -87,7 +87,6 @@ const	CommonDialogs = {
 						const dialog = new dijit.Dialog({
 							id: "feedAddDlg",
 							title: __("Subscribe to Feed"),
-							style: "width: 600px",
 							content: transport.responseText,
 							show_error: function (msg) {
 								const elem = $("fadd_error_message");
@@ -199,7 +198,6 @@ const	CommonDialogs = {
 			const dialog = new dijit.Dialog({
 				id: "errorFeedsDlg",
 				title: __("Feeds with update errors"),
-				style: "width: 600px",
 				getSelectedFeeds: function () {
 					return Tables.getSelected("error-feeds-list");
 				},
@@ -309,7 +307,6 @@ const	CommonDialogs = {
 			const dialog = new dijit.Dialog({
 				id: "feedEditDlg",
 				title: __("Edit Feed"),
-				style: "width: 600px",
 				execute: function () {
 					if (this.validate()) {
 						Notify.progress("Saving data...", true);
@@ -372,7 +369,6 @@ const	CommonDialogs = {
 					const dialog = new dijit.Dialog({
 						title: __("Public OPML URL"),
 						id: 'publicOPMLDlg',
-						style: "width: 600px",
 						onCancel: function () {
 							return true;
 						},
@@ -425,7 +421,6 @@ const	CommonDialogs = {
 					const dialog = new dijit.Dialog({
 						title: __("Show as feed"),
 						id: 'genFeedDlg',
-						style: "width: 600px",
 						onCancel: function () {
 							return true;
 						},

js/CommonFilters.js

@@ -130,7 +130,6 @@ const	Filters = {
 		const rule_dlg = new dijit.Dialog({
 			id: "filterNewRuleDlg",
 			title: ruleStr ? __("Edit rule") : __("Add rule"),
-			style: "width: 600px",
 			execute: function () {
 				if (this.validate()) {
 					Filters.createNewRuleElement($("filterDlg_Matches"), replaceNode);
@@ -160,7 +159,6 @@ const	Filters = {
 		const rule_dlg = new dijit.Dialog({
 			id: "filterNewActionDlg",
 			title: actionStr ? __("Edit action") : __("Add action"),
-			style: "width: 600px",
 			execute: function () {
 				if (this.validate()) {
 					Filters.createNewActionElement($("filterDlg_Actions"), replaceNode);
@@ -180,7 +178,6 @@ const	Filters = {
 		const test_dlg = new dijit.Dialog({
 			id: "filterTestDlg",
 			title: "Test Filter",
-			style: "width: 600px",
 			results: 0,
 			limit: 100,
 			max_offset: 10000,
@@ -283,7 +280,6 @@ const	Filters = {
 		const dialog = new dijit.Dialog({
 			id: "filterEditDlg",
 			title: __("Create Filter"),
-			style: "width: 600px",
 			test: function () {
 				Filters.editFilterTest(dojo.formToObject("filter_new_form"));
 			},

js/Feeds.js

@@ -241,7 +241,6 @@ const	Feeds = {
 					</button>
 				</footer>`,
 				id: 'defaultPasswordDlg',
-				style: "width: 600px",
 				onCancel: function () {
 					return true;
 				},
@@ -273,7 +272,6 @@ const	Feeds = {
 					</footer>
 					`,
 				id: 'safeModeDlg',
-				style: "width: 600px",
 				onCancel: function () {
 					return true;
 				},
@@ -608,7 +606,6 @@ const	Feeds = {
 							id: "searchDlg",
 							content: transport.responseText,
 							title: __("Search"),
-							style: "width: 600px",
 							execute: function () {
 								if (this.validate()) {
 									Feeds._search_query = this.attr('value');

js/PrefFeedTree.js

@@ -259,7 +259,6 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 				const dialog = new dijit.Dialog({
 					id: "feedEditDlg",
 					title: __("Edit Multiple Feeds"),
-					style: "width: 600px",
 					getChildByName: function (name) {
 						let rv = null;
 						this.getChildren().each(
@@ -346,7 +345,6 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 			const dialog = new dijit.Dialog({
 				id: "batchSubDlg",
 				title: __("Batch subscribe"),
-				style: "width: 600px",
 				execute: function () {
 					if (this.validate()) {
 						Notify.progress(__("Subscribing to feeds..."), true);
@@ -372,7 +370,6 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 			const dialog = new dijit.Dialog({
 				id: "inactiveFeedsDlg",
 				title: __("Feeds without recent updates"),
-				style: "width: 600px",
 				getSelectedFeeds: function () {
 					return Tables.getSelected("inactive-feeds-list");
 				},

js/PrefFilterTree.js

@@ -147,8 +147,6 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree"], functio
 			const dialog = new dijit.Dialog({
 				id: "filterEditDlg",
 				title: __("Edit Filter"),
-				style: "width: 600px",
-
 				test: function () {
 					Filters.editFilterTest(dojo.formToObject("filter_edit_form"));
 				},

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";
+		xhrJson("backend.php", {op: "pref-prefs", method: "customizeCSS"}, (reply) => {
 
-		if (dijit.byId("cssEditDlg"))
+			const dialog = new dijit.Dialog({
-			dijit.byId("cssEditDlg").destroyRecursive();
+				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({
+					xhrPost("backend.php", this.attr('value'), () => {
-			id: "cssEditDlg",
+						window.location.reload();
-			title: __("Customize stylesheet"),
+					});
-			style: "width: 600px",
+				},
-			apply: function() {
+				content: `
-				xhrPost("backend.php", this.attr('value'), () => {
+					<div class='alert alert-info'>
-					new Effect.Appear("css_edit_apply_msg");
+						${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")}
-					$("user_css_style").innerText = this.attr('value');
+					</div>
-				});
-			},
-			execute: function () {
-				Notify.progress('Saving data...', true);
 
-				xhrPost("backend.php", this.attr('value'), () => {
+					${App.FormFields.hidden('op', 'rpc')}
-					window.location.reload();
+					${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>
+				`
+			});
+
+			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();
 						},

js/PrefUsers.js

@@ -36,7 +36,6 @@ const	Users = {
 		const dialog = new dijit.Dialog({
 			id: "userEditDlg",
 			title: __("User Editor"),
-			style: "width: 600px",
 			execute: function () {
 				if (this.validate()) {
 					Notify.progress("Saving data...", true);

plugins/af_psql_trgm/init.js

@@ -1,16 +1,13 @@
+/* global dijit, Plugins, __ */
+
 Plugins.Psql_Trgm = {
 	showRelated: function (id) {
 		const query = "backend.php?op=pluginhandler&plugin=af_psql_trgm&method=showrelated&param=" + encodeURIComponent(id);
 
-		if (dijit.byId("trgmRelatedDlg"))
+		const dialog = new dijit.Dialog({
-			dijit.byId("trgmRelatedDlg").destroyRecursive();
-
-		dialog = new dijit.Dialog({
-			id: "trgmRelatedDlg",
 			title: __("Related articles"),
-			style: "width: 600px",
 			execute: function () {
-
+				//
 			},
 			href: query,
 		});

plugins/af_psql_trgm/init.php

@@ -108,9 +108,9 @@ class Af_Psql_Trgm extends Plugin {
 
 		}
 
-		print "<footer class='text-center'>";
+		print "<footer class='text-center'>
-		print "<button dojoType='dijit.form.Button' onclick=\"dijit.byId('trgmRelatedDlg').hide()\">".__('Close this window')."</button>";
+			<button dojoType='dijit.form.Button' type='submit' class='alt-primary'>".__('Close this window')."</button>
-		print "</footer>";
+		</footer>";
 
 
 	}

plugins/mail/mail.js

@@ -19,7 +19,6 @@ Plugins.Mail = {
 		const dialog = new dijit.Dialog({
 			id: "emailArticleDlg",
 			title: __("Forward article by email"),
-			style: "width: 600px",
 			execute: function () {
 				if (this.validate()) {
 					xhrJson("backend.php", this.attr('value'), (reply) => {

plugins/mailto/init.js

@@ -19,7 +19,6 @@ Plugins.Mailto = {
 		const dialog = new dijit.Dialog({
 			id: "emailArticleDlg",
 			title: __("Forward article by email"),
-			style: "width: 600px",
 			href: query});
 
 		dialog.show();

plugins/note/note.js

@@ -8,7 +8,6 @@ Plugins.Note = {
 		const dialog = new dijit.Dialog({
 			id: "editNoteDlg",
 			title: __("Edit article note"),
-			style: "width: 600px",
 			execute: function () {
 				if (this.validate()) {
 					Notify.progress("Saving article note...", true);

plugins/share/init.php

@@ -123,13 +123,13 @@ class Share extends Plugin {
 
 		print "<footer class='text-center'>";
 
-		print "<button dojoType='dijit.form.Button' onclick=\"return dijit.byId('shareArticleDlg').unshare()\">".
+		print "<button dojoType='dijit.form.Button' onclick=\"return App.dialogOf(this).unshare()\">".
 			__('Unshare article')."</button>";
 
-		print "<button dojoType='dijit.form.Button' onclick=\"return dijit.byId('shareArticleDlg').newurl()\">".
+		print "<button dojoType='dijit.form.Button' onclick=\"return App.dialogOf(this).newurl()\">".
 			__('Generate new URL')."</button>";
 
-		print "<button dojoType='dijit.form.Button' onclick=\"return dijit.byId('shareArticleDlg').hide()\">".
+		print "<button dojoType='dijit.form.Button' type='submit' class='alt-primary'>".
 			__('Close this window')."</button>";
 
 		print "</footer>";

plugins/share/share.js

@@ -8,7 +8,6 @@ Plugins.Share = {
 		const dialog = new dijit.Dialog({
 			id: "shareArticleDlg",
 			title: __("Share article by URL"),
-			style: "width: 600px",
 			newurl: function () {
 				if (confirm(__("Generate new share URL for this article?"))) {
 

themes/compact.css

@@ -1794,6 +1794,9 @@ body.ttrss_utility.share_popup .content {
   border-width: 1px;
   color: #555;
 }
+.flat .dijitDialog {
+  width: 600px;
+}
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;

themes/compact_night.css

@@ -1696,6 +1696,9 @@ body.ttrss_utility fieldset > label.checkbox {
   border-width: 1px;
   color: #ccc;
 }
+.flat .dijitDialog {
+  width: 600px;
+}
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;

themes/light.css

@@ -1794,6 +1794,9 @@ body.ttrss_utility.share_popup .content {
   border-width: 1px;
   color: #555;
 }
+.flat .dijitDialog {
+  width: 600px;
+}
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;

themes/light/dijit_basic.less

@@ -167,4 +167,8 @@
 		}
 	}
 
+	.dijitDialog {
+		width : 600px;
+	}
+
 }

themes/night.css

@@ -1697,6 +1697,9 @@ body.ttrss_utility fieldset > label.checkbox {
   border-width: 1px;
   color: #ccc;
 }
+.flat .dijitDialog {
+  width: 600px;
+}
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;

themes/night_blue.css

@@ -1697,6 +1697,9 @@ body.ttrss_utility fieldset > label.checkbox {
   border-width: 1px;
   color: #ccc;
 }
+.flat .dijitDialog {
+  width: 600px;
+}
 @font-face {
   font-family: 'Material Icons';
   font-style: normal;