MOBILE-2689 courses: Show download spinner separate from menu

src/core/courses/components/course-options-menu/core-courses-course-options-menu.html

@@ -1,5 +1,6 @@
 <ion-item text-wrap (click)="action('download')" *ngIf="downloadCourseEnabled">
-    <ion-icon [name]="prefetch.prefetchCourseIcon" item-start></ion-icon>
+    <ion-icon *ngIf="prefetch.prefetchCourseIcon != 'spinner'" [name]="prefetch.prefetchCourseIcon" item-start></ion-icon>
+    <ion-spinner *ngIf="prefetch.prefetchCourseIcon == 'spinner'" item-start></ion-spinner>
     <h2>{{ prefetch.title | translate }}</h2>
 </ion-item>
 <ion-item text-wrap (click)="action('hide')" *ngIf="!course.hidden">

src/core/courses/components/course-progress/core-courses-course-progress.html

@@ -18,13 +18,13 @@
         </div>
 
         <div class="core-button-spinner" *ngIf="courseOptionMenuEnabled">
-            <!-- Options menu. -->
-            <button ion-button icon-only clear color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="prefetchCourseData.prefetchCourseIcon != 'spinner' && !showSpinner">
-                <core-icon name="more"></core-icon>
-            </button>
-
             <!-- Download course spinner. -->
             <ion-spinner *ngIf="prefetchCourseData.prefetchCourseIcon == 'spinner' || showSpinner"></ion-spinner>
+
+            <!-- Options menu. -->
+            <button ion-button icon-only clear color="dark" (click)="showCourseOptionsMenu($event)" *ngIf="!showSpinner">
+                <core-icon name="more"></core-icon>
+            </button>
         </div>
     </ion-item>
     <ion-item text-wrap *ngIf="course.summary && course.summary.length" [class.item-disabled]="course.visible == 0">

src/core/courses/components/course-progress/course-progress.scss

@@ -57,6 +57,14 @@ ion-app.app-root core-courses-course-progress {
             &.core-course-more-than-title {
                 padding-bottom: 0;
             }
+
+            .core-button-spinner .spinner {
+                vertical-align: middle;
+            }
+
+            .item-button[icon-only] {
+                min-width: 50px;
+            }
         }
         .label {
             @include margin(0, 0, 0, null);

src/core/courses/components/course-progress/course-progress.ts

@@ -178,7 +178,9 @@ export class CoreCoursesCourseProgressComponent implements OnInit, OnDestroy {
             if (action) {
                 switch (action) {
                     case 'download':
+                        if (this.prefetchCourseData.prefetchCourseIcon != 'spinner') {
                             this.prefetchCourse(e);
+                        }
                         break;
                     case 'hide':
                         this.setCourseHidden(true);