MOBILE-2795 timeline: Restore event action buttons

src/addon/block/timeline/components/events/addon-block-timeline-events.html

@@ -3,13 +3,24 @@
         <h2>{{ dayEvents.dayTimestamp * 1000 | coreFormatDate:"strftimedayshort" }}</h2>
     </ion-item-divider>
     <ng-container *ngFor="let event of dayEvents.events">
-        <a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, event)" [title]="event.action.actionable ? event.action.name: event.name">
+        <a ion-item text-wrap detail-none class="core-course-module-handler item-media" (click)="action($event, event.url)" [title]="event.name">
             <img item-start [src]="event.iconUrl" core-external-content alt="" role="presentation" *ngIf="event.iconUrl" class="core-module-icon">
             <h2><core-format-text [text]="event.name"></core-format-text></h2>
             <p *ngIf="showCourse">
                 <core-format-text [text]="event.course.fullnamedisplay"></core-format-text>
             </p>
+
+            <button ion-button clear class="hidden-tablet" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
+                {{event.action.name}}
+                <ion-badge item-end margin-start *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
+            </button>
+
             <ion-badge color="light" item-end>{{event.timesort * 1000 | coreFormatDate:"strftimetime24" }}</ion-badge>
+
+            <button ion-button clear item-end class="hidden-phone" (click)="action($event, event.action.url)" [title]="event.action.name" [disabled]="!event.action.actionable" *ngIf="event.action">
+                {{event.action.name}}
+                <ion-badge item-end margin-start *ngIf="event.action.showitemcount">{{event.action.itemcount}}</ion-badge>
+            </button>
         </a>
     </ng-container>
 </ion-item-group>
@@ -22,4 +33,4 @@
     <ion-spinner *ngIf="loadingMore"></ion-spinner>
 </div>
 
-<core-empty-box *ngIf="empty" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate" [inline]="!showCourse"></core-empty-box>
+<core-empty-box *ngIf="empty" image="assets/img/icons/activities.svg" [message]="'addon.block_timeline.noevents' | translate" [inline]="!showCourse"></core-empty-box>

src/addon/block/timeline/components/events/events.scss

@@ -21,4 +21,8 @@ ion-app.app-root core-courses-course-progress {
     }
 }
 
-
+ion-app.app-root addon-block-timeline-events {
+    a button {
+        pointer-events: auto;
+    }
+}

src/addon/block/timeline/components/events/events.ts

@@ -122,19 +122,14 @@ export class AddonBlockTimelineEventsComponent implements OnChanges {
      * Action clicked.
      *
      * @param {Event} e     Click event.
-     * @param {any} event   Calendar event info.
+     * @param {string} url  Url of the action.
      */
-    action(e: Event, event: any): void {
+    action(e: Event, url: string): void {
         e.preventDefault();
         e.stopPropagation();
-        let url;
 
-        if (event.action.actionable) {
-            // Fix URL format.
-            url = this.textUtils.decodeHTMLEntities(event.action.url);
-        } else {
-            url = this.textUtils.decodeHTMLEntities(event.url);
-        }
+        // Fix URL format.
+        url = this.textUtils.decodeHTMLEntities(url);
 
         const modal = this.domUtils.showModalLoading();
         this.contentLinksHelper.handleLink(url, undefined, this.navCtrl).then((treated) => {

src/app/app.scss

@@ -50,6 +50,7 @@ ion-app.app-root {
       align-items: center !important;
       > * {
         margin: 0 auto;
+        width: 100%;
         max-width: 600px;
       }
     }