From af8f93955957b498d83f20be8cc3e15611b6000d Mon Sep 17 00:00:00 2001
From: Francis Lachapelle <flachapelle@inverse.ca>
Date: Thu, 16 Jun 2016 14:46:05 -0400
Subject: [PATCH] (js,css) Improve attendees editor

Fixes #3730
---
 .../UIxAppointmentEditorTemplate.wox          |  4 +-
 .../SchedulerUI/UIxAttendeesEditor.wox        | 11 +++--
 .../js/Scheduler/ComponentController.js       |  2 +
 .../scss/views/SchedulerUI.scss               | 42 ++++++++++++++++---
 4 files changed, 48 insertions(+), 11 deletions(-)

diff --git a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
index df0554fd8..557003471 100644
--- a/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
+++ b/UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
@@ -253,7 +253,7 @@
           </div>
           <!-- md-contact-chips don't support "readonly", so we build them using md-chips
                in readonly mode and a template similar to the one of md-contact-chips -->
-          <md-chips class="md-contact-chips sg-readonly"
+          <md-chips class="ng-hide md-contact-chips sg-readonly attendees-chips"
                     ng-model="editor.component.attendees"
                     ng-hide="editor.showAttendeesEditor"
                     readonly="true">
@@ -302,7 +302,7 @@
       <md-dialog-content class="md-default-theme md-bg md-warn md-padding sg-dialog-message ng-hide"
                          ng-show="editor.attendeeConflictError.conflicts">
         <div layout="row">
-          <div class="md-flex"><var:string label:value="A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?"/></div>
+          <div class="md-flex sg-padded--bottom"><var:string label:value="A time conflict exists with one or more attendees.\nWould you like to keep the current settings anyway?"/></div>
           <md-button class="md-icon-button" ng-click="editor.attendeeConflictError = false">
             <md-icon label:aria-label="Close">close</md-icon>
           </md-button>
diff --git a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
index 95dbd26ab..40afbc233 100644
--- a/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
+++ b/UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
@@ -29,15 +29,18 @@
                    ng-click="editor.removeAttendee(currentAttendee)">
           <md-icon>close</md-icon>
         </md-button>
+        <md-divider><!-- divider --></md-divider>
       </md-list-item>
     </md-list>
     <!-- freebusy -->
     <md-list class="day"
              ng-repeat="day in editor.attendeesEditor.days">
-      <md-list-item layout="column" layout-align="end start">
-        <div>{{day.stringWithSeparator}}</div>
-        <div class="hours" layout="row" layout-align="space-between center" layout-fill="layout-fill">
-          <div class="hour" ng-repeat="hour in ::editor.attendeesEditor.hours">{{hour}}</div>
+      <md-list-item layout-align="start end">
+        <div layout="column" layout-align="end start">
+          <div>{{day.stringWithSeparator}}</div>
+          <div class="hours" layout="row" layout-align="space-between center">
+            <div class="hour" ng-repeat="hour in ::editor.attendeesEditor.hours">{{hour}}</div>
+          </div>
         </div>
       </md-list-item>
       <md-list-item ng-repeat="currentAttendee in editor.component.attendees track by currentAttendee.email">
diff --git a/UI/WebServerResources/js/Scheduler/ComponentController.js b/UI/WebServerResources/js/Scheduler/ComponentController.js
index 81be3c7fd..53c6d02af 100644
--- a/UI/WebServerResources/js/Scheduler/ComponentController.js
+++ b/UI/WebServerResources/js/Scheduler/ComponentController.js
@@ -276,11 +276,13 @@
         // User pressed "Enter" in search field, adding a non-matching card
         if (card.isValidEmail()) {
           vm.component.addAttendee(new Card({ emails: [{ value: card }] }));
+          vm.showAttendeesEditor = true;
           vm.searchText = '';
         }
       }
       else {
         vm.component.addAttendee(card);
+        vm.showAttendeesEditor = true;
       }
     }
 
diff --git a/UI/WebServerResources/scss/views/SchedulerUI.scss b/UI/WebServerResources/scss/views/SchedulerUI.scss
index 70302ea34..bd2b9aebb 100644
--- a/UI/WebServerResources/scss/views/SchedulerUI.scss
+++ b/UI/WebServerResources/scss/views/SchedulerUI.scss
@@ -590,11 +590,42 @@ $quarter_height: 10px;
   }
 }
 
-/* Attendees Editor */
+.attendees-chips {
+  md-chips-wrap {
+    max-height: ($chip-height * 10); // show a maximum of 10 rows
+    opacity: 1;
+    overflow: auto;
+    transition: $swift-ease-in-out;
+    transition-delay: $swift-ease-in-out-duration;
+  }
+  &.ng-hide {
+    transition-duration: $swift-ease-in-out-duration;
+    md-chips-wrap {
+      max-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      transition: $swift-ease-in-out;
+      transition-delay: 0s;
+    }
+  }
+}
+
+/* Attendees dialog Editor */
 .attendees {
-  overflow: hidden;
-  overflow-x: auto;
+  max-height: ($list-item-height * 20); // show a maximum of 20 attendees
+  opacity: 1;
+  overflow: auto;
+  transition: $swift-ease-in-out;
+  transition-delay: $swift-ease-in-out-duration;
+  &.ng-hide {
+    max-height: 0;
+    opacity: 0;
+    overflow: hidden;
+    transition-delay: 0s;
+  }
+
   md-content {
+    background-color: transparent;
     display: table-row;
   }
   md-list {
@@ -602,7 +633,8 @@ $quarter_height: 10px;
     vertical-align: top;
     padding-top: 0;
     &.day {
-      min-width: 408px;
+      max-width: (16px * 24);
+      width: (16px * 24);
       md-list-item {
         //padding: 0;
         align-items: stretch;
@@ -641,7 +673,7 @@ $quarter_height: 10px;
     min-height: 16px;
     flex-wrap: nowrap;
     flex-grow: 0;
-    flex-basis: 17px; // hour's width + hour's border
+    flex-basis: 16px; // hour's width
     align-items: stretch;
     &.sg-no-freebusy {
       background-color: sg-color($sogoPaper, 200);