From 697a49750b0205d442abf8e4d42f186f3240e45a Mon Sep 17 00:00:00 2001
From: Wolfgang Sourdeau <wsourdeau@inverse.ca>
Date: Wed, 20 Sep 2006 17:55:26 +0000
Subject: [PATCH] Monotone-Parent: bdbae1df701b51a7f884e9fc02afd8c51181aab1
 Monotone-Revision: 6e4db4faadb29401ffefc8e973c9043c4187f29c

Monotone-Author: wsourdeau@inverse.ca
Monotone-Date: 2006-09-20T17:55:26
Monotone-Branch: ca.inverse.sogo
---
 ChangeLog                               |   3 +
 UI/Templates/MailerUI/UIxMailEditor.wox | 108 +++++++++---------------
 UI/WebServerResources/UIxMailEditor.css |  66 +++++++++------
 3 files changed, 80 insertions(+), 97 deletions(-)

diff --git a/ChangeLog b/ChangeLog
index 54fa5e135..6dcaa2635 100644
--- a/ChangeLog
+++ b/ChangeLog
@@ -1,5 +1,8 @@
 2006-09-20  Wolfgang Sourdeau  <wsourdeau@inverse.ca>
 
+	* UI/Templates/MailerUI/UIxMailEditor.wox: arranged the message
+	header fields by converting the tables to DIVs and SPANs.
+
 	* UI/WebServerResources/generic.css: attempted unification of font
 	families and size across all the elements. changed the
 	logConsole's "position" from "fixed" to "absolute" to avoid
diff --git a/UI/Templates/MailerUI/UIxMailEditor.wox b/UI/Templates/MailerUI/UIxMailEditor.wox
index cce341dda..b77237b6c 100644
--- a/UI/Templates/MailerUI/UIxMailEditor.wox
+++ b/UI/Templates/MailerUI/UIxMailEditor.wox
@@ -11,79 +11,49 @@
     const:popup="YES"
     >
     <div id="compose_panel">
-      <var:if condition="showInternetMarker">
-        <div id="compose_internetmarker">
-          <var:string
-            label:value="This mail is being sent from an unsecure network!" />
-        </div>
-      </var:if>
-      <table id="compose_table">
-        <tr>
-          <td id="compose_leftside" var:style="initialLeftsideStyle">
-            <div id="compose_fromline">
-              <table>
-                <tr>
-                  <td class="compose_label" width="20%">
-                    <var:string label:value="From" />:
-                  </td>
-                  <td width="80%">
-                    <var:popup const:name="from" list="fromEMails" item="item"
-                      selection="from"
-                      const:style="width: 100%;"
-                      />
-                  </td>
-                </tr>
-            </table>
-            </div>
-            
-            <div id="compose_toselection">
-	      <var:component className="UIxMailToSelection"
-                to="to"
-                cc="cc"
-                bcc="bcc"
-                />
-            </div>
-            <!-- moved below to selection to make it look better -->
-            <div id="compose_subject">
-              <table>
-                <tr>
-                  <td class="compose_label" width="20%">
-                    <var:string label:value="Subject" />:
-                  </td>
-                  <td width="80%"><input name="subject"
-                      id="compose_subject_input"
-                      type="text"
-                      var:value="subject"
-                      /></td>
-                </tr>
-              </table>
-            </div>
-          </td>
-          <td id="compose_rightside" var:style="initialRightsideStyle">
-            <div id="compose_attachments">
-              <div id="compose_attachments_header">  
-                <span class="compose_label"
-                  ><var:string label:value="Attachments" />:</span>
+      <div id="attachmentsArea">
+        <var:string label:value="Attachments" />
                 <!--<a href="#"
                 onclick="hideInlineAttachmentList(this);"
                 ><var:string label:value="close" /></a>-->
-              </div>
-              <div id="compose_attachments_list"
-                onclick="clickedEditorAttach(this);"
-                >
-                <var:foreach list="attachmentNames" item="attachmentName">
-                  <var:string value="attachmentName" /><br />
-                </var:foreach>
-              </div>
-            </div>
-          </td>
-        </tr>
-      </table>
-      <!-- separator line -->
-      <div id="compose_text">
-        <textarea name="content" var:value="text" />
+        <div id="compose_attachments_list"
+          onclick="clickedEditorAttach(this);"
+          ><var:foreach list="attachmentNames" item="attachmentName">
+            <var:string value="attachmentName" /><br />
+          </var:foreach>
+        </div>
       </div>
-
+      <div id="headerArea">
+        <var:if condition="showInternetMarker">
+          <div id="compose_internetmarker">
+            <var:string
+              label:value="This mail is being sent from an unsecure network!" />
+          </div>
+        </var:if>
+        <span class="headerField"
+          ><var:string label:value="From"
+            />:</span
+          ><var:popup const:name="from"
+          list="fromEMails"
+          item="item"
+          selection="from"
+          /><br />
+        <var:component className="UIxMailToSelection"
+          to="to"
+          cc="cc"
+          bcc="bcc"
+          />
+        <span class="headerField"
+          ><var:string label:value="Subject"
+            />:</span><input name="subject"
+            id="compose_subject_input"
+            type="text"
+            class="textField"
+            var:value="subject"
+            /><br />
+      </div>
+      <!-- separator line -->
+      <textarea name="content" var:value="text" />
       <!-- img rsrc:src="tbird_073_compose.png" alt="screenshot" / -->
     </div>
   </var:component>
diff --git a/UI/WebServerResources/UIxMailEditor.css b/UI/WebServerResources/UIxMailEditor.css
index 79ca53050..517712701 100644
--- a/UI/WebServerResources/UIxMailEditor.css
+++ b/UI/WebServerResources/UIxMailEditor.css
@@ -3,6 +3,17 @@
 div#compose_panel div table {
   padding: 2px;
 }
+
+TABLE#compose_table, TABLE#compose_table DIV
+{ 
+  width: 100%;
+}
+
+TABLE#compose_label
+{
+  text-align: right;
+}
+
 table#compose_table {
   border-bottom-color: #808080;
   border-bottom-width: 1;
@@ -29,13 +40,29 @@ div#compose_internetmarker {
   border-width:     2px;
   border-style:     solid;
 }
-div#compose_attachments {
-    padding-top: 4px;
-  padding-right: 10px;
-}
+
+div#headerArea
+{ margin-right: 10em; }
+
+div#headerArea INPUT
+{ width: 35em; }
+
+div#attachmentsArea
+{ float: right;
+  width: 8em;
+  height: 2em;
+  padding-right: 1em; }
+
+SPAN.headerField
+{ display: block;
+  float: left;
+  line-height: 1.8em;
+  width: 5em;
+  text-align: right; }
+
 div#compose_attachments_list  {
   width:            100%;
-  height:           100px;
+  height:           6em;
   background-color: #FFFFFF;
   margin-left:      0px;
   padding:          2px;
@@ -44,26 +71,9 @@ div#compose_attachments_list  {
   border-style:     solid;
 }
 
-div#compose_subject { 
-/*   border-bottom-color: #808080;
-  border-bottom-width: 1;
-  border-bottom-style: solid;
- */}
-div#compose_text { 
-  border-top-color:    white;
-  border-top-width:    1;
-  border-top-style:    solid;
-}
-
-input#compose_subject_input {
-  width:     100%;
-}
-
-.compose_label { 
-  text-align: left;
-}
-
-div#compose_text textarea { 
-  width:  100%;
-  height: 280px;
-}
+TEXTAREA
+{ position: absolute;
+  left: .5em;
+  right: .5em;
+  bottom: .5em;
+  height: 280px; }