From 96f023d108c3304393f30436f93ac81b321cc968 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 29 Nov 2012 14:00:10 -0500
Subject: [PATCH] Mail: Improve iCal viewer

---
 .../MailPartViewers/UIxMailPartICalViewer.wox | 78 ++++++++-----------
 UI/WebServerResources/MailerUI.css            |  5 +-
 2 files changed, 34 insertions(+), 49 deletions(-)

diff --git a/UI/Templates/MailPartViewers/UIxMailPartICalViewer.wox b/UI/Templates/MailPartViewers/UIxMailPartICalViewer.wox
index 9bfaad5db..12fca2152 100644
--- a/UI/Templates/MailPartViewers/UIxMailPartICalViewer.wox
+++ b/UI/Templates/MailPartViewers/UIxMailPartICalViewer.wox
@@ -193,62 +193,46 @@
       </var:if>
       
       <div class="linked_attachment_meta" style="background-color: white;">
-	<table border="0" class="linked_attachment_meta">
-	  <tr>
-	    <td><var:string label:value="Time"/>:</td>
-	    <td>
-	      <!-- TODO: we need a better viewer for that -->
-	      <var:string value="startDate" /> 
-	      <var:if condition="inEvent.isAllDay" const:negate="YES">
-		<var:string value="startTime" />
-	      </var:if>
-	      <var:if condition="isEndDateOnSameDay">
-		<var:if condition="inEvent.isAllDay" const:negate="YES">
-		  <var:string label:value="to" />
-		  <var:string value="endTime" />
-		</var:if>
-	      </var:if>
-	      <var:if condition="isEndDateOnSameDay" const:negate="YES">
-		<var:string label:value="to" />
-		<var:string value="endDate" />
-		<var:if condition="inEvent.isAllDay" const:negate="YES">
-		  <var:string value="endTime" />
-		</var:if>
-	      </var:if>
-	    </td>
-	  </tr>
+        <dl id="iCalAttendees" class="dl-horizontal">
+          <dt><var:string label:value="Time"/>:</dt>
+          <dd><var:string value="startDate" />
+            <var:if condition="inEvent.isAllDay" const:negate="YES">
+              <var:string value="startTime" />
+            </var:if>
+            <var:if condition="isEndDateOnSameDay">
+              <var:if condition="inEvent.isAllDay" const:negate="YES">
+                <var:string label:value="to" />
+                <var:string value="endTime" />
+              </var:if>
+            </var:if>
+            <var:if condition="isEndDateOnSameDay" const:negate="YES">
+              <var:string label:value="to" />
+              <var:string value="endDate" />
+              <var:if condition="inEvent.isAllDay" const:negate="YES">
+                <var:string value="endTime" />
+              </var:if>
+            </var:if>
+          </dd>
 
-	  <tr>
-	    <td><var:string label:value="Organizer"/>:</td>
-	    <td>
-	      <a var:href="authorativeEvent.organizer.email"
+          <dt><var:string label:value="Organizer"/>:</dt>
+          <dd><a var:href="authorativeEvent.organizer.email"
 		><var:string value="organizerDisplayName" /></a>
-	    </td>
-	  </tr>
-	  
-	  <tr>
-	    <td valign="top"><var:string label:value="Attendees"/>:</td>
-	    <td id="iCalAttendees">
+          </dd>
+          <dt><var:string label:value="Attendees"/>:</dt>
 	      <var:foreach list="authorativeEvent.participants" item="attendee">
-		<var:if condition="attendee.delegatedTo" const:negate="YES"><!-- don't show attendees that delegated the invitation --><span var:class="currentAttendeeClass"
+		<var:if condition="attendee.delegatedTo" const:negate="YES"><!-- don't show attendees that delegated the invitation -->                 <dd><span var:class="currentAttendeeClass"
                     ><div class="status-icon"><!-- space --></div
                       ><a var:href="attendee.email">
 		  <var:string value="attendeeForDisplay"/></a>
 		(<var:string label:value="$attendee.partStatWithDefault" /><var:if condition="attendee.delegatedTo"> <var:string label:value="to" /> <var:string value="attendee.delegatedTo.rfc822Email" /></var:if><var:if condition="attendee.delegatedFrom.length">, <var:string label:value="delegated from" /> <var:string value="attendee.delegatedFrom.rfc822Email" /></var:if>)</span>
-		<br /></var:if>
+              </dd></var:if>
 	      </var:foreach>
-	    </td>
-	  </tr>
 
-	  <var:if condition="authorativeEvent.comment.isNotEmpty">
-	    <tr> <!-- description in iCal -->
-	      <td valign="top"><var:string label:value="Comment"/>:</td>
-	      <td>
-		<var:string value="authorativeEvent.comment" const:insertBR="1" />
-	      </td>
-	    </tr>
-	  </var:if>
-	</table>
+          <var:if condition="authorativeEvent.comment.isNotEmpty">
+          <dt><var:string label:value="Comment"/>:</dt>
+          <dd><var:string value="authorativeEvent.comment" const:insertBR="1" /></dd>
+          </var:if>
+	</dl>
       </div>
     </fieldset>
   </var:if><!-- could parse -->
diff --git a/UI/WebServerResources/MailerUI.css b/UI/WebServerResources/MailerUI.css
index d182c4213..670866aab 100644
--- a/UI/WebServerResources/MailerUI.css
+++ b/UI/WebServerResources/MailerUI.css
@@ -625,7 +625,6 @@ DIV.linked_attachment_body
 DIV.linked_attachment_meta
 {
   color: #444444;
-  font-style: italic;
   border-width: 0;
   padding: 2px;
 }
@@ -633,7 +632,6 @@ DIV.linked_attachment_meta
 TABLE.linked_attachment_meta
 {
   color: #444444;
-  font-style: italic;
 }
 
 DIV.linked_attachment_body HR
@@ -854,6 +852,9 @@ TR#messageCountHeader TD
 #iCalAttendees
 { padding: 0; }
 
+#iCalAttendees dt
+{ font-weight: bold; }
+
 #iCalAttendees SPAN
 { line-height: 19px; }