From d466284fabe945dbc3c8034ac1468bf97b38ed94 Mon Sep 17 00:00:00 2001 From: Andrew Dolgov Date: Fri, 12 Feb 2021 09:02:44 +0300 Subject: [PATCH] * 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 | 6 ++- js/App.js | 31 ++++++++------- js/Article.js | 1 - js/CommonDialogs.js | 5 --- js/CommonFilters.js | 4 -- js/Feeds.js | 3 -- js/PrefFeedTree.js | 3 -- js/PrefFilterTree.js | 2 - js/PrefHelpers.js | 73 +++++++++++++++++++++++------------ js/PrefUsers.js | 1 - plugins/af_psql_trgm/init.js | 11 ++---- plugins/af_psql_trgm/init.php | 6 +-- plugins/mail/mail.js | 1 - plugins/mailto/init.js | 1 - plugins/note/note.js | 1 - plugins/share/init.php | 6 +-- plugins/share/share.js | 1 - themes/compact.css | 3 ++ themes/compact_night.css | 3 ++ themes/light.css | 3 ++ themes/light/dijit_basic.less | 4 ++ themes/night.css | 3 ++ themes/night_blue.css | 3 ++ 23 files changed, 97 insertions(+), 78 deletions(-) diff --git a/classes/pref/prefs.php b/classes/pref/prefs.php index 50a1f39c8..df4540c5e 100644 --- a/classes/pref/prefs.php +++ b/classes/pref/prefs.php @@ -1168,7 +1168,9 @@ class Pref_Prefs extends Handler_Protected { $value = get_pref("USER_STYLESHEET"); $value = str_replace("
", "\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')." "; print ""; - print ""; + print "";*/ } diff --git a/js/App.js b/js/App.js index 45de8cf0e..6d7fd1c8b 100644 --- a/js/App.js +++ b/js/App.js @@ -16,6 +16,11 @@ const App = { hotkey_actions: {}, is_prefs: false, LABEL_BASE_INDEX: -1024, + FormFields: { + hidden: function(name, value) { + return `` + } + }, 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")) - dijit.byId("helpDlg").destroyRecursive(); + xhrPost("backend.php", {op: "backend", method: "help", topic: topic}, (transport) => { + const dialog = new dijit.Dialog({ + title: __("Help"), + content: transport.responseText, + }); - xhrPost("backend.php", {op: "backend", method: "help", topic: topic}, (transport) => { - const dialog = new dijit.Dialog({ - id: "helpDlg", - title: __("Help"), - style: "width: 600px", - content: transport.responseText, - }); - - dialog.show(); - }); - }, + 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 }); diff --git a/js/Article.js b/js/Article.js index a075e321f..538377f45 100644 --- a/js/Article.js +++ b/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()) { diff --git a/js/CommonDialogs.js b/js/CommonDialogs.js index 72c3653b3..b41065c63 100644 --- a/js/CommonDialogs.js +++ b/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; }, diff --git a/js/CommonFilters.js b/js/CommonFilters.js index 9676abe9e..27bf78a02 100644 --- a/js/CommonFilters.js +++ b/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")); }, diff --git a/js/Feeds.js b/js/Feeds.js index 1e476dd98..10677f641 100644 --- a/js/Feeds.js +++ b/js/Feeds.js @@ -241,7 +241,6 @@ const Feeds = { `, id: 'defaultPasswordDlg', - style: "width: 600px", onCancel: function () { return true; }, @@ -273,7 +272,6 @@ const Feeds = { `, 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'); diff --git a/js/PrefFeedTree.js b/js/PrefFeedTree.js index acd410a2c..4c8c25d0e 100644 --- a/js/PrefFeedTree.js +++ b/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"); }, diff --git a/js/PrefFilterTree.js b/js/PrefFilterTree.js index b2041d182..a2e625bc1 100644 --- a/js/PrefFilterTree.js +++ b/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")); }, 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"; + xhrJson("backend.php", {op: "pref-prefs", method: "customizeCSS"}, (reply) => { - if (dijit.byId("cssEditDlg")) - dijit.byId("cssEditDlg").destroyRecursive(); + 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: ` +
+ ${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")} +
- xhrPost("backend.php", this.attr('value'), () => { - window.location.reload(); - }); + ${App.FormFields.hidden('op', 'rpc')} + ${App.FormFields.hidden('method', 'setpref')} + ${App.FormFields.hidden('key', 'USER_STYLESHEET')} + + + + + + + ` + }); + + 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(); }, diff --git a/js/PrefUsers.js b/js/PrefUsers.js index 2cebce6ef..a332a9140 100644 --- a/js/PrefUsers.js +++ b/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); diff --git a/plugins/af_psql_trgm/init.js b/plugins/af_psql_trgm/init.js index af337ca6b..a22e673f6 100644 --- a/plugins/af_psql_trgm/init.js +++ b/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¶m=" + encodeURIComponent(id); - if (dijit.byId("trgmRelatedDlg")) - dijit.byId("trgmRelatedDlg").destroyRecursive(); - - dialog = new dijit.Dialog({ - id: "trgmRelatedDlg", + const dialog = new dijit.Dialog({ title: __("Related articles"), - style: "width: 600px", execute: function () { - + // }, href: query, }); diff --git a/plugins/af_psql_trgm/init.php b/plugins/af_psql_trgm/init.php index faacf2da7..163b0ec38 100644 --- a/plugins/af_psql_trgm/init.php +++ b/plugins/af_psql_trgm/init.php @@ -108,9 +108,9 @@ class Af_Psql_Trgm extends Plugin { } - print ""; + print ""; } diff --git a/plugins/mail/mail.js b/plugins/mail/mail.js index eb7b7e6b6..89e395221 100644 --- a/plugins/mail/mail.js +++ b/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) => { diff --git a/plugins/mailto/init.js b/plugins/mailto/init.js index f81f70fc7..6a1d2ef19 100644 --- a/plugins/mailto/init.js +++ b/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(); diff --git a/plugins/note/note.js b/plugins/note/note.js index 0c811000d..fec7b04be 100644 --- a/plugins/note/note.js +++ b/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); diff --git a/plugins/share/init.php b/plugins/share/init.php index d0b3dfc0b..0794f5125 100644 --- a/plugins/share/init.php +++ b/plugins/share/init.php @@ -123,13 +123,13 @@ class Share extends Plugin { print ""; diff --git a/plugins/share/share.js b/plugins/share/share.js index c49f64b4b..507f27f84 100644 --- a/plugins/share/share.js +++ b/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?"))) { diff --git a/themes/compact.css b/themes/compact.css index c3c953b0e..080f82961 100644 --- a/themes/compact.css +++ b/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; diff --git a/themes/compact_night.css b/themes/compact_night.css index 17d390895..be6a25a2e 100644 --- a/themes/compact_night.css +++ b/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; diff --git a/themes/light.css b/themes/light.css index 7d34794e4..e16ff83dd 100644 --- a/themes/light.css +++ b/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; diff --git a/themes/light/dijit_basic.less b/themes/light/dijit_basic.less index d49d7316d..2854c77d0 100644 --- a/themes/light/dijit_basic.less +++ b/themes/light/dijit_basic.less @@ -167,4 +167,8 @@ } } + .dijitDialog { + width : 600px; + } + } diff --git a/themes/night.css b/themes/night.css index 880cfe001..6090890e2 100644 --- a/themes/night.css +++ b/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; diff --git a/themes/night_blue.css b/themes/night_blue.css index 49c9b15c4..4bea2256f 100644 --- a/themes/night_blue.css +++ b/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;