Improve display of autocompletion of contacts

NEWS

@@ -5,6 +5,7 @@ Enhancements
  - [web] create card from sender or recipient address (#3002, #4610)
  - [web] updated Angular to version 1.7.7
  - [web] restored support for next/previous slot suggestion in attendees editor
+ - [web] improved auto-completion display of contacts
  - [core] baseDN now accept dynamic domain values (#3685 - sponsored by iRedMail)
  - [core] we now handle optional and non-required attendee states
 

UI/Templates/MailerUI/UIxMailEditor.wox

@@ -18,7 +18,7 @@
       <md-toolbar>
         <div class="md-toolbar-tools">
           <!-- expand dialog -->
-          <md-button ng-click="editor.toggleFullscreen()"
+          <md-button ng-click="editor.toggleFullscreen($event)"
                      class="md-icon-button md-primary md-hue-1 hide show-gt-xs"
                      aria-hidden="true"
                      ng-if="!isPopup">
@@ -72,6 +72,7 @@
                         md-add-on-blur="true">
                 <md-autocomplete
                     class="sg-chips-autocomplete"
+                    md-menu-class="md-2-line"
                     md-autofocus="editor.isNew()"
                     md-search-text="editor.autocomplete.to.searchText"
                     md-selected-item="editor.autocomplete.to.selected"
@@ -81,14 +82,13 @@
                     md-no-cache="true"
                     label:placeholder="Add a recipient">
                   <md-item-template>
-                    <span class="md-contact-suggestion">
-                      <span class="md-contact-name"
+                    <div class="sg-tile-content">
+                      <div class="sg-md-subhead"
                             md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$fullname}}</span>
-                      <span class="md-contact-email"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$email}}</span>
-                    </span>
+                            md-highlight-flags="gi">{{ user.$shortFormat(editor.autocomplete.to.searchText) }}</div>
+                      <div class="sg-md-body"
+                           md-colors="::{color: 'default-background-500'}">{{ user.containername }}</div>
+                    </div>
                   </md-item-template>
                 </md-autocomplete>
                 <md-chip-template>{{$chip}}</md-chip-template>
@@ -106,22 +106,22 @@
                         md-add-on-blur="true">
                 <md-autocomplete
                     class="sg-chips-autocomplete"
+                    md-menu-class="md-2-line"
                     md-search-text="editor.autocomplete.cc.searchText"
                     md-selected-item="editor.autocomplete.cc.selected"
                     md-items="user in editor.contactFilter(editor.autocomplete.cc.searchText)"
                     md-min-length="3"
-                    md-delay="300"
+                    md-delay="150"
                     md-no-cache="true"
                     label:placeholder="Add a recipient">
                   <md-item-template>
-                    <span class="md-contact-suggestion">
-                      <span class="md-contact-name"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$fullname}}</span>
-                      <span class="md-contact-email"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$email}}</span>
-                    </span>
+                    <div class="sg-tile-content">
+                      <div class="sg-md-subhead"
+                            md-highlight-text="editor.autocomplete.cc.searchText"
+                            md-highlight-flags="gi">{{ user.$shortFormat(editor.autocomplete.cc.searchText) }}</div>
+                      <div class="sg-md-body"
+                           md-colors="::{color: 'default-background-500'}">{{ user.containername }}</div>
+                    </div>
                   </md-item-template>
                 </md-autocomplete>
                 <md-chip-template>{{$chip}}</md-chip-template>
@@ -139,22 +139,22 @@
                         md-add-on-blur="true">
                 <md-autocomplete
                     class="sg-chips-autocomplete"
+                    md-menu-class="md-2-line"
                     md-selected-item="editor.autocomplete.bcc.selected"
                     md-search-text="editor.autocomplete.bcc.searchText"
                     md-items="user in editor.contactFilter(editor.autocomplete.bcc.searchText)"
                     md-min-length="3"
-                    md-delay="300"
+                    md-delay="150"
                     md-no-cache="true"
                     label:placeholder="Add a recipient">
                   <md-item-template>
-                    <span class="md-contact-suggestion">
-                      <span class="md-contact-name"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$fullname}}</span>
-                      <span class="md-contact-email"
-                            md-highlight-text="editor.autocomplete.to.searchText"
-                            md-highlight-flags="^i">{{user.$$email}}</span>
-                    </span>
+                    <div class="sg-tile-content">
+                      <div class="sg-md-subhead"
+                            md-highlight-text="editor.autocomplete.bcc.searchText"
+                            md-highlight-flags="gi">{{ user.$shortFormat(editor.autocomplete.bcc.searchText) }}</div>
+                      <div class="sg-md-body"
+                           md-colors="::{color: 'default-background-500'}">{{ user.containername }}</div>
+                    </div>
                   </md-item-template>
                 </md-autocomplete>
                 <md-chip-template>{{$chip}}</md-chip-template>

UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox

@@ -235,22 +235,21 @@
             <md-icon>search</md-icon>
             <md-autocomplete
                 class="md-flex"
-                md-menu-class="md-3-line"
+                md-menu-class="md-2-line"
                 label:md-floating-label="Invite Attendees"
                 md-search-text="editor.searchText"
                 md-selected-item-change="editor.addAttendee(card, editor.searchText)"
                 md-items="card in editor.cardFilter(editor.searchText)"
                 md-item-text="card.empty"
                 var:md-min-length="minimumSearchLength"
-                md-delay="300"
+                md-delay="150"
                 md-no-cache="true"
                 sg-enter="editor.addAttendee(editor.searchText)">
               <md-item-template>
-                  <div class="md-list-item-text" layout="column">
-                    <h3 md-highlight-text="editor.searchText" md-highlight-flags="^i">{{ card.$$fullname }}</h3>
-                    <h4 md-highlight-text="editor.searchText" md-highlight-flags="^i">{{ card.$$email }}</h4>
-                    <p>{{ card.containername }}</p>
-                  </div>
+                <div class="sg-tile-content">
+                  <div class="sg-md-subhead" md-highlight-text="editor.searchText" md-highlight-flags="gi">{{ card.$shortFormat(editor.searchText) }}</div>
+                  <div class="sg-md-body" md-colors="::{color: 'default-background-500'}">{{ card.containername }}</div>
+                </div>
               </md-item-template>
             </md-autocomplete>
             <md-button type="button" class="sg-icon-button"

UI/Templates/SchedulerUI/UIxAttendeesEditor.wox

@@ -19,12 +19,10 @@
     <sg-timepicker ng-model="editor.component.$attendees.slotEndTimeLimit"><!-- slot end --></sg-timepicker>
     <md-button class="md-icon-button"
                label:aria-label="Previous slot"
-               ng-click="editor.previousSlot()"
-               md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
+               ng-click="editor.previousSlot()"><md-icon>chevron_left</md-icon></md-button>
     <md-button class="md-icon-button"
                label:aria-label="Next slot"
-               ng-click="editor.nextSlot()"
-               md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
+               ng-click="editor.nextSlot()"><md-icon>chevron_right</md-icon></md-button>
   </div>
   <div layout="row">
     <!-- attendees -->

UI/WebServerResources/js/Common/Common.app.js

@@ -203,7 +203,6 @@
       'contrastLightColors': ['800', '900']
     });
     var greyMap = $mdThemingProvider.extendPalette('grey', {
-      '600': '00b0c0', // used when highlighting text in md-autocomplete,
       '1000': 'baa870' // used as the background color of the busy periods of the attendees editor
     });
     $mdThemingProvider.definePalette('sogo-grey', greyMap);

UI/WebServerResources/scss/components/autocomplete/autocomplete.scss

@@ -20,18 +20,22 @@ $list-item-dense-header-font-size: round($subhead-font-size-base * .8) !default;
 $list-item-dense-font-size: round($body-font-size-base * .85) !default;
 $list-item-dense-line-height: 1.05 !default;
 
-
 .md-autocomplete-suggestions.md-3-line {
   li {
     @include ie11-min-height-flexbug($list-item-dense-three-line-height);
     height: $list-item-dense-three-line-height;
     line-height: $list-item-dense-line-height;
     min-height: $list-item-dense-three-line-height;
+  }
+}
+
+.md-autocomplete-suggestions.md-2-line,
+.md-autocomplete-suggestions.md-3-line {
+  li {
     display: flex;
     flex: 1 1 auto;
     align-items: center;
 
-
     .md-list-item-text {
       overflow: hidden;
       text-overflow: ellipsis;

UI/WebServerResources/scss/components/list/list.scss

@@ -184,7 +184,7 @@ div.md-tile-left {
     }
     .#{$md}-subhead {
       @extend .#{$md}-body-1;
-      font-size: initial;
+      white-space: pre-wrap;
     }
     .#{$md}-body {
       @extend .#{$md}-caption;