From 616ee7c6e4d42ad8258c66eed11446a48981fba1 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Wed, 13 Nov 2013 14:46:08 -0500
Subject: [PATCH] GUI changes for mail labels management

---
 NEWS                                          |  12 +-
 UI/Templates/MailerUI/UIxMailMainFrame.wox    |  10 +-
 UI/Templates/PreferencesUI/UIxPreferences.wox | 159 ++++++++++--------
 .../SchedulerUI/UIxCalendarSelector.wox       |  13 +-
 UI/WebServerResources/MailerUI.css            |  35 ----
 UI/WebServerResources/SOGoTabsController.js   |   9 +-
 UI/WebServerResources/SchedulerUI.css         |  14 +-
 UI/WebServerResources/SchedulerUI.js          |   9 +-
 UI/WebServerResources/UIxPreferences.css      |  39 +++--
 UI/WebServerResources/UIxPreferences.js       | 144 ++++++++--------
 UI/WebServerResources/generic.css             |  17 +-
 UI/WebServerResources/iefixes.css             |   7 +
 12 files changed, 246 insertions(+), 222 deletions(-)

diff --git a/NEWS b/NEWS
index 0d9ca6137..e5c0885ff 100644
--- a/NEWS
+++ b/NEWS
@@ -1,3 +1,13 @@
+2.1.1 (2013-MM-DD)
+------------------
+
+New features
+ - creation and modification of mail labels
+
+Enhancements
+
+Bug fixes
+
 2.1.0 (2013-11-07)
 ------------------
 
@@ -32,7 +42,7 @@ Bug fixes
  - fixed S/MIME verification issues with certain OpenSSL versions
  - worked around an issue with chunked encoding of CAS replies (#2408)
  - fixed OpenChange corruption issue regarding predecessors change list (#2405)
- - avoid unnecessary UTF-7 conversions (#2318) 
+ - avoid unnecessary UTF-7 conversions (#2318)
  - improved RTF parser to fix vCards (#2354)
  - fixed definition of the COMPLETED attribute of vTODO (#2240)
  - fixed DAV:resource-id property when sharing calendars (#2399)
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 16df83d6a..809c19303 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -17,9 +17,15 @@
   </script>
   <style type="text/css">
   <var:foreach list="availableLabels" item="currentLabel">
-    #label-menu LI.<var:string value="currentLabel.name"/>
+    #label-menu LI.<var:string value="currentLabel.name"/>,
+    TABLE.messageList TR[labels~=<var:string const:value='"' const:escapeHTML="NO"
+    /><var:string value="currentLabel.name"/><var:string const:value='"' const:escapeHTML="NO"/>] TD
     { color: <var:string value="currentLabel.color"/>; }
-  </var:foreach>  
+    TABLE.messageList TR[labels~=<var:string const:value='"' const:escapeHTML="NO"
+    /><var:string value="currentLabel.name"/><var:string const:value='"' const:escapeHTML="NO"/>]._selected TD
+    { color: #fff;
+      background-color: <var:string value="currentLabel.color"/> !important; }
+  </var:foreach>
   <var:if condition="horizontalDragHandleStyle">
     DIV#verticalDragHandle, DIV#rightPanel
      { left: <var:string value="horizontalDragHandleStyle" />; }
diff --git a/UI/Templates/PreferencesUI/UIxPreferences.wox b/UI/Templates/PreferencesUI/UIxPreferences.wox
index 4963313ce..ec3824f31 100644
--- a/UI/Templates/PreferencesUI/UIxPreferences.wox
+++ b/UI/Templates/PreferencesUI/UIxPreferences.wox
@@ -248,77 +248,89 @@
                     string="itemDisplayRemoteInlineImagesText"
                     selection="userDisplayRemoteInlineImages"/></dd>
             </dl>
-            <var:if condition="isSieveScriptsEnabled"
-              ><label><var:string label:value="Filters"/></label>
-              <script type="text/javascript">
-                var sieveCapabilities = <var:string value="sieveCapabilities" const:escapeHTML="NO"/>;
-              </script>
-              <div id="filtersListWrapper" class="listWrapper"
-                ><table id="filtersList" cellspacing="0">
-                  <thead>
-                    <tr class="tableview"
-                      ><th const:class="tbtv_headercell" const:id="nameTableHeader"
-                        ><var:string label:value="Name" /></th
-                        ><th const:class="tbtv_headercell" const:id="activeTableHeader"
-                        ><var:string label:value="Active" /></th
-                        ></tr
-                      ></thead>
-                  <tbody><!--space --></tbody>
-                </table>
-                <input type="hidden" const:name="sieveFilters" const:id="sieveFilters"
-                  var:value="sieveFiltersValue"/>
-              </div>
-              <div class="bottomToolbar">
-                <a const:id="filterAdd" class="bottomButton" href="#">
-                  <span><img rsrc:src="add-icon.png" label:title="Add" />
-                  </span></a>
-                <a const:id="filterDelete" class="bottomButton" href="#">
-                  <span><img rsrc:src="remove-icon.png" label:title="Delete" />
-                  </span></a>
-                <a const:id="filterMoveUp" class="bottomButton" href="#">
-                  <span><img rsrc:src="up-icon.png" label:title="Move Up" />
-                  </span></a>
-                <a const:id="filterMoveDown" class="bottomButton" href="#">
-                  <span><img rsrc:src="down-icon.png" label:title="Move Down" />
-                  </span></a>
-              </div>
-            </var:if>
 
-            <label><var:string label:value="Labels"/></label>
-            <div id="mailLabelsListWrapper" class="listWrapper"
-              ><table class="labelsList" cellspacing="0">
-                <thead>
-                  <tr class="tableview"
-                    ><th const:class="tbtv_headercell" const:id="labelTableHeader"
-                      ><var:string label:value="Label"/></th
-                      ><th const:class="tbtv_headercell" const:id="colorTableHeader"
-                      ><var:string label:value="Color"/></th
-                      ></tr
-                    ></thead>
-                <tbody>
-                  <var:foreach list="mailLabelList" item="label">
-                    <tr var:data-name="label.name" const:class="labelListRow"
-                      ><td const:class="labelListCell"
-                        ><var:string var:value="label.label"/></td
-                        ><td const:class="labelListCell"
-                        ><div const:class="colorBox"><var:string var:value="label.color"
-                            /></div></td
-                        ></tr>
-                  </var:foreach>
-                </tbody>
-              </table>
-            </div>
-            <div class="bottomToolbar">
-              <a const:id="mailLabelAdd" class="bottomButton" href="#">
-                <span><img rsrc:src="add-icon.png" label:title="Add" />
-              </span></a>
-              <a const:id="mailLabelDelete" class="bottomButton" href="#">
-                <span><img rsrc:src="remove-icon.png" label:title="Delete" />
-              </span></a>
-            </div>
-            <input type="hidden" const:id="mailLabelsValue" 
-                   const:name="mailLabelsValue" var:value="mailLabelsValue"/>
-          </div>
+            <div class="tabsContainer" id="mailOptionsTabs">
+              <ul>
+                <var:if condition="isSieveScriptsEnabled"
+                ><li target="mailFiltersView"><span><var:string
+                      label:value="Filters"/></span></li
+                ></var:if>
+                <li target="mailLabelsView"><span><var:string
+                      label:value="Labels"/></span></li>
+              </ul>
+              <div class="tabs">
+                <var:if condition="isSieveScriptsEnabled"
+                ><div id="mailFiltersView" class="tab">
+                  <script type="text/javascript">
+                    var sieveCapabilities = <var:string value="sieveCapabilities" const:escapeHTML="NO"/>;
+                  </script>
+                  <div id="filtersListWrapper" class="listWrapper">
+                    <table id="filtersList" cellspacing="0">
+                      <thead>
+                        <tr class="tableview">
+                          <th const:class="tbtv_headercell" const:id="nameTableHeader"
+                              ><var:string label:value="Name" /></th>
+                          <th const:class="tbtv_headercell" const:id="activeTableHeader"
+                              ><var:string label:value="Active" /></th>
+                        </tr>
+                      </thead>
+                      <tbody><!--space --></tbody>
+                    </table>
+                    <input type="hidden" const:name="sieveFilters" const:id="sieveFilters"
+                           var:value="sieveFiltersValue"/>
+                  </div><!-- #filtersListWrapper -->
+                  <div class="bottomToolbar">
+                    <a const:id="filterAdd" class="bottomButton" href="#">
+                      <span><img rsrc:src="add-icon.png" label:title="Add" /></span></a>
+                    <a const:id="filterDelete" class="bottomButton" href="#">
+                      <span><img rsrc:src="remove-icon.png" label:title="Delete" /></span></a>
+                    <a const:id="filterMoveUp" class="bottomButton" href="#">
+                      <span><img rsrc:src="up-icon.png" label:title="Move Up" /></span></a>
+                    <a const:id="filterMoveDown" class="bottomButton" href="#">
+                      <span><img rsrc:src="down-icon.png" label:title="Move Down" /></span></a>
+                  </div><!-- .bottomToolbar -->
+                </div
+                ></var:if><!-- #mailFiltersView -->
+
+                <div id="mailLabelsView" class="tab">
+                  <div id="mailLabelsListWrapper" class="listWrapper">
+                    <table id="labelsList" cellspacing="0">
+                      <thead>
+                        <tr class="tableview">
+                          <th const:class="tbtv_headercell" const:id="labelTableHeader"
+                              ><var:string label:value="Label"/></th>
+                          <th const:class="tbtv_headercell" const:id="colorTableHeader"
+                              ><var:string label:value="Color"/></th>
+                        </tr>
+                      </thead>
+                      <tbody>
+                        <var:foreach list="mailLabelList" item="label"
+                        ><tr var:data-name="label.name" const:class="labelListRow">
+                          <td const:class="labelListCell"
+                              ><var:string var:value="label.label"/></td>
+                          <td const:class="labelListCell">
+                            <div const:class="colorBox"><var:string var:value="label.color"
+                            /></div>
+                          </td>
+                        </tr>
+                        </var:foreach>
+                      </tbody>
+                    </table>
+                  </div><!-- #mailLabelsListWrapper -->
+                  <div class="bottomToolbar">
+                    <a const:id="mailLabelAdd" class="bottomButton" href="#">
+                      <span><img rsrc:src="add-icon.png" label:title="Add" />
+                    </span></a>
+                    <a const:id="mailLabelDelete" class="bottomButton" href="#">
+                      <span><img rsrc:src="remove-icon.png" label:title="Delete" />
+                    </span></a>
+                  </div><!-- .bottomToolbar -->
+                  <input type="hidden" const:id="mailLabelsValue"
+                         const:name="mailLabelsValue" var:value="mailLabelsValue"/>
+                </div><!-- #mailLabelsView -->
+              </div><!-- .tabs -->
+            </div><!-- #mailOptionsTabs -->
+          </div><!-- #mailOptionsView -->
 
           <div id="mailAccountsView" class="tab">
             <input type="hidden" const:name="mailAccountsJSON" const:id="mailAccountsJSON"
@@ -492,12 +504,11 @@
                     const:id="forwardKeepCopy"
                     var:checked="forwardKeepCopy" />
                   <var:string label:value="Keep a copy" /></label><br/>
-
               </div>
             </div>
-          </var:if
-            ></var:if
-          ><var:if condition="shouldDisplayPasswordChange">
+          </var:if>
+        </var:if><!-- userHasMailAccess -->
+        <var:if condition="shouldDisplayPasswordChange">
           <div id="passwordView" class="tab">
             <p id="passwordFields"><label><var:string label:value="New password:"
                   /><input const:id="newPasswordField" class="textField"
diff --git a/UI/Templates/SchedulerUI/UIxCalendarSelector.wox b/UI/Templates/SchedulerUI/UIxCalendarSelector.wox
index 672150bb9..477a64513 100644
--- a/UI/Templates/SchedulerUI/UIxCalendarSelector.wox
+++ b/UI/Templates/SchedulerUI/UIxCalendarSelector.wox
@@ -36,14 +36,11 @@ div.colorBox.calendarFolder<var:string value="currentCalendar.folder" />
     </div>
     <ul id="calendarList">
       <var:foreach list="calendars" item="currentCalendar"
-                   ><li class="denied" var:id="currentCalendar.id"
-                        var:owner="currentCalendar.owner" >
-        <input type="checkbox" class="checkBox"
-               const:disabled="disabled"
-               var:checked="currentCalendar.active" />
-        <div var:class="currentCalendarClass">OO</div
-        ><var:string value="currentCalendar.displayName"
-        /></li>
+       ><li class="denied" var:id="currentCalendar.id" var:owner="currentCalendar.owner" >
+          <input type="checkbox" class="checkBox" const:disabled="disabled" var:checked="currentCalendar.active" />
+          <div var:class="currentCalendarClass"><entity name="nbsp"/></div
+          ><var:string value="currentCalendar.displayName"
+       /></li>
       </var:foreach>
     </ul>
   </div>
diff --git a/UI/WebServerResources/MailerUI.css b/UI/WebServerResources/MailerUI.css
index b406a9d09..837a56bee 100644
--- a/UI/WebServerResources/MailerUI.css
+++ b/UI/WebServerResources/MailerUI.css
@@ -324,41 +324,6 @@ TABLE.messageList TR._selected TD
 TABLE.messageList TR._deleted TD
 { text-decoration: line-through; }
 
-TABLE.messageList TR[labels~="label5"] TD
-{ color: #9c309c; }
-
-TABLE.messageList TR[labels~="label5"]._selected TD
-{ color: #fff;
-  background-color: #9c309c; }
-
-TABLE.messageList TR[labels~="label4"] TD
-{ color: #3130ff; }
-
-TABLE.messageList TR[labels~="label4"]._selected TD
-{ color: #fff;
-  background-color: #3130ff; }
-
-TABLE.messageList TR[labels~="label3"] TD
-{ color: #009a00; }
-
-TABLE.messageList TR[labels~="label3"]._selected TD
-{ color: #fff;
-  background-color: #009a00; }
-
-TABLE.messageList TR[labels~="label2"] TD
-{ color: #ff9a00; }
-
-TABLE.messageList TR[labels~="label2"]._selected TD
-{ color: #fff;
-  background-color: #ff9a00; }
-
-TABLE.messageList TR[labels~="label1"] TD
-{ color: #f00; }
-
-TABLE.messageList TR[labels~="label1"]._selected TD
-{ color: #fff;
-  background-color: #f00; }
-
 TABLE.messageList TR.mailer_unreadmail TD,
 TR.mailer_unreadmail TD.messageSubjectColumn
 { font-weight: bold !important; }
diff --git a/UI/WebServerResources/SOGoTabsController.js b/UI/WebServerResources/SOGoTabsController.js
index 31c988823..4c1d23c58 100644
--- a/UI/WebServerResources/SOGoTabsController.js
+++ b/UI/WebServerResources/SOGoTabsController.js
@@ -68,10 +68,8 @@ SOGoTabsController.prototype = {
     attachToTabsContainer: function STC_attachToTabsContainer(container) {
         this.container = container;
         container.controller = this;
-        this.onTabMouseDownBound
-        = this.onTabMouseDown.bindAsEventListener(this);
-        this.onTabClickBound
-        = this.onTabClick.bindAsEventListener(this);
+        this.onTabMouseDownBound = this.onTabMouseDown.bindAsEventListener(this);
+        this.onTabClickBound = this.onTabClick.bindAsEventListener(this);
 
         var list = container.childNodesWithTag("ul");
         if (list.length > 0) {
@@ -81,8 +79,7 @@ SOGoTabsController.prototype = {
                 this.firstTab = $(nodes[0]);
                 for (var i = 0; i < nodes.length; i++) {
                     var currentNode = $(nodes[i]);
-                    currentNode.observe("mousedown",
-                                        this.onTabMouseDownBound, false);
+                    currentNode.observe("mousedown", this.onTabMouseDownBound, false);
                     currentNode.observe("click", this.onTabClickBound, false);
                     if (currentNode.hasClassName("active"))
                         this.activeTab = currentNode;
diff --git a/UI/WebServerResources/SchedulerUI.css b/UI/WebServerResources/SchedulerUI.css
index 429dc2c57..519175a22 100644
--- a/UI/WebServerResources/SchedulerUI.css
+++ b/UI/WebServerResources/SchedulerUI.css
@@ -26,14 +26,10 @@ DIV#calendarSelectorButtons
 { padding-left: 6px; }
 
 DIV.colorBox
-{ display: inline;
-  font-weight: normal;
-  margin-right: 3px;
-  font-size: 80%;
-  width: 1em;
-  height: .75em;
-  -webkit-border-radius: 2px;
-  border-radius: 2px; }
+{ display: inline-block; }
+
+TD DIV.colorBox, TD DIV.colorBox:hover
+{ border-color: #fff; }
 
 UL#calendarList
 { cursor: default;
@@ -248,7 +244,7 @@ TABLE#tasksList
 { width: 100%; }
 
 TABLE#eventsList .colorBox
-{ margin-left: 2px; }
+{ margin-right: 4px; }
 
 #eventsList TD.headerTitle,
 #eventsList TD.headerDateTime
diff --git a/UI/WebServerResources/SchedulerUI.js b/UI/WebServerResources/SchedulerUI.js
index cd2e40177..d769b7e6c 100644
--- a/UI/WebServerResources/SchedulerUI.js
+++ b/UI/WebServerResources/SchedulerUI.js
@@ -965,7 +965,7 @@ function eventsListCallback(http) {
                 td.observe("mousedown", listRowMouseDownHandler, true);
                 var colorDiv = createElement("div", false, "colorBox calendarFolder" + calendar);
                 td.appendChild(colorDiv);
-                colorDiv.update('OO');
+                colorDiv.update('&nbsp;');
                 var span = createElement("span");
                 td.appendChild(span);
                 span.update(data[i][4]); // title
@@ -1093,7 +1093,7 @@ function tasksListCallback(http) {
                 row.appendChild(cell);
                 var colorDiv = createElement("div", false, "colorBox calendarFolder" + calendar);
                 cell.appendChild(colorDiv);
-                colorDiv.update('OO');
+                colorDiv.update('&nbsp;');
                 var t = new Element ("span");
                 cell.appendChild(t);
                 t.update(data[i][4]); // title
@@ -2834,8 +2834,9 @@ function initCalendarSelector() {
 
 function onCalendarSelectionChange(event) {
     var target = Event.element(event);
-    if (target.tagName == 'SPAN')
+    if (target.tagName == 'DIV') {
         target = target.parentNode;
+    }
 
     onRowClick(event, target);
 }
@@ -3073,7 +3074,7 @@ function appendCalendar(folderName, folderPath) {
         var colorBox = document.createElement("div");
         li.appendChild(colorBox);
         li.appendChild(document.createTextNode(folderName));
-        colorBox.appendChild(document.createTextNode("OO"));
+        colorBox.appendChild(document.createTextNode("\u00a0"));
 
         $(colorBox).addClassName("colorBox");
         $(colorBox).addClassName('calendarFolder' + folderPath.substr(1));
diff --git a/UI/WebServerResources/UIxPreferences.css b/UI/WebServerResources/UIxPreferences.css
index 463f588a1..77a0284f4 100644
--- a/UI/WebServerResources/UIxPreferences.css
+++ b/UI/WebServerResources/UIxPreferences.css
@@ -33,12 +33,13 @@ TD.categoryListCell
 { -moz-user-select: none; }
 
 DIV.colorBox
-{ border: 1px solid #333333;
-  font-size: 80%;
-  font-weight: normal;
-  height: 0.75em;
-  margin: 0 3px 0 0;
-  width: 1em; }
+{ -webkit-border-radius: 4px;
+     -moz-border-radius: 4px;
+          border-radius: 4px;
+  border: 2px solid #ccddec; }
+
+DIV.colorBox:hover
+{ border-color: #eee; }
 
 DIV.listWrapper
 { overflow: auto;
@@ -94,19 +95,37 @@ SPAN.timeDateControl INPUT.textField
 #passwordView BR
 { clear: both; }
 
-/* mail filters */
-DIV#filtersListWrapper
+/* mail options */
+DIV#mailOptionsTabs
+{ position: absolute;
+  top: 200px;
+  left: 0px;
+  right: 0px;
+  bottom: 0px; }
+
+DIV#filtersListWrapper,
+DIV#mailLabelsListWrapper
 { bottom: 30px;
+  bottom: 22px;
   right: 2em;
+  right: 0px;
   top: 208px;
-  left: 2em; }
+  top: 0px;
+  left: 2em;
+  left: 0px; }
+
+#mailOptionsTabs .bottomToolbar
+{ bottom: 0px;
+  left: 0px;
+  right: 0px; }
 
 DIV#filtersListWrapper TD,
+DIV#mailLabelsListWrapper TD,
 DIV.bottomToolbar
 { -khtml-user-select: none;
   -moz-user-select: none; }
 
-TABLE#filtersList
+#filtersList, #labelsList
 { width: 100%;
   cursor: default; }
 
diff --git a/UI/WebServerResources/UIxPreferences.js b/UI/WebServerResources/UIxPreferences.js
index 51747dccd..ca67c9ddc 100644
--- a/UI/WebServerResources/UIxPreferences.js
+++ b/UI/WebServerResources/UIxPreferences.js
@@ -52,8 +52,8 @@ function savePreferences(sender) {
             sendForm = false;
         }
 	if ($("autoReplyText").value.strip().endsWith('\n.')) {
-	  showAlertDialog(_("Your vacation message must not end with a single dot on a line."));
-	  sendForm = false;
+	    showAlertDialog(_("Your vacation message must not end with a single dot on a line."));
+	    sendForm = false;
 	}
         if ($("enableVacationEndDate") && $("enableVacationEndDate").checked) {
             var e = $("vacationEndDate_date");
@@ -161,12 +161,12 @@ function addDefaultEmailAddresses(event) {
     else addresses = new Array();
 
     defaultAddresses.each(function(adr) {
-            for (var i = 0; i < addresses.length; i++)
-                if (adr == addresses[i])
-                    break;
-            if (i == addresses.length)
-                addresses.push(adr);
-        });
+        for (var i = 0; i < addresses.length; i++)
+            if (adr == addresses[i])
+                break;
+        if (i == addresses.length)
+            addresses.push(adr);
+    });
 
     $("autoReplyEmailAddresses").value = addresses.join(", ");
 
@@ -178,6 +178,9 @@ function initPreferences() {
     var controller = new SOGoTabsController();
     controller.attachToTabsContainer(tabsContainer);
 
+    var mailController = new SOGoTabsController();
+    mailController.attachToTabsContainer($('mailOptionsTabs'));
+
     var filtersListWrapper = $("filtersListWrapper");
     if (filtersListWrapper) {
         isSieveScriptsEnabled = true;
@@ -335,7 +338,7 @@ function onFilterDelete(event) {
             var node = nodes[i];
             deletedFilters.push(node.rowIndex - 1);
         }
-        deletedFilters = deletedFilters.sort(function (x,y) { return x-y; });
+        deletedFilters = deletedFilters.sort(function(x,y) { return x-y; });
         var rows = filtersList.rows;
         for (var i = 0; i < deletedFilters.length; i++) {
             var filterNbr = deletedFilters[i];
@@ -668,11 +671,13 @@ function onMailAccountEntryClick(event) {
 
 function displayMailAccount(mailAccount, readOnly) {
     var inputs = $$("#accountInfo input");
-    inputs.each(function (i) { i.disabled = readOnly;
-                               i.mailAccount = mailAccount; });
+    inputs.each(function(i) {
+        i.disabled = readOnly;
+        i.mailAccount = mailAccount;
+    });
 
     inputs = $$("#identityInfo input");
-    inputs.each(function (i) { i.mailAccount = mailAccount; });
+    inputs.each(function(i) { i.mailAccount = mailAccount; });
     if (!mailCustomFromEnabled) {
         for (var i = 0; i < 2; i++) {
             inputs[i].disabled = readOnly;
@@ -836,7 +841,7 @@ function onMailAccountDelete(event) {
 
 function saveMailAccounts() {
     /* This removal enables us to avoid a few warning from SOPE for the inputs
-     that were created dynamically. */
+       that were created dynamically. */
     var editor = $("mailAccountEditor");
 
     // Could be null if ModuleConstraints disables email access
@@ -877,39 +882,39 @@ function compactMailAccounts() {
 }
 
 /* common function between calendar categories and mail labels */
-function onColorEdit (e, type) {
+function onColorEdit(e, type) {
     var r;
 
     if (type == "calendar")
         r = $$("#calendarCategoriesListWrapper div.colorEditing");
     else
         r = $$("#mailLabelsListWrapper div.colorEditing");
-        
+
     for (var i=0; i<r.length; i++)
         r[i].removeClassName("colorEditing");
 
-    this.addClassName ("colorEditing");
+    this.addClassName("colorEditing");
     var cPicker = window.open(ApplicationBaseURL + "../" + UserLogin
                               + "/Calendar/colorPicker", "colorPicker",
                               "width=250,height=200,resizable=0,scrollbars=0"
                               + "toolbar=0,location=0,directories=0,status=0,"
                               + "menubar=0,copyhistory=0", "test"
-                              );
+                             );
     cPicker.focus();
     cPicker.type = type;
 
     preventDefault(e);
 }
 
-function onColorPickerChoice (newColor, type) {    
+function onColorPickerChoice(newColor, type) {
     var div;
 
     if (type == "calendar")
-        div = $$("#calendarCategoriesListWrapper div.colorEditing").first ();
+        div = $$("#calendarCategoriesListWrapper div.colorEditing").first();
     else
-        div = $$("#mailLabelsListWrapper div.colorEditing").first ();
+        div = $$("#mailLabelsListWrapper div.colorEditing").first();
 
-    //  div.removeClassName ("colorEditing");
+    //  div.removeClassName("colorEditing");
     div.showColor = newColor;
     div.style.background = newColor;
     if (parseInt($("hasChanged").value) == 0) {
@@ -929,47 +934,47 @@ function resetCalendarTableActions() {
         var tds = row.childElements();
         var editionCtlr = new RowEditionController();
         editionCtlr.attachToRowElement(tds[0]);
-        tds[1].childElements()[0].observe("dblclick", onCalendarColorEdit);
+        tds[1].childElements()[0].observe("click", onCalendarColorEdit);
     }
 }
 
-function onCalendarColorEdit (e) {
+function onCalendarColorEdit(e) {
     var onCCE = onColorEdit.bind(this);
     onCCE(e, "calendar");
 }
 
-function onCalendarCategoryAdd (e) {
-    var row = new Element ("tr");
-    var nametd = new Element ("td").update ("");
-    var colortd = new Element ("td");
-    var colordiv = new Element ("div", {"class": "colorBox"});
+function onCalendarCategoryAdd(e) {
+    var row = new Element("tr");
+    var nametd = new Element("td").update("");
+    var colortd = new Element("td");
+    var colordiv = new Element("div", {"class": "colorBox"});
 
-    row.identify ();
-    row.addClassName ("categoryListRow");
+    row.identify();
+    row.addClassName("categoryListRow");
 
-    nametd.addClassName ("categoryListCell");
-    colortd.addClassName ("categoryListCell");
+    nametd.addClassName("categoryListCell");
+    colortd.addClassName("categoryListCell");
     colordiv.innerHTML = "&nbsp;";
     colordiv.showColor = "#F0F0F0";
     colordiv.style.background = colordiv.showColor;
 
-    colortd.appendChild (colordiv);
-    row.appendChild (nametd);
-    row.appendChild (colortd);
-    $("calendarCategoriesListWrapper").childNodesWithTag("table")[0].tBodies[0].appendChild (row);
+    colortd.appendChild(colordiv);
+    row.appendChild(nametd);
+    row.appendChild(colortd);
+    $("calendarCategoriesListWrapper").childNodesWithTag("table")[0].tBodies[0].appendChild(row);
 
-    resetCalendarTableActions ();
+    resetCalendarTableActions();
     nametd.editionController.startEditing();
 }
 
-function onCalendarCategoryDelete (e) {
+function onCalendarCategoryDelete(e) {
     var list = $('calendarCategoriesListWrapper').down("TABLE").down("TBODY");
     var rows = list.getSelectedNodes();
     var count = rows.length;
 
     for (var i=0; i < count; i++) {
         rows[i].editionController = null;
-        rows[i].remove ();
+        rows[i].remove();
     }
 }
 
@@ -978,16 +983,16 @@ function serializeCalendarCategories() {
 
     var values = [];
     for (var i = 0; i < r.length; i++) {
-        var tds = r[i].childElements ();
-        var name  = $(tds.first ()).innerHTML;
-        var color = $(tds.last ().childElements ().first ()).showColor;
+        var tds = r[i].childElements();
+        var name  = $(tds.first()).innerHTML;
+        var color = $(tds.last().childElements().first()).showColor;
         values.push("\"" + name + "\": \"" + color + "\"");
     }
 
     $("calendarCategoriesValue").value = "{ " + values.join(",\n") + "}";
 }
 
-function resetCalendarCategoriesColors (e) {
+function resetCalendarCategoriesColors(e) {
     var divs = $$("#calendarCategoriesListWrapper DIV.colorBox");
     for (var i = 0; i < divs.length; i++) {
         var d = divs[i];
@@ -1010,51 +1015,51 @@ function resetMailTableActions() {
         var tds = row.childElements();
         var editionCtlr = new RowEditionController();
         editionCtlr.attachToRowElement(tds[0]);
-        tds[1].childElements()[0].observe("dblclick", onMailColorEdit);
+        tds[1].childElements()[0].observe("click", onMailColorEdit);
     }
 }
 
-function onMailColorEdit (e) {
+function onMailColorEdit(e) {
     var onMCE = onColorEdit.bind(this);
     onMCE(e, "mail");
 }
 
-function onMailLabelAdd (e) {
-    var row = new Element ("tr");
-    var nametd = new Element ("td").update ("");
-    var colortd = new Element ("td");
-    var colordiv = new Element ("div", {"class": "colorBox"});
+function onMailLabelAdd(e) {
+    var row = new Element("tr");
+    var nametd = new Element("td").update("");
+    var colortd = new Element("td");
+    var colordiv = new Element("div", {"class": "colorBox"});
 
-    row.identify ();
-    row.addClassName ("labelListRow");
+    row.identify();
+    row.addClassName("labelListRow");
 
-    nametd.addClassName ("labelListCell");
-    colortd.addClassName ("labelListCell");
+    nametd.addClassName("labelListCell");
+    colortd.addClassName("labelListCell");
     colordiv.innerHTML = "&nbsp;";
     colordiv.showColor = "#F0F0F0";
     colordiv.style.background = colordiv.showColor;
 
-    colortd.appendChild (colordiv);
-    row.appendChild (nametd);
-    row.appendChild (colortd);
-    $("mailLabelsListWrapper").childNodesWithTag("table")[0].tBodies[0].appendChild (row);
+    colortd.appendChild(colordiv);
+    row.appendChild(nametd);
+    row.appendChild(colortd);
+    $("mailLabelsListWrapper").childNodesWithTag("table")[0].tBodies[0].appendChild(row);
 
-    resetMailTableActions ();
+    resetMailTableActions();
     nametd.editionController.startEditing();
 }
 
-function onMailLabelDelete (e) {
+function onMailLabelDelete(e) {
     var list = $('mailLabelsListWrapper').down("TABLE").down("TBODY");
     var rows = list.getSelectedNodes();
     var count = rows.length;
 
     for (var i=0; i < count; i++) {
         rows[i].editionController = null;
-        rows[i].remove ();
+        rows[i].remove();
     }
 }
 
-function resetMailLabelsColors (e) {
+function resetMailLabelsColors(e) {
     var divs = $$("#mailLabelsListWrapper DIV.colorBox");
     for (var i = 0; i < divs.length; i++) {
         var d = divs[i];
@@ -1071,10 +1076,10 @@ function serializeMailLabels() {
 
     var values = [];
     for (var i = 0; i < r.length; i++) {
-        var tds = r[i].childElements ();
+        var tds = r[i].childElements();
         var name = r[i].readAttribute("data-name"); 
-        var label  = $(tds.first ()).innerHTML;
-        var color = $(tds.last ().childElements ().first ()).showColor;
+        var label  = $(tds.first()).innerHTML;
+        var color = $(tds.last().childElements().first()).showColor;
         
         /* if name is null, that's because we've just added a new tag */
         if (!name) {
@@ -1117,7 +1122,7 @@ function onContactsCategoryAdd(e) {
     nametd.editionController.startEditing();
 }
 
-function onContactsCategoryDelete (e) {
+function onContactsCategoryDelete(e) {
     var list = $('contactsCategoriesListWrapper').down("TABLE").down("TBODY");
     var rows = list.getSelectedNodes();
     var count = rows.length;
@@ -1202,13 +1207,10 @@ function onChangePasswordClick(event) {
                 policy.changePassword(password);
             }
             else
-                SetLogMessage("passwordError", _("Password must not be empty."),
-                                    "error");
+                SetLogMessage("passwordError", _("Password must not be empty."), "error");
         }
         else {
-            SetLogMessage("passwordError", _("The passwords do not match."
-                                  + " Please try again."),
-                                "error");
+            SetLogMessage("passwordError", _("The passwords do not match. Please try again."), "error");
             field.focus();
             field.select();
         }
diff --git a/UI/WebServerResources/generic.css b/UI/WebServerResources/generic.css
index b7bfacbe6..5bb718620 100644
--- a/UI/WebServerResources/generic.css
+++ b/UI/WebServerResources/generic.css
@@ -70,8 +70,9 @@ TABLE
   border-spacing: 0px; }
 
 TABLE TD
-{ padding-left: .25em;
-  padding-right: .25em; }
+{ padding-left: .5em;
+  padding-right: .25em;
+  height: 22px; }
 
 a:link
 { color: #0033CC; }
@@ -1151,6 +1152,18 @@ DIV.bottomToolbar A.bottomButton SPAN:active
   bottom: 0px;
   left: 0px; }
 
+/* color box */
+DIV.colorBox
+{ cursor: pointer;
+  margin: 0 3px 0 0;
+  height: 12px;
+  line-height: 12px;
+  width: 12px;
+  -webkit-border-radius: 2px;
+     -moz-border-radius: 2px;
+          border-radius: 2px;
+  border: 0px; }
+
 /* ckeditor */
 span.cke_skin_kama
 { padding: 0px !important; }
diff --git a/UI/WebServerResources/iefixes.css b/UI/WebServerResources/iefixes.css
index f3e204802..aaf871494 100644
--- a/UI/WebServerResources/iefixes.css
+++ b/UI/WebServerResources/iefixes.css
@@ -46,6 +46,9 @@ DIV#bgDialogDiv
 { background-color: #555;
   filter: alpha(opacity=40); }
 
+DIV.colorBox
+{ line-height: 15px; }
+
 /* MailerUI */
 
 IMG.dragMessage
@@ -88,6 +91,10 @@ DIV.eventInside.delegated,
 DIV.eventInside.declined
 { filter: alpha(opacity=40); }
 
+#calendarList DIV.colorBox,
+#schedulerTabs DIV.colorBox
+{ *display: inline; /* for IE7 */ }
+
 /* UIxAppointmentEditor */
 
 DIV#attendeesMenu LI.separator