applied comments and add the possibility to resize the search inbox window

UI/Templates/MailerUI/UIxMailSearch.wox

@@ -56,30 +56,32 @@
     <tbody>
     </tbody>
   </table>
-  <table id="searchMailFooter" class="sortable">
-    <thead>
-      <tr>
-        <td id="subjectSearchHeader" class="td_header">
-          <var:string label:value="Subject" /></td>
-        <td id="fromSearchHeader" class="td_header">
-          <var:string label:value="From"/></td>
-        <td id="toSearchHeader" class="td_header">
-          <var:string label:value="To" /></td>
-        <td id="dateSearchHeader" class="td_header">
-          <var:string label:value="Date" /></td>
-        <td id="buttonExpandHeader" class="td_header">
-          <div id="imgPosition">
-            <a href="#" id="listCollapse">
-              <img rsrc:src="collapse.png" class="collapse" onclick="onResizeClick()" />
-            </a></div></td>
-      </tr>
-    </thead>
-    <tbody class="scrollbar" id="resultsTable">
-      <tr>
-        <td colspan="4" id="noSearchResults"><var:string label:value="No matches found" /></td>
-      </tr>
-    </tbody>
-  </table>
+  <div id="resultsTable">
+    <table id="searchMailFooter" class="sortable messageList">
+      <thead>
+        <tr>
+          <td id="subjectSearchHeader" class="td_header">
+            <var:string label:value="Subject" /></td>
+          <td id="fromSearchHeader" class="td_header">
+            <var:string label:value="From"/></td>
+          <td id="toSearchHeader" class="td_header">
+            <var:string label:value="To" /></td>
+          <td id="dateSearchHeader" class="td_header">
+            <var:string label:value="Date" /></td>
+          <td id="buttonExpandHeader" class="td_header">
+            <div id="imgPosition">
+              <a href="#" id="listCollapse">
+                <img rsrc:src="collapse.png" class="collapse" onclick="onResizeClick()" />
+              </a></div></td>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <td colspan="4" id="noSearchResults"><var:string label:value="No matches found" /></td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
   <div id="optionsButtons">
     <a class="button" name="delete" id="deleteButton" onclick="onDeleteClick(this)">
       <span><var:string label:value="Delete" /></span></a>

UI/WebServerResources/MailerUI.js

@@ -458,7 +458,7 @@ function displaySearchMailCallback(http) {
         var id = _("searchMailView");
         fields.innerHTML = http.responseText;
         
-        dialog = createDialog(id, title, null, fields, "searchMail"); // (id, title, legend, content, positionClass)
+        var dialog = createDialog(id, title, null, fields, "searchMail"); // (id, title, legend, content, positionClass)
         document.body.appendChild(dialog);
         
         if (Prototype.Browser.IE)

UI/WebServerResources/UIxMailSearch.css

@@ -2,7 +2,8 @@
 /*************** Table adjustment *****************/
 
 TABLE#searchMailHeader
-{ width: 100%; }
+{ width: 100%;
+  margin-bottom: 1em; }
 
 TABLE#searchFiltersList
 {
@@ -14,18 +15,18 @@ TABLE#searchFiltersList
   height:105px;
   overflow:auto;
   width:100%;
-  margin-top: 1em;
 }
 
-TABLE#searchMailFooter
+DIV#resultsTable
 {
-   position:absolute;
    border: 1px solid #909090;
    border-radius: 3px;
-   left:10px;
-   width:680px;
-   top:240px;
-   height:194px;
+   overflow-y: auto;
+}
+
+TD#mailAccountsCell {
+  overflow:hidden;
+  white-space: nowrap;
 }
 
 .buttonsCell
@@ -38,18 +39,8 @@ TABLE#searchMailFooter
   width:45%;
 }
 
-.scrollbar 
-{
-  overflow-y:auto;
-  height:171px;
-  position:absolute;
-  top:21px;
-  left:0;
-  right:0;
-}
-
 .td_table_1, .td_table_2, .td_table_3, .td_table_4 {
- width:25%;
+ cursor:default;
 }
 
 TD.sortasc {
@@ -82,8 +73,7 @@ TD.sortdesc {
 {text-decoration: underline; }
 
 #buttonExpandHeader {
-  width:3%;
-  border-right:0;
+  width:10px;
 }
 
 @-moz-document url-prefix() {
@@ -98,7 +88,8 @@ TD.sortdesc {
 
 #headerButtons
 {
-  width:27%;
+  width:171px;
+  white-space: nowrap;
 }
 
 #searchButton, #cancelButton
@@ -136,36 +127,37 @@ DIV#optionsButtons
 
 #resultsFound {
   position:absolute;
-  bottom:25px;
+  bottom:20px;
   right:10px;
 }
 
 #imgPosition
-{ z-index: 1; }
+{ z-index: 1;
+  position:relative; }
 
 #listCollapse img
 { position: absolute; }
 
 #listCollapse img.collapse
 { clip: rect(0 18px 18px 0);
-  top: 1px;
-  right: -16px; }
+  top: -9px;
+  right: -22px; }
 
 #listCollapse img.collapse:hover
 { clip: rect(0 36px 18px 18px);
-  top: 1px;
-  right: 2px; }
+  top: -9px;
+  right: -4px; }
 
 #listCollapse img.rise
 { clip: rect(18px 18px 36px 0);
-  top: -17px;
-  right:-16px;
+  top: -27px;
+  right:-22px;
   }
 
 #listCollapse img.rise:hover
 { clip: rect(18px 36px 36px 18px);
-  top: -17px;
-  right:2px; }
+  top: -27px;
+  right:-4px; }
 
 @-moz-document url-prefix() {
   #listCollapse img

UI/WebServerResources/UIxMailSearch.js

@@ -86,30 +86,30 @@ function searchMails() {
     var optionsList = $("mailAccountsList").options;
     var nbOptions = optionsList.length;
     var selectedIndex = optionsList.selectedIndex;
+    var accountNumber, accountUser, folderPath, folderName;
   
     var mailAccountIndex = mailAccounts.indexOf(searchParams.searchLocation);
     if (mailAccountIndex != -1) {
-        var accountNumber = "/" + mailAccountIndex;
-        var folderName = accountNumber + "/folderINBOX";
-        var accountUser = userNames[mailAccountIndex];
-        var folderPath = accountUser;
+        accountNumber = "/" + mailAccountIndex;
+        folderName = accountNumber + "/folderINBOX";
+        accountUser = userNames[mailAccountIndex];
+        folderPath = accountUser;
     }
     else {
         var searchLocation = searchParams.searchLocation.split("/");
-        var accountUser = searchLocation[0];
-        var accountNumber = "/" + userNames.indexOf(accountUser);
+        accountUser = searchLocation[0];
+        accountNumber = "/" + userNames.indexOf(accountUser);
       
         var position = searchLocation.length;
-        var folderName = accountNumber + "/folder" + searchLocation[1].replace(" ", "_SP_");
+        folderName = accountNumber + "/folder" + searchLocation[1].replace(" ", "_SP_");
         for (i = 2; i < position; i++)
             folderName += "/folder" + searchLocation[i];
         
-        var folderPath = optionsList[selectedIndex].innerHTML;
-      
+        folderPath = optionsList[selectedIndex].innerHTML;
     }
-    
+
     var subfolders = [];
-    if (searchParams.subfolder == true) {
+    if (searchParams.subfolder === true) {
         for (i = 0; i < nbOptions; i++) {
             if ((optionsList[i].innerHTML.search(folderPath) != -1) && (i != selectedIndex)) {
                 var splitArray = optionsList[i].innerHTML.split("/");
@@ -124,7 +124,7 @@ function searchMails() {
             }
         }
     }
-    
+
     var urlstr = (ApplicationBaseURL + folderName + "/uids");
     
     var callbackData = {"folderName" : folderName, "subfolders" : subfolders, "newSearch" : true};
@@ -172,6 +172,7 @@ function searchMailsCallback(http) {
                 
                 var cell4 = row.insertCell(3);
                 Element.addClassName(cell4, "td_table_4");
+                cell4.writeAttribute("colspan", "2");
                 cell4.innerHTML = response.headers[i][7];
             }
 
@@ -341,8 +342,9 @@ function onOpenClick(event) {
     var selectedRow = $("searchMailFooter").down("._selected");
     var msguid = selectedRow.getAttribute("uid");
     var folderName = selectedRow.getAttribute("folderName");
+    var accountUser = userNames[0];
   
-    var url = "/SOGo/so/sogo1/Mail" + folderName + "/" + msguid + "/popupview";
+    var url = "/SOGo/so/" + accountUser + "/Mail" + folderName + "/" + msguid + "/popupview";
     if (selectedRow) {
         openMessageWindow(msguid, url);
     }
@@ -432,43 +434,50 @@ function deleteMessageCallback (http){
 
 function onResizeClick() {
     var searchFiltersList = jQuery("#searchFiltersList");
-    var searchMailFooter = jQuery("#searchMailFooter");
-    var resultsTable = jQuery("#resultsTable");
-    var state = 'collapse';
     var img = $("listCollapse").select('img').first();
-    
-    
+    var dialogWindowHeight = $("searchMailView").getHeight();
+    var state = "collapse";
+  
     if (searchFiltersList[0].visible()) {
+        var state = "rise";
         searchFiltersList.fadeOut(300, function() {
-            searchMailFooter.animate({ top:"120px" }, {queue: false, duration: 100});
-            resultsTable.animate({height:"288px"}, 100);
-            searchMailFooter.animate({height:"312px" }, {queue: false, duration: 100, complete: function() {
-                img.removeClassName('collapse').addClassName('rise');
-                $("resultsFound").style.bottom = "40px;";
-            }});
+            adjustResultsTable(state);
+            img.removeClassName('collapse').addClassName('rise');
         });
     }
     else {
-        state = 'rise';
-        searchMailFooter.animate({height:"194px"}, {queue: false, duration: 100});
-        searchMailFooter.animate({top:"240px" }, {queue: false, duration: 100, complete:function() {
-            searchFiltersList.fadeIn();
-            img.removeClassName('rise').addClassName('collapse');
-            $("resultsFound").style.bottom = "25px;";
-        }});
-        resultsTable.animate({height:"171px"}, 100);
-        
+        state = "collapse"
+        adjustResultsTable(state);
+        searchFiltersList.fadeIn();
+        img.removeClassName('rise').addClassName('collapse');
     }
 }
 
+function adjustResultsTable(state) {
+    var resultsTable = $("resultsTable");
+    var width = $("searchMailView").getWidth() - 22;
+    var height = $("searchMailView").getHeight();
+    if (state == "collapse")
+        height -= 260;
+    else
+        height -= 146;
+    resultsTable.style.width = width + "px";
+    resultsTable.style.height = height + "px";
+}
+
 /*************** Init ********************/
 
 function initSearchMailView () {
     
     // Add one filterRow
     onAddFilter();
+    adjustResultsTable("collapse");
     
     // Observers : Event.on(element, eventName[, selector], callback)
     $("searchMailFooter").down("tbody").on("mousedown", "tr", onResultSelectionChange);
     $("searchMailFooter").down("tbody").on("dblclick", "tr", onOpenClick);
+    Event.observe(window, "resize", function() {
+                  var state = ($("searchFiltersList").visible() ? "collapse": "rise");
+                  adjustResultsTable(state);
+                  });
 }

UI/WebServerResources/generic.css

@@ -662,7 +662,8 @@ DIV.dialog.searchMail {
   position: relative;
   padding: 0px;
   opacity: 1;
-  width: 700px;
+  width: 60%;
+  height: 75%;
   margin: 2em auto;
 }