LupusNobilis
/
sogo
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

(js,css) Improve attendees editor 

Fixes #3730
pull/217/head
Francis Lachapelle 2016-06-16 14:46:05 -04:00
parent 15188a4997
commit af8f939559
4 changed files with 48 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
UI/Templates/SchedulerUI/UIxAppointmentEditorTemplate.wox
View File

@ -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>

11
UI/Templates/SchedulerUI/UIxAttendeesEditor.wox
View File

@ -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">

2
UI/WebServerResources/js/Scheduler/ComponentController.js
View File

@ -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;
}
}

42
UI/WebServerResources/scss/views/SchedulerUI.scss
View File

@ -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);