amorfo77/sogo
1
0
Fork 0
mirror of https://github.com/inverse-inc/sogo.git synced 2026-05-22 03:45:25 +00:00
Code Issues Projects Releases Wiki Activity

Adopting new material guidelines for chips

Browse Source 
See https://material.io/design/components/chips.html
This commit is contained in:
Francis Lachapelle
2019-02-18 14:59:07 -05:00
parent 5dc2ad3dec
commit aac0ec9a6a
5 changed files with 23 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+1 -1
View File
@@ -268,7 +268,7 @@
readonly="true">
<md-chip-template>
<div class="md-contact-avatar">
<sg-avatar-image sg-email="$chip.email" size="32">person</sg-avatar-image>
<sg-avatar-image sg-email="$chip.email" size="26">person</sg-avatar-image>
</div>
<div class="md-contact-name">{{$chip.name || $chip.email}}</div>
<md-icon ng-class="'icon-' + $chip.partstat"><!-- partstat --></md-icon>
UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+2 -2
View File
@@ -153,7 +153,7 @@
readonly="true">
<md-chip-template>
<div class="md-contact-avatar">
<sg-avatar-image sg-email="$chip.email" size="32">person</sg-avatar-image>
<sg-avatar-image sg-email="$chip.email" size="26">person</sg-avatar-image>
</div>
<div class="md-contact-name">
<a href="#"
@@ -173,7 +173,7 @@
readonly="true">
<md-chip-template>
<div class="md-contact-avatar">
<sg-avatar-image sg-email="$chip.email" size="32">person</sg-avatar-image>
<sg-avatar-image sg-email="$chip.email" size="26">person</sg-avatar-image>
</div>
<div class="md-contact-name">
<a href="#"
UI/WebServerResources/js/Contacts/Card.service.js
+1 -1
View File
@@ -150,7 +150,7 @@
if (!this.$$image)
this.$$image = this.image;
if (!this.$$image)
this.$$image = Card.$Preferences.avatar(this.$$email, 32, {no_404: true});
this.$$image = Card.$Preferences.avatar(this.$$email, 40, {no_404: true});
if (this.hasphoto)
this.photoURL = Card.$$resource.path(this.pid, this.id, 'photo');
if (this.isgroup)
UI/WebServerResources/js/Preferences/PreferencesController.js
+1 -3
View File
@@ -273,9 +273,7 @@
if (user.image)
user.$$image = user.image;
else
vm.preferences.avatar(user.c_email, 32, {no_404: true}).then(function(url) {
user.$$image = url;
});
user.$$image = vm.preferences.avatar(user.c_email, 40, {no_404: true});
}
});
return users;
UI/WebServerResources/scss/components/chips/chips.scss
+18 -3
View File
@@ -1,4 +1,6 @@
/// chips.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
$contact-chip-suggestion-margin: rem(0.4);
@import 'extends';
$chip-dense-font-size: rem(1.2) !default;
@@ -72,6 +74,14 @@ md-chips {
}
}
// Adapting avatars in contact chips to the new material guidelines
// See https://material.io/design/components/chips.html
.md-contact-chips .md-chips md-chip .md-contact-avatar img,
.md-contact-chips .sg-icon-badge-container md-icon {
height: $chip-height - 6px;
margin: 3px;
}
// Adjust space around secondary element in contact chip.
// Used for attendees participation status icon (UIxAppointmentViewTemplate.wox)
.md-contact-chips.sg-with-secondary .md-chips md-chip {
@@ -93,13 +103,18 @@ md-chips {
}
}
// In the autocompletion menu, don't limit the contact name to a fixed width
// and show the email address right after it
// In the autocompletion menu,
// - fix image alignement;
// - don't limit the contact name to a fixed width;
// - show the email address right after it.
.md-contact-suggestion {
img {
vertical-align: top;
}
.md-contact-name {
width: auto;
}
.md-contact-email {
margin-left: $contact-chip-suggestion-margin;
}
}
}