javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-18 19:21:34 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(): wrap templates in <ion-page>

Browse Source
This commit is contained in:
Dan Bucholtz
2018-01-09 15:09:30 -06:00
parent 71889411db
commit bcd0f7186c
18 changed files with 516 additions and 444 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
packages/demos/angular/src/app/basic-inputs-page/basic-inputs-page.component.html
View File

@ -30,6 +30,24 @@
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row>
<ion-col>
<h2>Search Input</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-item>
<ion-label>Ionic Text Input</ion-label>
<ion-searchbar id="ionSearchInput" name="ionSearchInput" [(ngModel)]="searchValue" minlength="10"></ion-searchbar>
</ion-item>
</ion-col>
<ion-col>
Value:
<span id="searchOutput">{{searchValue}}</span>
</ion-col>
</ion-row>
<ion-row> <ion-row>
<ion-col> <ion-col>
<h2>Numeric Input</h2> <h2>Numeric Input</h2>
@ -168,6 +186,25 @@
<ion-col> <ion-col>
</ion-col> </ion-col>
</ion-row> </ion-row>
<ion-row>
<ion-col>
<h2>Segment</h2>
</ion-col>
</ion-row>
<ion-row>
<ion-col>
<ion-segment [(ngModel)]="segmentValue" >
<ion-segment-button value="taco"></ion-segment-button>
<ion-segment-button value="burrito"></ion-segment-button>
<ion-segment-button value="enchilada"></ion-segment-button>
</ion-segment>
</ion-col>
<ion-col>
Value:
<span >{{segmentValue}}</span>
</ion-col>
</ion-row>
</ion-grid> </ion-grid>
<a href='home'>Home</a> <a href='home'>Home</a>

20
packages/demos/conference-app/angular/package-lock.json generated
View File

@ -68,7 +68,7 @@
"autoprefixer": "6.7.7", "autoprefixer": "6.7.7",
"chalk": "2.2.2", "chalk": "2.2.2",
"circular-dependency-plugin": "4.3.0", "circular-dependency-plugin": "4.3.0",
"common-tags": "1.6.0", "common-tags": "1.7.0",
"copy-webpack-plugin": "4.3.1", "copy-webpack-plugin": "4.3.1",
"core-object": "3.1.5", "core-object": "3.1.5",
"css-loader": "0.28.8", "css-loader": "0.28.8",
@ -284,17 +284,17 @@
"integrity": "sha512-i2j2J9KIobCqyX6LlrlYhaHgd7qmP1pzHs4XAthHgth8m6c4gsHsh+Pl3fqknD7AX18ghpqo3tVtv0EFhSFU3w==" "integrity": "sha512-i2j2J9KIobCqyX6LlrlYhaHgd7qmP1pzHs4XAthHgth8m6c4gsHsh+Pl3fqknD7AX18ghpqo3tVtv0EFhSFU3w=="
}, },
"@ionic/angular": { "@ionic/angular": {
"version": "0.0.2-16", "version": "0.0.2-17",
"resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-16.tgz", "resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-17.tgz",
"integrity": "sha512-9ZS3GgO8X9G/df/2Pi9vZPgNyDYvsn2ees10Mt2u84SJC5Gf1OhbkLGiPbwVsOAxQV1qOgGCl50TXaXErNZj+A==", "integrity": "sha512-o2w2l7Mc7CAsSdC/d268ODDqD0HQ+gxP9V0RTpcS+E0jBEXybOW5dG/a75fT7uccdxeiscTv3XkzsyQBCIJwYA==",
"requires": { "requires": {
"@stencil/core": "0.1.1-0" "@stencil/core": "0.1.1-0"
} }
}, },
"@ionic/core": { "@ionic/core": {
"version": "0.0.2-39", "version": "0.0.2-41",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-39.tgz", "resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-41.tgz",
"integrity": "sha512-v+dOmZjV3HAn26cBITBl7LqZXV4XOdeFwZR0GrlR7VHiNgC6HBGBtlF2/yOlnHuU5KPzTZLSVbia9BwmytCt4g==" "integrity": "sha512-7mBe4RbrvD+LDL5HaEsWe5p2WDM4xf4vE+cMHNzPmqFN6lx60c3XkA1twVXZBjfcarYTCqne3SvbbHGfOrkS9w=="
}, },
"@ionic/storage": { "@ionic/storage": {
"version": "2.1.3", "version": "2.1.3",
@ -1503,9 +1503,9 @@
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ==" "integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
}, },
"common-tags": { "common-tags": {
"version": "1.6.0", "version": "1.7.0",
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.6.0.tgz", "resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.0.tgz",
"integrity": "sha512-sgmgEodNLbxnSSoR5a2xH23CoDJ9J5MKsJS/tqplfmJLpikG0oWMpAb+tM8ERQCMpp9I+ERf6SYl158G6GwX0w==", "integrity": "sha512-A63PFbYd8ccyVZbqZkWjQ9+BqSaROt/BCNesdhZZNjvUXx1U59fA+XDeaIJWqrgPsoIdmYds1qofDNDvrffw9Q==",
"dev": true, "dev": true,
"requires": { "requires": {
"babel-runtime": "6.26.0" "babel-runtime": "6.26.0"

2
packages/demos/conference-app/angular/src/app/app.component.html
View File

@ -22,7 +22,7 @@
</ion-content> </ion-content>
</ion-menu> </ion-menu>
<ion-nav #nav [root]="rootPage" #content swipeBackEnabled="false" main name="app"></ion-nav> <ion-nav #nav #content swipeBackEnabled="false" main name="app"></ion-nav>
</ion-split-pane> </ion-split-pane>

15
packages/demos/conference-app/angular/src/app/app.component.ts
View File

@ -69,12 +69,15 @@ export class AppComponent implements OnInit {
// Check if the user has already seen the tutorial // Check if the user has already seen the tutorial
this.storage.get('hasSeenTutorial') this.storage.get('hasSeenTutorial')
.then((hasSeenTutorial) => { .then((hasSeenTutorial) => {
console.log('hasSeenTutorial: ', hasSeenTutorial);
if (hasSeenTutorial) { if (hasSeenTutorial) {
this.rootPage = TabsPage; this.rootPage = TabsPage;
} else { } else {
this.rootPage = TutorialPage; this.rootPage = TutorialPage;
} }
// this.platformReady() getNav(this.navRef).then((nav) => {
nav.setRoot(this.rootPage);
});
}); });
// load the conference data // load the conference data
@ -121,7 +124,9 @@ export class AppComponent implements OnInit {
} }
openTutorial() { openTutorial() {
return getNav(this.navRef).setRoot(TutorialPage); return getNav(this.navRef).then((navElement) => {
navElement.setRoot(TutorialPage);
});
} }
listenToLoginEvents() { listenToLoginEvents() {
@ -145,7 +150,7 @@ export class AppComponent implements OnInit {
isActive(page: PageInterface) { isActive(page: PageInterface) {
return 'primary'; return 'primary';
//const childNav = getNav(this.navRef).getChildNavs()[0]; // const childNav = getNav(this.navRef).getChildNavs()[0];
// Tabs are a special case because they have their own navigation // Tabs are a special case because they have their own navigation
/*if (childNav) { /*if (childNav) {
@ -163,8 +168,10 @@ export class AppComponent implements OnInit {
} }
} }
function getNav(elementRef: ElementRef) { function getNav(elementRef: ElementRef): Promise<HTMLIonNavElement> {
return (elementRef.nativeElement as any).componentOnReady().then(() => {
return elementRef.nativeElement as HTMLIonNavElement; return elementRef.nativeElement as HTMLIonNavElement;
});
} }
export interface PageInterface { export interface PageInterface {

2
packages/demos/conference-app/angular/src/pages/about-popover/about-popover.ts
View File

@ -6,6 +6,7 @@ import { App } from '@ionic/angular';
@Component({ @Component({
template: ` template: `
<ion-page>
<ion-list> <ion-list>
<ion-item (click)="close('http://ionicframework.com/docs/v2/getting-started')"> <ion-item (click)="close('http://ionicframework.com/docs/v2/getting-started')">
<ion-label>Learn Ionic</ion-label> <ion-label>Learn Ionic</ion-label>
@ -23,6 +24,7 @@ import { App } from '@ionic/angular';
<ion-label>Support</ion-label> <ion-label>Support</ion-label>
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-page>
` `
}) })
export class PopoverPage { export class PopoverPage {

10
packages/demos/conference-app/angular/src/pages/about/about.html
View File

@ -1,4 +1,5 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-button menuToggle> <!-- TODO menuToggle --> <ion-button menuToggle> <!-- TODO menuToggle -->
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
@ -11,9 +12,9 @@
</ion-button> </ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="about-header"> <div class="about-header">
<img src="assets/img/ionic-logo-white.svg" alt="ionic logo"> <img src="assets/img/ionic-logo-white.svg" alt="ionic logo">
</div> </div>
@ -49,4 +50,5 @@
conference ever! conference ever!
</p> </p>
</div> </div>
</ion-content> </ion-content>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/account/account.html
View File

@ -1,4 +1,5 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle --> <ion-button> <!-- TODO menuToggle -->
@ -7,9 +8,9 @@
</ion-buttons> </ion-buttons>
<ion-title>Account</ion-title> <ion-title>Account</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">
<div padding-top text-center *ngIf="username"> <div padding-top text-center *ngIf="username">
<img src="http://www.gravatar.com/avatar?d=mm&s=140" alt="avatar"> <img src="http://www.gravatar.com/avatar?d=mm&s=140" alt="avatar">
<h2>{{username}}</h2> <h2>{{username}}</h2>
@ -22,4 +23,5 @@
<ion-item (click)="logout()">Logout</ion-item> <ion-item (click)="logout()">Logout</ion-item>
</ion-list> </ion-list>
</div> </div>
</ion-content> </ion-content>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/login/login.html
View File

@ -1,4 +1,5 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button> <!-- TODO menu toggle --> <ion-button> <!-- TODO menu toggle -->
@ -8,9 +9,9 @@
<ion-title>Login</ion-title> <ion-title>Login</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="logo"> <div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic logo"> <img src="assets/img/appicon.svg" alt="Ionic logo">
</div> </div>
@ -47,4 +48,5 @@
</ion-row> </ion-row>
</form> </form>
</ion-content> </ion-content>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/map/map.html
View File

@ -1,12 +1,14 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-button menuToggle> <ion-button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</ion-button> </ion-button>
<ion-title>Map</ion-title> <ion-title>Map</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="map-page"> <ion-content class="map-page">
<div #mapCanvas class="map-canvas"></div> <div #mapCanvas class="map-canvas"></div>
</ion-content> </ion-content>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/schedule-filter/schedule-filter.html
View File

@ -1,4 +1,5 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button (click)="dismiss()">Cancel</ion-button> <ion-button (click)="dismiss()">Cancel</ion-button>
@ -12,9 +13,9 @@
<ion-button (click)="applyFilters()" strong>Done</ion-button> <ion-button (click)="applyFilters()" strong>Done</ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="outer-content"> <ion-content class="outer-content">
<ion-list> <ion-list>
<ion-list-header>Tracks</ion-list-header> <ion-list-header>Tracks</ion-list-header>
@ -33,4 +34,5 @@
</ion-item> </ion-item>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>

11
packages/demos/conference-app/angular/src/pages/schedule/schedule.html
View File

@ -1,4 +1,5 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button> <!-- TODO menu toggle --> <ion-button> <!-- TODO menu toggle -->
@ -31,8 +32,9 @@
placeholder="Search"> placeholder="Search">
</ion-searchbar> </ion-searchbar>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
Segment value is: {{segment}}
<ion-list #scheduleList [hidden]="shownSessions === 0"> <ion-list #scheduleList [hidden]="shownSessions === 0">
<div *ngFor="let group of groups" [hidden]="group.hide"> <!-- TODO should be ion-item-wrapper or whatever its called --> <div *ngFor="let group of groups" [hidden]="group.hide"> <!-- TODO should be ion-item-wrapper or whatever its called -->
<ion-item-divider sticky> <ion-item-divider sticky>
@ -61,4 +63,5 @@
</ion-item-sliding> </ion-item-sliding>
</div> </div>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/session-detail/session-detail.html
View File

@ -1,10 +1,11 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title *ngIf="session">{{session.name}}</ion-title> <ion-title *ngIf="session">{{session.name}}</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content padding> <ion-content padding>
<div *ngIf="session"> <div *ngIf="session">
<h1>{{session.name}}</h1> <h1>{{session.name}}</h1>
<h4 *ngFor="let speaker of session?.speakers"> <h4 *ngFor="let speaker of session?.speakers">
@ -16,4 +17,5 @@
<p>{{session.location}}</p> <p>{{session.location}}</p>
<p>{{session.description}}</p> <p>{{session.description}}</p>
</div> </div>
</ion-content> </ion-content>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/signup/signup.html
View File

@ -1,4 +1,5 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle --> <ion-button> <!-- TODO menuToggle -->
@ -7,9 +8,9 @@
</ion-buttons> </ion-buttons>
<ion-title>Signup</ion-title> <ion-title>Signup</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="login-page"> <ion-content class="login-page">
<div class="logo"> <div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic Logo"> <img src="assets/img/appicon.svg" alt="Ionic Logo">
@ -41,4 +42,5 @@
</div> </div>
</form> </form>
</ion-content> </ion-content>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/speaker-detail/speaker-detail.html
View File

@ -1,10 +1,11 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-title>{{speaker?.name}}</ion-title> <ion-title>{{speaker?.name}}</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content padding class="speaker-detail"> <ion-content padding class="speaker-detail">
<div text-center *ngIf="speaker"> <div text-center *ngIf="speaker">
<img [src]="speaker.profilePic" [alt]="speaker.name"><br> <img [src]="speaker.profilePic" [alt]="speaker.name"><br>
@ -20,4 +21,5 @@
</div> </div>
<p>{{speaker?.about}}</p> <p>{{speaker?.about}}</p>
</ion-content> </ion-content>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/speaker-list/speaker-list.html
View File

@ -1,13 +1,14 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-button menuToggle> <ion-button menuToggle>
<ion-icon name="menu"></ion-icon> <ion-icon name="menu"></ion-icon>
</ion-button> </ion-button>
<ion-title>Speakers</ion-title> <ion-title>Speakers</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content class="outer-content speaker-list"> <ion-content class="outer-content speaker-list">
<ion-list> <ion-list>
<ion-grid fixed> <ion-grid fixed>
<ion-row align-items-stretch> <ion-row align-items-stretch>
@ -63,4 +64,5 @@
</ion-row> </ion-row>
</ion-grid> </ion-grid>
</ion-list> </ion-list>
</ion-content> </ion-content>
</ion-page>

11
packages/demos/conference-app/angular/src/pages/support/support.html
View File

@ -1,5 +1,5 @@
<ion-header> <ion-page>
<ion-header>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="start"> <ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle --> <ion-button> <!-- TODO menuToggle -->
@ -9,9 +9,9 @@
<ion-title>Support</ion-title> <ion-title>Support</ion-title>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content> <ion-content>
<div class="logo"> <div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic Logo"> <img src="assets/img/appicon.svg" alt="Ionic Logo">
</div> </div>
@ -32,4 +32,5 @@
<ion-button block type="submit">Submit</ion-button> <ion-button block type="submit">Submit</ion-button>
</div> </div>
</form> </form>
</ion-content> </ion-content>
</ion-page>

6
packages/demos/conference-app/angular/src/pages/tabs-page/tabs-page.html
View File

@ -1,4 +1,5 @@
<ion-tabs name="conference"> <ion-page>
<ion-tabs name="conference">
<ion-tab title="Schedule" icon="calendar"> <ion-tab title="Schedule" icon="calendar">
<ion-nav [root]="tab1Root"></ion-nav> <ion-nav [root]="tab1Root"></ion-nav>
</ion-tab> </ion-tab>
@ -11,4 +12,5 @@
<ion-tab title="About" icon="information-circle"> <ion-tab title="About" icon="information-circle">
<ion-nav [root]="tab4Root"></ion-nav> <ion-nav [root]="tab4Root"></ion-nav>
</ion-tab> </ion-tab>
</ion-tabs> </ion-tabs>
</ion-page>

10
packages/demos/conference-app/angular/src/pages/tutorial/tutorial.html
View File

@ -1,12 +1,13 @@
<ion-header no-border> <ion-page>
<ion-header no-border>
<ion-toolbar> <ion-toolbar>
<ion-buttons slot="end" end *ngIf="showSkip"> <ion-buttons slot="end" end *ngIf="showSkip">
<ion-button (click)="startApp()" color="primary">Skip</ion-button> <ion-button (click)="startApp()" color="primary">Skip</ion-button>
</ion-buttons> </ion-buttons>
</ion-toolbar> </ion-toolbar>
</ion-header> </ion-header>
<ion-content no-bounce> <ion-content no-bounce>
<ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager> <ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager>
<ion-slide> <ion-slide>
@ -41,4 +42,5 @@
</ion-slide> </ion-slide>
</ion-slides> </ion-slides>
</ion-content> </ion-content>
</ion-page>