Mantis #5 completed, needs testing

Monotone-Parent: bb2d11200e5d8cbdc9a740b2a9e019efed65432b
Monotone-Revision: 00f021939a59d6bcc0871dadde8fbc81c2d0b614

Monotone-Author: crobert@inverse.ca
Monotone-Date: 2009-07-16T15:57:31
Monotone-Branch: ca.inverse.sogo

UI/WebServerResources/UIxPreferences.js

@@ -5,6 +5,7 @@ function savePreferences(sender) {
   if (sigList)
     sigList.disabled=false;
 
+  serializeCategories (null);
 	$("mainForm").submit();
 
 	return false;
@@ -26,6 +27,7 @@ function _setupEvents(enable) {
 
   $("replyPlacementList").observe ("change", onReplyPlacementListChange);
   $("composeMessagesType").observe ("change", onComposeMessagesTypeChange);
+  $("categoriesValue").value = "prout";
 }
 
 function onChoiceChanged(event) {
@@ -43,6 +45,167 @@ function initPreferences() {
   if ($("signature")) {
     onComposeMessagesTypeChange ();
   }
+
+  resetCategoriesColors (null);
+  var table = $("categoriesList");
+  var r = $$("TABLE#categoriesList tbody tr");
+  for (var i=0; i<r.length; i++)
+    r[i].identify ();
+  table.multiselect = true;
+  TableKit.Resizable.init(table, 
+                          {'trueResize' : true, 'keepWidth' : true});
+  resetTableActions ();
+  $("categoryAdd").observe ("click", onCategoryAdd);
+  $("categoryDelete").observe ("click", onCategoryDelete);
+}
+
+function resetTableActions () {
+  var r = $$("TABLE#categoriesList tbody tr");
+  for (var i = 0; i < r.length; i++) {
+      var row = $(r[i]);
+      row.observe("mousedown", onRowClick);
+      row.observe("selectstart", listRowMouseDownHandler);
+      var tds = row.childElements ();
+      tds[0].observe("mousedown", endAllEditables);
+      tds[1].observe("mousedown", endAllEditables);
+      tds[0].observe ("dblclick", onNameEdit);
+      tds[1].childElements ()[0].observe ("dblclick", onColorEdit);
+  }
+}
+
+function makeEditable (element) {
+  element.addClassName ("editing");
+  var tmp = element.innerHTML;
+  element.innerHTML = "";
+  var textField = new Element ("input", {"type": "text", 
+                                         "width": "100%"});
+  textField.value = tmp;
+  textField.observe ("keydown", interceptEnter);
+  element.appendChild (textField);
+  textField.focus ();
+  textField.select ();
+}
+
+function interceptEnter (e) {
+  if (e.keyCode == Event.KEY_RETURN) {
+    endAllEditables (null);
+    preventDefault (e);
+    return false;
+  }
+}
+
+function endEditable (element) {
+  var tmp = element.childElements ().first ().value;
+  element.innerHTML = tmp;
+  element.removeClassName ("editing");
+}
+
+function endAllEditables (e) {
+  var r = $$("TABLE#categoriesList tbody tr td");
+  for (var i=0; i<r.length; i++) {
+    if (r[i] != this && r[i].hasClassName ("editing"))
+      endEditable ($(r[i]));
+  }
+}
+
+function onNameEdit (e) {
+  endAllEditables ();
+  if (!this.hasClassName ("editing")) {
+    makeEditable (this);
+  }
+}
+
+function onColorEdit (e) {
+  var r = $$("TABLE#categoriesList tbody tr td div.colorEditing");
+  for (var i=0; i<r.length; i++)
+    r[i].removeClassName ("colorEditing");
+
+  this.addClassName ("colorEditing");
+  var cPicker = window.open(ApplicationBaseURL + "../" + UserLogin 
+                            + "/Calendar/colorPicker", "colorPicker",
+														"width=250,height=200,resizable=0,scrollbars=0"
+														+ "toolbar=0,location=0,directories=0,status=0,"
+														+ "menubar=0,copyhistory=0", "test"
+														);
+  cPicker.focus();
+
+  preventDefault(event);
+}
+
+function onColorPickerChoice (newColor) {
+  var div = $$("TABLE#categoriesList tbody tr td div.colorEditing").first ();
+//  div.removeClassName ("colorEditing");
+  div.showColor = newColor;
+  div.style.background = newColor;
+}
+
+
+function onCategoryAdd (e) {
+  var row = new Element ("tr");
+  var nametd = new Element ("td").update ("");
+  var colortd = new Element ("td");
+  var colordiv = new Element ("div", {"class": "colorBox"});
+
+  row.identify ();
+  row.addClassName ("categoryListRow");
+
+  nametd.addClassName ("categoryListCell");
+
+  colortd.addClassName ("categoryListCell");
+  colordiv.innerHTML = "&nbsp;";
+  colordiv.showColor = "#F0F0F0";
+  colordiv.style.background = colordiv.showColor;
+
+  colortd.appendChild (colordiv);
+  row.appendChild (nametd);
+  row.appendChild (colortd);
+  $("categoriesList").tBodies[0].appendChild (row);
+  makeEditable (nametd);
+
+  resetTableActions ();
+}
+
+function onCategoryDelete (e) {
+  var list = $('categoriesList').down("TBODY");;
+  var rows = list.getSelectedNodes();
+  var count = rows.length;
+
+  for (var i=0; i < count; i++) {
+    rows[i].remove ();
+  }
+
+}
+
+function serializeCategories (e) {
+  var r = $$("TABLE#categoriesList tbody tr");
+  var names = "(";
+  var colors = "(";
+
+  for (var i = 0; i < r.length; i++) {
+    var tds = r[i].childElements ();
+    var name  = $(tds.first ()).innerHTML;
+    var color = $(tds.last ().childElements ().first ()).showColor;
+
+    names += "\"" + name + "\", ";
+    colors += "\"" + color + "\", ";
+  }
+  names = names.substr (0, names.length - 1) + ")";
+  colors = colors.substr (0, colors.length - 1) + ")";
+
+  $("categoriesValue").value = "(" + names + ", " + colors + ")";
+}
+
+
+function resetCategoriesColors (e) {
+  var divs = $$("DIV.colorBox");
+
+  for (var i = 0; i < divs.length; i++) {
+    var d = $(divs[i]);
+    var color = d.innerHTML;
+    d.showColor = color;
+    d.style.background = color;
+    d.innerHTML = "&nbsp;";
+  }
 }
 
 function onReplyPlacementListChange() {
@@ -62,6 +225,7 @@ function onComposeMessagesTypeChange () {
 
   // Textmode
   if ($("composeMessagesType").value == 0) {
+    textArea.style.height = "340px";
     if (editor) {
       CKEDITOR.instances.signature.removeListener ()
       CKEDITOR.instances.signature.destroy (false);
@@ -73,7 +237,7 @@ function onComposeMessagesTypeChange () {
     CKEDITOR.replace('signature',
                      {
                         skin: "v2",
-                        height: "90px",
+                        height: "280px",
                         toolbar :
                         [['Bold', 'Italic', '-', 'Link', 
                           'Font','FontSize','-','TextColor',