flushed out the menue a bit, added the first part of the dark theme
This commit is contained in:
parent
badf90e5b3
commit
bf1be4d3d6
@ -1,25 +1,37 @@
|
|||||||
<ion-app>
|
<ion-app>
|
||||||
<ion-split-pane contentId="main-content">
|
<ion-split-pane when="sm">
|
||||||
<ion-menu contentId="main-content" type="overlay">
|
<ion-menu>
|
||||||
<!-- <ion-header>
|
<ion-header>
|
||||||
<ion-toolbar>
|
<ion-toolbar color="primary">
|
||||||
<ion-title>Menu</ion-title>
|
<ion-title>Menu</ion-title>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
|
|
||||||
<ion-content>
|
<ion-content>
|
||||||
<ion-list>
|
<ion-list>
|
||||||
<ion-menu-toggle auto-hide="false" *ngFor="let p of appPages">
|
<ion-list-header>
|
||||||
<ion-item [routerDirection]="'root'" [routerLink]="[p.url]">
|
Navigate
|
||||||
<ion-icon slot="start" [name]="p.icon"></ion-icon>
|
</ion-list-header>
|
||||||
<ion-label>
|
|
||||||
{{p.title}}
|
|
||||||
</ion-label>
|
|
||||||
</ion-item>
|
|
||||||
</ion-menu-toggle>
|
|
||||||
</ion-list>
|
|
||||||
</ion-content> -->
|
|
||||||
<tree-root [nodes]="nodes" [options]="options"></tree-root>
|
<tree-root [nodes]="nodes" [options]="options"></tree-root>
|
||||||
|
|
||||||
|
<ion-item lines="full">
|
||||||
|
<ion-icon slot="start" name="moon"></ion-icon>
|
||||||
|
<ion-label>
|
||||||
|
Toggle Dark Theme
|
||||||
|
</ion-label>
|
||||||
|
<ion-toggle id="themeToggle" slot="end"></ion-toggle>
|
||||||
|
</ion-item>
|
||||||
|
|
||||||
|
</ion-list>
|
||||||
|
</ion-content>
|
||||||
</ion-menu>
|
</ion-menu>
|
||||||
|
|
||||||
|
<div class="ion-page" main>
|
||||||
|
<ion-header> </ion-header>
|
||||||
|
<ion-content class="ion-padding">
|
||||||
<ion-router-outlet id="main-content"></ion-router-outlet>
|
<ion-router-outlet id="main-content"></ion-router-outlet>
|
||||||
|
</ion-content>
|
||||||
|
</div>
|
||||||
</ion-split-pane>
|
</ion-split-pane>
|
||||||
</ion-app>
|
</ion-app>
|
@ -3,6 +3,7 @@ import { Component } from "@angular/core";
|
|||||||
import { Platform } from "@ionic/angular";
|
import { Platform } from "@ionic/angular";
|
||||||
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
|
import { SplashScreen } from "@ionic-native/splash-screen/ngx";
|
||||||
import { StatusBar } from "@ionic-native/status-bar/ngx";
|
import { StatusBar } from "@ionic-native/status-bar/ngx";
|
||||||
|
import { ApiService } from "./service/api.service";
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
selector: "app-root",
|
selector: "app-root",
|
||||||
@ -28,37 +29,23 @@ export class AppComponent {
|
|||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
public nodes = [
|
public nodes = [];
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
name: "root1",
|
|
||||||
children: [
|
|
||||||
{ id: 2, name: "child1" },
|
|
||||||
{ id: 3, name: "child2" }
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
name: "root2",
|
|
||||||
children: [
|
|
||||||
{ id: 5, name: "child2.1" },
|
|
||||||
{
|
|
||||||
id: 6,
|
|
||||||
name: "child2.2",
|
|
||||||
children: [{ id: 7, name: "subsub" }]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
constructor(
|
constructor(
|
||||||
private platform: Platform,
|
private platform: Platform,
|
||||||
private splashScreen: SplashScreen,
|
private splashScreen: SplashScreen,
|
||||||
private statusBar: StatusBar
|
private statusBar: StatusBar,
|
||||||
|
private api: ApiService
|
||||||
) {
|
) {
|
||||||
this.initializeApp();
|
this.initializeApp();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
ionViewDidEnter() {
|
||||||
|
this.api.get("/menu/items").subscribe(result => {
|
||||||
|
this.nodes = result.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
initializeApp() {
|
initializeApp() {
|
||||||
this.platform.ready().then(() => {
|
this.platform.ready().then(() => {
|
||||||
this.statusBar.styleDefault();
|
this.statusBar.styleDefault();
|
||||||
|
@ -1,5 +1,12 @@
|
|||||||
<ion-header>
|
<ion-header>
|
||||||
<ion-toolbar>
|
<ion-toolbar>
|
||||||
|
<ion-buttons slot="start">
|
||||||
|
<ion-menu-toggle>
|
||||||
|
<ion-button>
|
||||||
|
<ion-icon slot="icon-only" name="menu"></ion-icon>
|
||||||
|
</ion-button>
|
||||||
|
</ion-menu-toggle>
|
||||||
|
</ion-buttons>
|
||||||
<ion-title contenteditable="true" #titleBar>{{ pageRecord.Name }}</ion-title>
|
<ion-title contenteditable="true" #titleBar>{{ pageRecord.Name }}</ion-title>
|
||||||
</ion-toolbar>
|
</ion-toolbar>
|
||||||
</ion-header>
|
</ion-header>
|
||||||
@ -8,13 +15,9 @@
|
|||||||
<ng-container>
|
<ng-container>
|
||||||
<div class="editor-root ion-padding">
|
<div class="editor-root ion-padding">
|
||||||
<div class="host-container ion-padding">
|
<div class="host-container ion-padding">
|
||||||
<editor-host
|
<editor-host #editorHosts *ngFor="let record of hostRecords" [(record)]="record"
|
||||||
#editorHosts
|
(newHostRequested)="onNewHostRequested($event)" (destroyHostRequested)="onDestroyHostRequested($event)">
|
||||||
*ngFor="let record of hostRecords"
|
</editor-host>
|
||||||
[(record)]="record"
|
|
||||||
(newHostRequested)="onNewHostRequested($event)"
|
|
||||||
(destroyHostRequested)="onDestroyHostRequested($event)"
|
|
||||||
></editor-host>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="editor-buttons">
|
<div class="editor-buttons">
|
||||||
|
Loading…
Reference in New Issue
Block a user