From aac0ec9a6acdaa5d0e35029a3a7b12c2d8e2f440 Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Mon, 18 Feb 2019 14:59:07 -0500
Subject: [PATCH] Adopting new material guidelines for chips

See https://material.io/design/components/chips.html
---
 .../UIxAppointmentEditorTemplate.wox          |  2 +-
 .../UIxAppointmentViewTemplate.wox            |  4 ++--
 .../js/Contacts/Card.service.js               |  2 +-
 .../js/Preferences/PreferencesController.js   |  4 +---
 .../scss/components/chips/chips.scss          | 21 ++++++++++++++++---
 5 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index b99a99f4f..09e62a115 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -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>
diff --git a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
index c1310ecad..f4b04ad83 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentViewTemplate.wox
@@ -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="#"
diff --git a/UI/WebServerResources/js/Contacts/Card.service.js b/UI/WebServerResources/js/Contacts/Card.service.js
index 6735215ad..e1e84df2c 100644
--- a/UI/WebServerResources/js/Contacts/Card.service.js
+++ b/UI/WebServerResources/js/Contacts/Card.service.js
@@ -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)
diff --git a/UI/WebServerResources/js/Preferences/PreferencesController.js b/UI/WebServerResources/js/Preferences/PreferencesController.js
index d1b5a84be..1d79b4fa5 100644
--- a/UI/WebServerResources/js/Preferences/PreferencesController.js
+++ b/UI/WebServerResources/js/Preferences/PreferencesController.js
@@ -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;
diff --git a/UI/WebServerResources/scss/components/chips/chips.scss b/UI/WebServerResources/scss/components/chips/chips.scss
index 65effc644..66cd5f586 100644
--- a/UI/WebServerResources/scss/components/chips/chips.scss
+++ b/UI/WebServerResources/scss/components/chips/chips.scss
@@ -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;
   }
-}
\ No newline at end of file
+}