From 18f20dc12e30700ad684f9c15f5b55c726ea040b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Pau=20Ferrer=20Oca=C3=B1a?= Date: Wed, 13 Oct 2021 15:24:20 +0200 Subject: [PATCH] MOBILE-3686 ux: Add toggle options to context menu items --- src/addons/messages/pages/discussion/discussion.html | 4 ++-- .../messages/pages/discussion/discussion.page.ts | 6 ++++-- src/core/components/context-menu/context-menu-item.ts | 2 ++ .../context-menu/core-context-menu-popover.html | 11 ++++++++--- src/core/features/course/pages/contents/contents.html | 4 ++-- src/core/features/course/pages/contents/contents.ts | 8 ++++---- .../features/courses/pages/dashboard/dashboard.html | 4 ++-- .../features/courses/pages/dashboard/dashboard.ts | 9 --------- src/core/features/sitehome/pages/index/index.html | 4 ++-- src/core/features/sitehome/pages/index/index.ts | 9 --------- 10 files changed, 26 insertions(+), 35 deletions(-) diff --git a/src/addons/messages/pages/discussion/discussion.html b/src/addons/messages/pages/discussion/discussion.html index 0ac439fa6..94fa726af 100644 --- a/src/addons/messages/pages/discussion/discussion.html +++ b/src/addons/messages/pages/discussion/discussion.html @@ -44,8 +44,8 @@ 'addon.messages.muteconversation') | translate" (action)="changeMute($event)" [closeOnClick]="false" [iconAction]="muteIcon"> + [content]="'addon.messages.showdeletemessages' | translate" (action)="toggleDelete(!showDelete)" + iconAction="toggle" [toggle]="showDelete"> diff --git a/src/addons/messages/pages/discussion/discussion.page.ts b/src/addons/messages/pages/discussion/discussion.page.ts index bb9689cd0..c99f24161 100644 --- a/src/addons/messages/pages/discussion/discussion.page.ts +++ b/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 { - this.showDelete = !this.showDelete; + toggleDelete(enable: boolean): void { + this.showDelete = enable; } /** diff --git a/src/core/components/context-menu/context-menu-item.ts b/src/core/components/context-menu/context-menu-item.ts index fd1c2fc33..4129ef889 100644 --- a/src/core/components/context-menu/context-menu-item.ts +++ b/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. diff --git a/src/core/components/context-menu/core-context-menu-popover.html b/src/core/components/context-menu/core-context-menu-popover.html index 1c23ddabf..4baeb6c85 100644 --- a/src/core/components/context-menu/core-context-menu-popover.html +++ b/src/core/components/context-menu/core-context-menu-popover.html @@ -11,11 +11,16 @@

- + - + + + + + {{item.badge}} diff --git a/src/core/features/course/pages/contents/contents.html b/src/core/features/course/pages/contents/contents.html index 13ad9ebba..938d20ba6 100644 --- a/src/core/features/course/pages/contents/contents.html +++ b/src/core/features/course/pages/contents/contents.html @@ -1,7 +1,7 @@ - + + [content]="'core.settings.showdownloadoptions' | translate" (action)="switchDownload(!downloadEnabled)" + iconAction="toggle" [toggle]="downloadEnabled"> diff --git a/src/core/features/courses/pages/dashboard/dashboard.ts b/src/core/features/courses/pages/dashboard/dashboard.ts index 56ef7d56c..f895f177b 100644 --- a/src/core/features/courses/pages/dashboard/dashboard.ts +++ b/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[] = []; 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 }); } diff --git a/src/core/features/sitehome/pages/index/index.html b/src/core/features/sitehome/pages/index/index.html index 9bc017b46..574e26e14 100644 --- a/src/core/features/sitehome/pages/index/index.html +++ b/src/core/features/sitehome/pages/index/index.html @@ -4,8 +4,8 @@ + [content]="'core.settings.showdownloadoptions' | translate" (action)="switchDownload(!downloadEnabled)" + iconAction="toggle" [toggle]="downloadEnabled"> diff --git a/src/core/features/sitehome/pages/index/index.ts b/src/core/features/sitehome/pages/index/index.ts index fd1796d53..5216e6973 100644 --- a/src/core/features/sitehome/pages/index/index.ts +++ b/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 }); }