From 69ae9d752a88649a4ee51ce1f03b1ac84ed7b920 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 28 Jun 2018 10:45:11 -0400
Subject: [PATCH] (css) Improve display of advanced mail search

---
 UI/MailerUI/English.lproj/Localizable.strings    |  9 +++++++++
 UI/Templates/MailerUI/UIxMailMainFrame.wox       | 16 ++++++++--------
 .../js/Mailer/MailboxesController.js             |  8 ++++----
 .../js/Mailer/MessageController.js               |  3 ++-
 .../components/pseudo-input/pseudo-input.scss    | 15 ++++++++++-----
 5 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/UI/MailerUI/English.lproj/Localizable.strings b/UI/MailerUI/English.lproj/Localizable.strings
index b98dad073..64c333ec5 100644
--- a/UI/MailerUI/English.lproj/Localizable.strings
+++ b/UI/MailerUI/English.lproj/Localizable.strings
@@ -403,6 +403,15 @@
 "Your email has been sent" = "Your email has been sent";
 "Folder compacted" = "Folder compacted";
 
+/* Advanced search */
+"Enter Subject" = "Enter Subject";
+"Enter From" = "Enter From";
+"Enter To" = "Enter To";
+"Enter Cc" = "Enter Cc";
+"Enter Body" = "Enter Body";
+"match" = "match";
+"does not match" = "does not match";
+
 /* Aria label for scope of search on messages */
 "Search scope" = "Search scope";
 
diff --git a/UI/Templates/MailerUI/UIxMailMainFrame.wox b/UI/Templates/MailerUI/UIxMailMainFrame.wox
index 3b2cde169..6fb53aabc 100644
--- a/UI/Templates/MailerUI/UIxMailMainFrame.wox
+++ b/UI/Templates/MailerUI/UIxMailMainFrame.wox
@@ -128,11 +128,11 @@
     </md-toolbar>
 
     <!-- Advanced search toolbar -->
-    <md-toolbar layout="column" class="md-tall toolbar-main md-hue-3"
+    <md-toolbar layout="column" class="toolbar-main md-hue-3"
                 ng-show="mailbox.service.$virtualPath !== false">
       <div class="md-toolbar-tools">
         <div layout="column" class="md-flex">
-          <div class="pseudo-input-container--compact">
+          <div class="pseudo-input-container pseudo-input-container--compact">
             <label class="pseudo-input-label"><var:string label:value="Add a Criteria"/></label>
           </div>
           <div layout="row">
@@ -157,19 +157,19 @@
           <md-icon>close</md-icon>
         </md-button>
       </div>
-      <div class="md-toolbar-tools">
+      <div class="md-toolbar-tools sg-toolbar-auto">
         <md-chips class="md-flex"
                   ng-show="app.search.params.length != 0 || app.currentSearchParam"
                   ng-model="app.search.params"
                   md-transform-chip="app.newSearchParam($chip)"
                   md-add-on-blur="true">
-          <input sg-focus-on="advancedSearch" type="text"
+          <input type="text" sg-focus-on="advancedSearch"
                  ng-disabled="app.currentSearchParam.length == 0"
                  sg-placeholder="app.search.options[app.currentSearchParam]"/>
           <md-chip-template>
-            <span class="md-caption" ng-show="$chip.negative == 0">(<var:string label:value="match"/></span>
-            <span class="md-caption" ng-show="$chip.negative == 1">(<var:string label:value="does not match"/></span>
-            <span class="md-caption" ng-bind="$chip.searchBy"><!-- search by --></span>
+            <span class="md-caption" ng-show="$chip.negative == 0"><var:string label:value="match"/></span>
+            <span class="md-caption" ng-show="$chip.negative == 1"><var:string label:value="does not match"/></span>
+            <span class="md-caption" ng-bind="$chip.searchBy.capitalize() | loc"><!-- search by --></span>
             <span ng-bind="$chip.searchInput"><!-- search input --></span>
           </md-chip-template>
         </md-chips>
@@ -197,7 +197,7 @@
           </md-button>
         </md-menu-item>
         <md-menu-item ng-show="::$menuCtrl.folder.$isEditable">
-          <md-button type="button" ng-click="$menuCtrl.editFolder()">
+          <md-button type="button" ng-click="$menuCtrl.editFolder($event)">
             <var:string label:value="Rename"/>
           </md-button>
         </md-menu-item>
diff --git a/UI/WebServerResources/js/Mailer/MailboxesController.js b/UI/WebServerResources/js/Mailer/MailboxesController.js
index 464105402..ee1279f1a 100644
--- a/UI/WebServerResources/js/Mailer/MailboxesController.js
+++ b/UI/WebServerResources/js/Mailer/MailboxesController.js
@@ -123,19 +123,19 @@
     };
 
     this.addSearchParam = function(v) {
-      vm.currentSearchParam = v;
+      this.currentSearchParam = v;
       focus('advancedSearch');
       return false;
     };
 
     this.newSearchParam = function(pattern) {
-      if (pattern.length && vm.currentSearchParam.length) {
-        var n = 0, searchParam = vm.currentSearchParam;
+      if (pattern.length && this.currentSearchParam.length) {
+        var n = 0, searchParam = this.currentSearchParam;
         if (pattern.startsWith("!")) {
           n = 1;
           pattern = pattern.substring(1).trim();
         }
-        vm.currentSearchParam = '';
+        this.currentSearchParam = '';
         return { searchBy: searchParam, searchInput: pattern, negative: n };
       }
     };
diff --git a/UI/WebServerResources/js/Mailer/MessageController.js b/UI/WebServerResources/js/Mailer/MessageController.js
index 8a73bb05d..be59ff3dc 100644
--- a/UI/WebServerResources/js/Mailer/MessageController.js
+++ b/UI/WebServerResources/js/Mailer/MessageController.js
@@ -304,7 +304,8 @@
     };
 
     this.close = function() {
-      $state.go('mail.account.mailbox').then(function() {
+      var destination = Mailbox.$virtualMode ? 'mail.account.virtualMailbox' : 'mail.account.mailbox';
+      $state.go(destination).then(function() {
         vm.message = null;
         delete stateMailbox.selectedMessage;
       });
diff --git a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
index b5834a055..e2d553e72 100644
--- a/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
+++ b/UI/WebServerResources/scss/components/pseudo-input/pseudo-input.scss
@@ -75,8 +75,13 @@ md-checkbox.pseudo-input-field {
 
 // The specs dimensions are too large to fit with angular-material
 // Here's a modifier
-// .pseudo-input-container--compact {
-//   .pseudo-input-label {
-//     margin-top: 0;
-//   }
-// }
+.pseudo-input-container--compact {
+  .pseudo-input-label {
+    margin-top: 0;
+    line-height: $bl;
+  }
+  md-select.pseudo-input-field,
+  md-checkbox.pseudo-input-field {
+    margin-bottom: $bl;
+  }
+}