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

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

main
Pau Ferrer Ocaña 2021-10-13 15:24:20 +02:00
parent 5ac62106bf
commit 18f20dc12e
10 changed files with 26 additions and 35 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()"
[iconAction]="(showDelete ? 'far-check-square' : 'far-square')"></core-context-menu-item>
[content]="'addon.messages.showdeletemessages' | translate" (action)="toggleDelete(!showDelete)"
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>

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

@ -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;
}
/**

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

@ -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.

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

@ -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"
[attr.aria-label]="'core.loading' | translate"></ion-spinner>
<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>
</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">

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]="downloadEnabledIcon"
[content]="'core.settings.showdownloadoptions' | translate" (action)="toggleDownload()">
<core-context-menu-item [hidden]="!displayEnableDownload" [priority]="2000" iconAction="toggle" [toggle]="downloadEnabled"
[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()"

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

@ -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 {
this.downloadEnabled = !this.downloadEnabled;
this.downloadEnabledIcon = this.downloadEnabled ? 'far-check-square' : 'far-square';
toggleDownload(enable: boolean): void {
this.downloadEnabled = enable;
}
/**

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)="toggleDownload()"
[iconAction]="downloadEnabledIcon"></core-context-menu-item>
[content]="'core.settings.showdownloadoptions' | translate" (action)="switchDownload(!downloadEnabled)"
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>

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

@ -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 });
}

4
src/core/features/sitehome/pages/index/index.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)="toggleDownload()"
[iconAction]="downloadEnabledIcon"></core-context-menu-item>
[content]="'core.settings.showdownloadoptions' | translate" (action)="switchDownload(!downloadEnabled)"
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>

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

@ -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 });
}