javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +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-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-col>
<h2>Numeric Input</h2>
@@ -168,6 +186,25 @@
<ion-col>
</ion-col>
</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>
<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",
"chalk": "2.2.2",
"circular-dependency-plugin": "4.3.0",
"common-tags": "1.6.0",
"common-tags": "1.7.0",
"copy-webpack-plugin": "4.3.1",
"core-object": "3.1.5",
"css-loader": "0.28.8",
@@ -284,17 +284,17 @@
"integrity": "sha512-i2j2J9KIobCqyX6LlrlYhaHgd7qmP1pzHs4XAthHgth8m6c4gsHsh+Pl3fqknD7AX18ghpqo3tVtv0EFhSFU3w=="
},
"@ionic/angular": {
"version": "0.0.2-16",
"resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-16.tgz",
"integrity": "sha512-9ZS3GgO8X9G/df/2Pi9vZPgNyDYvsn2ees10Mt2u84SJC5Gf1OhbkLGiPbwVsOAxQV1qOgGCl50TXaXErNZj+A==",
"version": "0.0.2-17",
"resolved": "https://registry.npmjs.org/@ionic/angular/-/angular-0.0.2-17.tgz",
"integrity": "sha512-o2w2l7Mc7CAsSdC/d268ODDqD0HQ+gxP9V0RTpcS+E0jBEXybOW5dG/a75fT7uccdxeiscTv3XkzsyQBCIJwYA==",
"requires": {
"@stencil/core": "0.1.1-0"
}
},
"@ionic/core": {
"version": "0.0.2-39",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-39.tgz",
"integrity": "sha512-v+dOmZjV3HAn26cBITBl7LqZXV4XOdeFwZR0GrlR7VHiNgC6HBGBtlF2/yOlnHuU5KPzTZLSVbia9BwmytCt4g=="
"version": "0.0.2-41",
"resolved": "https://registry.npmjs.org/@ionic/core/-/core-0.0.2-41.tgz",
"integrity": "sha512-7mBe4RbrvD+LDL5HaEsWe5p2WDM4xf4vE+cMHNzPmqFN6lx60c3XkA1twVXZBjfcarYTCqne3SvbbHGfOrkS9w=="
},
"@ionic/storage": {
"version": "2.1.3",
@@ -1503,9 +1503,9 @@
"integrity": "sha512-b0553uYA5YAEGgyYIGYROzKQ7X5RAqedkfjiZxwi0kL1g3bOaBNNZfYkzt/CL0umgD5wc9Jec2FbB98CjkMRvQ=="
},
"common-tags": {
"version": "1.6.0",
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.6.0.tgz",
"integrity": "sha512-sgmgEodNLbxnSSoR5a2xH23CoDJ9J5MKsJS/tqplfmJLpikG0oWMpAb+tM8ERQCMpp9I+ERf6SYl158G6GwX0w==",
"version": "1.7.0",
"resolved": "https://registry.npmjs.org/common-tags/-/common-tags-1.7.0.tgz",
"integrity": "sha512-A63PFbYd8ccyVZbqZkWjQ9+BqSaROt/BCNesdhZZNjvUXx1U59fA+XDeaIJWqrgPsoIdmYds1qofDNDvrffw9Q==",
"dev": true,
"requires": {
"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-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>

17
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
this.storage.get('hasSeenTutorial')
.then((hasSeenTutorial) => {
console.log('hasSeenTutorial: ', hasSeenTutorial);
if (hasSeenTutorial) {
this.rootPage = TabsPage;
} else {
this.rootPage = TutorialPage;
}
// this.platformReady()
getNav(this.navRef).then((nav) => {
nav.setRoot(this.rootPage);
});
});
// load the conference data
@@ -121,7 +124,9 @@ export class AppComponent implements OnInit {
}
openTutorial() {
return getNav(this.navRef).setRoot(TutorialPage);
return getNav(this.navRef).then((navElement) => {
navElement.setRoot(TutorialPage);
});
}
listenToLoginEvents() {
@@ -145,7 +150,7 @@ export class AppComponent implements OnInit {
isActive(page: PageInterface) {
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
/*if (childNav) {
@@ -163,8 +168,10 @@ export class AppComponent implements OnInit {
}
}
function getNav(elementRef: ElementRef) {
return elementRef.nativeElement as HTMLIonNavElement;
function getNav(elementRef: ElementRef): Promise<HTMLIonNavElement> {
return (elementRef.nativeElement as any).componentOnReady().then(() => {
return elementRef.nativeElement as HTMLIonNavElement;
});
}
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({
template: `
<ion-page>
<ion-list>
<ion-item (click)="close('http://ionicframework.com/docs/v2/getting-started')">
<ion-label>Learn Ionic</ion-label>
@@ -23,6 +24,7 @@ import { App } from '@ionic/angular';
<ion-label>Support</ion-label>
</ion-item>
</ion-list>
</ion-page>
`
})
export class PopoverPage {

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

@@ -1,52 +1,54 @@
<ion-header>
<ion-toolbar>
<ion-button menuToggle> <!-- TODO menuToggle -->
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-title>About</ion-title>
<ion-buttons slot="end">
<ion-button slot="icon-only" (click)="presentPopover($event)">
<ion-icon name="more" style="width: 20px"></ion-icon> <!-- TODO remove temporary width style -->
<ion-page>
<ion-header>
<ion-toolbar>
<ion-button menuToggle> <!-- TODO menuToggle -->
<ion-icon name="menu"></ion-icon>
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-title>About</ion-title>
<ion-content>
<div class="about-header">
<img src="assets/img/ionic-logo-white.svg" alt="ionic logo">
</div>
<div padding class="about-info">
<h4>Ionic Conference</h4>
<ion-buttons slot="end">
<ion-button slot="icon-only" (click)="presentPopover($event)">
<ion-icon name="more" style="width: 20px"></ion-icon> <!-- TODO remove temporary width style -->
</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-list no-lines>
<ion-item>
<ion-icon name="calendar" slot="start"></ion-icon>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" max="2056" [(ngModel)]="conferenceDate"></ion-datetime>
</ion-item>
<ion-content>
<div class="about-header">
<img src="assets/img/ionic-logo-white.svg" alt="ionic logo">
</div>
<div padding class="about-info">
<h4>Ionic Conference</h4>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>Location</ion-label>
<ion-select>
<ion-select-option value="madison" selected>Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<ion-list no-lines>
<ion-item>
<ion-icon name="calendar" slot="start"></ion-icon>
<ion-label>Date</ion-label>
<ion-datetime displayFormat="MMM DD, YYYY" max="2056" [(ngModel)]="conferenceDate"></ion-datetime>
</ion-item>
<p>
The Ionic Conference is a one-day conference featuring talks from the
Ionic team. It is focused on Ionic applications being built with
Ionic 2. This includes migrating apps from Ionic 1 to Ionic 2,
Angular concepts, Webpack, Sass, and many other technologies used
in Ionic 2. Tickets are completely sold out, and we’re expecting
more than 1000 developers – making this the largest Ionic
conference ever!
</p>
</div>
</ion-content>
<ion-item>
<ion-icon name="pin" slot="start"></ion-icon>
<ion-label>Location</ion-label>
<ion-select>
<ion-select-option value="madison" selected>Madison, WI</ion-select-option>
<ion-select-option value="austin">Austin, TX</ion-select-option>
<ion-select-option value="chicago">Chicago, IL</ion-select-option>
<ion-select-option value="seattle">Seattle, WA</ion-select-option>
</ion-select>
</ion-item>
</ion-list>
<p>
The Ionic Conference is a one-day conference featuring talks from the
Ionic team. It is focused on Ionic applications being built with
Ionic 2. This includes migrating apps from Ionic 1 to Ionic 2,
Angular concepts, Webpack, Sass, and many other technologies used
in Ionic 2. Tickets are completely sold out, and we’re expecting
more than 1000 developers – making this the largest Ionic
conference ever!
</p>
</div>
</ion-content>
</ion-page>

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

@@ -1,25 +1,27 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle -->
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Account</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle -->
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Account</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<div padding-top text-center *ngIf="username">
<img src="http://www.gravatar.com/avatar?d=mm&s=140" alt="avatar">
<h2>{{username}}</h2>
<ion-content class="outer-content">
<div padding-top text-center *ngIf="username">
<img src="http://www.gravatar.com/avatar?d=mm&s=140" alt="avatar">
<h2>{{username}}</h2>
<ion-list inset>
<ion-item (click)="updatePicture()">Update Picture</ion-item>
<ion-item (click)="changeUsername()">Change Username</ion-item>
<ion-item (click)="changePassword()">Change Password</ion-item>
<ion-item (click)="support()">Support</ion-item>
<ion-item (click)="logout()">Logout</ion-item>
</ion-list>
</div>
</ion-content>
<ion-list inset>
<ion-item (click)="updatePicture()">Update Picture</ion-item>
<ion-item (click)="changeUsername()">Change Username</ion-item>
<ion-item (click)="changePassword()">Change Password</ion-item>
<ion-item (click)="support()">Support</ion-item>
<ion-item (click)="logout()">Logout</ion-item>
</ion-list>
</div>
</ion-content>
</ion-page>

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

@@ -1,50 +1,52 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menu toggle -->
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menu toggle -->
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
<ion-title>Login</ion-title>
</ion-toolbar>
</ion-header>
<ion-content>
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic logo">
</div>
<ion-content>
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic logo">
</div>
<form #loginForm="ngForm" novalidate>
<ion-list no-lines>
<ion-item>
<ion-label stacked color="primary">Username</ion-label>
<ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
required>
</ion-input>
</ion-item>
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
Username is required
</p>
<form #loginForm="ngForm" novalidate>
<ion-list no-lines>
<ion-item>
<ion-label stacked color="primary">Username</ion-label>
<ion-input [(ngModel)]="login.username" name="username" type="text" #username="ngModel" spellcheck="false" autocapitalize="off"
required>
</ion-input>
</ion-item>
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
Username is required
</p>
<ion-item>
<ion-label stacked color="primary">Password</ion-label>
<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
Password is required
</p>
</ion-list>
<ion-item>
<ion-label stacked color="primary">Password</ion-label>
<ion-input [(ngModel)]="login.password" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
Password is required
</p>
</ion-list>
<ion-row responsive-sm>
<ion-col>
<button ion-button (click)="onLogin(loginForm)" type="submit" block>Login</button>
</ion-col>
<ion-col>
<button ion-button (click)="onSignup()" color="light" block>Signup</button>
</ion-col>
</ion-row>
</form>
<ion-row responsive-sm>
<ion-col>
<button ion-button (click)="onLogin(loginForm)" type="submit" block>Login</button>
</ion-col>
<ion-col>
<button ion-button (click)="onSignup()" color="light" block>Signup</button>
</ion-col>
</ion-row>
</form>
</ion-content>
</ion-content>
</ion-page>

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

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

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

@@ -1,36 +1,38 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="dismiss()">Cancel</ion-button>
</ion-buttons>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button (click)="dismiss()">Cancel</ion-button>
</ion-buttons>
<ion-title>
Filter Sessions
</ion-title>
<ion-title>
Filter Sessions
</ion-title>
<ion-buttons slot="end">
<ion-button (click)="applyFilters()" strong>Done</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-buttons slot="end">
<ion-button (click)="applyFilters()" strong>Done</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content">
<ion-content class="outer-content">
<ion-list>
<ion-list-header>Tracks</ion-list-header>
<ion-list>
<ion-list-header>Tracks</ion-list-header>
<ion-item *ngFor="let track of tracks" [attr.track]="track.name | lowercase">
<span slot="start" class="dot"></span>
<ion-label>{{track.name}}</ion-label>
<ion-toggle [(ngModel)]="track.isChecked" color="secondary"></ion-toggle>
</ion-item>
<ion-item *ngFor="let track of tracks" [attr.track]="track.name | lowercase">
<span slot="start" class="dot"></span>
<ion-label>{{track.name}}</ion-label>
<ion-toggle [(ngModel)]="track.isChecked" color="secondary"></ion-toggle>
</ion-item>
</ion-list>
</ion-list>
<ion-list>
<ion-item (click)="resetFilters()" detail-none class="reset-filters">
Reset All Filters
</ion-item>
</ion-list>
<ion-list>
<ion-item (click)="resetFilters()" detail-none class="reset-filters">
Reset All Filters
</ion-item>
</ion-list>
</ion-content>
</ion-content>
</ion-page>

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

@@ -1,64 +1,67 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menu toggle -->
Menu
</ion-button>
</ion-buttons>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menu toggle -->
Menu
</ion-button>
</ion-buttons>
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
<ion-segment [(ngModel)]="segment" (ionChange)="updateSchedule()">
<ion-segment-button value="all">
All
</ion-segment-button>
<ion-segment-button value="favorites">
Favorites
</ion-segment-button>
</ion-segment>
<ion-buttons slot="end">
<ion-button (click)="presentFilter()" slot="icon-only">
<!--<ion-icon ios="ios-options-outline" md="md-options"></ion-icon> -->
Filter
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-buttons slot="end">
<ion-button (click)="presentFilter()" slot="icon-only">
<!--<ion-icon ios="ios-options-outline" md="md-options"></ion-icon> -->
Filter
</ion-button>
</ion-buttons>
</ion-toolbar>
<ion-toolbar no-border-top>
<ion-searchbar color="primary"
[(ngModel)]="queryText"
(ionInput)="updateSchedule()"
placeholder="Search">
</ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
<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 -->
<ion-item-divider sticky>
<ion-label>
{{group.time}}
</ion-label>
</ion-item-divider>
<ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide">
<ion-toolbar no-border-top>
<ion-searchbar color="primary"
[(ngModel)]="queryText"
(ionInput)="updateSchedule()"
placeholder="Search">
</ion-searchbar>
</ion-toolbar>
</ion-header>
<ion-content>
Segment value is: {{segment}}
<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 -->
<ion-item-divider sticky>
<ion-label>
{{group.time}}
</ion-label>
</ion-item-divider>
<ion-item-sliding *ngFor="let session of group.sessions" #slidingItem [attr.track]="session.tracks[0] | lowercase" [hidden]="session.hide">
<ion-item (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
<p>
{{session.timeStart}} &mdash;
{{session.timeEnd}}:
{{session.location}}
</p>
</ion-item>
<ion-item-options>
<ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
Favorite
</ion-item-option>
<ion-item-option color="danger" click)="removeFavorite(slidingItem, session, 'Remove Favorite')" *ngIf="segment === 'favorites'">
Remove
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
</ion-list>
</ion-content>
<ion-item (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
<p>
{{session.timeStart}} &mdash;
{{session.timeEnd}}:
{{session.location}}
</p>
</ion-item>
<ion-item-options>
<ion-item-option color="favorite" (click)="addFavorite(slidingItem, session)" *ngIf="segment === 'all'">
Favorite
</ion-item-option>
<ion-item-option color="danger" click)="removeFavorite(slidingItem, session, 'Remove Favorite')" *ngIf="segment === 'favorites'">
Remove
</ion-item-option>
</ion-item-options>
</ion-item-sliding>
</div>
</ion-list>
</ion-content>
</ion-page>

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

@@ -1,19 +1,21 @@
<ion-header>
<ion-toolbar>
<ion-title *ngIf="session">{{session.name}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title *ngIf="session">{{session.name}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding>
<div *ngIf="session">
<h1>{{session.name}}</h1>
<h4 *ngFor="let speaker of session?.speakers">
{{speaker.name}}
</h4>
<p>
{{session.timeStart}} - {{session.timeEnd}}
</p>
<p>{{session.location}}</p>
<p>{{session.description}}</p>
</div>
</ion-content>
<ion-content padding>
<div *ngIf="session">
<h1>{{session.name}}</h1>
<h4 *ngFor="let speaker of session?.speakers">
{{speaker.name}}
</h4>
<p>
{{session.timeStart}} - {{session.timeEnd}}
</p>
<p>{{session.location}}</p>
<p>{{session.description}}</p>
</div>
</ion-content>
</ion-page>

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

@@ -1,44 +1,46 @@
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle -->
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Signup</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle -->
<ion-icon slot="icon-only" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Signup</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="login-page">
<ion-content class="login-page">
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic Logo">
</div>
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic Logo">
</div>
<form #signupForm="ngForm" novalidate>
<ion-list no-lines>
<ion-item>
<ion-label stacked color="primary">Username</ion-label>
<ion-input [(ngModel)]="signup.username" name="username" type="text" #username="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
Username is required
</p>
<form #signupForm="ngForm" novalidate>
<ion-list no-lines>
<ion-item>
<ion-label stacked color="primary">Username</ion-label>
<ion-input [(ngModel)]="signup.username" name="username" type="text" #username="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="username.valid || submitted == false" color="danger" padding-left>
Username is required
</p>
<ion-item>
<ion-label stacked color="primary">Password</ion-label>
<ion-input [(ngModel)]="signup.password" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
Password is required
</p>
</ion-list>
<ion-item>
<ion-label stacked color="primary">Password</ion-label>
<ion-input [(ngModel)]="signup.password" name="password" type="password" #password="ngModel" required>
</ion-input>
</ion-item>
<p ion-text [hidden]="password.valid || submitted == false" color="danger" padding-left>
Password is required
</p>
</ion-list>
<div padding>
<ion-button (click)="onSignup(signupForm)" type="submit" block>Create</ion-button>
</div>
</form>
<div padding>
<ion-button (click)="onSignup(signupForm)" type="submit" block>Create</ion-button>
</div>
</form>
</ion-content>
</ion-content>
</ion-page>

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

@@ -1,23 +1,25 @@
<ion-header>
<ion-toolbar>
<ion-title>{{speaker?.name}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>{{speaker?.name}}</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding class="speaker-detail">
<div text-center *ngIf="speaker">
<img [src]="speaker.profilePic" [alt]="speaker.name"><br>
<ion-content padding class="speaker-detail">
<div text-center *ngIf="speaker">
<img [src]="speaker.profilePic" [alt]="speaker.name"><br>
<ion-button clear small color="twitter">
<ion-icon name="logo-twitter" slot="icon-only"></ion-icon>
</ion-button>
<ion-button clear small color="github">
<ion-icon name="logo-github" slot="icon-only"></ion-icon>
</ion-button>
<ion-button clear small color="instagram">
<ion-icon name="logo-instagram" slot="icon-only"></ion-icon>
</ion-button>
</div>
<ion-button clear small color="twitter">
<ion-icon name="logo-twitter" slot="icon-only"></ion-icon>
</ion-button>
<ion-button clear small color="github">
<ion-icon name="logo-github" slot="icon-only"></ion-icon>
</ion-button>
<ion-button clear small color="instagram">
<ion-icon name="logo-instagram" slot="icon-only"></ion-icon>
</ion-button>
</div>
<p>{{speaker?.about}}</p>
</ion-content>
<p>{{speaker?.about}}</p>
</ion-content>
</ion-page>

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

@@ -1,66 +1,68 @@
<ion-header>
<ion-toolbar>
<ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-title>Speakers</ion-title>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-button menuToggle>
<ion-icon name="menu"></ion-icon>
</ion-button>
<ion-title>Speakers</ion-title>
</ion-toolbar>
</ion-header>
<ion-content class="outer-content speaker-list">
<ion-list>
<ion-grid fixed>
<ion-row align-items-stretch>
<ion-content class="outer-content speaker-list">
<ion-list>
<ion-grid fixed>
<ion-row align-items-stretch>
<ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let speaker of speakers" approxItemHeight="457px">
<ion-col col-12 col-md-6 align-self-stretch align-self-center *ngFor="let speaker of speakers" approxItemHeight="457px">
<ion-card class="speaker-card">
<ion-card-header>
<ion-item detail-none (click)="goToSpeakerDetail(speaker)">
<ion-avatar slot="start">
<img [src]="speaker.profilePic" alt="Speaker profile pic">
</ion-avatar>
{{speaker.name}}
</ion-item>
</ion-card-header>
<ion-card-content class="outer-content">
<ion-list>
<ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
<ion-card class="speaker-card">
<ion-card-header>
<ion-item detail-none (click)="goToSpeakerDetail(speaker)">
<ion-avatar slot="start">
<img [src]="speaker.profilePic" alt="Speaker profile pic">
</ion-avatar>
{{speaker.name}}
</ion-item>
</ion-card-header>
<ion-item (click)="goToSpeakerDetail(speaker)">
<h3>About {{speaker.name}}</h3>
</ion-item>
</ion-list>
</ion-card-content>
<ion-card-content class="outer-content">
<ion-list>
<ion-item *ngFor="let session of speaker.sessions" (click)="goToSessionDetail(session)">
<h3>{{session.name}}</h3>
</ion-item>
<ion-row no-padding>
<ion-col col-12 col-lg-auto text-center text-lg-left>
<ion-button clear small color="primary"(click)="goToSpeakerTwitter(speaker)">
<ion-icon name="logo-twitter" slot="start"></ion-icon>
Tweet
</ion-button>
</ion-col>
<ion-col col-12 col-lg-auto text-center>
<ion-button clear small color="primary" (click)="openSpeakerShare(speaker)">
<ion-icon name='share-alt' slit="start"></ion-icon>
Share
</ion-button>
</ion-col>
<ion-col col-12 col-lg-auto text-center text-lg-right>
<ion-button clear small color="primary" (click)="openContact(speaker)">
<ion-icon name='chatboxes' slot="start"></ion-icon>
Contact
</ion-button>
</ion-col>
</ion-row>
<ion-item (click)="goToSpeakerDetail(speaker)">
<h3>About {{speaker.name}}</h3>
</ion-item>
</ion-list>
</ion-card-content>
</ion-card>
<ion-row no-padding>
<ion-col col-12 col-lg-auto text-center text-lg-left>
<ion-button clear small color="primary"(click)="goToSpeakerTwitter(speaker)">
<ion-icon name="logo-twitter" slot="start"></ion-icon>
Tweet
</ion-button>
</ion-col>
<ion-col col-12 col-lg-auto text-center>
<ion-button clear small color="primary" (click)="openSpeakerShare(speaker)">
<ion-icon name='share-alt' slit="start"></ion-icon>
Share
</ion-button>
</ion-col>
<ion-col col-12 col-lg-auto text-center text-lg-right>
<ion-button clear small color="primary" (click)="openContact(speaker)">
<ion-icon name='chatboxes' slot="start"></ion-icon>
Contact
</ion-button>
</ion-col>
</ion-row>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
</ion-content>
</ion-card>
</ion-col>
</ion-row>
</ion-grid>
</ion-list>
</ion-content>
</ion-page>

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

@@ -1,35 +1,36 @@
<ion-header>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle -->
<ion-icon slot="start" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Support</ion-title>
</ion-toolbar>
<ion-toolbar>
<ion-buttons slot="start">
<ion-button> <!-- TODO menuToggle -->
<ion-icon slot="start" name="menu"></ion-icon>
</ion-button>
</ion-buttons>
<ion-title>Support</ion-title>
</ion-toolbar>
</ion-header>
</ion-header>
<ion-content>
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic Logo">
</div>
<ion-content>
<div class="logo">
<img src="assets/img/appicon.svg" alt="Ionic Logo">
</div>
<form #submitForm="ngForm" novalidate (ngSubmit)="submit(submitForm)">
<ion-list no-lines>
<ion-item>
<ion-label stacked color="primary">Enter your support message below</ion-label>
<ion-textarea [(ngModel)]="supportMessage" name="supportQuestion" #supportQuestion="ngModel" rows="6" required></ion-textarea>
</ion-item>
</ion-list>
<form #submitForm="ngForm" novalidate (ngSubmit)="submit(submitForm)">
<ion-list no-lines>
<ion-item>
<ion-label stacked color="primary">Enter your support message below</ion-label>
<ion-textarea [(ngModel)]="supportMessage" name="supportQuestion" #supportQuestion="ngModel" rows="6" required></ion-textarea>
</ion-item>
</ion-list>
<p ion-text [hidden]="supportQuestion.valid || submitted === false" color="danger" padding-left>
Support message is required
</p>
<p ion-text [hidden]="supportQuestion.valid || submitted === false" color="danger" padding-left>
Support message is required
</p>
<div padding>
<ion-button block type="submit">Submit</ion-button>
</div>
</form>
</ion-content>
<div padding>
<ion-button block type="submit">Submit</ion-button>
</div>
</form>
</ion-content>
</ion-page>

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

@@ -1,14 +1,16 @@
<ion-tabs name="conference">
<ion-tab title="Schedule" icon="calendar">
<ion-nav [root]="tab1Root"></ion-nav>
</ion-tab>
<ion-tab title="Speakers" icon="contacts">
<ion-nav [root]="tab2Root"></ion-nav>
</ion-tab>
<ion-tab title="Map" icon="map">
<ion-nav [root]="tab3Root"></ion-nav>
</ion-tab>
<ion-tab title="About" icon="information-circle">
<ion-nav [root]="tab4Root"></ion-nav>
</ion-tab>
</ion-tabs>
<ion-page>
<ion-tabs name="conference">
<ion-tab title="Schedule" icon="calendar">
<ion-nav [root]="tab1Root"></ion-nav>
</ion-tab>
<ion-tab title="Speakers" icon="contacts">
<ion-nav [root]="tab2Root"></ion-nav>
</ion-tab>
<ion-tab title="Map" icon="map">
<ion-nav [root]="tab3Root"></ion-nav>
</ion-tab>
<ion-tab title="About" icon="information-circle">
<ion-nav [root]="tab4Root"></ion-nav>
</ion-tab>
</ion-tabs>
</ion-page>

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

@@ -1,44 +1,46 @@
<ion-header no-border>
<ion-toolbar>
<ion-buttons slot="end" end *ngIf="showSkip">
<ion-button (click)="startApp()" color="primary">Skip</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-page>
<ion-header no-border>
<ion-toolbar>
<ion-buttons slot="end" end *ngIf="showSkip">
<ion-button (click)="startApp()" color="primary">Skip</ion-button>
</ion-buttons>
</ion-toolbar>
</ion-header>
<ion-content no-bounce>
<ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager>
<ion-content no-bounce>
<ion-slides #slides (ionSlideWillChange)="onSlideChangeStart($event)" pager>
<ion-slide>
<img src="assets/img/ica-slidebox-img-1.png" class="slide-image"/>
<h2 class="slide-title">
Welcome to <b>ICA</b>
</h2>
<p>
The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
</p>
</ion-slide>
<ion-slide>
<img src="assets/img/ica-slidebox-img-1.png" class="slide-image"/>
<h2 class="slide-title">
Welcome to <b>ICA</b>
</h2>
<p>
The <b>ionic conference app</b> is a practical preview of the ionic framework in action, and a demonstration of proper code use.
</p>
</ion-slide>
<ion-slide>
<img src="assets/img/ica-slidebox-img-2.png" class="slide-image"/>
<h2 class="slide-title" >What is Ionic?</h2>
<p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.</p>
</ion-slide>
<ion-slide>
<img src="assets/img/ica-slidebox-img-2.png" class="slide-image"/>
<h2 class="slide-title" >What is Ionic?</h2>
<p><b>Ionic Framework</b> is an open source SDK that enables developers to build high quality mobile apps with web technologies like HTML, CSS, and JavaScript.</p>
</ion-slide>
<ion-slide>
<img src="assets/img/ica-slidebox-img-3.png" class="slide-image"/>
<h2 class="slide-title">What is Ionic Pro?</h2>
<p><b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.</p>
</ion-slide>
<ion-slide>
<img src="assets/img/ica-slidebox-img-3.png" class="slide-image"/>
<h2 class="slide-title">What is Ionic Pro?</h2>
<p><b>Ionic Pro</b> is a powerful set of services and features built on top of Ionic Framework that brings a totally new level of app development agility to mobile dev teams.</p>
</ion-slide>
<ion-slide>
<img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
<h2 class="slide-title">Ready to Play?</h2>
<ion-button clear="true" (click)="startApp()">
Continue
<ion-icon slot="icon-end" name="arrow-forward"></ion-icon>
</ion-button>
</ion-slide>
<ion-slide>
<img src="assets/img/ica-slidebox-img-4.png" class="slide-image"/>
<h2 class="slide-title">Ready to Play?</h2>
<ion-button clear="true" (click)="startApp()">
Continue
<ion-icon slot="icon-end" name="arrow-forward"></ion-icon>
</ion-button>
</ion-slide>
</ion-slides>
</ion-content>
</ion-slides>
</ion-content>
</ion-page>