Merge pull request #2088 from crazyserver/MOBILE-3068

MOBILE-3068 calendar: Add colors to event types to match monthly

src/addon/calendar/components/calendar/calendar.scss

@@ -8,6 +8,45 @@ $calendar-today-bgcolor: $core-color !default;
 $calendar-today-color: $white !default;
 $calendar-border-color: $gray !default;
 
+ion-app.app-root page-addon-calendar-list,
+ion-app.app-root page-addon-calendar-day,
+ion-app.app-root addon-calendar-upcoming-events {
+
+    .item.addon-calendar-event .icon {
+        color: white;
+        border-radius: 50%;
+        width: 36px;
+        height: 36px;
+        line-height: 36px;
+
+        &.fa {
+            font-size: 20px;
+            &::before {
+                width: 1.9em;
+            }
+        }
+    }
+    .item.addon-calendar-event .core-module-icon {
+        margin: 9px 8px 9px 8px;
+    }
+
+    .item.addon-calendar-eventtype-category .icon {
+        background-color: $calendar-event-category-color;
+    }
+    .item.addon-calendar-eventtype-course .icon {
+        background-color: $calendar-event-course-color;
+    }
+    .item.addon-calendar-eventtype-group .icon {
+        background-color: $calendar-event-group-color;
+    }
+    .item.addon-calendar-eventtype-user .icon {
+        background-color: $calendar-event-user-color;
+    }
+    .item.addon-calendar-eventtype-site .icon {
+        background-color: $calendar-event-site-color;
+    }
+}
+
 ion-app.app-root addon-calendar-calendar {
 
     .addon-calendar-navigation {

src/addon/calendar/components/upcoming-events/addon-calendar-upcoming-events.html

@@ -4,7 +4,7 @@
 
     <ion-list *ngIf="filteredEvents && filteredEvents.length" no-margin>
         <ng-container *ngFor="let event of filteredEvents">
-            <a ion-item text-wrap [title]="event.name" (click)="eventClicked(event)" [class.core-split-item-selected]="event.id == eventId">
+            <a ion-item text-wrap [title]="event.name" (click)="eventClicked(event)" [class.core-split-item-selected]="event.id == eventId" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
                 <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start class="core-module-icon">
                 <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
                 <h2><core-format-text [text]="event.name"></core-format-text></h2>

src/addon/calendar/pages/day/day.html

@@ -48,7 +48,7 @@
 
         <ion-list *ngIf="filteredEvents && filteredEvents.length" no-margin>
             <ng-container *ngFor="let event of filteredEvents">
-                <ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast">
+                <ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)" [class.item-dimmed]="event.ispast" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
                     <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start class="core-module-icon">
                     <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
                     <h2><core-format-text [text]="event.name"></core-format-text></h2>

src/addon/calendar/pages/list/list.html

@@ -32,7 +32,7 @@
                     <ion-item-divider *ngIf="event.showDate">
                         {{ event.timestart * 1000 | coreFormatDate: "strftimedayshort" }}
                     </ion-item-divider>
-                    <a ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)" [class.core-split-item-selected]="event.id == eventId">
+                    <a ion-item text-wrap [title]="event.name" (click)="gotoEvent(event.id)" [class.core-split-item-selected]="event.id == eventId" class="addon-calendar-event" [ngClass]="['addon-calendar-eventtype-'+event.eventtype]">
                         <img *ngIf="event.moduleIcon" src="{{event.moduleIcon}}" item-start class="core-module-icon">
                         <core-icon *ngIf="event.icon && !event.moduleIcon" [name]="event.icon" item-start></core-icon>
                         <h2><core-format-text [text]="event.name"></core-format-text></h2>