MOBILE-2790 dashboard: Toggle download icons from blocks

src/addon/block/myoverview/components/myoverview/addon-block-myoverview.html

@@ -1,10 +1,3 @@
-<!-- Buttons to add to the header. -->
-<core-navbar-buttons end>
-     <button [hidden]="!loaded || !showFilterSwitchButton()" ion-button icon-only [attr.aria-label]="'core.courses.filtermycourses' | translate" (click)="switchFilter()">
-        <ion-icon name="funnel"></ion-icon>
-    </button>
-</core-navbar-buttons>
-
 <ion-item-divider color="light">
     <h2>{{ 'addon.block_myoverview.pluginname' | translate }}</h2>
     <!-- Download all courses. -->
@@ -15,6 +8,9 @@
         <ion-badge class="core-course-download-courses-progress" *ngIf="prefetchCoursesData[selectedFilter].badge">{{prefetchCoursesData[selectedFilter].badge}}</ion-badge>
         <ion-spinner *ngIf="!prefetchCoursesData[selectedFilter].icon || prefetchCoursesData[selectedFilter].icon == 'spinner'"></ion-spinner>
     </div>
+    <core-context-menu item-end>
+        <core-context-menu-item *ngIf="loaded && showFilterSwitchButton()" [priority]="1000" [content]="'core.courses.filtermycourses' | translate" (action)="switchFilter()" iconAction="funnel"></core-context-menu-item>
+    </core-context-menu>
 </ion-item-divider>
 <core-loading [hideUntil]="loaded" class="core-loading-center">
     <div padding ion-row justify-content-end [hidden]="showFilter" class="safe-padding-horizontal">

src/addon/block/myoverview/components/myoverview/myoverview.ts

@@ -65,7 +65,7 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
 
     protected prefetchIconsInitialized = false;
     protected isDestroyed;
-    protected updateSiteObserver;
+    protected downloadButtonObserver;
     protected coursesObserver;
     protected courseIds = [];
     protected fetchContentDefaultError = 'Error getting my overview data.';
@@ -83,13 +83,12 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
      * Component being initialized.
      */
     ngOnInit(): void {
-        this.downloadAllCoursesEnabled = !this.coursesProvider.isDownloadCoursesDisabledInSite();
+        // Refresh the enabled flags if enabled.
-
+        this.downloadButtonObserver = this.eventsProvider.on(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED,
-        // Refresh the enabled flags if site is updated.
+                (data) => {
-        this.updateSiteObserver = this.eventsProvider.on(CoreEventsProvider.SITE_UPDATED, () => {
             const wasEnabled = this.downloadAllCoursesEnabled;
 
-            this.downloadAllCoursesEnabled = !this.coursesProvider.isDownloadCoursesDisabledInSite();
+            this.downloadAllCoursesEnabled = data.enabled;
 
             if (!wasEnabled && this.downloadAllCoursesEnabled && this.loaded) {
                 // Download all courses is enabled now, initialize it.
@@ -332,6 +331,6 @@ export class AddonBlockMyOverviewComponent extends CoreBlockBaseComponent implem
     ngOnDestroy(): void {
         this.isDestroyed = true;
         this.coursesObserver && this.coursesObserver.off();
-        this.updateSiteObserver && this.updateSiteObserver.off();
+        this.downloadButtonObserver && this.downloadButtonObserver.off();
     }
 }

src/addon/block/recentlyaccessedcourses/components/recentlyaccessedcourses/recentlyaccessedcourses.ts

@@ -40,7 +40,7 @@ export class AddonBlockRecentlyAccessedCoursesComponent extends CoreBlockBaseCom
 
     protected prefetchIconsInitialized = false;
     protected isDestroyed;
-    protected updateSiteObserver;
+    protected downloadButtonObserver;
     protected coursesObserver;
     protected courseIds = [];
     protected fetchContentDefaultError = 'Error getting recent courses data.';
@@ -58,19 +58,18 @@ export class AddonBlockRecentlyAccessedCoursesComponent extends CoreBlockBaseCom
      * Component being initialized.
      */
     ngOnInit(): void {
-        this.downloadAllCoursesEnabled = !this.coursesProvider.isDownloadCoursesDisabledInSite();
+        // Refresh the enabled flags if enabled.
-
+        this.downloadButtonObserver = this.eventsProvider.on(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED,
-        // Refresh the enabled flags if site is updated.
+                (data) => {
-        this.updateSiteObserver = this.eventsProvider.on(CoreEventsProvider.SITE_UPDATED, () => {
             const wasEnabled = this.downloadAllCoursesEnabled;
 
-            this.downloadAllCoursesEnabled = !this.coursesProvider.isDownloadCoursesDisabledInSite();
+            this.downloadAllCoursesEnabled = data.enabled;
 
             if (!wasEnabled && this.downloadAllCoursesEnabled && this.loaded) {
                 // Download all courses is enabled now, initialize it.
                 this.initPrefetchCoursesIcons();
             }
-        }, this.sitesProvider.getCurrentSiteId());
+        });
 
         this.coursesObserver = this.eventsProvider.on(CoreCoursesProvider.EVENT_MY_COURSES_UPDATED, () => {
             this.refreshContent();
@@ -155,6 +154,6 @@ export class AddonBlockRecentlyAccessedCoursesComponent extends CoreBlockBaseCom
     ngOnDestroy(): void {
         this.isDestroyed = true;
         this.coursesObserver && this.coursesObserver.off();
-        this.updateSiteObserver && this.updateSiteObserver.off();
+        this.downloadButtonObserver && this.downloadButtonObserver.off();
     }
 }

src/addon/block/starredcourses/components/starredcourses/starredcourses.ts

@@ -40,7 +40,7 @@ export class AddonBlockStarredCoursesComponent extends CoreBlockBaseComponent im
 
     protected prefetchIconsInitialized = false;
     protected isDestroyed;
-    protected updateSiteObserver;
+    protected downloadButtonObserver;
     protected coursesObserver;
     protected courseIds = [];
     protected fetchContentDefaultError = 'Error getting starred courses data.';
@@ -58,19 +58,18 @@ export class AddonBlockStarredCoursesComponent extends CoreBlockBaseComponent im
      * Component being initialized.
      */
     ngOnInit(): void {
-        this.downloadAllCoursesEnabled = !this.coursesProvider.isDownloadCoursesDisabledInSite();
+        // Refresh the enabled flags if enabled.
-
+        this.downloadButtonObserver = this.eventsProvider.on(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED,
-        // Refresh the enabled flags if site is updated.
+                (data) => {
-        this.updateSiteObserver = this.eventsProvider.on(CoreEventsProvider.SITE_UPDATED, () => {
             const wasEnabled = this.downloadAllCoursesEnabled;
 
-            this.downloadAllCoursesEnabled = !this.coursesProvider.isDownloadCoursesDisabledInSite();
+            this.downloadAllCoursesEnabled = data.enabled;
 
             if (!wasEnabled && this.downloadAllCoursesEnabled && this.loaded) {
                 // Download all courses is enabled now, initialize it.
                 this.initPrefetchCoursesIcons();
             }
-        }, this.sitesProvider.getCurrentSiteId());
+        });
 
         this.coursesObserver = this.eventsProvider.on(CoreCoursesProvider.EVENT_MY_COURSES_UPDATED, () => {
             this.refreshContent();
@@ -155,6 +154,6 @@ export class AddonBlockStarredCoursesComponent extends CoreBlockBaseComponent im
     ngOnDestroy(): void {
         this.isDestroyed = true;
         this.coursesObserver && this.coursesObserver.off();
-        this.updateSiteObserver && this.updateSiteObserver.off();
+        this.downloadButtonObserver && this.downloadButtonObserver.off();
     }
 }

src/core/block/components/block/block.scss

@@ -20,4 +20,8 @@ ion-app.app-root core-block {
   .item-divider .core-button-spinner {
     margin: 0;
   }
+
+  .item-divider .icon {
+    color: $black;
+  }
 }

src/core/courses/pages/dashboard/dashboard.html

@@ -1,4 +1,4 @@
-<ion-header>
+    <ion-header>
     <ion-navbar core-back-button>
         <ion-title><core-format-text [text]="siteName"></core-format-text></ion-title>
 
@@ -6,6 +6,9 @@
             <button *ngIf="searchEnabled" ion-button icon-only (click)="openSearch()" [attr.aria-label]="'core.courses.searchcourses' | translate">
                 <ion-icon name="search"></ion-icon>
             </button>
+            <core-context-menu>
+                <core-context-menu-item *ngIf="downloadCourseEnabled" [priority]="1000" [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()" [iconAction]="downloadEnabledIcon"></core-context-menu-item>
+            </core-context-menu>
         </ion-buttons>
     </ion-navbar>
 </ion-header>

src/core/courses/pages/dashboard/dashboard.ts

@@ -49,6 +49,10 @@ export class CoreCoursesDashboardPage implements OnDestroy {
     userId: number;
     dashboardLoaded = false;
 
+    downloadEnabled: boolean;
+    downloadEnabledIcon = 'square-outline'; // Disabled by default.
+    downloadCourseEnabled: boolean;
+
     protected isDestroyed;
     protected updateSiteObserver;
 
@@ -64,10 +68,15 @@ export class CoreCoursesDashboardPage implements OnDestroy {
      */
     ionViewDidLoad(): void {
         this.searchEnabled = !this.coursesProvider.isSearchCoursesDisabledInSite();
+        this.downloadCourseEnabled = !this.coursesProvider.isDownloadCourseDisabledInSite();
 
         // Refresh the enabled flags if site is updated.
         this.updateSiteObserver = this.eventsProvider.on(CoreEventsProvider.SITE_UPDATED, () => {
             this.searchEnabled = !this.coursesProvider.isSearchCoursesDisabledInSite();
+            this.downloadCourseEnabled = !this.coursesProvider.isDownloadCourseDisabledInSite();
+
+            this.switchDownload(this.downloadEnabled);
+
             this.loadSiteName();
         }, this.sitesProvider.getCurrentSiteId());
 
@@ -174,6 +183,24 @@ export class CoreCoursesDashboardPage implements OnDestroy {
         });
     }
 
+    /**
+     * Toggle download enabled.
+     */
+    toggleDownload(): void {
+        this.switchDownload(!this.downloadEnabled);
+    }
+
+    /**
+     * Convenience function to switch download enabled.
+     *
+     * @param {boolean} enable If enable or disable.
+     */
+    protected switchDownload(enable: boolean): void {
+        this.downloadEnabled = this.downloadCourseEnabled && enable;
+        this.downloadEnabledIcon = this.downloadEnabled ? 'checkbox-outline' : 'square-outline';
+        this.eventsProvider.trigger(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, {enabled: this.downloadEnabled});
+    }
+
     /**
      * Load fallback blocks to shown before 3.6 when dashboard blocks are not supported.
      */

src/core/courses/providers/courses.ts

@@ -26,6 +26,7 @@ export class CoreCoursesProvider {
     static ENROL_INVALID_KEY = 'CoreCoursesEnrolInvalidKey';
     static EVENT_MY_COURSES_UPDATED = 'courses_my_courses_updated';
     static EVENT_MY_COURSES_REFRESHED = 'courses_my_courses_refreshed';
+    static EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED = 'dashboard_download_enabled_changed';
     protected ROOT_CACHE_KEY = 'mmCourses:';
     protected logger;