public/tt-rss
1
0
Fork 0
mirror of https://git.tt-rss.org/git/tt-rss.git synced 2025-12-13 17:45:55 +00:00
Code Issues Releases Wiki Activity

label editor: use client dialog

Browse Source
This commit is contained in:
Andrew Dolgov
2021-02-13 13:17:34 +03:00
parent 0b71729bd3
commit e7924c6dac
3 changed files with 118 additions and 117 deletions
Download Patch File Download Diff File Expand all files Collapse all files

163
js/PrefLabelTree.js
View File

@@ -1,5 +1,5 @@
/* eslint-disable prefer-rest-params */
/* global __, define, lib, dijit, dojo, xhrPost, Notify, fox */
/* global __, define, lib, dijit, dojo, xhrPost, Notify, fox, App */
define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/form/DropDownButton"], function (declare, domConstruct) {
@@ -61,70 +61,129 @@ define(["dojo/_base/declare", "dojo/dom-construct", "lib/CheckBoxTree", "dijit/f
});
},
editLabel: function(id) {
const dialog = new fox.SingleUseDialog({
id: "labelEditDlg",
title: __("Label Editor"),
style: "width: 650px",
setLabelColor: function (id, fg, bg) {
xhrJson("backend.php", {op: "pref-labels", method: "edit", id: id}, (reply) => {
let kind = '';
let color = '';
console.log(reply);
if (fg && bg) {
kind = 'both';
} else if (fg) {
kind = 'fg';
color = fg;
} else if (bg) {
kind = 'bg';
color = bg;
}
const fg_color = reply['fg_color'];
const bg_color = reply['bg_color'] ? reply['bg_color'] : '#fff7d5';
const e = $("icon-label-" + id);
const dialog = new fox.SingleUseDialog({
id: "labelEditDlg",
title: __("Label Editor"),
style: "width: 650px",
setLabelColor: function (id, fg, bg) {
if (e) {
if (bg) e.style.color = bg;
}
let kind = '';
let color = '';
const query = {
op: "pref-labels", method: "colorset", kind: kind,
ids: id, fg: fg, bg: bg, color: color
};
if (fg && bg) {
kind = 'both';
} else if (fg) {
kind = 'fg';
color = fg;
} else if (bg) {
kind = 'bg';
color = bg;
}
xhrPost("backend.php", query, () => {
const tree = dijit.byId("filterTree");
if (tree) tree.reload(); // maybe there's labels in there
});
const e = $("icon-label-" + id);
},
execute: function () {
if (this.validate()) {
const caption = this.attr('value').caption;
const fg_color = this.attr('value').fg_color;
const bg_color = this.attr('value').bg_color;
if (e) {
if (bg) e.style.color = bg;
}
dijit.byId('labelTree').setNameById(id, caption);
this.setLabelColor(id, fg_color, bg_color);
this.hide();
const query = {
op: "pref-labels", method: "colorset", kind: kind,
ids: id, fg: fg, bg: bg, color: color
};
xhrPost("backend.php", this.attr('value'), () => {
xhrPost("backend.php", query, () => {
const tree = dijit.byId("filterTree");
if (tree) tree.reload(); // maybe there's labels in there
});
}
},
content: __("Loading, please wait...")
},
execute: function () {
if (this.validate()) {
const caption = this.attr('value').caption;
const fg_color = this.attr('value').fg_color;
const bg_color = this.attr('value').bg_color;
dijit.byId('labelTree').setNameById(id, caption);
this.setLabelColor(id, fg_color, bg_color);
this.hide();
xhrPost("backend.php", this.attr('value'), () => {
const tree = dijit.byId("filterTree");
if (tree) tree.reload(); // maybe there's labels in there
});
}
},
content: `
<form onsubmit='return false'>
<header>${__("Caption")}</header>
<section>
<input style='font-size : 16px; color : ${fg_color}; background : ${bg_color}; transition : background 0.1s linear'
id='labelEdit_caption'
name='caption'
dojoType='dijit.form.ValidationTextBox'
required='true'
value="${App.escapeHtml(reply.caption)}">
</section>
${App.FormFields.hidden('id', id)}
${App.FormFields.hidden('op', 'pref-labels')}
${App.FormFields.hidden('method', 'save')}
${App.FormFields.hidden('fg_color', fg_color, 'labelEdit_fgColor')}
${App.FormFields.hidden('bg_color', bg_color, 'labelEdit_bgColor')}
<header>${__("Colors")}</header>
<section>
<table width='100%'>
<tr>
<th>${__("Foreground:")}</th>
<th>${__("Background:")}</th>
</tr>
<tr>
<td class='text-center'>
<div dojoType='dijit.ColorPalette'>
<script type='dojo/method' event='onChange' args='fg_color'>
dijit.byId('labelEdit_fgColor').attr('value', fg_color);
dijit.byId('labelEdit_caption').domNode.setStyle({color: fg_color});
</script>
</div>
</td>
<td class='text-center'>
<div dojoType='dijit.ColorPalette'>
<script type='dojo/method' event='onChange' args='bg_color'>
dijit.byId('labelEdit_bgColor').attr('value', bg_color);
dijit.byId('labelEdit_caption').domNode.setStyle({backgroundColor: bg_color});
</script>
</div>
</td>
</tr>
</table>
</section>
<footer>
<button dojoType='dijit.form.Button' type='submit' class='alt-primary' onclick='App.dialogOf(this).execute()'>
${__('Save')}
</button>
<button dojoType='dijit.form.Button' onclick='App.dialogOf(this).hide()'>
${__('Cancel')}
</button>
</footer>
</form>
`
});
dialog.show();
});
const tmph = dojo.connect(dialog, 'onShow', function () {
dojo.disconnect(tmph);
xhrPost("backend.php", {op: "pref-labels", method: "edit", id: id}, (transport) => {
dialog.attr('content', transport.responseText);
})
});
dialog.show();
},
resetColors: function() {
const labels = this.getSelectedLabels();