mirror of
https://github.com/inverse-inc/sogo.git
synced 2026-11-05 08:49:21 +00:00
Initial drag'n'drop support in Calendar module
TODO: - drag'n'drop in month's view; - drag to create an all-day event; - drag'n'drop to a calendar in the sidenav; - touchscreen gestures support.
This commit is contained in:
1 parent
fc16d6ad90
commit
2e02380a93
18 files changed
+1187
-108
No files matched your search
@@ -5,7 +5,7 @@
|
||||
|
||||
/*
|
||||
* sgCalendarDayBlock - An event block to be displayed in a week
|
||||
* @memberof SOGo.Common
|
||||
* @memberof SOGo.SchedulerUI
|
||||
* @restrict element
|
||||
* @param {object} sgBlock - the event block definition
|
||||
* @param {function} sgClick - the function to call when clicking on a block.
|
||||
@@ -19,7 +19,8 @@
|
||||
sg-block="block"
|
||||
sg-click="open(clickEvent, clickComponent)" />
|
||||
*/
|
||||
function sgCalendarDayBlock() {
|
||||
sgCalendarDayBlock.$inject = ['CalendarSettings'];
|
||||
function sgCalendarDayBlock(CalendarSettings) {
|
||||
return {
|
||||
restrict: 'E',
|
||||
scope: {
|
||||
@@ -28,33 +29,33 @@
|
||||
},
|
||||
replace: true,
|
||||
template: [
|
||||
'<div class="sg-event sg-draggable">',
|
||||
'<div class="sg-event sg-draggable-calendar-block"',
|
||||
// Add a class while dragging
|
||||
' ng-class="{\'sg-event--dragging\': block.dragging}">',
|
||||
' <div class="eventInside" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
|
||||
' <div class="gradient">',
|
||||
' </div>',
|
||||
' <div class="text">{{ block.component.c_title }}',
|
||||
' <span class="icons">',
|
||||
// Component has an alarm
|
||||
' <md-icon ng-if="block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
|
||||
// Component is confidential
|
||||
' <md-icon ng-if="block.component.c_classification == 1" class="material-icons icon-visibility-off"></md-icon>',
|
||||
// Component is private
|
||||
' <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
|
||||
' </span></div>',
|
||||
' <div class="text">{{ block.component.summary }}',
|
||||
' <span class="icons">',
|
||||
// Component has an alarm
|
||||
' <md-icon ng-if="block.component.c_nextalarm" class="material-icons icon-alarm"></md-icon>',
|
||||
// Component is confidential
|
||||
' <md-icon ng-if="block.component.c_classification == 1" class="material-icons icon-visibility-off"></md-icon>',
|
||||
// Component is private
|
||||
' <md-icon ng-if="block.component.c_classification == 2" class="material-icons icon-vpn-key"></md-icon>',
|
||||
' </span>',
|
||||
' </div>',
|
||||
' <div class="topDragGrip"></div>',
|
||||
' <div class="bottomDragGrip"></div>',
|
||||
' </div>',
|
||||
'</div>'
|
||||
].join(''),
|
||||
link: link
|
||||
};
|
||||
|
||||
function link(scope, iElement, attrs) {
|
||||
// Compute overlapping (2%)
|
||||
var pc = 100 / scope.block.siblings,
|
||||
left = scope.block.position * pc,
|
||||
right = 100 - (scope.block.position + 1) * pc;
|
||||
var pc, left, right;
|
||||
|
||||
// Compute overlapping (2%)
|
||||
pc = 100 / scope.block.siblings;
|
||||
left = scope.block.position * pc;
|
||||
right = 100 - (scope.block.position + 1) * pc;
|
||||
if (pc < 100) {
|
||||
if (left > 0)
|
||||
left -= 2;
|
||||
@@ -73,7 +74,9 @@
|
||||
iElement.css('right', right + '%');
|
||||
iElement.addClass('starts' + scope.block.start);
|
||||
iElement.addClass('lasts' + scope.block.length);
|
||||
iElement.addClass('bg-folder' + scope.block.component.c_folder);
|
||||
|
||||
// Set background color
|
||||
iElement.addClass('bg-folder' + scope.block.component.pid);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in new issue
Block a user