From 1b94724575d6215ec9f0b3f6ee7fb078aeaf1012 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= <crazyserver@gmail.com>
Date: Thu, 29 Aug 2019 17:56:23 +0200
Subject: [PATCH] MOBILE-3068 calendar: Add colors to event types to match
 monthly

---
 .../components/calendar/calendar.scss         | 39 +++++++++++++++++++
 .../addon-calendar-upcoming-events.html       |  2 +-
 src/addon/calendar/pages/day/day.html         |  2 +-
 src/addon/calendar/pages/list/list.html       |  2 +-
 4 files changed, 42 insertions(+), 3 deletions(-)

diff --git a/src/addon/calendar/components/calendar/calendar.scss b/src/addon/calendar/components/calendar/calendar.scss
index ff2d77c97..6558abcb4 100644
--- a/src/addon/calendar/components/calendar/calendar.scss
+++ b/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 {
diff --git a/src/addon/calendar/components/upcoming-events/addon-calendar-upcoming-events.html b/src/addon/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
index 0a4b7bb1e..68f174608 100644
--- a/src/addon/calendar/components/upcoming-events/addon-calendar-upcoming-events.html
+++ b/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>
diff --git a/src/addon/calendar/pages/day/day.html b/src/addon/calendar/pages/day/day.html
index 9cfd3705a..34335a7de 100644
--- a/src/addon/calendar/pages/day/day.html
+++ b/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>
diff --git a/src/addon/calendar/pages/list/list.html b/src/addon/calendar/pages/list/list.html
index 2d85b3f1d..3ae4f4c0d 100644
--- a/src/addon/calendar/pages/list/list.html
+++ b/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>