Improve display of autocompletion of contacts
parent
601981c040
commit
499c42aa77
1
NEWS
1
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
|
||||
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -235,21 +235,20 @@
|
|||
<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 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>
|
||||
|
|
|
@ -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 -->
|
||||
|
|
|
@ -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);
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
Loading…
Reference in New Issue