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

(js) Add date picker to navigate in Calendar view

pull/217/head
Francis Lachapelle 2016-07-04 17:11:48 -04:00
parent f7afab5f37
commit da0a099638
11 changed files with 201 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
NEWS
View File

@ -10,6 +10,7 @@ Enhancements
- [eas] use the preferred email identity in EAS if valid (#3698)
- [eas] handle inline attachments during EAS content generation
- [web] all batch operations can now be performed on selected messages in advanced search mode
- [web] add date picker to change date, week, or month of current Calendar view
- [oc] better handling of nested attachments with OpenChange
Bug fixes

26
UI/Templates/SchedulerUI/UIxCalDayView.wox
View File

@ -9,21 +9,27 @@
<md-card>
<md-card-actions flex-none="flex-none" layout="row" layout-align="start center">
<md-button class="md-icon-button"
<md-button class="sg-icon-button"
var:aria-label="yesterdayName"
var:date="prevDayQueryParameters.day"
ng-click="calendar.changeDate($event)"><md-icon>chevron_left</md-icon></md-button>
<md-button class="md-icon-button"
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
<md-button class="sg-icon-button"
var:aria-label="tomorrowName"
var:date="nextDayQueryParameters.day"
ng-click="calendar.changeDate($event)"><md-icon>chevron_right</md-icon></md-button>
<div class="md-flex"><var:string value="currentDayName" /></div>
<md-button class="md-icon-button md-accent"
label:aria-label="Today"
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
<md-datepicker md-hide-icons="triangle"
md-open-on-focus="md-open-on-focus"
ng-model="calendar.selectedDate"
ng-change="calendar.changeDate($event, calendar.selectedDate)"
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
<div class="md-flex"><!-- spacer --></div>
<md-button label:aria-label="Today"
var:date="todayQueryParameters.day"
ng-click="calendar.changeDate($event)">
<md-tooltip><var:string label:value="Today"/></md-tooltip>
<md-icon>today</md-icon>
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink">
<var:string label:value="Today"/>
</md-button>
<a class="md-icon-button md-button"
label:aria-label="Day"

22
UI/Templates/SchedulerUI/UIxCalMonthView.wox
View File

@ -12,18 +12,24 @@
<md-button class="md-icon-button"
label:aria-label="Previous Month"
var:date="prevMonthQueryParameters.day"
ng-click="calendar.changeDate($event)"><md-icon>chevron_left</md-icon></md-button>
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
<md-button class="md-icon-button"
label:aria-label="Next Month"
var:date="nextMonthQueryParameters.day"
ng-click="calendar.changeDate($event)"><md-icon>chevron_right</md-icon></md-button>
<div class="md-flex"><var:string value="monthNameOfThisMonth" /> <var:string value="selectedDate.yearOfCommonEra" /></div>
<md-button class="md-icon-button md-accent"
label:aria-label="Today"
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
<md-datepicker md-hide-icons="triangle"
md-open-on-focus="md-open-on-focus"
ng-model="calendar.selectedDate"
ng-change="calendar.changeDate($event, calendar.selectedDate)"
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
<div class="md-flex"><!-- spacer --></div>
<md-button label:aria-label="Today"
var:date="todayQueryParameters.day"
ng-click="calendar.changeDate($event)">
<md-tooltip><var:string label:value="Today"/></md-tooltip>
<md-icon>today</md-icon>
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink">
<var:string label:value="Today"/>
</md-button>
<a class="md-icon-button md-button"
label:aria-label="Day"

23
UI/Templates/SchedulerUI/UIxCalMulticolumnDayView.wox
View File

@ -12,17 +12,24 @@
<md-button class="md-icon-button"
var:aria-label="yesterdayName"
var:date="prevDayQueryParameters.day"
ng-click="calendar.changeDate($event)"><md-icon>chevron_left</md-icon></md-button>
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
<md-button class="md-icon-button"
var:aria-label="tomorrowName"
var:date="nextDayQueryParameters.day"
ng-click="calendar.changeDate($event)"><md-icon>chevron_right</md-icon></md-button>
<div class="md-flex"><var:string value="currentDayName" /></div>
<md-button class="md-icon-button md-accent"
label:aria-label="Today"
ng-click="app.today()">
<md-tooltip><var:string label:value="Today"/></md-tooltip>
<md-icon>today</md-icon>
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
<md-datepicker md-hide-icons="triangle"
md-open-on-focus="md-open-on-focus"
ng-model="calendar.selectedDate"
ng-change="calendar.changeDate($event, calendar.selectedDate)"
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
<div class="md-flex"><!-- spacer --></div>
<md-button label:aria-label="Today"
var:date="todayQueryParameters.day"
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink">
<var:string label:value="Today"/>
</md-button>
<a class="md-icon-button md-button"
label:aria-label="Day"

22
UI/Templates/SchedulerUI/UIxCalWeekView.wox
View File

@ -12,18 +12,24 @@
<md-button class="md-icon-button"
label:aria-label="Previous Week"
var:date="prevWeekQueryParameters.day"
ng-click="calendar.changeDate($event)"><md-icon>chevron_left</md-icon></md-button>
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink"><md-icon>chevron_left</md-icon></md-button>
<md-button class="md-icon-button"
label:aria-label="Next Week"
var:date="nextWeekQueryParameters.day"
ng-click="calendar.changeDate($event)"><md-icon>chevron_right</md-icon></md-button>
<div class="md-flex"><var:string value="currentWeekName" /></div>
<md-button class="md-icon-button md-accent"
label:aria-label="Today"
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink"><md-icon>chevron_right</md-icon></md-button>
<md-datepicker md-hide-icons="triangle"
md-open-on-focus="md-open-on-focus"
ng-model="calendar.selectedDate"
ng-change="calendar.changeDate($event, calendar.selectedDate)"
sg-datepicker-readonly-input="true"><!-- date picker --></md-datepicker>
<div class="md-flex"><!-- spacer --></div>
<md-button label:aria-label="Today"
var:date="todayQueryParameters.day"
ng-click="calendar.changeDate($event)">
<md-tooltip><var:string label:value="Today"/></md-tooltip>
<md-icon>today</md-icon>
ng-click="calendar.changeDate($event)"
md-no-ink="md-no-ink">
<var:string label:value="Today"/>
</md-button>
<a class="md-icon-button md-button"
label:aria-label="Day"

43
UI/WebServerResources/js/Common/sgDatepickerReadonlyInput.directive.js 100644
View File

@ -0,0 +1,43 @@
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
(function() {
'use strict';
/**
* sgDatepickerReadonlyInput - A directive that disabled the input field of a datepicker.
* @memberof SOGo.Common
*
* @example:
<md-datepicker md-hide-icons="triangle"
md-open-on-focus="md-open-on-focus"
ng-model="selectedDate"
sg-datepicker-readonly-input>
*/
function sgDatepickerReadonlyInput() {
return {
link: postLink,
require: 'mdDatepicker',
restrict: 'A'
};
function postLink(scope, element, attrs, datepickerCtrl) {
function getInput() {
return element.find('input').eq(0);
}
// We need to wait for the autocomplete directive to be compiled
var listener = scope.$watch(getInput, function (input) {
if (input.length) {
listener(); // self release
input.prop('disabled', true);
input.parent().addClass('sg-datepicker-readonly-input-container');
}
});
}
}
angular
.module('SOGo.Common')
.directive('sgDatepickerReadonlyInput', sgDatepickerReadonlyInput);
})();

55
UI/WebServerResources/js/Common/utils.js
View File

@ -299,6 +299,8 @@ Date.prototype.addDays = function(nbrDays) {
milliSeconds = this.getTime() + dstOffset*60*1000;
this.setTime(milliSeconds);
}
return this;
};
Date.prototype.addHours = function(nbrHours) {
@ -323,6 +325,56 @@ Date.prototype.beginOfDay = function() {
return beginOfDay;
};
Date.prototype.firstWeekOfYearForDate = function(localeProvider) {
var firstWeekRule, dayOfWeek, januaryFirst, firstWeek;
firstWeekRule = localeProvider.firstWeekOfYear;
januaryFirst = new Date(this.getTime());
januaryFirst.setMonth(0);
januaryFirst.setDate(1);
dayOfWeek = januaryFirst.getDay();
if (firstWeekRule == 'First4DayWeek') {
if ((dayOfWeek + localeProvider.firstDayOfWeek) % 7 < 4)
firstWeek = januaryFirst.beginOfWeek(localeProvider.firstDayOfWeek);
else
firstWeek = januaryFirst.addDays(7).beginOfWeek(localeProvider.firstDayOfWeek);
}
else if (firstWeekRule == 'FirstFullWeek') {
if (dayOfWeek === 0)
firstWeek = januaryFirst.beginOfWeek(localeProvider.firstDayOfWeek);
else
firstWeek = januaryFirst.addDays(7).beginOfWeek(localeProvider.firstDayOfWeek);
}
else {
firstWeek = januaryFirst.beginOfWeek(localeProvider.firstDayOfWeek);
}
return firstWeek;
};
Date.prototype.getWeek = function(localeProvider) {
var firstWeek, previousWeek, weekNumber;
firstWeek = this.firstWeekOfYearForDate(localeProvider);
if (firstWeek.getTime() < this.getTime()) {
weekNumber = 1 + Math.floor((this.getTime() - firstWeek.getTime()) / (86400000 * 7));
}
else
{
// Date is within the last week of the previous year;
// Compute the previous week number to find the week number of the requested date.
// The number will either be 52 or 53.
previousWeek = new Date(this.getTime());
previousWeek.addDays(-7);
firstWeek = previousWeek.firstWeekOfYearForDate(localeProvider);
weekNumber = 2 + Math.floor((previousWeek.getTime() - firstWeek.getTime()) / (86400000 * 7));
}
return weekNumber;
};
Date.prototype.beginOfWeek = function(firstDayOfWeek) {
var offset = firstDayOfWeek - this.getDay();
if (offset > 0)
@ -375,7 +427,7 @@ Date.prototype.getHourString = function() {
Date.prototype.format = function(localeProvider, format) {
var separators, parts, i, max,
date = [],
validParts = /%[deaAmbByYHIMp]/g,
validParts = /%[deaAmbByYUHIMp]/g,
val = {
'%d': this.getDate(), // day of month (e.g., 01)
'%e': this.getDate(), // day of month, space padded
@ -386,6 +438,7 @@ Date.prototype.format = function(localeProvider, format) {
'%B': localeProvider.months[this.getMonth()], // locale's full month name (e.g., January)
'%y': this.getFullYear().toString().substring(2), // last two digits of year (00..99)
'%Y': this.getFullYear(), // year
'%U': this.getWeek(localeProvider), // week of the year
'%H': this.getHours(), // hour (00..23)
'%M': this.getMinutes() }; // minute (00..59)
val['%I'] = val['%H'] > 12 ? val['%H'] % 12 : val['%H']; // hour (01..12)

6
UI/WebServerResources/js/Preferences/Preferences.service.js
View File

@ -91,6 +91,10 @@
// Configure date locale
_this.$mdDateLocaleProvider = Preferences.$mdDateLocaleProvider;
angular.extend(_this.$mdDateLocaleProvider, data.locale);
angular.extend(_this.$mdDateLocaleProvider, {
firstDayOfWeek: data.SOGoFirstDayOfWeek,
firstWeekOfYear: data.SOGoFirstWeekOfYear
});
_this.$mdDateLocaleProvider.firstDayOfWeek = parseInt(data.SOGoFirstDayOfWeek);
_this.$mdDateLocaleProvider.weekNumberFormatter = function(weekNumber) {
return l('Week %d', weekNumber);
@ -101,7 +105,7 @@
return dateString? dateString.parseDate(_this.$mdDateLocaleProvider, data.SOGoShortDateFormat) : new Date(NaN);
};
_this.$mdDateLocaleProvider.formatDate = function(date) {
return date? date.format(_this.$mdDateLocaleProvider, data.SOGoShortDateFormat) : '';
return date? date.format(_this.$mdDateLocaleProvider, date.$dateFormat || data.SOGoShortDateFormat) : '';
};
_this.$mdDateLocaleProvider.parseTime = function(timeString) {
return timeString? timeString.parseDate(_this.$mdDateLocaleProvider, data.SOGoTimeFormat) : new Date(NaN);

31
UI/WebServerResources/js/Scheduler/CalendarController.js
View File

@ -6,25 +6,46 @@
/**
* @ngInject
*/
CalendarController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', 'Calendar', 'Component', 'stateEventsBlocks'];
function CalendarController($scope, $rootScope, $state, $stateParams, Calendar, Component, stateEventsBlocks) {
CalendarController.$inject = ['$scope', '$rootScope', '$state', '$stateParams', 'Calendar', 'Component', 'Preferences', 'stateEventsBlocks'];
function CalendarController($scope, $rootScope, $state, $stateParams, Calendar, Component, Preferences, stateEventsBlocks) {
var vm = this, deregisterCalendarsList;
// Make the toolbar state of all-day events persistent
if (angular.isUndefined(CalendarController.expandedAllDays))
CalendarController.expandedAllDays = false;
vm.selectedDate = $stateParams.day.asDate();
vm.expandedAllDays = CalendarController.expandedAllDays;
vm.toggleAllDays = toggleAllDays;
vm.views = stateEventsBlocks;
vm.changeDate = changeDate;
vm.changeView = changeView;
Preferences.ready().then(function() {
_formatDate(vm.selectedDate);
});
// Refresh current view when the list of calendars is modified
deregisterCalendarsList = $rootScope.$on('calendars:list', updateView);
// Destroy event listener when the controller is being deactivated
$scope.$on('$destroy', deregisterCalendarsList);
function _formatDate(date) {
if ($stateParams.view == 'month') {
date.setDate(1);
date.setHours(12);
date.$dateFormat = '%B %Y';
}
else if ($stateParams.view == 'week') {
date.setTime(date.beginOfWeek(Preferences.defaults.SOGoFirstDayOfWeek).getTime());
date.$dateFormat = l('Week %d').replace('%d', '%U');
}
else {
date.$dateFormat = '%A';
}
}
// Expand or collapse all-day events
function toggleAllDays() {
CalendarController.expandedAllDays = !CalendarController.expandedAllDays;
@ -46,8 +67,10 @@
}
// Change calendar's date
function changeDate($event) {
var date = angular.element($event.currentTarget).attr('date');
function changeDate($event, newDate) {
var date = newDate? newDate.getDayString() : angular.element($event.currentTarget).attr('date');
if (newDate)
_formatDate(newDate);
$state.go('calendars.view', { day: date });
}

18
UI/WebServerResources/js/Scheduler/CalendarsController.js
View File

@ -25,7 +25,7 @@
vm.showLinks = showLinks;
vm.showProperties = showProperties;
vm.subscribeToFolder = subscribeToFolder;
vm.today = today;
// vm.today = today;
vm.filter = { name: '' };
vm.toggleSortableMode = toggleSortableMode;
@ -412,14 +412,14 @@
});
}
function today() {
var fragments = $window.location.hash.split('/'),
state = fragments[1],
view = fragments[2],
now = new Date(),
path = ['#', state, view, now.getDayString()];
$window.location = path.join('/');
}
// function today() {
// var fragments = $window.location.hash.split('/'),
// state = fragments[1],
// view = fragments[2],
// now = new Date(),
// path = ['#', state, view, now.getDayString()];
// $window.location = path.join('/');
// }
}
angular

3
UI/WebServerResources/scss/components/datepicker/datePicker.scss
View File

@ -12,3 +12,6 @@
margin-left: 0;
}
.sg-datepicker-readonly-input-container {
border-bottom: 0;
}