Minor improvements to the contacts list editor.

Monotone-Parent: 87f8dab4d95e1de1c7c969e371770ac2d74b83b1
Monotone-Revision: 0750a53ed5f3840d792633c143fd51e07040d486

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2009-10-26T18:30:06
Monotone-Branch: ca.inverse.sogo

UI/Templates/ContactsUI/UIxListEditor.wox

@@ -18,7 +18,7 @@
       onsubmit="return validateListEditor();">
       <div id="listEditor">
         <h3><var:string label:value="List details" /></h3>
-        <table><tr><td width="20%"><var:string label:value="List name:"/></td>
+        <table class="details" cellspacing="0"><tr><td width="30%"><var:string label:value="List name:"/></td>
             <td><input type="text" const:id="listName" const:name="listName"
                 var:value="listName" class="textField" /></td></tr>
           <tr><td><var:string label:value="List nickname:"/></td>
@@ -29,6 +29,7 @@
                 var:value="description" class="textField" /></td></tr>
         </table>
         <h3><var:string label:value="Members" /></h3>
+	<div class="frame">
         <div id="referenceListWrapper">
           <table id="referenceList" cellspacing="0">
             <thead>
@@ -48,14 +49,13 @@
             </tbody>
           </table>
         </div>
-      </div>
       <input type="hidden" name="referencesValue" id="referencesValue"
         var:value="referencesValue" />
-      <div id="windowButtons">
         <label><input type="button" class="button"
             id="referenceAdd" label:value="Add"/></label>
         <label><input type="button" class="button"
             id="referenceDelete" label:value="Delete"/></label>
+	</div>
       </div>
       <div id="buttons">
         <input

UI/WebServerResources/UIxListEditor.css

@@ -1,8 +1,31 @@
+TABLE.details
+{ float: right;
+  margin-right: 14px;
+  text-align: right; }
+
+TABLE.details TD
+{ padding: 0; }
+
 TABLE#referenceList
 { width: 100%; }
 
+DIV.frame
+{ border-top: 1px solid #909090;
+  border-left: 1px solid #909090;
+  border-bottom: 1px solid #FFFFFF;
+  border-right: 1px solid #FFFFFF;
+  margin: 5px 15px;
+  padding: 5px; }
+
+DIV.frame INPUT.button
+{ margin-top: 5px; }
+
+TR.tableview TD
+{ text-align: right; }
+
 TD.referenceListCell
-{ background: white; }
+{ background: white;
+  text-align: left; }
 
 DIV#referenceListWrapper
 { background: white;
@@ -23,17 +46,6 @@ TR._selected
 TD.referenceListCell
 { -moz-user-select: none; }
 
-DIV#windowButtons
-{ position: fixed;
-  top: auto;
-  bottom: 5em;
-  left: 0px;
-  right: 25px;
-  height: 3.5em;
-  line-height: 2em;
-  vertical-align: middle;
-  text-align: right; }
-
 DIV#buttons
 { position: fixed;
   top: auto;
@@ -46,6 +58,7 @@ DIV#buttons
   text-align: right; }
 
 h3 {
+  clear: both;
   margin-bottom: 2px !important;
   margin-left: 5px !important;
 }

UI/WebServerResources/UIxListEditor.js

@@ -1,3 +1,4 @@
+/* -*- Mode: java; indent-tabs-mode: nil; c-basic-offset: 4 -*- */
 function validateListEditor () {
     serializeReferences ();
     return true;
@@ -8,9 +9,8 @@ function makeEditable (element) {
     element.removeClassName ("referenceListCell");
     var tmp = element.innerHTML;
     element.innerHTML = "";
-    var textField = new Element ("input", {"type": "text", 
-                                           "width": "90%"});
-    textField.style.width = "90%";
+    var textField = new Element ("input", {"type": "text" });
+    textField.setStyle({ "width": "98%" });
     textField.value = tmp.trim ();
     textField.value = textField.value.replace (/&lt;/, "<");
     textField.value = textField.value.replace (/&gt;/, ">");
@@ -29,9 +29,9 @@ function endEditable (event, element) {
     var card;
     var name;
     var mail;
-
+    
     if (element) {
-      card = element.readAttribut("card");
+      card = element.readAttribute("card");
       mail = element.readAttribute("mail");
       name = element.readAttribute("uname");
     }