label editor: use client dialog

1 files changed, 113 insertions, 54 deletions

diff --git a/js/PrefLabelTree.js b/js/PrefLabelTree.js
index 73f375f2d..88e88b669 100644
--- a/js/PrefLabelTree.js
+++ b/js/PrefLabelTree.js
@@ -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) {
-
-					let kind = '';
-					let color = '';
-
-					if (fg && bg) {
-						kind = 'both';
-					} else if (fg) {
-						kind = 'fg';
-						color = fg;
-					} else if (bg) {
-						kind = 'bg';
-						color = bg;
-					}
-
-					const e = $("icon-label-" + id);
-
-					if (e) {
-						if (bg) e.style.color = bg;
-					}
+			xhrJson("backend.php", {op: "pref-labels", method: "edit", id: id}, (reply) => {
 
-					const query = {
-						op: "pref-labels", method: "colorset", kind: kind,
-						ids: id, fg: fg, bg: bg, color: color
-					};
+				console.log(reply);
 
-					xhrPost("backend.php", query, () => {
-						const tree = dijit.byId("filterTree");
-						if (tree) tree.reload(); // maybe there's labels in there
-					});
+				const fg_color = reply['fg_color'];
+				const bg_color = reply['bg_color'] ? reply['bg_color'] : '#fff7d5';
+
+				const dialog = new fox.SingleUseDialog({
+					id: "labelEditDlg",
+					title: __("Label Editor"),
+					style: "width: 650px",
+					setLabelColor: function (id, fg, bg) {
+
+						let kind = '';
+						let color = '';
 
-				},
-				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 (fg && bg) {
+							kind = 'both';
+						} else if (fg) {
+							kind = 'fg';
+							color = fg;
+						} else if (bg) {
+							kind = 'bg';
+							color = bg;
+						}
 
-						dijit.byId('labelTree').setNameById(id, caption);
-						this.setLabelColor(id, fg_color, bg_color);
-						this.hide();
+						const e = $("icon-label-" + id);
 
-						xhrPost("backend.php", this.attr('value'), () => {
+						if (e) {
+							if (bg) e.style.color = bg;
+						}
+
+						const query = {
+							op: "pref-labels", method: "colorset", kind: kind,
+							ids: id, fg: fg, bg: bg, color: color
+						};
+
+						xhrPost("backend.php", query, () => {
 							const tree = dijit.byId("filterTree");
 							if (tree) tree.reload(); // maybe there's labels in there
 						});
-					}
-				},
-				content: __("Loading, please wait...")
-			});
 
-			const tmph = dojo.connect(dialog, 'onShow', function () {
-				dojo.disconnect(tmph);
+					},
+					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>
+					`
+				});
 
-				xhrPost("backend.php", {op: "pref-labels", method: "edit", id: id}, (transport) => {
-					dialog.attr('content', transport.responseText);
-				})
-			});
+				dialog.show();
 
-			dialog.show();
+			});
 		},
 		resetColors: function() {
 			const labels = this.getSelectedLabels();