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

MOBILE-4470 context-menu: Simplify context menu to fix text wrappings

main
Pau Ferrer Ocaña 2024-05-15 10:39:10 +02:00
parent 691ad40490
commit 874d1ebee6
4 changed files with 11 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,9 +3,3 @@
ion-list {
padding: 0;
}
ion-icon[slot=start] {
@include margin-horizontal(0, 10px);
width: 0.8em;
height: 0.8em;
}

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

@ -28,14 +28,12 @@ import { CoreContextMenuItemComponent } from './context-menu-item';
})
export class CoreContextMenuPopoverComponent {
title: string;
uniqueId: string;
items: CoreContextMenuItemComponent[];
constructor(
navParams: NavParams,
) {
this.title = navParams.get('title');
this.items = navParams.get('items') || [];
this.uniqueId = navParams.get('id');
}

13
src/core/components/context-menu/context-menu.ts
View File

@ -32,9 +32,15 @@ import { CoreDirectivesRegistry } from '@singletons/directives-registry';
export class CoreContextMenuComponent implements OnInit, OnDestroy {
@Input() icon = 'ellipsis-vertical'; // Icon to be shown on the navigation bar. Default: Kebab menu icon.
@Input() title?: string; // Text to be shown on the top of the popover.
@Input('aria-label') ariaLabel?: string; // Aria label to be shown on the top of the popover.
/**
* Title to be shown on the top of the popover.
*
* @deprecated since 4.4. Use aria-label instead.
*/
@Input() title?: string; // Text to be shown on the top of the popover.
hideMenu = true; // It will be unhidden when items are added.
uniqueId: string;
@ -68,7 +74,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
* @inheritdoc
*/
ngOnInit(): void {
this.ariaLabel = this.ariaLabel || this.title || Translate.instant('core.displayoptions');
this.ariaLabel = this.ariaLabel || Translate.instant('core.displayoptions');
}
/**
@ -81,7 +87,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
// All items were moved to the "parent" menu. Add the item in there.
this.parentContextMenu.addItem(item);
if (this.itemsMovedToParent.indexOf(item) == -1) {
if (this.itemsMovedToParent.indexOf(item) === -1) {
this.itemsMovedToParent.push(item);
}
} else if (this.items.indexOf(item) == -1) {
@ -181,7 +187,6 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
event,
component: CoreContextMenuPopoverComponent,
componentProps: {
title: this.title,
items: this.items,
},
id: this.uniqueId,

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

@ -1,22 +1,15 @@
<ion-content>
<ion-list [id]="uniqueId" role="menu">
<ion-list-header *ngIf="title">
<ion-label>{{title}}</ion-label>
</ion-list-header>
<ion-item class="ion-text-wrap" lines="none" *ngFor="let item of items" core-link [capture]="item.captureLink"
[autoLogin]="item.autoLogin" [href]="item.href" (click)="itemClicked($event, item)" [attr.aria-label]="item.ariaAction"
[hidden]="item.hidden" [detail]="!!(item.href && !item.iconAction)" role="menuitem" [button]="!!(item.href && !item.iconAction)"
[showBrowserWarning]="item.showBrowserWarning">
<ion-toggle *ngIf="item.iconAction === 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)">
<p class="item-heading">
<core-format-text [clean]="true" [text]="item.content" [filter]="false" />
</p>
<p class="item-heading">{{ item.content }}</p>
</ion-toggle>
<ng-container *ngIf="item.iconAction !== 'toggle'">
<ion-label>
<p class="item-heading">
<core-format-text [clean]="true" [text]="item.content" [filter]="false" />
</p>
<p class="item-heading">{{ item.content }}</p>
</ion-label>
<ng-container *ngIf="(item.href || item.action) && item.iconAction">
<ion-icon *ngIf="item.iconAction !== 'spinner'" [name]="item.iconAction" [class.icon-slash]="item.iconSlash" slot="end"