* 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:
parent
cb7c075cd2
commit
d466284fab
|
@ -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>";*/
|
||||
|
||||
}
|
||||
|
||||
|
|
15
js/App.js
15
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,14 +308,9 @@ 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({
|
||||
id: "helpDlg",
|
||||
title: __("Help"),
|
||||
style: "width: 600px",
|
||||
content: transport.responseText,
|
||||
});
|
||||
|
||||
|
@ -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
|
||||
});
|
||||
|
||||
|
|
|
@ -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()) {
|
||||
|
|
|
@ -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;
|
||||
},
|
||||
|
|
|
@ -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"));
|
||||
},
|
||||
|
|
|
@ -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');
|
||||
|
|
|
@ -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");
|
||||
},
|
||||
|
|
|
@ -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"));
|
||||
},
|
||||
|
|
|
@ -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,15 +158,10 @@ 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({
|
||||
id: "cssEditDlg",
|
||||
title: __("Customize stylesheet"),
|
||||
style: "width: 600px",
|
||||
apply: function() {
|
||||
xhrPost("backend.php", this.attr('value'), () => {
|
||||
new Effect.Appear("css_edit_apply_msg");
|
||||
|
@ -180,12 +174,42 @@ const Helpers = {
|
|||
xhrPost("backend.php", this.attr('value'), () => {
|
||||
window.location.reload();
|
||||
});
|
||||
|
||||
},
|
||||
href: query
|
||||
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>
|
||||
`
|
||||
});
|
||||
|
||||
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();
|
||||
},
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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,
|
||||
});
|
||||
|
|
|
@ -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>";
|
||||
|
||||
|
||||
}
|
||||
|
|
|
@ -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) => {
|
||||
|
|
|
@ -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();
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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>";
|
||||
|
|
|
@ -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?"))) {
|
||||
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -167,4 +167,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.dijitDialog {
|
||||
width : 600px;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue