code refactoring and GUI improvement

UI/MailerUI/UIxMailListActions.m

@@ -54,6 +54,7 @@
 #import <Mailer/SOGoSentFolder.h>
 #import <SOGo/NSArray+Utilities.h>
 #import <SOGo/NSDictionary+Utilities.h>
+#import <SOGo/NSString+Utilities.h>
 #import <SOGo/SOGoDateFormatter.h>
 #import <SOGo/SOGoUser.h>
 #import <SOGo/SOGoUserDefaults.h>
@@ -329,7 +330,7 @@
   WORequest *request;
   
   request = [context request];
-  urlParams = [request contentAsString] objectFromJSONString];
+  urlParams = [[request contentAsString] objectFromJSONString];
   sortingAttributes = [urlParams objectForKey:@"sortingAttributes"];
   sort = [sortingAttributes objectForKey:@"sort"];
 
@@ -404,7 +405,8 @@
 {
   EOQualifier *qualifier, *searchQualifier;
   WORequest *request;
-  NSDictionary *filters, *sortingAttributes, *content;
+  NSDictionary *sortingAttributes, *content;
+  NSArray *filters;
   NSString *searchBy, *searchArgument, *searchInput, *searchString, *match;
   NSMutableArray *searchArray;
   int nbFilters, i;
@@ -428,8 +430,12 @@
           searchBy = [NSString stringWithString:[[filters objectAtIndex:i] objectForKey:@"searchBy"]];
           searchArgument = [NSString stringWithString:[[filters objectAtIndex:i] objectForKey:@"searchArgument"]];
           searchInput = [NSString stringWithString:[[filters objectAtIndex:i] objectForKey:@"searchInput"]];
-      
-          searchString = [NSString stringWithFormat:@"(%@ %@: '%@')", searchBy, searchArgument, searchInput];
+        
+        if ([[[filters objectAtIndex:i] objectForKey:@"negative"] boolValue])
+            searchString = [NSString stringWithFormat:@"(not (%@ %@: '%@'))", searchBy, searchArgument, searchInput];
+        else
+            searchString = [NSString stringWithFormat:@"(%@ %@: '%@')", searchBy, searchArgument, searchInput];
+        
           searchQualifier = [EOQualifier qualifierWithQualifierFormat:searchString];
           [searchArray addObject:searchQualifier];
         }

UI/Templates/MailerUI/UIxMailSearch.wox

@@ -14,31 +14,10 @@
     <li><var:string label:value="Body"/></li>
   </ul>
   <ul id="stringArgumentsList" class="hidden">
-      <li><var:string label:value="contains"/></li>
-      <li><var:string label:value="doesn't contain"/></li>
+    <li><var:string label:value="contains"/></li>
+    <li><var:string label:value="does not contain"/></li>
   </ul>
-  <!-- TODO
-  <ul id="intArgumentsList" class="hidden">
-      <li><var:string label:value="is"/></li>
-      <li><var:string label:value="is less than"/></li>
-      <li><var:string label:value="is greater than"/></li>
-  </ul>
-  <ul id="priorityArgumentsList" class="hidden">
-      <li><var:string label:value="Highest"/></li>
-      <li><var:string label:value="High"/></li>
-      <li><var:string label:value="Normal"/></li>
-      <li><var:string label:value="Low"/></li>
-      <li><var:string label:value="Lowest"/></li>
-  </ul>
-  <ul id="statusArgumentsList" class="hidden">
-      <li><var:string label:value="Replied"/></li>
-      <li><var:string label:value="Read"/></li>
-      <li><var:string label:value="New"/></li>
-      <li><var:string label:value="Forwarded"/></li>
-      <li><var:string label:value="Starred"/></li>
-  </ul>
-  -->
-
+  
   <table id="searchMailHeader">
     <tbody>
       <tr>
@@ -63,9 +42,9 @@
       <tr>
         <td colspan="2">
           <div>
-            <input type="radio" name="matchfilters" id="matchAllFilters" onChange="onMatchFilters(this);" />
+            <input type="radio" name="matchfilters" id="matchAllFilters" value="all" onChange="onMatchFilters(this);" selection="all" />
             <var:string label:value="Match all of the following" />
-            <input type="radio" name="matchfilters" id="matchAnyFilters" onChange="onMatchFilters(this);" />
+            <input type="radio" name="matchfilters" id="matchAnyFilters" value="any" onChange="onMatchFilters(this);" />
             <var:string label:value="Match any of the following" />
           </div>
         </td>
@@ -76,25 +55,22 @@
     <tbody>
     </tbody>
   </table>
-  <div>
-    <a class="button" name="resizeUp" id="resizeButton" onclick="onResizeClick()">
-      <span><img id="resizeUp" rsrc:src="arrow-up.png" />
-            <img id="resizeDown" rsrc:src="arrow-down.png" style = "display:none;"/></span></a>
+  <div id="imgPosition">
+    <a href="#" id="listCollapse">
+      <img rsrc:src="collapse.png" class="collapse" onclick="onResizeClick()" />
+    </a>
   </div>
   <table id="searchMailFooter">
     <thead>
-      <tr class="tableview">
-        <td class="tbtv_headercell sortableTableHeader" id="subjectHeader">
-          <img id="messageSortImage" class="sortImage" rsrc:src="arrow-up.png"/>
+      <tr>
+        <td id="subjectHeader" class="td_header">
           <var:string label:value="Subject" /></td>
-        <td class="tbtv_headercell sortableTableHeader" id="fromHeader">
+        <td id="fromHeader" class="td_header">
           <var:string label:value="From"/></td>
-        <td class="tbtv_headercell sortableTableHeader" id="dateHeader">
+        <td id="toHeader" class="td_header">
+          <var:string label:value="To" /></td>
+        <td id="dateHeader" class="td_header">
           <var:string label:value="Date" /></td>
-        <td class="tbtv_headercell sortableTableHeader" id="locationHeader">
-          <var:string label:value="Location" /></td>
-        <td class="tbtv_headercell sortableTableHeader" id="changeHeader">
-          <img rsrc:src="add-icon.png"/></td>
       </tr>
     </thead>
     <tbody class="scrollbar" id="resultsTable">
@@ -109,4 +85,6 @@
     <a class="button" name="open" id="openButton" onclick="onOpenClick(this)">
       <span><var:string label:value="Open" /></span></a>
   </div>
+  <div id="resultsFound">
+  </div>
 </div>

UI/WebServerResources/UIxMailSearch.css

@@ -1,29 +1,33 @@
 
 /*************** Table adjustment *****************/
 
-TABLE#searchMailHeader, TABLE#searchFiltersList, TABLE#searchMailFooter
+TABLE#searchMailHeader
 { width: 100%; }
 
 TABLE#searchFiltersList, TABLE#searchMailFooter
 {
   border: 1px solid #909090;
-  margin-top: 1em;
   padding:2px;
   border-radius: 3px;
 }
 
 TABLE#searchFiltersList
 {
-  display:block;
-  max-height:100px;
+  display:inline-block;
+  max-height:105px;
+  height:105px;
   overflow:auto;
-  width:672px;
+  width:674px;
+  margin-top: 1em;
 }
 
 TABLE#searchMailFooter
 {
-   height:141px;
-   min-height: 110px;
+   position:absolute;
+   left:10px;
+   width:680px;
+   top:240px;
+   height:194px;
 }
 
 .buttonsCell
@@ -36,17 +40,18 @@ TABLE#searchMailFooter
   width:45%;
 }
 
-.filterRow
-{
-  cellspacing=0;
-}
-
 .scrollbar 
 {
   overflow-y:auto;
-  height:106px;
-  width:676px;
+  height:171px;
   position:absolute;
+  top:21px;
+  left:0;
+  right:0;
+}
+
+#td_table_1, #td_table_2, #td_table_3, #td_table_4 {
+ width:25%;
 }
 
 /*************** Table adjustment : search results *****************/
@@ -54,6 +59,37 @@ TABLE#searchMailFooter
   cursor:pointer;
 }
 
+.td_header {
+  border: solid #909090 1px;
+  position:absolute;
+  top:-1px;
+  width:157px;
+  cursor:pointer;
+  background: -webkit-linear-gradient(left top, #f0f1f0 , #e6e7e6); /* For Safari 5.1 to 6.0 */
+  background: -o-linear-gradient(bottom right, #f0f1f0, #e6e7e6); /* For Opera 11.1 to 12.0 */
+  background: -moz-linear-gradient(bottom right, #f0f1f0, #e6e7e6); /* For Firefox 3.6 to 15 */
+  background: linear-gradient(to bottom right, #f0f1f0 , #e6e7e6); /* Standard syntax */
+}
+
+.td_header:hover
+{text-decoration: underline; }
+
+#subjectHeader {
+  left:-1px;
+  border-top-left-radius: 3px;
+}
+#fromHeader {
+  left:166px;
+}
+#toHeader {
+  left:333px;
+}
+#dateHeader {
+  left:500px;
+  width:168px;
+  border-top-right-radius: 3px;
+}
+
 /*************** Button adjustment *****************/
 
 #headerButtons
@@ -72,7 +108,10 @@ TABLE#searchMailFooter
 }
 
 DIV#optionsButtons
-{ float:left; }
+{ 
+  position:absolute;
+  bottom:10px;
+}
 
 .button
 {
@@ -82,14 +121,84 @@ DIV#optionsButtons
 #changeHeader
 { width:15px}
 
-DIV.bottomToolbar {
-  margin:0;
-  position:relative;
-  border-radius:5px;
+#resizeFrame
+{
+  text-align: -webkit-right;
+  margin-top:1em;
+}
+
+#resizeButton
+{
+  display:inline-block;
+  text-align: -webkit-center;
+}
+
+
+#resultsFound {
+  position:absolute;
+  bottom:25px;
+  right:10px;
+}
+
+
+#imgPosition
+{ position: absolute;
+  right: 17px;
+  top: 233px;
+  z-index: 1;
+}
+
+#listCollapse
+{ position: absolute;
+  top: .2em;
+  right: 0;
+  margin: 0.5em 1em; }
+
+#listCollapse img
+{ position: absolute; }
+
+#listCollapse img.collapse
+{ clip: rect(0 18px 18px 0);
+  left: 0;
+  top: 0; }
+
+#listCollapse img.collapse:hover
+{ clip: rect(0 36px 18px 18px);
+  left: -18px; }
+
+#listCollapse img.rise
+{ clip: rect(18px 18px 36px 0);
+  left: 0;
+  top: -18px; }
+
+#listCollapse img.rise:hover
+{ clip: rect(18px 36px 36px 18px);
+  left: -18px; }
+  
+#filterButtons 
+{
   width:40px;
+  cursor:pointer;
+}
+
+/* Glow */
+.glow {
+  display: inline-block;
+  -webkit-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-property: box-shadow;
+  transition-property: box-shadow;
+  -webkit-transform: translateZ(0);
+  transform: translateZ(0);
+  box-shadow: 0 0 1px rgba(0, 0, 0, 0);
+}
+.glow:hover, .glow:focus, .glow:active {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
 }
 
 /*************** Lists *****************/
 .hidden 
 { display:none; }
 
+
+

UI/WebServerResources/UIxMailSearch.js

@@ -49,10 +49,14 @@ function onSearchClick() {
             for (j = 0; j < searchArgumentsOptions.length ; j++) {
                 if (searchArgumentsOptions[j].selected) {
                     filter.searchArgument = searchArgumentsOptions[j].innerText;
-                    if (filter.searchArgument == "contains")
+                    filter.negative = false;
+                    if (filter.searchArgument == "contains") {
                         filter.searchArgument = "doesContain";
-                    else
-                        filter.searchArgument = "NOT doesContain";
+                    }
+                    else if (filter.searchArgument == "does not contain") {
+                        filter.searchArgument = "doesContain";
+                        filter.negative = true;
+                    }
                     break;
                 }
             }
@@ -73,7 +77,7 @@ function onSearchClick() {
     }
     else {
         stopOngoingSearch = true;
-        $("searchButton").down().innerText = _("Search");
+        onSearchEnd();
     }
 }
 
@@ -155,16 +159,20 @@ function searchMailsCallback(http) {
                 row.writeAttribute("folderName", http.callbackData.folderName);
                 
                 var cell1 = row.insertCell(0);
+                cell1.writeAttribute("id", "td_table_1");
                 cell1.innerHTML = response.headers[i][3];
                 
                 var cell2 = row.insertCell(1);
+                cell2.writeAttribute("id", "td_table_2");
                 cell2.innerHTML = response.headers[i][4];
                 
                 var cell3 = row.insertCell(2);
-                cell3.innerHTML = response.headers[i][7];
+                cell3.writeAttribute("id", "td_table_3");
+                cell3.innerHTML = response.headers[i][0];
                 
                 var cell4 = row.insertCell(3);
-                cell4.innerHTML = response.headers[i][12];
+                cell4.writeAttribute("id", "td_table_4");
+                cell4.innerHTML = response.headers[i][7];
             }
 
         }
@@ -195,12 +203,23 @@ function searchMailsCallback(http) {
             document.searchMailsAjaxRequest = triggerAjaxRequest(urlstr, searchMailsCallback, callbackData, content, {"content-type": "application/json"});
         }
         else {
-            $("searchButton").down().innerText = _("Search");
+            onSearchEnd();
         }
  
     }
 }
 
+function onSearchEnd() {
+    $("searchButton").down().innerText = _("Search");
+    var nbResults = $$(".resultsRow").length;
+    if (nbResults == 1)
+        $("resultsFound").innerHTML = nbResults + " " + _("result found");
+    else if (nbResults > 0)
+        $("resultsFound").innerHTML = nbResults + " " + _("results found");
+    else
+        $("resultsFound").innerHTML = "";
+}
+
 function onCancelClick() {
     disposeDialog();
     $("searchMailView").remove();
@@ -261,31 +280,27 @@ function onAddFilter() {
     
     var cell4 = row.insertCell(3);
     Element.addClassName(cell4, "buttonsCell");
-    var element4 = document.createElement("a");
-    var element5 = document.createElement("a");
-    var buttonsDiv = document.createElement("div");
-    var spanAddFilter = document.createElement("span");
-    var imageAddFilter = document.createElement("img");
-    var spanRemoveFilter = document.createElement("span");
-    var imageRemoveFilter = document.createElement("img");
-    Element.addClassName(element4, "addFilterButton");
-    Element.addClassName(buttonsDiv, "bottomToolbar");
-    element4.writeAttribute("name", "addFilter");
-    element4.writeAttribute("id", "addFilterButtonRow" + rowCount);
-    element4.writeAttribute("onclick", "onAddFilter(this)");
-    imageAddFilter.writeAttribute("src", "/SOGo.woa/WebServerResources/add-icon.png");
-    spanAddFilter.appendChild(imageAddFilter);
-    element4.appendChild(spanAddFilter);
-    buttonsDiv.appendChild(element4);
     
-    Element.addClassName(element5, "removeFilterButton");
-    element5.writeAttribute("name", "removeFilter");
-    element5.writeAttribute("id", "removeFilterButtonRow" + rowCount);
-    element5.writeAttribute("onclick", "onRemoveFilter(this)");
+    var buttonsDiv = document.createElement("div");
+    var imageAddFilter = document.createElement("img");
+    var imageRemoveFilter = document.createElement("img");
+    imageAddFilter.writeAttribute("src", "/SOGo.woa/WebServerResources/add-icon.png");
     imageRemoveFilter.writeAttribute("src", "/SOGo.woa/WebServerResources/remove-icon.png");
-    spanRemoveFilter.appendChild(imageRemoveFilter);
-    element5.appendChild(spanRemoveFilter);
-    buttonsDiv.appendChild(element5);
+    Element.addClassName(imageAddFilter, "addFilterButton");
+    Element.addClassName(imageAddFilter, "glow");
+    Element.addClassName(imageRemoveFilter, "removeFilterButton");
+    Element.addClassName(imageRemoveFilter, "glow");
+    imageAddFilter.writeAttribute("name", "addFilter");
+    imageAddFilter.writeAttribute("id", "addFilterButtonRow" + rowCount);
+    imageAddFilter.writeAttribute("onclick", "onAddFilter(this)");
+    imageRemoveFilter.writeAttribute("name", "removeFilter");
+    imageRemoveFilter.writeAttribute("id", "removeFilterButtonRow" + rowCount);
+    imageRemoveFilter.writeAttribute("onclick", "onRemoveFilter(this)");
+    buttonsDiv.writeAttribute("id", "filterButtons");
+    
+    buttonsDiv.appendChild(imageAddFilter);
+    buttonsDiv.appendChild(imageRemoveFilter);
+    
     cell4.appendChild(buttonsDiv);
 
 }
@@ -333,24 +348,37 @@ function onDeleteClick(event) {
 }
 
 function onResizeClick() {
-    var resizeAttrribute = $("resizeButton").getAttribute("name");
-    if (resizeAttrribute == "resizeUp") {
-        $("searchFiltersList").style.display = "none";
-        $("searchMailFooter").style.height = "300px";
-        $("resultsTable").style.height = "265px";
-        $("resizeUp").style.display = "none";
-        $("resizeDown").style.display = "block";
-        $("resizeButton").writeAttribute("name", "resizeDown");
+    var searchFiltersList = jQuery("#searchFiltersList");
+    var searchMailFooter = jQuery("#searchMailFooter");
+    var resultsTable = jQuery("#resultsTable");
+    var imgPosition = jQuery("#imgPosition");
+    var state = 'collapse';
+    var img = $("listCollapse").select('img').first();
+    
+    
+    if (searchFiltersList[0].visible()) {
+        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;";
+            }});
+            imgPosition.animate({ top:"113px" }, {duration: 100});
+        });
     }
     else {
-        $("searchFiltersList").style.display = "block";
-        $("searchMailFooter").style.height = "141px";
-        $("resultsTable").style.height = "106px";
-        $("resizeUp").style.display = "block";
-        $("resizeDown").style.display = "none";
-        $("resizeButton").writeAttribute("name", "resizeUp");
+        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;";
+        }});
+        imgPosition.animate({ top:"233px" }, {duration: 100});
+        resultsTable.animate({height:"171px"}, 100);
+        
     }
-    
 }
 
 /*************** Init ********************/
@@ -363,6 +391,4 @@ function initSearchMailView () {
     // Observers : Event.on(element, eventName[, selector], callback)
     $("searchMailFooter").down("tbody").on("mousedown", "tr", onResultSelectionChange);
     $("searchMailFooter").down("tbody").on("dblclick", "tr", onOpenClick);
-    
-    
 }

UI/WebServerResources/generic.css

@@ -660,15 +660,14 @@ DIV.dialog > DIV
 
 DIV.dialog.searchMail { 
   position: relative;
-  margin: 0px;
   padding: 0px;
   opacity: 1;
   width: 700px;
-  margin: 100px auto;
+  margin: 2em auto;
 }
 
-DIV.dialog.searchMail > DIV { 
-  padding: 10px; 
+DIV.dialog.searchMail > DIV {
+  min-height:467px;
 }
 
 DIV.dialog.none