MOBILE-4470 context-menu: Simplify context menu to fix text wrappings
parent
691ad40490
commit
874d1ebee6
|
@ -3,9 +3,3 @@
|
||||||
ion-list {
|
ion-list {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
ion-icon[slot=start] {
|
|
||||||
@include margin-horizontal(0, 10px);
|
|
||||||
width: 0.8em;
|
|
||||||
height: 0.8em;
|
|
||||||
}
|
|
||||||
|
|
|
@ -28,14 +28,12 @@ import { CoreContextMenuItemComponent } from './context-menu-item';
|
||||||
})
|
})
|
||||||
export class CoreContextMenuPopoverComponent {
|
export class CoreContextMenuPopoverComponent {
|
||||||
|
|
||||||
title: string;
|
|
||||||
uniqueId: string;
|
uniqueId: string;
|
||||||
items: CoreContextMenuItemComponent[];
|
items: CoreContextMenuItemComponent[];
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
navParams: NavParams,
|
navParams: NavParams,
|
||||||
) {
|
) {
|
||||||
this.title = navParams.get('title');
|
|
||||||
this.items = navParams.get('items') || [];
|
this.items = navParams.get('items') || [];
|
||||||
this.uniqueId = navParams.get('id');
|
this.uniqueId = navParams.get('id');
|
||||||
}
|
}
|
||||||
|
|
|
@ -32,9 +32,15 @@ import { CoreDirectivesRegistry } from '@singletons/directives-registry';
|
||||||
export class CoreContextMenuComponent implements OnInit, OnDestroy {
|
export class CoreContextMenuComponent implements OnInit, OnDestroy {
|
||||||
|
|
||||||
@Input() icon = 'ellipsis-vertical'; // Icon to be shown on the navigation bar. Default: Kebab menu icon.
|
@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.
|
@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.
|
hideMenu = true; // It will be unhidden when items are added.
|
||||||
uniqueId: string;
|
uniqueId: string;
|
||||||
|
|
||||||
|
@ -68,7 +74,7 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
|
||||||
* @inheritdoc
|
* @inheritdoc
|
||||||
*/
|
*/
|
||||||
ngOnInit(): void {
|
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.
|
// All items were moved to the "parent" menu. Add the item in there.
|
||||||
this.parentContextMenu.addItem(item);
|
this.parentContextMenu.addItem(item);
|
||||||
|
|
||||||
if (this.itemsMovedToParent.indexOf(item) == -1) {
|
if (this.itemsMovedToParent.indexOf(item) === -1) {
|
||||||
this.itemsMovedToParent.push(item);
|
this.itemsMovedToParent.push(item);
|
||||||
}
|
}
|
||||||
} else if (this.items.indexOf(item) == -1) {
|
} else if (this.items.indexOf(item) == -1) {
|
||||||
|
@ -181,7 +187,6 @@ export class CoreContextMenuComponent implements OnInit, OnDestroy {
|
||||||
event,
|
event,
|
||||||
component: CoreContextMenuPopoverComponent,
|
component: CoreContextMenuPopoverComponent,
|
||||||
componentProps: {
|
componentProps: {
|
||||||
title: this.title,
|
|
||||||
items: this.items,
|
items: this.items,
|
||||||
},
|
},
|
||||||
id: this.uniqueId,
|
id: this.uniqueId,
|
||||||
|
|
|
@ -1,22 +1,15 @@
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<ion-list [id]="uniqueId" role="menu">
|
<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"
|
<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"
|
[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)"
|
[hidden]="item.hidden" [detail]="!!(item.href && !item.iconAction)" role="menuitem" [button]="!!(item.href && !item.iconAction)"
|
||||||
[showBrowserWarning]="item.showBrowserWarning">
|
[showBrowserWarning]="item.showBrowserWarning">
|
||||||
<ion-toggle *ngIf="item.iconAction === 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)">
|
<ion-toggle *ngIf="item.iconAction === 'toggle'" [(ngModel)]="item.toggle" (ionChange)="item.toggleChanged($event)">
|
||||||
<p class="item-heading">
|
<p class="item-heading">{{ item.content }}</p>
|
||||||
<core-format-text [clean]="true" [text]="item.content" [filter]="false" />
|
|
||||||
</p>
|
|
||||||
</ion-toggle>
|
</ion-toggle>
|
||||||
<ng-container *ngIf="item.iconAction !== 'toggle'">
|
<ng-container *ngIf="item.iconAction !== 'toggle'">
|
||||||
<ion-label>
|
<ion-label>
|
||||||
<p class="item-heading">
|
<p class="item-heading">{{ item.content }}</p>
|
||||||
<core-format-text [clean]="true" [text]="item.content" [filter]="false" />
|
|
||||||
</p>
|
|
||||||
</ion-label>
|
</ion-label>
|
||||||
<ng-container *ngIf="(item.href || item.action) && item.iconAction">
|
<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"
|
<ion-icon *ngIf="item.iconAction !== 'spinner'" [name]="item.iconAction" [class.icon-slash]="item.iconSlash" slot="end"
|
||||||
|
|
Loading…
Reference in New Issue