MOBILE-3686 ux: Add toggle options to context menu items

src/addons/messages/pages/discussion/discussion.html

@@ -44,8 +44,8 @@
                 'addon.messages.muteconversation') | translate" (action)="changeMute($event)" [closeOnClick]="false"
                 [iconAction]="muteIcon"></core-context-menu-item>
             <core-context-menu-item [hidden]="!canDelete || !messages || !messages.length" [priority]="400"
-                [content]="'addon.messages.showdeletemessages' | translate" (action)="toggleDelete()"
+                [content]="'addon.messages.showdeletemessages' | translate" (action)="toggleDelete(!showDelete)"
-                [iconAction]="(showDelete ? 'far-check-square' : 'far-square')"></core-context-menu-item>
+                iconAction="toggle" [toggle]="showDelete"></core-context-menu-item>
             <core-context-menu-item [hidden]="!groupMessagingEnabled || !conversationId || isGroup || !messages || !messages.length"
                 [priority]="200" [content]="'addon.messages.deleteconversation' | translate" (action)="deleteConversation($event)"
                 [closeOnClick]="false" [iconAction]="deleteIcon"></core-context-menu-item>

src/addons/messages/pages/discussion/discussion.page.ts

@@ -1265,9 +1265,11 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
 
     /**
      * Toggles delete state.
+     *
+     * @param enabled Wether to enable or disable show delete toggle.
      */
-    toggleDelete(): void {
+    toggleDelete(enable: boolean): void {
-        this.showDelete = !this.showDelete;
+        this.showDelete = enable;
     }
 
     /**

src/core/components/context-menu/context-menu-item.ts

@@ -38,6 +38,7 @@ export class CoreContextMenuItemComponent implements OnInit, OnDestroy, OnChange
     @Input() iconDescription?: string; // Name of the icon to be shown on the left side of the item.
     @Input() iconAction?: string; // Name of the icon to show on the right side of the item. Represents the action to do on click.
     // If is "spinner" an spinner will be shown.
+    // If is "toggle" an toggle switch will be shown.
     // If no icon or spinner is selected, no action or link will work.
     // If href but no iconAction is provided arrow-right will be used.
     @Input() iconSlash?: boolean; // Display a red slash over the icon.
@@ -52,6 +53,7 @@ export class CoreContextMenuItemComponent implements OnInit, OnDestroy, OnChange
     @Input() badgeA11yText?: string; // Description for the badge, if needed.
     @Input() hidden?: boolean; // Whether the item should be hidden.
     @Input() showBrowserWarning = true; // Whether to show a warning before opening browser (for links). Defaults to true.
+    @Input() toggle = false; // Whether the toggle is on or off.
     @Output() action?: EventEmitter<() => void>; // Will emit an event when the item clicked.
     @Output() onClosed?: EventEmitter<() => void>; // Will emit an event when the popover is closed because the item was clicked.
 

src/core/components/context-menu/core-context-menu-popover.html

@@ -11,11 +11,16 @@
         <ion-label>
             <p class="item-heading"><core-format-text [clean]="true" [text]="item.content" [filter]="false"></core-format-text></p>
         </ion-label>
-        <ion-icon *ngIf="(item.href || item.action) && item.iconAction && item.iconAction != 'spinner'" [name]="item.iconAction"
+        <ng-container *ngIf="(item.href || item.action) && item.iconAction">
+        <ion-icon *ngIf="item.iconAction != 'spinner' && item.iconAction != 'toggle'" [name]="item.iconAction"
             [class.icon-slash]="item.iconSlash" slot="end" aria-hidden="true">
         </ion-icon>
-        <ion-spinner *ngIf="(item.href || item.action) && item.iconAction == 'spinner'" slot="end"
+        <ion-spinner *ngIf="item.iconAction == 'spinner'" slot="end"
-            [attr.aria-label]="'core.loading' | translate"></ion-spinner>
+            [attr.aria-label]="'core.loading' | translate">
+        </ion-spinner>
+        <ion-toggle  *ngIf="item.iconAction == 'toggle'" [(ngModel)]="item.toggle" slot="end">
+        </ion-toggle>
+        </ng-container>
         <ion-badge class="{{item.badgeClass}}" slot="end" *ngIf="item.badge">
             <span [attr.ara-hidden]="!!item.badgeA11yText">{{item.badge}}</span>
             <span class="sr-only" *ngIf="item.badgeA11yText">

src/core/features/course/pages/contents/contents.html

@@ -1,7 +1,7 @@
 <core-navbar-buttons slot="end">
     <core-context-menu>
-        <core-context-menu-item [hidden]="!displayEnableDownload" [priority]="2000" [iconAction]="downloadEnabledIcon"
+        <core-context-menu-item [hidden]="!displayEnableDownload" [priority]="2000" iconAction="toggle" [toggle]="downloadEnabled"
-            [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()">
+            [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload(!downloadEnabled)">
         </core-context-menu-item>
         <core-context-menu-item [hidden]="!downloadCourseEnabled" [priority]="1900"
             [content]="prefetchCourseData.statusTranslatable | translate" (action)="prefetchCourse()"

src/core/features/course/pages/contents/contents.ts

@@ -64,7 +64,6 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy {
     courseMenuHandlers: CoreCourseOptionsMenuHandlerToDisplay[] = [];
     dataLoaded = false;
     downloadEnabled = false;
-    downloadEnabledIcon = 'far-square'; // Disabled by default.
     downloadCourseEnabled = false;
     moduleId?: number;
     displayEnableDownload = false;
@@ -469,10 +468,11 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy {
 
     /**
      * Toggle download enabled.
+     *
+     * @param enable Whether enable or disable download enabled toggle.
      */
-    toggleDownload(): void {
+    toggleDownload(enable: boolean): void {
-        this.downloadEnabled = !this.downloadEnabled;
+        this.downloadEnabled = enable;
-        this.downloadEnabledIcon = this.downloadEnabled ? 'far-check-square' : 'far-square';
     }
 
     /**

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

@@ -4,8 +4,8 @@
     </ion-button>
     <core-context-menu>
         <core-context-menu-item *ngIf="(downloadCourseEnabled || downloadCoursesEnabled)" [priority]="1000"
-        [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()"
+        [content]="'core.settings.showdownloadoptions' | translate" (action)="switchDownload(!downloadEnabled)"
-        [iconAction]="downloadEnabledIcon"></core-context-menu-item>
+        iconAction="toggle" [toggle]="downloadEnabled"></core-context-menu-item>
         <core-context-menu-item *ngIf="(downloadCourseEnabled || downloadCoursesEnabled)" [priority]="500"
         [content]="'addon.storagemanager.managestorage' | translate"
         (action)="manageCoursesStorage()" iconAction="fas-archive"></core-context-menu-item>

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

@@ -40,7 +40,6 @@ export class CoreCoursesDashboardPage implements OnInit, OnDestroy {
     downloadEnabled = false;
     downloadCourseEnabled = false;
     downloadCoursesEnabled = false;
-    downloadEnabledIcon = 'far-square';
     userId?: number;
     blocks: Partial<CoreCourseBlock>[] = [];
     loaded = false;
@@ -138,13 +137,6 @@ export class CoreCoursesDashboardPage implements OnInit, OnDestroy {
         });
     }
 
-    /**
-     * Toggle download enabled.
-     */
-    toggleDownload(): void {
-        this.switchDownload(!this.downloadEnabled);
-    }
-
     /**
      * Convenience function to switch download enabled.
      *
@@ -152,7 +144,6 @@ export class CoreCoursesDashboardPage implements OnInit, OnDestroy {
      */
     protected switchDownload(enable: boolean): void {
         this.downloadEnabled = (this.downloadCourseEnabled || this.downloadCoursesEnabled) && enable;
-        this.downloadEnabledIcon = this.downloadEnabled ? 'far-check-square' : 'far-square';
         CoreEvents.trigger(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, { enabled: this.downloadEnabled });
     }
 

src/core/features/sitehome/pages/index/index.html

@@ -4,8 +4,8 @@
     </ion-button>
     <core-context-menu>
         <core-context-menu-item *ngIf="(downloadCourseEnabled || downloadCoursesEnabled)" [priority]="1000"
-        [content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()"
+        [content]="'core.settings.showdownloadoptions' | translate" (action)="switchDownload(!downloadEnabled)"
-        [iconAction]="downloadEnabledIcon"></core-context-menu-item>
+        iconAction="toggle" [toggle]="downloadEnabled"></core-context-menu-item>
         <core-context-menu-item *ngIf="(downloadCourseEnabled || downloadCoursesEnabled)" [priority]="500"
         [content]="'addon.storagemanager.managestorage' | translate"
         (action)="manageCoursesStorage()" iconAction="fas-archive"></core-context-menu-item>

src/core/features/sitehome/pages/index/index.ts

@@ -53,7 +53,6 @@ export class CoreSiteHomeIndexPage implements OnInit, OnDestroy {
     downloadEnabled = false;
     downloadCourseEnabled = false;
     downloadCoursesEnabled = false;
-    downloadEnabledIcon = 'far-square';
     newsForumModule?: NewsForum;
 
     protected updateSiteObserver?: CoreEventObserver;
@@ -189,13 +188,6 @@ export class CoreSiteHomeIndexPage implements OnInit, OnDestroy {
         });
     }
 
-    /**
-     * Toggle download enabled.
-     */
-    toggleDownload(): void {
-        this.switchDownload(!this.downloadEnabled);
-    }
-
     /**
      * Convenience function to switch download enabled.
      *
@@ -203,7 +195,6 @@ export class CoreSiteHomeIndexPage implements OnInit, OnDestroy {
      */
     protected switchDownload(enable: boolean): void {
         this.downloadEnabled = (this.downloadCourseEnabled || this.downloadCoursesEnabled) && enable;
-        this.downloadEnabledIcon = this.downloadEnabled ? 'far-check-square' : 'far-square';
         CoreEvents.trigger(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, { enabled: this.downloadEnabled });
     }