Calendar module: initial AngularJS-based templates

UI/WebServerResources/scss/components/checkbox/checkbox.scss

@@ -1 +1,7 @@
-@import 'extends';
+@import 'extends';
+
+// Checkbox for the sidenav folders list
+// -------------------------------------
+md-sidenav md-checkbox {
+    margin: 0;
+}

UI/WebServerResources/scss/components/sidenav/sidenav.scss

@@ -154,11 +154,14 @@ $i: 1;
     &.sg-loading {
       color: sg-color($sogoBlue, 500);
     }
-    .sg-item-name {
+    .sg-item-name, .md-label {
       text-align: left;
       text-overflow: ellipsis;
       overflow: hidden;
       white-space: nowrap;
     }
+    .md-label {
+      display: inline;
+    }
   }
 }

UI/WebServerResources/scss/views/SchedulerUI.scss

@@ -0,0 +1,124 @@
+#calendarHeader {
+    position: relative;
+    top: 0;
+    height: 38px;
+    right: 0px;
+    .dayLabels {
+        height: 35px;
+        left: 0;
+        margin-left: 50px;
+        overflow: hidden;
+        position: relative;
+        .day {
+            height: 100%;
+            position: absolute;
+            text-align: center;
+        }
+    }
+}
+
+.monthView, .daysViewFor7Days {
+    .day {
+        width: 14.2857%;
+    }
+    $i: 0;
+    @while $i < 7 {
+        .day#{$i} { left: 1% * 100 / 7 * $i; }
+        $i: $i + 1;
+    }
+}
+
+#daysView {
+    position: relative;
+    top: 0;
+    bottom: 0;
+    overflow: auto;
+    overflow-x: hidden;
+    .hours {
+        height: auto;
+        display: inline-block;
+        position: relative;
+        float: left;
+        top: 0;
+        left: 0;
+        width: 50px;
+        .hour {
+            border-bottom: 1px solid #ccc;
+            height: 40px;
+            left: 0;
+            padding-right: 2px;
+            //padding-top: 2px;
+            position: relative;
+            right: 0;
+            top: 0;
+        }
+    }
+    .days {
+        left: 0;
+        right: 0;
+        top: 0;
+        margin-left: 50px;
+        position: relative;
+        .day {
+            border-left: 1px solid #ccc;
+            position: absolute;
+            .clickableHourCell {
+                height: 40px;
+                border-bottom: 1px solid #ccc;
+            }
+        }
+    }
+    .event {
+        cursor: default;
+        margin-right: 1px;
+        position: absolute;
+        left: 0%;
+        right: 0%;
+        $i: 0;
+        @while $i < 96 {
+            &.starts#{$i} { top: 10px * $i; }
+            &.lasts#{$i} { height: 10px * $i; }
+            $i: $i + 1;
+        }
+        .eventInside {
+            position: absolute;
+            overflow: hidden;
+            top: 0px;
+            bottom: 0px;
+            left: 0px;
+            right: 0px;
+            -webkit-border-radius: 2px;
+            border-radius: 2px;
+            cursor:move;
+        }
+    }
+}
+
+.minutes15, .minutes30, .minutes45 {
+    display: block;
+    height: 25%;
+}
+
+.minutes30 {
+    border-bottom: 1px dotted #ccc;
+}
+
+.gradient, .text {
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    right: 1px;
+    bottom: 1px;
+    overflow: hidden;
+}
+
+.gradient > IMG {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 100%;
+    min-height: 15px; /* for 15-minute events */
+    width: 100%;
+}

UI/WebServerResources/scss/views/_view.scss

@@ -9,6 +9,7 @@
 @import 'MailerUI.scss';
 @import 'ContactsUI.scss';
 @import 'MessageEditorUI';
+@import 'SchedulerUI';
 
 .view[layout=row] {
   max-height: 100%;