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

(js) Make events clickable in month view

Browse source
This commit is contained in:
Francis Lachapelle 2015-08-07 15:32:00 -04:00
parent 8ab591a1b6
commit ce8a4b6d8a
6 changed files with 34 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
UI/Templates/SchedulerUI/UIxCalMonthView.wox
View file

@ -55,10 +55,12 @@
var:day-number="currentDayNumber" var:day-number="currentDayNumber"
var:id="currentDayId"> var:id="currentDayId">
<div layout="column" layout-fill="true"> <div layout="column" layout-fill="true">
<div class="sg-calendar-tile-header"><var:string value="dayHeaderNumber"/></div> <div class="sg-calendar-tile-header"><var:string value="dayHeaderNumber"/></div>
<sg-calendar-month-day <sg-calendar-month-day
sg-blocks="calendar.blocks" sg-blocks="calendar.blocks"
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day></div> sg-click="list.openEvent(event, component)"
var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
</div>
</md-grid-tile> </md-grid-tile>
</var:foreach> </var:foreach>
</var:foreach> </var:foreach>

2
UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
View file

@ -28,7 +28,7 @@
}, },
replace: true, replace: true,
template: [ template: [
'<div class="event draggable">', '<div class="sg-event sg-draggable">',
' <div class="eventInside" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">', ' <div class="eventInside" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
' <div class="gradient">', ' <div class="gradient">',
' </div>', ' </div>',

8
UI/WebServerResources/js/Scheduler/sgCalendarDayTable.directive.js
View file

@ -29,10 +29,10 @@
clickBlock: '&sgClick' clickBlock: '&sgClick'
}, },
template: [ template: [
'<sg-calendar-day-block class="event draggable"', '<sg-calendar-day-block class="sg-event draggable"',
' ng-repeat="block in blocks[day]"', ' ng-repeat="block in blocks[day]"',
' sg-block="block"', ' sg-block="block"',
' sg-click="clickBlock({event: clickEvent, component: clickComponent})"/>' ' sg-click="clickBlock({event: clickEvent, component: clickComponent})"/>'
].join('') ].join('')
}; };
} }

10
UI/WebServerResources/js/Scheduler/sgCalendarMonthDay.directive.js
View file

@ -14,20 +14,22 @@
<sg-calendar-monh-day <sg-calendar-monh-day
sg-blocks="calendar.blocks" sg-blocks="calendar.blocks"
sg-day="20150408" /> sg-day="20150408"
sg-click="open({ event: clickEvent, component: clickComponent })"/>
*/ */
function sgCalendarMonthDay() { function sgCalendarMonthDay() {
return { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
blocks: '=sgBlocks', blocks: '=sgBlocks',
day: '@sgDay' day: '@sgDay',
clickBlock: '&sgClick'
}, },
replace: true,
template: [ template: [
'<sg-calendar-month-event', '<sg-calendar-month-event',
' ng-repeat="block in blocks[day]"', ' ng-repeat="block in blocks[day]"',
' sg-block="block"/>' ' sg-block="block"',
' sg-click="clickBlock({event: clickEvent, component: clickComponent})"/>'
].join('') ].join('')
}; };
} }

20
UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
View file

@ -19,21 +19,21 @@
return { return {
restrict: 'E', restrict: 'E',
scope: { scope: {
block: '=sgBlock' block: '=sgBlock',
clickBlock: '&sgClick'
}, },
replace: true, replace: true,
template: [ template: [
'<div class="sg-event">', '<div class="sg-event sg-draggable" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
' <span ng-if="!block.component.c_isallday">{{ block.starthour }} - </span>', ' <span ng-if="!block.component.c_isallday">{{ block.starthour }} - </span>',
' {{ block.component.c_title }}', ' {{ block.component.c_title }}',
' <span class="icons">', ' <span class="icons">',
' <i ng-if="block.component.c_nextalarm" class="md-icon-alarm"></i>', ' <i ng-if="block.component.c_nextalarm" class="md-icon-alarm"></i>',
' <i ng-if="block.component.c_classification == 1" class="md-icon-visibility-off"></i>', ' <i ng-if="block.component.c_classification == 1" class="md-icon-visibility-off"></i>',
' <i ng-if="block.component.c_classification == 2" class="md-icon-vpn-key"></i>', ' <i ng-if="block.component.c_classification == 2" class="md-icon-vpn-key"></i>',
' </span>', ' </span>',
' <div class="leftDragGrip"></div>', ' <div class="leftDragGrip"></div>',
' <div class="rightDragGrip"></div>', ' <div class="rightDragGrip"></div>',
' </div>',
'</div>' '</div>'
].join(''), ].join(''),
link: link link: link

12
UI/WebServerResources/scss/views/SchedulerUI.scss
View file

@ -1,6 +1,10 @@
/// SchedulerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*- /// SchedulerUI.scss -*- Mode: scss; indent-tabs-mode: nil; basic-offset: 2 -*-
$hours_margin: 50px; $hours_margin: 50px;
.sg-draggable {
cursor: move;
}
.dayLabels { .dayLabels {
color: sg-color($sogoBlue, 700); color: sg-color($sogoBlue, 700);
height: 35px; height: 35px;
@ -32,6 +36,7 @@ $hours_margin: 50px;
.daysViewFor1Days { .daysViewFor1Days {
.day { .day {
left: $hours_margin;
width: 100%; width: 100%;
} }
.days { .days {
@ -87,8 +92,8 @@ $hours_margin: 50px;
top: 0; top: 0;
} }
} }
.event { .sg-event {
cursor: default; border-radius: 10px;
margin-right: 1px; margin-right: 1px;
position: absolute; position: absolute;
left: 0%; left: 0%;
@ -106,9 +111,6 @@ $hours_margin: 50px;
bottom: 0px; bottom: 0px;
left: 0px; left: 0px;
right: 0px; right: 0px;
-webkit-border-radius: 2px;
border-radius: 2px;
cursor:move;
} }
} }
} }