From 24f9f4ef842b1ad38a7094ce0763c21261c937ae Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 10 Sep 2012 17:19:52 +0000
Subject: [PATCH] Improved layout of preferences window.

Monotone-Parent: 7eaed9fd683e2598617632feb838450cca393c9c
Monotone-Revision: 1fbe308ad552ffa7e4c43a1a33f14a64aacf1f62

Monotone-Author: flachapelle@inverse.ca
Monotone-Date: 2012-09-10T17:19:52
Monotone-Branch: ca.inverse.sogo
---
 UI/Templates/PreferencesUI/UIxPreferences.wox | 303 +++++++++---------
 UI/WebServerResources/ContactsUI.css          |  20 +-
 UI/WebServerResources/UIxMailEditor.css       |  11 +-
 UI/WebServerResources/UIxPreferences.css      |  10 +-
 UI/WebServerResources/generic.css             |  40 ++-
 UI/WebServerResources/iefixes.css             |   4 +
 6 files changed, 205 insertions(+), 183 deletions(-)

diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 67b04f350..5ee89fbc5 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -46,96 +46,88 @@
       </ul>
       <div class="tabs">
         <div id="generalView" class="tab">
-          <label><var:string label:value="Language :"/>
-            <var:popup list="languages" item="item"
-              const:id="language"
-              const:name="language"
-              string="languageText" 
-              selection="language"
-              label:noSelectionString="choose" /></label><br/>
-          <label><var:string label:value="Current Time Zone :"/>
-            <var:popup list="timeZonesList" item="item"
-              const:id="timezone"
-              const:name="timezone"
-              string="item" selection="userTimeZone" /></label><br/>
-          <br/>
-          <div id="dateTimeFormat">
-            <label><var:string label:value="Short Date Format :"/>
-              <var:popup list="shortDateFormatsList" item="item"
-                const:id="shortDateFormat"
-                const:name="shortDateFormat"
-                string="itemShortDateFormatText" selection="userShortDateFormat"
-                /></label><br/>
-            <label><var:string label:value="Long Date Format :"/>
-              <var:popup list="longDateFormatsList" item="item"
-                const:id="longDateFormat"
-                const:name="longDateFormat"
-                string="itemLongDateFormatText" selection="userLongDateFormat"
-                /></label><br/>
-            <label><var:string label:value="Time Format :"/>
-              <var:popup list="timeFormatsList" item="item"
-                const:id="timeFormat"
-                const:name="timeFormat"
-                string="itemTimeFormatText" selection="userTimeFormat"
-                /></label><br/>
-            <label><var:string label:value="Default module :"/>
-              <var:popup list="availableModules" item="item"
-                const:id="defaultModule"
-                const:name="defaultModule"
-                string="itemModuleText" selection="userDefaultModule"
-                /></label>
-          </div>
+          <dl class="dl-horizontal">
+            <dt><var:string label:value="Language :"/></dt>
+            <dd><var:popup list="languages" item="item"
+                  const:id="language"
+                  const:name="language"
+                  string="languageText" 
+                  selection="language"
+                  label:noSelectionString="choose" /></dd>
+            <dt><var:string label:value="Current Time Zone :"/></dt>
+            <dd><var:popup list="timeZonesList" item="item"
+                  const:id="timezone"
+                  const:name="timezone"
+                  string="item" selection="userTimeZone" /></dd>
+            <dt><var:string label:value="Short Date Format :"/></dt>
+            <dd><var:popup list="shortDateFormatsList" item="item"
+                  const:id="shortDateFormat"
+                  const:name="shortDateFormat"
+                  string="itemShortDateFormatText" selection="userShortDateFormat"/></dd>
+            <dt><var:string label:value="Long Date Format :"/></dt>
+            <dd><var:popup list="longDateFormatsList" item="item"
+                  const:id="longDateFormat"
+                  const:name="longDateFormat"
+                  string="itemLongDateFormatText" selection="userLongDateFormat"
+                  /></dd>
+            <dt><var:string label:value="Time Format :"/></dt>
+            <dd><var:popup list="timeFormatsList" item="item"
+                  const:id="timeFormat"
+                  const:name="timeFormat"
+                  string="itemTimeFormatText" selection="userTimeFormat"
+                  /></dd>
+            <dt><var:string label:value="Default module :"/></dt>
+            <dd><var:popup list="availableModules" item="item"
+                  const:id="defaultModule"
+                  const:name="defaultModule"
+                  string="itemModuleText" selection="userDefaultModule"/></dd>
+          </dl>
         </div>
         <var:if condition="userHasCalendarAccess">
           <div id="calendarOptionsView" class="tab">
-            <label><var:string label:value="Week begins on :"/>
-              <var:popup list="daysList" item="item"
-                const:id="weekStartDay"
-                const:name="weekStartDay"
-                string="itemWeekStartDay" selection="userWeekStartDay"
-                /></label><br/>
-            <label><var:string label:value="Day start time :"/>
-              <var:popup list="hoursList" item="item"
-                const:id="dayStartTime"
-                const:name="dayStartTime"
-                string="item" selection="userDayStartTime"
-                /></label>
-            <label><var:string label:value="Day end time :"/>
-              <var:popup list="hoursList" item="item"
-                const:id="dayEndTime"
-                const:name="dayEndTime"
-                string="item" selection="userDayEndTime"
-                /></label><br/>
-            <label><input type="checkbox" 
-                const:name="busyOffHours"
-                const:id="busyOffHours"
-                var:checked="busyOffHours" />
-              <var:string label:value="Show time as busy outside working hours"/></label><br/>
-            <label><var:string label:value="First week of year :"/>
-              <var:popup list="firstWeekList" item="item"
-                const:id="firstWeek"
-                const:name="firstWeek"
-                string="itemFirstWeekText" selection="userFirstWeek"
-                /></label><br/>
-            <label><var:string label:value="Default calendar :"/>
-              <var:popup list="defaultCalendarList" item="item"
-                const:id="defaultCalendar"
-                const:name="defaultCalendar"
-                string="itemCalendarText" selection="userDefaultCalendar"
-                /></label><br/>
-
-            <label><var:string label:value="Default events classification :"/>
-              <var:popup list="calendarClassificationsList" item="item"
-                const:id="eventsClassification"
-                const:name="eventsClassification"
-                string="itemClassificationText" selection="eventsDefaultClassification"
-                /></label><br/>
-            <label><var:string label:value="Default tasks classification :"/>
-              <var:popup list="calendarClassificationsList" item="item"
-                const:id="tasksClassification"
-                const:name="tasksClassification"
-                string="itemClassificationText" selection="tasksDefaultClassification"
-                /></label><br/>
+            <dl class="dl-horizontal">
+              <dt><var:string label:value="Week begins on :"/></dt>
+              <dd><var:popup list="daysList" item="item"
+                    const:id="weekStartDay"
+                    const:name="weekStartDay"
+                    string="itemWeekStartDay" selection="userWeekStartDay"/></dd>
+              <dt><var:string label:value="Day start time :"/></dt>
+              <dd><var:popup list="hoursList" item="item"
+                    const:id="dayStartTime"
+                    const:name="dayStartTime"
+                    string="item" selection="userDayStartTime"/></dd>
+              <dt><var:string label:value="Day end time :"/></dt>
+              <dd><var:popup list="hoursList" item="item"
+                    const:id="dayEndTime"
+                    const:name="dayEndTime"
+                    string="item" selection="userDayEndTime"/></dd>
+              <dt></dt>
+              <dd><input type="checkbox" 
+                    const:name="busyOffHours"
+                    const:id="busyOffHours"
+                    var:checked="busyOffHours" />
+                <var:string label:value="Show time as busy outside working hours"/></dd>
+            <dt><var:string label:value="First week of year :"/></dt>
+            <dd><var:popup list="firstWeekList" item="item"
+                  const:id="firstWeek"
+                  const:name="firstWeek"
+                  string="itemFirstWeekText" selection="userFirstWeek"/></dd>
+            <dt><var:string label:value="Default calendar :"/></dt>
+            <dd><var:popup list="defaultCalendarList" item="item"
+                  const:id="defaultCalendar"
+                  const:name="defaultCalendar"
+                  string="itemCalendarText" selection="userDefaultCalendar"/></dd>
+            <dt><var:string label:value="Default events classification :"/></dt>
+            <dd><var:popup list="calendarClassificationsList" item="item"
+                  const:id="eventsClassification"
+                  const:name="eventsClassification"
+                  string="itemClassificationText" selection="eventsDefaultClassification"/></dd>
+            <dt><var:string label:value="Default tasks classification :"/></dt>
+            <dd><var:popup list="calendarClassificationsList" item="item"
+                  const:id="tasksClassification"
+                  const:name="tasksClassification"
+                  string="itemClassificationText" selection="tasksDefaultClassification"/></dd>
+            </dl>
 
             <label><var:string label:value="Categories"/></label>
             <div id="calendarCategoriesListWrapper" class="listWrapper"
@@ -206,46 +198,51 @@
         </div>
         <var:if condition="userHasMailAccess">
           <div id="mailOptionsView" class="tab">
-            <label><input type="checkbox" 
-                const:name="subscribedFoldersOnly"
-                const:id="subscribedFoldersOnly"
-                var:checked="showSubscribedFoldersOnly" />
-              <var:string label:value="Show subscribed mailboxes only"/></label><br/>
-            <label><input type="checkbox" 
-                const:name="sortByThreads"
-                const:id="sortByThreads"
-                var:checked="sortByThreads" />
-              <var:string label:value="Sort messages by threads"/></label><br/>
-            <label><var:string label:value="Check for new mail:"/>
-              <var:popup list="messageCheckList" item="item"
-                const:id="messageCheck"
-                const:name="messageCheck"
-                string="itemMessageCheckText" selection="userMessageCheck"/></label><br/>
-            <label><var:string label:value="Forward messages:"/>
-              <var:popup list="messageForwardingList" item="item"
-                const:id="messageForwarding"
-                const:name="messageForwarding"
-                string="itemMessageForwardingText"
-                selection="userMessageForwarding"/></label><br/>
-            <var:popup list="replyPlacementList" item="item"
-              const:id="replyPlacementList"
-              const:name="replyPlacementList"
-              string="itemReplyPlacementText"
-              selection="userReplyPlacement"/>
-            <br /><label><var:string label:value="And place my signature"/></label>
-            <var:popup list="signaturePlacementList" item="item"
-              const:id="signaturePlacementList"
-              const:name="signaturePlacementList"
-              string="itemSignaturePlacementText"
-              selection="userSignaturePlacement"/>
-            <br /><label><var:string label:value="Compose messages in"/></label>
-            <var:popup list="composeMessagesType" item="item"
-              const:id="composeMessagesType"
-              const:name="composeMessagesType"
-              string="itemComposeMessagesText"
-              selection="userComposeMessagesType"/>
+            <dl class="dl-horizontal">
+              <dt></dt>
+              <dd><input type="checkbox" 
+                    const:name="subscribedFoldersOnly"
+                    const:id="subscribedFoldersOnly"
+                    var:checked="showSubscribedFoldersOnly" />
+                  <var:string label:value="Show subscribed mailboxes only"/></dd>
+              <dt></dt>
+              <dd><input type="checkbox" 
+                    const:name="sortByThreads"
+                    const:id="sortByThreads"
+                    var:checked="sortByThreads" />
+                  <var:string label:value="Sort messages by threads"/></dd>
+              <dt><var:string label:value="Check for new mail:"/></dt>
+              <dd><var:popup list="messageCheckList" item="item"
+                    const:id="messageCheck"
+                    const:name="messageCheck"
+                    string="itemMessageCheckText" selection="userMessageCheck"/></dd>
+              <dt><var:string label:value="Forward messages:"/></dt>
+              <dd><var:popup list="messageForwardingList" item="item"
+                    const:id="messageForwarding"
+                    const:name="messageForwarding"
+                    string="itemMessageForwardingText"
+                    selection="userMessageForwarding"/></dd>
+              <dt></dt>
+              <dd><var:popup list="replyPlacementList" item="item"
+                    const:id="replyPlacementList"
+                    const:name="replyPlacementList"
+                    string="itemReplyPlacementText"
+                    selection="userReplyPlacement"/></dd>
+              <dt><var:string label:value="And place my signature"/></dt>
+              <dd><var:popup list="signaturePlacementList" item="item"
+                    const:id="signaturePlacementList"
+                    const:name="signaturePlacementList"
+                    string="itemSignaturePlacementText"
+                    selection="userSignaturePlacement"/></dd>
+              <dt><var:string label:value="Compose messages in"/></dt>
+              <dd><var:popup list="composeMessagesType" item="item"
+                    const:id="composeMessagesType"
+                    const:name="composeMessagesType"
+                    string="itemComposeMessagesText"
+                    selection="userComposeMessagesType"/></dd>
+            </dl>
             <var:if condition="isSieveScriptsEnabled"
-              ><br/><label><var:string label:value="Filters"/></label>
+              ><label><var:string label:value="Filters"/></label>
               <script type="text/javascript">
                 var sieveCapabilities = <var:string value="sieveCapabilities" const:escapeHTML="NO"/>;
               </script>
@@ -300,23 +297,24 @@
             </var:if>
             <div id="mailAccountEditor">
               <fieldset const:id="accountInfo">
-                <label><var:string label:value="Server Name:"/>
-                  <input const:name="serverName" const:id="serverName" type="text" const:value=""/></label>
-                <label><var:string label:value="Port:"/>
-                  <input const:name="port" const:id="port" type="text" const:value=""/></label><br/>
-                <label><var:string label:value="Encryption:"/>
-                  <input const:name="encryption" type="radio" const:value="none"/>
-                  <var:string label:value="None"/>
-                  <input const:name="encryption" type="radio" const:value="ssl"/>
-                  <var:string label:value="SSL"/>
-                  <input const:name="encryption" type="radio" const:value="tls"/>
-                  <var:string label:value="TLS"/></label><br/>
-                <label><var:string label:value="User Name:"/>
-                  <input const:name="userName" const:id="userName" type="text" const:value=""/></label><br/>
-                <label><var:string label:value="Password:"/>
-                  <input const:name="password" const:id="password" type="password" const:value=""/></label>
-
-                  <input const:name="encryption" type="hidden" const:value="none"/>
+                <dl class="dl-horizontal">
+                  <dt><var:string label:value="Server Name:"/></dt>
+                  <dd><input const:name="serverName" const:id="serverName" type="text" const:value=""/>
+                      <var:string label:value="Port:"/>
+                      <input const:name="port" const:id="port" type="text" const:value=""/></dd>
+                  <dt><var:string label:value="Encryption:"/></dt>
+                  <dd><input const:name="encryption" type="radio" const:value="none"/>
+                      <var:string label:value="None"/>
+                      <input const:name="encryption" type="radio" const:value="ssl"/>
+                      <var:string label:value="SSL"/>
+                      <input const:name="encryption" type="radio" const:value="tls"/>
+                      <var:string label:value="TLS"/></dd>
+                  <dt><var:string label:value="User Name:"/></dt>
+                  <dd><input const:name="userName" const:id="userName" type="text" const:value=""/></dd>
+                  <dt><var:string label:value="Password:"/></dt>
+                  <dd><input const:name="password" const:id="password" type="password" const:value=""/></dd>
+                </dl>
+                <input const:name="encryption" type="hidden" const:value="none"/>
               </fieldset>
 
               <script type="text/javascript">
@@ -324,15 +322,16 @@
               </script>
 
               <fieldset const:id="identityInfo">
-                <label><var:string label:value="Full Name:"/>
-                  <input const:name="fullName" const:id="fullName" type="text" const:value=""
-                    /></label><br/>
-                <label><var:string label:value="Email:"/>
-                  <input const:name="email" const:id="email" type="text" const:value=""/></label><br/>
-                <label><var:string label:value="Reply To Email:"/>
-                  <input const:name="replyTo" const:id="replyTo" type="text" const:value=""/></label><br/>
-                <label><var:string label:value="Signature:"/>
-                  <span id="actSignature"><!--space --></span></label>
+                <dl class="dl-horizontal">
+                  <dt><var:string label:value="Full Name:"/></dt>
+                  <dd><input const:name="fullName" const:id="fullName" type="text" const:value=""/></dd>
+                  <dt><var:string label:value="Email:"/></dt>
+                  <dd><input const:name="email" const:id="email" type="text" const:value=""/></dd>
+                  <dt><var:string label:value="Reply To Email:"/></dt>
+                  <dd><input const:name="replyTo" const:id="replyTo" type="text" const:value=""/></dd>
+                  <dt><var:string label:value="Signature:"/></dt>
+                  <dd><span id="actSignature"><!--space --></span></dd>
+                </dl>
               </fieldset>
 
               <fieldset const:id="returnReceiptsInfo">
diff --git a/UI/WebServerResources/ContactsUI.css b/UI/WebServerResources/ContactsUI.css
index cd96646f7..8b733608c 100644
--- a/UI/WebServerResources/ContactsUI.css
+++ b/UI/WebServerResources/ContactsUI.css
@@ -259,38 +259,20 @@ DIV.contactColumn H4
   width: 100%;
   padding: .1em .2em; }
 
-dt, dd {
-  line-height: 14px;
-}
-
 dt {
   color: #666;
   line-height: 13px;
 }
 dd {
-  margin-left: 9px;
+  line-height: 14px;
 }
 .dl-horizontal dt {
-  float: left;
   width: 100px;
-  overflow: hidden;
-  clear: left;
-  text-align: right;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 .dl-horizontal dd {
   margin-left: 110px;
 }
 
-.dl-horizontal ul {
-  list-style-type: none;
-  margin: 0px;
-  padding-left: 0px;
-}
-.dl-horizontal li {
-  margin-left: 0;
-}
 SPAN.photoFrame
 { cursor: pointer;
   float: left;
diff --git a/UI/WebServerResources/UIxMailEditor.css b/UI/WebServerResources/UIxMailEditor.css
index bb3374a7b..f880a9d8e 100644
--- a/UI/WebServerResources/UIxMailEditor.css
+++ b/UI/WebServerResources/UIxMailEditor.css
@@ -157,11 +157,12 @@ UL#attachments
   margin: 0px;
   padding: 0px;
   height: 100%;
-  border-bottom: 1px solid #fff;
-  border-right: 1px solid #fff;
-  border-top: 2px solid #222;
-  border-left: 2px solid #222;
-  background-color: #fff;
+  border-bottom: 1px solid #eee;
+  border-right: 1px solid #eee;
+  border-top: 1px solid #222;
+  border-left: 1px solid #222;
+  background-color: #CCDDEC;
+  background-image: url("input_bg.gif");
   -moz-border-top-colors: #9c9a94 #000 transparent;
   -moz-border-left-colors: #9c9a94 #000 transparent;
   list-style-type: none;
diff --git a/UI/WebServerResources/UIxPreferences.css b/UI/WebServerResources/UIxPreferences.css
index 7a24fdf14..f8eceeaa8 100644
--- a/UI/WebServerResources/UIxPreferences.css
+++ b/UI/WebServerResources/UIxPreferences.css
@@ -49,7 +49,7 @@ DIV.listWrapper
   background: #ccddec;}
 
 #calendarCategoriesListWrapper
-{ top: 170px;
+{ top: 210px;
   bottom: 30px;
   right: 2em;
   left: 2em; }
@@ -106,7 +106,7 @@ SPAN.timeDateControl SPAN
 DIV#filtersListWrapper
 { bottom: 30px;
   right: 2em;
-  top: 174px;
+  top: 185px;
   left: 2em; }
 
 DIV#filtersListWrapper TD,
@@ -149,9 +149,11 @@ P.infoMessage#passwordError
   bottom: 30px;
   left: 140px;
   padding: 0px;
-  padding-top: 5px;
   right: 5px; }
 
+#mailAccountEditor dl
+{ margin: 5px; }
+
 #mailAccountsListWrapper
 { overflow-x: hidden;
   left: 5px;
@@ -186,7 +188,7 @@ P.infoMessage#passwordError
 #userName, #password
 { width: 180px; }
 
-#fullName, #email
+#fullName, #email, #replyTo
 { width: 180px; }
 
 #actSignature
diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css
index f5597e9d4..6897de86a 100644
--- a/UI/WebServerResources/generic.css
+++ b/UI/WebServerResources/generic.css
@@ -18,7 +18,10 @@ BODY
   overflow: hidden; }
 
 HR
-{ height: 0px; }
+{ height: 0;
+border: 0;
+border-top: 1px solid #ddd;
+border-bottom: 1px solid #eee; }
 
 TABLE, DIV, IMG
 { font-family: inherit;
@@ -28,7 +31,7 @@ TABLE, DIV, IMG
   padding: 0px; }
 
 FIELDSET
-{ border: 1px solid #999;
+{ border: 1px solid #aaa;
   margin-bottom: 2px; }
 
 IMG#progressIndicator
@@ -191,6 +194,8 @@ SELECT
   margin: 2px;
   padding-right: 1px;
   background-color: #CCDDEC;
+  border: 1px solid #999;
+  border-radius: 4px;
   color: #262B33; }
 
 DIV.contactSelector DIV.contactList
@@ -684,9 +689,10 @@ INPUT[disabled], INPUT[readonly],
 SELECT[disabled], SELECT[readonly],
 TEXTAREA[disabled], TEXTAREA[readonly]
 { background: #E6E7E6;
+  border-color: #ccc;
   color: #9ABCD8; }
 
-INPUT[type="text"], INPUT[type="password"], INPUT[type="file"]
+INPUT[type="text"], INPUT[type="password"], INPUT[type="file"], TEXTAREA
 { background: url("input_bg.gif"); }
 
 TEXTAREA
@@ -782,6 +788,34 @@ A.disabled.button:active SPAN
 { background-position: top left;
   padding: 5px 2px 5px 5px; }
 
+dt, dd {
+  line-height: 20px;
+}
+dd {
+  margin-left: 9px;
+}
+.dl-horizontal dt {
+  float: left;
+  width: 150px;
+  overflow: hidden;
+  clear: left;
+  text-align: right;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.dl-horizontal dd {
+  margin-left: 160px;
+}
+
+.dl-horizontal ul {
+  list-style-type: none;
+  margin: 0px;
+  padding-left: 0px;
+}
+.dl-horizontal li {
+  margin-left: 0;
+}
+
 /* Frames */
 TABLE.frame,
 TABLE.framenocaption
diff --git a/UI/WebServerResources/iefixes.css b/UI/WebServerResources/iefixes.css
index a38507ed3..3c1b94ea4 100644
--- a/UI/WebServerResources/iefixes.css
+++ b/UI/WebServerResources/iefixes.css
@@ -215,6 +215,10 @@ DIV#uploadResults P
 DIV#filtersListWrapper
 { overflow-x: hidden; }
 
+dl.dl-horizontal
+{ margin-top: 2px;
+  margin-bottom: 2px; }
+
 TABLE#filtersList
 { width: auto; }