valvin
/
ttrss
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

* 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
This commit is contained in:
Andrew Dolgov 2021-02-12 09:02:44 +03:00
parent cb7c075cd2
commit d466284fab
23 changed files with 97 additions and 78 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
classes/pref/prefs.php
View File

@ -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>";*/
}

31
js/App.js
View File

@ -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"))
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
});

1
js/Article.js
View File

@ -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()) {

5
js/CommonDialogs.js
View File

@ -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;
},

4
js/CommonFilters.js
View File

@ -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"));
},

3
js/Feeds.js
View File

@ -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');

3
js/PrefFeedTree.js
View File

@ -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");
},

2
js/PrefFilterTree.js
View File

@ -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"));
},

73
js/PrefHelpers.js
View File

@ -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: `
<div class='alert alert-info'>
${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")}
</div>
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')}
<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();
},

1
js/PrefUsers.js
View File

@ -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);

11
plugins/af_psql_trgm/init.js
View File

@ -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"))
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,
});

6
plugins/af_psql_trgm/init.php
View File

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

1
plugins/mail/mail.js
View File

@ -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) => {

1
plugins/mailto/init.js
View File

@ -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();

1
plugins/note/note.js
View File

@ -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);

6
plugins/share/init.php
View File

@ -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>";

1
plugins/share/share.js
View File

@ -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?"))) {

3
themes/compact.css
View File

@ -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;

3
themes/compact_night.css
View File

@ -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;

3
themes/light.css
View File

@ -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;

4
themes/light/dijit_basic.less
View File

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

3
themes/night.css
View File

@ -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;

3
themes/night_blue.css
View File

@ -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;