EVOgeek
/
Vmeda.Online
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

MOBILE-3686 core: Add 2-way data binding to context menu toggles

main
Pau Ferrer Ocaña 2021-10-19 11:00:33 +02:00
parent ef610babd7
commit f5f5fd6781
16 changed files with 76 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/addons/messages/pages/discussion/discussion.html
View File

@ -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(!showDelete)"
iconAction="toggle" [toggle]="showDelete"></core-context-menu-item>
[content]="'addon.messages.showdeletemessages' | translate"
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>

9
src/addons/messages/pages/discussion/discussion.page.ts
View File

@ -1263,15 +1263,6 @@ export class AddonMessagesDiscussionPage implements OnInit, OnDestroy, AfterView
return !nextMessage || nextMessage.useridfrom != message.useridfrom || !!nextMessage.showDate;
}
/**
* Toggles delete state.
*
* @param enabled Wether to enable or disable show delete toggle.
*/
toggleDelete(enable: boolean): void {
this.showDelete = enable;
}
/**
* View info. If it's an individual conversation, go to the user profile.
* If it's a group conversation, view info about the group.

18
src/core/components/context-menu/context-menu-item.ts
View File

@ -38,7 +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 is "toggle" a 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.
@ -56,6 +56,7 @@ export class CoreContextMenuItemComponent implements OnInit, OnDestroy, OnChange
@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.
@Output() toggleChange = new EventEmitter<boolean>();// Will emit an event when toggle changes to enable 2-way data binding.
protected hasAction = false;
protected destroyed = false;
@ -89,6 +90,21 @@ export class CoreContextMenuItemComponent implements OnInit, OnDestroy, OnChange
}
}
/**
* Toggle changed.
*
* @param event Event.
*/
toggleChanged(event: Event): void {
if (this.toggle === undefined) {
return;
}
event.preventDefault();
event.stopPropagation();
this.toggleChange.emit(this.toggle);
}
/**
* Component destroyed.
*/

6
src/core/components/context-menu/context-menu-popover.ts
View File

@ -55,6 +55,12 @@ export class CoreContextMenuPopoverComponent {
* @return Return true if success, false if error.
*/
itemClicked(event: Event, item: CoreContextMenuItemComponent): boolean {
if (item.iconAction == 'toggle' && !event.defaultPrevented) {
event.preventDefault();
event.stopPropagation();
item.toggle = !item.toggle;
}
if (!!item.action && item.action.observers.length > 0) {
event.preventDefault();
event.stopPropagation();

16
src/core/components/context-menu/core-context-menu-popover.html
View File

@ -12,14 +12,14 @@
<p class="item-heading"><core-format-text [clean]="true" [text]="item.content" [filter]="false"></core-format-text></p>
</ion-label>
<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.iconAction == 'spinner'" slot="end"
[attr.aria-label]="'core.loading' | translate">
</ion-spinner>
<ion-toggle *ngIf="item.iconAction == 'toggle'" [(ngModel)]="item.toggle" slot="end">
</ion-toggle>
<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.iconAction == 'spinner'" slot="end"
[attr.aria-label]="'core.loading' | translate">
</ion-spinner>
<ion-toggle *ngIf="item.iconAction == 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)" 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>

4
src/core/features/course/pages/contents/contents.html
View File

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

9
src/core/features/course/pages/contents/contents.ts
View File

@ -100,7 +100,7 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy {
}, CoreSites.getCurrentSiteId());
this.downloadEnabledObserver = CoreEvents.on(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, (data) => {
this.toggleDownload(data.enabled);
this.downloadEnabled = this.displayEnableDownload && data.enabled;
});
}
@ -494,12 +494,9 @@ export class CoreCourseContentsPage implements OnInit, OnDestroy {
/**
* Toggle download enabled.
*
* @param enable Whether enable or disable download enabled toggle.
*/
toggleDownload(enable: boolean): void {
this.downloadEnabled =
CoreCourses.setCourseDownloadOptionsEnabled(this.displayEnableDownload && enable);
toggleDownload(): void {
CoreCourses.setCourseDownloadOptionsEnabled(this.downloadEnabled);
}
/**

8
src/core/features/courses/pages/categories/categories.html
View File

@ -10,11 +10,11 @@
<ion-buttons slot="end">
<core-context-menu>
<core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
[content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload(!downloadEnabled)"
iconAction="toggle" [toggle]="downloadEnabled"></core-context-menu-item>
[content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()"
iconAction="toggle" [(toggle)]="downloadEnabled"></core-context-menu-item>
<core-context-menu-item [priority]="900"
[content]="'core.courses.showonlyenrolled' | translate" (action)="toggleEnrolled(!showOnlyEnrolled)"
iconAction="toggle" [toggle]="showOnlyEnrolled"></core-context-menu-item>
[content]="'core.courses.showonlyenrolled' | translate" (action)="filterEnrolled()"
iconAction="toggle" [(toggle)]="showOnlyEnrolled"></core-context-menu-item>
</core-context-menu>
</ion-buttons>
</ion-toolbar>

19
src/core/features/courses/pages/categories/categories.ts
View File

@ -76,7 +76,7 @@ export class CoreCoursesCategoriesPage implements OnInit, OnDestroy {
}, this.currentSiteId);
this.downloadEnabledObserver = CoreEvents.on(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, (data) => {
this.toggleDownload(data.enabled);
this.downloadEnabled = (this.downloadCourseEnabled || this.downloadCoursesEnabled) && data.enabled;
});
}
@ -133,7 +133,7 @@ export class CoreCoursesCategoriesPage implements OnInit, OnDestroy {
try {
this.categoryCourses = await CoreCourses.getCoursesByField('category', this.categoryId);
await this.toggleEnrolled(this.showOnlyEnrolled);
await this.filterEnrolled();
} catch (error) {
!this.isDestroyed && CoreDomUtils.showErrorModalDefault(error, 'core.courses.errorloadcourses', true);
}
@ -178,13 +178,9 @@ export class CoreCoursesCategoriesPage implements OnInit, OnDestroy {
}
/**
* Toggle show only my courses.
*
* @param enable If enable or disable.
* Filter my courses or not.
*/
async toggleEnrolled(enable: boolean): Promise<void> {
this.showOnlyEnrolled = enable;
async filterEnrolled(): Promise<void> {
if (!this.showOnlyEnrolled) {
this.courses = this.categoryCourses;
} else {
@ -207,12 +203,9 @@ export class CoreCoursesCategoriesPage implements OnInit, OnDestroy {
/**
* Toggle download enabled.
*
* @param enable If enable or disable.
*/
toggleDownload(enable: boolean): void {
this.downloadEnabled =
CoreCourses.setCourseDownloadOptionsEnabled((this.downloadCourseEnabled || this.downloadCoursesEnabled) && enable);
toggleDownload(): void {
CoreCourses.setCourseDownloadOptionsEnabled(this.downloadEnabled);
}
/**

4
src/core/features/courses/pages/dashboard/dashboard.html
View File

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

11
src/core/features/courses/pages/dashboard/dashboard.ts
View File

@ -54,11 +54,11 @@ export class CoreCoursesDashboardPage implements OnInit, OnDestroy {
this.downloadCourseEnabled = !CoreCourses.isDownloadCourseDisabledInSite();
this.downloadCoursesEnabled = !CoreCourses.isDownloadCoursesDisabledInSite();
this.switchDownload(this.downloadEnabled);
this.downloadEnabled = (this.downloadCourseEnabled || this.downloadCoursesEnabled) && this.downloadEnabled;
}, CoreSites.getCurrentSiteId());
this.downloadEnabledObserver = CoreEvents.on(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, (data) => {
this.switchDownload(data.enabled);
this.downloadEnabled = (this.downloadCourseEnabled || this.downloadCoursesEnabled) && data.enabled;
});
}
@ -149,12 +149,9 @@ export class CoreCoursesDashboardPage implements OnInit, OnDestroy {
/**
* Switch download enabled.
*
* @param enable If enable or disable.
*/
switchDownload(enable: boolean): void {
this.downloadEnabled =
CoreCourses.setCourseDownloadOptionsEnabled((this.downloadCourseEnabled || this.downloadCoursesEnabled) && enable);
switchDownload(): void {
CoreCourses.setCourseDownloadOptionsEnabled(this.downloadEnabled);
}
/**

20
src/core/features/courses/pages/list/list.html
View File

@ -6,19 +6,19 @@
<h1 *ngIf="!showOnlyEnrolled">{{ 'core.courses.availablecourses' | translate }}</h1>
<h1 *ngIf="showOnlyEnrolled">{{ 'core.courses.mycourses' | translate }}</h1>
<ion-buttons slot="end"></ion-buttons>
<core-navbar-buttons slot="end">
<core-context-menu>
<core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
[content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload(!downloadEnabled)"
iconAction="toggle" [toggle]="downloadEnabled"></core-context-menu-item>
<core-context-menu-item [priority]="900"
[content]="'core.courses.showonlyenrolled' | translate" (action)="toggleEnrolled(!showOnlyEnrolled)"
iconAction="toggle" [toggle]="showOnlyEnrolled"></core-context-menu-item>
</core-context-menu>
</core-navbar-buttons>
</ion-toolbar>
</ion-header>
<ion-content>
<core-navbar-buttons slot="end">
<core-context-menu>
<core-context-menu-item *ngIf="downloadCourseEnabled || downloadCoursesEnabled" [priority]="1000"
[content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()"
iconAction="toggle" [(toggle)]="downloadEnabled"></core-context-menu-item>
<core-context-menu-item [priority]="900"
[content]="'core.courses.showonlyenrolled' | translate" (action)="toggleEnrolled()"
iconAction="toggle" [(toggle)]="showOnlyEnrolled"></core-context-menu-item>
</core-context-menu>
</core-navbar-buttons>
<ion-refresher slot="fixed" [disabled]="!loaded" (ionRefresh)="refreshCourses($event.target)">
<ion-refresher-content pullingText="{{ 'core.pulltorefresh' | translate }}"></ion-refresher-content>
</ion-refresher>

17
src/core/features/courses/pages/list/list.ts
View File

@ -86,7 +86,7 @@ export class CoreCoursesListPage implements OnInit, OnDestroy {
this.downloadCoursesEnabled = !CoreCourses.isDownloadCoursesDisabledInSite();
this.downloadEnabled = (this.downloadCourseEnabled || this.downloadCoursesEnabled) && this.downloadEnabled;
if (!this.searchEnabled) {
if (!this.searchEnabled && this.searchMode) {
this.searchMode = false;
this.fetchCourses();
@ -94,7 +94,7 @@ export class CoreCoursesListPage implements OnInit, OnDestroy {
}, this.currentSiteId);
this.downloadEnabledObserver = CoreEvents.on(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, (data) => {
this.toggleDownload(data.enabled);
this.downloadEnabled = (this.downloadCourseEnabled || this.downloadCoursesEnabled) && data.enabled;
});
}
@ -287,24 +287,17 @@ export class CoreCoursesListPage implements OnInit, OnDestroy {
/**
* Toggle show only my courses.
*
* @param enable If enable or disable.
*/
toggleEnrolled(enable: boolean): void {
toggleEnrolled(): void {
this.loaded = false;
this.showOnlyEnrolled = enable;
this.fetchCourses();
}
/**
* Toggle download enabled.
*
* @param enable If enable or disable.
*/
toggleDownload(enable: boolean): void {
this.downloadEnabled =
CoreCourses.setCourseDownloadOptionsEnabled((this.downloadCourseEnabled || this.downloadCoursesEnabled) && enable);
toggleDownload(): void {
CoreCourses.setCourseDownloadOptionsEnabled(this.downloadEnabled);
}
/**

7
src/core/features/courses/services/courses.ts
View File

@ -1229,17 +1229,14 @@ export class CoreCoursesProvider {
* Set trigger and save the download option.
*
* @param enable True to enable, false to disable.
* @return Current status.
*/
setCourseDownloadOptionsEnabled(enable: boolean): boolean {
setCourseDownloadOptionsEnabled(enable: boolean): void {
if (this.downloadOptionsEnabled == enable) {
return enable;
return;
}
this.downloadOptionsEnabled = enable;
CoreEvents.trigger(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, { enabled: enable });
return enable;
}
}

4
src/core/features/sitehome/pages/index/index.html
View File

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

9
src/core/features/sitehome/pages/index/index.ts
View File

@ -66,7 +66,7 @@ export class CoreSiteHomeIndexPage implements OnInit, OnDestroy {
}, CoreSites.getCurrentSiteId());
this.downloadEnabledObserver = CoreEvents.on(CoreCoursesProvider.EVENT_DASHBOARD_DOWNLOAD_ENABLED_CHANGED, (data) => {
this.switchDownload(data.enabled);
this.downloadEnabled = data.enabled;
});
}
@ -195,12 +195,9 @@ export class CoreSiteHomeIndexPage implements OnInit, OnDestroy {
/**
* Switch download enabled.
*
* @param enable If enable or disable.
*/
switchDownload(enable: boolean): void {
this.downloadEnabled =
CoreCourses.setCourseDownloadOptionsEnabled(enable);
switchDownload(): void {
CoreCourses.setCourseDownloadOptionsEnabled(this.downloadEnabled);
}
/**