From 8c3088aba58d8975a317bd82ac1ea51ef971f847 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Fri, 2 Nov 2007 15:09:44 +0000
Subject: [PATCH] Monotone-Parent: 8132f0990f7fce9318097fee307c6bd9b58b1be1
 Monotone-Revision: 481fe3d5a9c50bc134e3db63b08e84fc0a7456fd

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2007-11-02T15:09:44
Monotone-Branch: ca.inverse.sogo
---
 UI/Templates/MailerUI/UIxMailEditor.wox      |  6 +-
 UI/Templates/MailerUI/UIxMailToSelection.wox | 34 +++++-----
 UI/WebServerResources/UIxMailEditor.css      | 67 ++++++++++++++------
 UI/WebServerResources/UIxMailEditor.js       | 51 ++++++++-------
 UI/WebServerResources/UIxMailToSelection.js  |  6 +-
 5 files changed, 101 insertions(+), 63 deletions(-)

diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index bbc56eb07..87ed56139 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -46,12 +46,12 @@
       <div class="addressListElement" id="subjectRow"
 	><span class="headerField"><var:string label:value="Subject"
 	    />:</span
-	  ><span class="headerInput"
-	  ><input name="subject"
+	  >
+	  <input name="subject"
 	    type="text"
 	    class="textField"
 	    var:value="subject"
-	    /></span></div>
+	    /></div>
     <!-- separator line --><hr/>
     </div>
     <textarea name="text" rows="30" var:value="text" />
diff --git a/UI/Templates/MailerUI/UIxMailToSelection.wox b/UI/Templates/MailerUI/UIxMailToSelection.wox
index 7aa986ce3..c33c588af 100644
--- a/UI/Templates/MailerUI/UIxMailToSelection.wox
+++ b/UI/Templates/MailerUI/UIxMailToSelection.wox
@@ -9,19 +9,21 @@
       var currentIndex = <var:string value="currentIndex" />;
     </script>
 
-    <div id="addressList"
+    <div class="addressList">
+    <table id="addressList" cellpadding="0" cellspacing="0"
+      ><tbody
       ><var:foreach list="addressLists" item="addressList"
         ><var:foreach list="addressList" item="address">
-          <div class="addressListElement" var:id="currentRowId">
-            <span class="headerField">
+          <tr class="addressListElement" var:id="currentRowId">
+            <td class="headerField">
             <var:popup name="currentPopUpId"
               list="headers"
               item="item"
               label:displayString="$item"
               selection="currentHeader"
               />
-            </span>
-            <span class="headerInput">
+            </td>
+            <td class="headerInput">
             <input var:id="currentAddressId"
               var:name="currentAddressId"
               class="textField"
@@ -30,29 +32,31 @@
               onfocus="addressFieldGotFocus(this);"
               onblur="addressFieldLostFocus(this);"
               />
-            </span>
-          </div>
+            </td>
+          </tr>
         </var:foreach>
       </var:foreach>
-      <div class="addressListElement" id="lastRow">
-        <span class="headerField">
+      <tr class="addressListElement" id="lastRow">
+        <td class="headerField">
         <var:popup name="currentPopUpId"
               const:disabled="1"
               list="headers"
               item="item"
               label:displayString="$item"
               />
-        </span>
-        <span class="headerInput">
-          <input onfocus="fancyAddRow(true,'');"
+        </td>
+        <td class="headerInput">
+          <span class="headerInput"><input onfocus="fancyAddRow(true,'');"
             readonly="1"
             type="text"
-            class="textField" />
-        </span>
-      </div>
+            class="textField" /></span>
+        </td>
+      </tr>
     <!--<var:if condition="isUIxDebugEnabled">
     <a href="#" onclick="checkAddresses();">check addresses</a>
   </var:if>-->
+    </tbody>
+    </table>
     </div>
     <span id="addr_addresses" style="display: none; visibility: hidden;"><var:foreach list="addressLists" item="addressList"><var:foreach list="addressList" item="address"><span var:id="address"><!-- Space! --></span></var:foreach></var:foreach></span>
   </container>
diff --git a/UI/WebServerResources/UIxMailEditor.css b/UI/WebServerResources/UIxMailEditor.css
index 9863b23dd..2ed30effb 100644
--- a/UI/WebServerResources/UIxMailEditor.css
+++ b/UI/WebServerResources/UIxMailEditor.css
@@ -17,25 +17,55 @@ DIV#addressList
   overflow-x: hidden;
 }
 
-SPAN.headerField
-{ line-height: 1.8em;
-  float: left;
-  clear: left;
-  text-align: right;
-  min-width: 7em;
-  padding-left: 0.5em; }
+DIV.addressList
+{ margin: 5px; }
 
-SPAN.headerInput INPUT
-{ padding-left: 24px; /* offset text input */
-  padding-right: 4px;
-  background-image: url('/SOGo.woa/WebServerResources/abcard.gif');
+TABLE#addressList
+{ border: 1px solid #333;
+  border-bottom: 1px solid #aaa;
+  border-right: 1px solid #ccc;
+  border-spacing: 0px;
+  margin: 0px;
+  padding: 0px;
+  width: 100%; }
+
+TABLE#addressList TD
+{ background-color: #fff;
+  border: 0px;
+  border-bottom: 1px solid #C4C8FF;
+  margin: 0px;
+  padding: 1px; }
+
+TABLE#addressList TD.headerField
+{ border-right: 1px solid #C4C8FF; 
+  width: 110px; }
+
+TABLE#addressList TD.headerField SELECT
+{ border: 1px solid #eee; }
+
+TABLE#addressList TD.headerInput
+{ background-image: url('/SOGo.woa/WebServerResources/abcard.gif');
   background-repeat: no-repeat;
-  background-position: 2px center; }
+  background-position: 2px center;
+  padding-left: 24px;
+  padding-right: 4px; }
+
+TABLE#addressList TD.headerInput INPUT
+{ border: 0px;
+  margin: 0px;
+  padding: 0px;
+  width: 100%; }
+
+SPAN.headerField
+{ line-height: 2.0em;
+  padding-left: 0.5em; }
 
 DIV#subjectRow INPUT
 { background-image: none;
-  padding-left: 4px; /* offset text input */
-  padding-right: 4px; }
+  width: 60%; }
+
+DIV#subjectRow SPAN.headerField
+{ float: left; }
 
 div#compose_internetmarker
 { padding:          8px;
@@ -46,15 +76,16 @@ div#compose_internetmarker
   border-style:     solid; }
 
 div#headerArea
-{ border-top: 1px solid #fff; }
+{ border-top: 1px solid #fff;
+  padding: 5px 0px; }
 
 div#attachmentsArea
 { display: none;
   float: right;
-  width: 12em;
+  width: 120px;
   height: 100%;
-  margin: 0px;
-  padding-right: 1em;
+  margin: auto;
+  padding-right: 5px;
   padding-left: 5px;
   border-left: 1px solid #888; }
 
diff --git a/UI/WebServerResources/UIxMailEditor.js b/UI/WebServerResources/UIxMailEditor.js
index eef5415f0..080528170 100644
--- a/UI/WebServerResources/UIxMailEditor.js
+++ b/UI/WebServerResources/UIxMailEditor.js
@@ -254,6 +254,9 @@ function initMailEditor() {
   if (listContent.length > 0)
     $("attachmentsArea").setStyle({ display: "block" });
 
+  var list = $("addressList");
+  TableKit.Resizable.init(list, {'trueResize' : true, 'keepWidth' : true});
+
   onWindowResize(null);
   Event.observe(window, "resize", onWindowResize);
   Event.observe(window, "beforeunload", onMailEditorClose);
@@ -314,6 +317,30 @@ function onWindowResize(event) {
   var textarea = document.pageform.text;
   var rowheight = (Element.getHeight(textarea) / textarea.rows);
   var headerarea = $("headerArea");
+  
+  var attachmentsarea = $("attachmentsArea");
+  var attachmentswidth = 0;
+  if (attachmentsarea.style.display) {
+    attachmentswidth = attachmentsarea.getWidth();
+    // Resize of attachment list is b0rken under IE7
+//    fromfield = $(document).getElementsByClassName('headerField',
+//						   headerarea)[0];
+//    $("attachments").setStyle({ height: (headerarea.getHeight() - fromfield.getHeight() - 10) + 'px' });
+  }
+//  var subjectfield = $(document).getElementsByClassName('headerField',
+//							$('subjectRow'))[0];
+//  var subjectinput = $(document).getElementsByClassName('textField',
+//							$('subjectRow'))[0];
+//
+  // Resize subject field
+//  subjectinput.setStyle({ width: (window.width()
+//				  - $(subjectfield).getWidth()
+//				  - attachmentswidth
+//				  - 4 - 30) + 'px' });
+
+  // Resize address fields
+  var addresslist = $('addressList');
+  addresslist.setStyle({ width: ($(this).width() - attachmentswidth - 10) + 'px' });
 
   // Set textarea position
   textarea.setStyle({ 'top': (headerarea.getHeight() + headerarea.offsetTop) + 'px' });
@@ -322,30 +349,6 @@ function onWindowResize(event) {
 
   // Resize the textarea (message content)
   textarea.rows = Math.round((window.height() - textareaoffset) / rowheight);
-  
-  var attachmentsarea = $("attachmentsArea");
-  var attachmentswidth = 0;
-  if (attachmentsarea.style.display)
-    attachmentswidth = attachmentsarea.getWidth();
-  var subjectfield = $(document).getElementsByClassName('headerField',
-							$('subjectRow'))[0];
-  var subjectinput = $(document).getElementsByClassName('textField',
-							$('subjectRow'))[0];
-
-  // Resize subject field
-  subjectinput.setStyle({ width: (window.width()
-				  - $(subjectfield).getWidth()
-				  - attachmentswidth
-				  - 4 - 30) + 'px' });
-
-  // Resize address fields
-  var addresslist = $('addressList');
-  var firstselect = document.getElementsByClassName('headerField', addresslist)[0];
-  var inputwidth = ($(this).width() - $(firstselect).getWidth()
-		    - attachmentswidth - 24 - 30);
-  var addresses = document.getElementsByClassName('textField', addresslist);
-  for (var i = 0; i < addresses.length; i++)
-    addresses[i].setStyle({ width: inputwidth + 'px' });
 }
 
 function onMailEditorClose(event) {
diff --git a/UI/WebServerResources/UIxMailToSelection.js b/UI/WebServerResources/UIxMailToSelection.js
index a0cc0f3a5..8c04320c0 100644
--- a/UI/WebServerResources/UIxMailToSelection.js
+++ b/UI/WebServerResources/UIxMailToSelection.js
@@ -94,7 +94,7 @@ function fancyAddRow(shouldEdit, text) {
       return;
     }
   }
-  addressList = $("addressList");
+  addressList = $("addressList").tBodies[0];
   lastChild = $("lastRow");
   
   currentIndex++;
@@ -104,7 +104,7 @@ function fancyAddRow(shouldEdit, text) {
   row.id = 'row_' + currentIndex;
 
   // select popup
-  var rowNodes = row.childNodesWithTag("span");
+  var rowNodes = row.childNodesWithTag("td");
   select = $(rowNodes[0]).childNodesWithTag("select")[0];
   select.name = 'popup_' + currentIndex;
 //   select.value = row.childNodesWithTag("span")[0].childNodesWithTag("select")[0].value;
@@ -153,7 +153,7 @@ function removeLastEditedRowIfEmpty() {
     var addresses = $('addr_addresses');
     addresses.removeChild(addr);
   }
-  addressList = $("addressList");
+  addressList = $("addressList").tBodies[0];
   senderRow = $("row_" + idx);
   addressList.removeChild(senderRow);
 }