(js) Make events clickable in month view

Alinto · Aug 7, 2015 · ce8a4b6 · ce8a4b6
1 parent 8ab591a
commit ce8a4b6
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 28 deletions.
diff --git a/UI/Templates/SchedulerUI/UIxCalMonthView.wox b/UI/Templates/SchedulerUI/UIxCalMonthView.wox
@@ -55,10 +55,12 @@
                   var:day-number="currentDayNumber"
                   var:id="currentDayId">
                 <div layout="column" layout-fill="true">
-                <div class="sg-calendar-tile-header"><var:string value="dayHeaderNumber"/></div>
-                <sg-calendar-month-day
-                    sg-blocks="calendar.blocks"
-                    var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day></div>
+                  <div class="sg-calendar-tile-header"><var:string value="dayHeaderNumber"/></div>
+                  <sg-calendar-month-day
+                      sg-blocks="calendar.blocks"
+                      sg-click="list.openEvent(event, component)"
+                      var:sg-day="currentTableDay.shortDateString"><!-- day's events --></sg-calendar-month-day>
+                </div>
               </md-grid-tile>
             </var:foreach>
           </var:foreach>

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarDayBlock.directive.js
@@ -28,7 +28,7 @@
       },
       replace: true,
       template: [
-        '<div class="event draggable">',
+        '<div class="sg-event sg-draggable">',
         '  <div class="eventInside" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
         '      <div class="gradient">',
         '      </div>',

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

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

diff --git a/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js b/UI/WebServerResources/js/Scheduler/sgCalendarMonthEvent.directive.js
@@ -19,21 +19,21 @@
     return {
       restrict: 'E',
       scope: {
-        block: '=sgBlock'
+        block: '=sgBlock',
+        clickBlock: '&sgClick'
       },
       replace: true,
       template: [
-        '<div class="sg-event">',
-        '        <span ng-if="!block.component.c_isallday">{{ block.starthour }} - </span>',
-        '        {{ block.component.c_title }}',
-        '        <span class="icons">',
-        '          <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 == 2" class="md-icon-vpn-key"></i>',
-        '        </span>',
+        '<div class="sg-event sg-draggable" ng-click="clickBlock({clickEvent: $event, clickComponent: block.component})">',
+        '  <span ng-if="!block.component.c_isallday">{{ block.starthour }} - </span>',
+        '  {{ block.component.c_title }}',
+        '  <span class="icons">',
+        '    <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 == 2" class="md-icon-vpn-key"></i>',
+        '  </span>',
         '  <div class="leftDragGrip"></div>',
         '  <div class="rightDragGrip"></div>',
-        '  </div>',
         '</div>'
       ].join(''),
       link: link

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