show user css editor before xhr is completed

This commit is contained in:
Andrew Dolgov 2021-03-08 16:54:11 +03:00
parent bfeaf4d6a4
commit 28dd255c30
2 changed files with 56 additions and 46 deletions

View File

@ -322,7 +322,7 @@ const Article = {
}, },
editTags: function (id) { editTags: function (id) {
const dialog = new fox.SingleUseDialog({ const dialog = new fox.SingleUseDialog({
title: __("Edit article Tags"), title: __("Article tags"),
content: ` content: `
${App.FormFields.hidden_tag("id", id.toString())} ${App.FormFields.hidden_tag("id", id.toString())}
${App.FormFields.hidden_tag("op", "article")} ${App.FormFields.hidden_tag("op", "article")}
@ -334,7 +334,7 @@ const Article = {
<section> <section>
<textarea dojoType='dijit.form.SimpleTextarea' rows='4' disabled='true' <textarea dojoType='dijit.form.SimpleTextarea' rows='4' disabled='true'
id='tags_str' name='tags_str'></textarea> id='tags_str' name='tags_str'>${__("Loading, please wait...")}</textarea>
<div class='autocomplete' id='tags_choices' style='display:none'></div> <div class='autocomplete' id='tags_choices' style='display:none'></div>
</section> </section>

View File

@ -239,60 +239,70 @@ const Helpers = {
}, },
Prefs: { Prefs: {
customizeCSS: function() { customizeCSS: function() {
xhr.json("backend.php", {op: "pref-prefs", method: "customizeCSS"}, (reply) => { const dialog = new fox.SingleUseDialog({
title: __("Customize stylesheet"),
apply: function() {
xhr.post("backend.php", this.attr('value'), () => {
Element.show("css_edit_apply_msg");
App.byId("user_css_style").innerText = this.attr('value');
});
},
execute: function () {
Notify.progress('Saving data...', true);
const dialog = new fox.SingleUseDialog({ xhr.post("backend.php", this.attr('value'), () => {
title: __("Customize stylesheet"), window.location.reload();
apply: function() { });
xhr.post("backend.php", this.attr('value'), () => { },
Element.show("css_edit_apply_msg"); content: `
App.byId("user_css_style").innerText = this.attr('value'); <div class='alert alert-info'>
}); ${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")}
}, </div>
execute: function () {
Notify.progress('Saving data...', true);
xhr.post("backend.php", this.attr('value'), () => { ${App.FormFields.hidden_tag('op', 'rpc')}
window.location.reload(); ${App.FormFields.hidden_tag('method', 'setpref')}
}); ${App.FormFields.hidden_tag('key', 'USER_STYLESHEET')}
},
content: ` <div id='css_edit_apply_msg' style='display : none'>
<div class='alert alert-info'> <div class='alert alert-warning'>
${__("You can override colors, fonts and layout of your currently selected theme with custom CSS declarations here.")} ${__("User CSS has been applied, you might need to reload the page to see all changes.")}
</div> </div>
</div>
${App.FormFields.hidden_tag('op', 'rpc')} <textarea class='panel user-css-editor' disabled='true' dojoType='dijit.form.SimpleTextarea'
${App.FormFields.hidden_tag('method', 'setpref')} style='font-size : 12px;' name='value'>${__("Loading, please wait...")}</textarea>
${App.FormFields.hidden_tag('key', 'USER_STYLESHEET')}
<div id='css_edit_apply_msg' style='display : none'> <footer>
<div class='alert alert-warning'> <button dojoType='dijit.form.Button' class='alt-success' onclick="App.dialogOf(this).apply()">
${__("User CSS has been applied, you might need to reload the page to see all changes.")} ${App.FormFields.icon("check")}
</div> ${__('Apply')}
</div> </button>
<button dojoType='dijit.form.Button' class='alt-primary' type='submit'>
${App.FormFields.icon("refresh")}
${__('Save and reload')}
</button>
<button dojoType='dijit.form.Button' onclick="App.dialogOf(this).hide()">
${__('Cancel')}
</button>
</footer>
`
});
<textarea class='panel user-css-editor' dojoType='dijit.form.SimpleTextarea' const tmph = dojo.connect(dialog, 'onShow', function () {
style='font-size : 12px;' name='value'>${reply.value}</textarea> dojo.disconnect(tmph);
<footer> xhr.json("backend.php", {op: "pref-prefs", method: "customizeCSS"}, (reply) => {
<button dojoType='dijit.form.Button' class='alt-success' onclick="App.dialogOf(this).apply()">
${App.FormFields.icon("check")} const editor = dijit.getEnclosingWidget(dialog.domNode.querySelector(".user-css-editor"));
${__('Apply')}
</button> editor.attr('value', reply.value);
<button dojoType='dijit.form.Button' class='alt-primary' type='submit'> editor.attr('disabled', false);
${App.FormFields.icon("refresh")}
${__('Save and reload')}
</button>
<button dojoType='dijit.form.Button' onclick="App.dialogOf(this).hide()">
${__('Cancel')}
</button>
</footer>
`
}); });
dialog.show();
}); });
dialog.show();
}, },
confirmReset: function() { confirmReset: function() {
if (confirm(__("Reset to defaults?"))) { if (confirm(__("Reset to defaults?"))) {