Skip to content
Snippets Groups Projects
Commit 40ca30fc authored by Benoit Lavenier's avatar Benoit Lavenier
Browse files

fix(app) Refactor menu items template

parent 690fa5e1
No related branches found
No related tags found
No related merge requests found
......@@ -7,51 +7,56 @@
<ion-note></ion-note>
@for (p of appPages; track $index) {
@if (p.divider) {
@for (item of appPages; track $index) {
<ng-container *ngTemplateOutlet="menuItem; context: { $implicit: item }"></ng-container>
}
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
<ng-template #menuItem let-item>
@if (item.divider) {
<!-- divider -->
<ion-item-divider class="{{ p.cssClass }} {{ p.color }}" @fadeInAnimation>
<ion-icon slot="start" [color]="p.color" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
@if (p.cssClass !== 'flex-spacer') {
<ion-label [color]="p.color">{{ p.title | translate }}</ion-label>
<ion-item-divider class="{{ item.cssClass }} {{ item.color }}" @fadeInAnimation>
<ion-icon slot="start" [color]="item.color" [ios]="item.icon + '-outline'" [md]="item.icon + '-sharp'"></ion-icon>
@if (item.cssClass !== 'flex-spacer') {
<ion-label [color]="item.color">{{ item.title | translate }}</ion-label>
}
</ion-item-divider>
} @else {
<ion-menu-toggle auto-hide="false">
@if (p.url && (!p.visible || p.visible())) {
@if (item.url && (!item.visible || item.visible())) {
<!-- link button -->
<ion-item
routerDirection="root"
[disabled]="p.disabled"
[routerLink]="p.url"
[disabled]="item.disabled && item.disabled()"
[routerLink]="item.url"
lines="none"
detail="false"
routerLinkActive="selected"
>
<ion-icon slot="start" [color]="p.color" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label [color]="p.color">{{ p.title | translate }}</ion-label>
<ion-icon slot="start" [color]="item.color" [ios]="item.icon + '-outline'" [md]="item.icon + '-sharp'"></ion-icon>
<ion-label [color]="item.color">{{ item.title | translate }}</ion-label>
</ion-item>
} @else if (p.handle && (!p.visible || p.visible())) {
} @else if (item.handle && (!item.visible || item.visible())) {
<!-- action button -->
<ion-item
routerDirection="root"
(click)="p.handle($event)"
(click)="item.handle($event)"
[disabled]="item.disabled && item.disabled()"
lines="none"
detail="false"
class="ion-activatable ion-focusable"
class="ion-tappable ion-focusable"
tappable
@fadeInAnimation
>
<ion-icon slot="start" [color]="p.color" [ios]="p.icon + '-outline'" [md]="p.icon + '-sharp'"></ion-icon>
<ion-label [color]="p.color">{{ p.title | translate }}</ion-label>
<ion-icon slot="start" [color]="item.color" [ios]="item.icon + '-outline'" [md]="item.icon + '-sharp'"></ion-icon>
<ion-label [color]="item.color">{{ item.title | translate }}</ion-label>
</ion-item>
}
</ion-menu-toggle>
}
}
</ion-list>
</ion-content>
</ion-menu>
<ion-router-outlet id="main-content"></ion-router-outlet>
</ion-split-pane>
</ion-app>
</ng-template>
......@@ -11,6 +11,7 @@ import { SettingsService } from '@app/settings/settings.service';
import { TranslateService } from '@ngx-translate/core';
import { AlertController } from '@ionic/angular';
import { WotController } from './wot/wot.controller';
import { Observable } from 'rxjs';
export interface IMenuItem {
title: string;
......@@ -22,6 +23,7 @@ export interface IMenuItem {
color?: PredefinedColors;
divider?: boolean;
cssClass?: string;
children?: Observable<IMenuItem>;
}
@Component({
......@@ -35,14 +37,21 @@ export class AppComponent {
appName = 'COMMON.APP_NAME';
appPages: IMenuItem[] = [
{ title: 'MENU.HOME', url: '/home', icon: 'home' },
{ title: 'MENU.ACCOUNT', url: '/wallet', icon: 'person' },
{ title: 'MENU.TRANSACTIONS', url: '/history', icon: 'card' },
{ title: 'COMMON.BTN_SEND_MONEY', url: '/transfer', icon: 'paper-plane', visible: () => this.platform.mobile },
{ title: 'MENU.ACCOUNT', url: '/wallet', icon: 'person', disabled: () => !this.accountService.isLogin },
{ title: 'MENU.TRANSACTIONS', url: '/history', icon: 'card', disabled: () => !this.accountService.isLogin },
{
title: 'COMMON.BTN_SEND_MONEY',
url: '/transfer',
icon: 'paper-plane',
disabled: () => !this.accountService.isLogin,
visible: () => this.platform.mobile,
},
{
title: 'COMMON.BTN_SEND_MONEY',
icon: 'paper-plane',
handle: () => this.transferController.transfer(),
disabled: () => !this.accountService.isLogin,
visible: () => !this.platform.mobile,
},
......
......@@ -19,7 +19,7 @@ export interface Settings {
preferredPods?: string[];
ipfsGateway: string;
preferredIpfsGateways?: string[];
pages?: any;
pages?: any; // Any pages settings
locale?: string;
mobile?: boolean;
properties?: PropertiesMap;
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment