mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-22 21:48:42 +08:00
chore(build): rename ionic directory to src and update all references in the build process.
This commit is contained in:
4
src/components/loading/test/basic/e2e.ts
Normal file
4
src/components/loading/test/basic/e2e.ts
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
it('should open default spinner', function() {
|
||||
element(by.css('.e2eLoadingDefaultSpinner')).click();
|
||||
});
|
237
src/components/loading/test/basic/index.ts
Normal file
237
src/components/loading/test/basic/index.ts
Normal file
@ -0,0 +1,237 @@
|
||||
import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform} from '../../../../../ionic';
|
||||
|
||||
|
||||
@Page({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EPage {
|
||||
constructor(private nav: NavController, private platform: Platform) {}
|
||||
|
||||
presentLoadingIos() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'ios',
|
||||
duration: 1000,
|
||||
cssClass: 'my-custom-loader'
|
||||
});
|
||||
|
||||
loading.onDismiss(() => {
|
||||
console.log('Dismissed loading');
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
}
|
||||
|
||||
presentLoadingDots() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'dots',
|
||||
content: 'Loading...',
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
}
|
||||
|
||||
presentLoadingBubbles() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'bubbles',
|
||||
content: 'Loading...',
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
}
|
||||
|
||||
presentLoadingCircles() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'circles',
|
||||
content: 'Loading...',
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
}
|
||||
|
||||
presentLoadingCrescent() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'crescent',
|
||||
content: 'Please wait...',
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
}
|
||||
|
||||
// Pass the fixed-spinner class so we can turn off
|
||||
// spinner animation for the e2e test
|
||||
presentLoadingDefault() {
|
||||
let loading = Loading.create({
|
||||
content: 'Please wait...',
|
||||
cssClass: 'fixed-spinner'
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
|
||||
setTimeout(() => {
|
||||
loading.dismiss();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
presentLoadingCustom() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: `
|
||||
<div class="custom-spinner-container">
|
||||
<div class="custom-spinner-box"></div>
|
||||
</div>`,
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
}
|
||||
|
||||
presentLoadingText() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: 'Loading Please Wait...'
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
|
||||
setTimeout(() => {
|
||||
this.nav.push(Page2);
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
loading.dismiss();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
goToPage2() {
|
||||
this.nav.push(Page2);
|
||||
}
|
||||
|
||||
presentLoadingMultiple() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: 'Loading 1 Please Wait...'
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
|
||||
let loading2 = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: 'Loading 2 Please Wait...'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.nav.present(loading2);
|
||||
}, 1000);
|
||||
|
||||
let loading3 = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: 'Loading 3 Please Wait...'
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.nav.present(loading3);
|
||||
|
||||
setTimeout(() => {
|
||||
loading3.dismiss();
|
||||
}, 1000);
|
||||
|
||||
setTimeout(() => {
|
||||
loading2.dismiss();
|
||||
}, 2000);
|
||||
|
||||
setTimeout(() => {
|
||||
loading.dismiss();
|
||||
}, 3000);
|
||||
}, 2000);
|
||||
|
||||
}
|
||||
|
||||
presentLoadingMultipleNav() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: 'Loading 1 Please Wait...',
|
||||
dismissOnPageChange: true
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
|
||||
let loading2 = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: 'Loading 2 Please Wait...',
|
||||
dismissOnPageChange: true
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.nav.present(loading2);
|
||||
}, 500);
|
||||
|
||||
let loading3 = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: 'Loading 3 Please Wait...',
|
||||
dismissOnPageChange: true
|
||||
});
|
||||
|
||||
setTimeout(() => {
|
||||
this.nav.present(loading3);
|
||||
|
||||
setTimeout(() => {
|
||||
this.nav.push(Page2);
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>Page 2</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>Some content</ion-content>
|
||||
<ion-toolbar position="bottom">
|
||||
<ion-buttons end>
|
||||
<button (click)="goToPage3()">
|
||||
Navigate
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
||||
`
|
||||
})
|
||||
class Page2 {
|
||||
constructor(private nav: NavController, private platform: Platform) {}
|
||||
|
||||
onPageLoaded() {
|
||||
setTimeout(() => {
|
||||
this.nav.push(Page3);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
goToPage3() {
|
||||
this.nav.push(Page3);
|
||||
}
|
||||
}
|
||||
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>Page 3</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>Some content</ion-content>
|
||||
`
|
||||
})
|
||||
class Page3 {
|
||||
constructor(private nav: NavController, private platform: Platform) {}
|
||||
}
|
||||
|
||||
@App({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
class E2EApp {
|
||||
root = E2EPage;
|
||||
}
|
||||
|
||||
document.body.innerHTML += '<link href="styles.css" rel="stylesheet">'
|
26
src/components/loading/test/basic/main.html
Normal file
26
src/components/loading/test/basic/main.html
Normal file
@ -0,0 +1,26 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>Loading</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding>
|
||||
<button block (click)="presentLoadingIos()">iOS Spinner</button>
|
||||
<button block (click)="presentLoadingDots()">Dots Spinner</button>
|
||||
<button block (click)="presentLoadingBubbles()">Bubbles Spinner</button>
|
||||
<button block (click)="presentLoadingCircles()">Circles Spinner</button>
|
||||
<button block (click)="presentLoadingCrescent()">Crescent Spinner</button>
|
||||
<button block (click)="presentLoadingDefault()" secondary class="e2eLoadingDefaultSpinner">Default Spinner</button>
|
||||
<button block (click)="presentLoadingCustom()" light>Custom Spinner</button>
|
||||
<button block (click)="presentLoadingText()" dark>Content Only w/ Nav</button>
|
||||
<button block (click)="presentLoadingMultiple()" danger>Multiple Loading</button>
|
||||
<button block (click)="presentLoadingMultipleNav()" danger>Multiple Nav Loading</button>
|
||||
</ion-content>
|
||||
|
||||
<ion-toolbar position="bottom">
|
||||
<ion-buttons end>
|
||||
<button (click)="goToPage2()">
|
||||
Navigate
|
||||
<ion-icon name="arrow-forward"></ion-icon>
|
||||
</button>
|
||||
</ion-buttons>
|
||||
</ion-toolbar>
|
61
src/components/loading/test/basic/styles.css
Normal file
61
src/components/loading/test/basic/styles.css
Normal file
@ -0,0 +1,61 @@
|
||||
/* Fix the spinner used in e2e */
|
||||
.fixed-spinner svg {
|
||||
animation: none;
|
||||
}
|
||||
|
||||
.custom-spinner-container {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.custom-spinner-box {
|
||||
position: relative;
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #000;
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
animation: spin 3s infinite linear;
|
||||
}
|
||||
|
||||
.custom-spinner-box:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-sizing: border-box;
|
||||
border: 4px solid #000;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
animation: pulse 1.5s infinite ease;
|
||||
}
|
||||
|
||||
.wp .custom-spinner-box,
|
||||
.wp .custom-spinner-box:before {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulse {
|
||||
50% {
|
||||
border-width: 20px;
|
||||
}
|
||||
}
|
||||
@keyframes pulse {
|
||||
50% {
|
||||
border-width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@keyframes spin {
|
||||
100% {
|
||||
-webkit-transform: rotate(360deg);
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
4
src/components/loading/test/tabs/e2e.ts
Normal file
4
src/components/loading/test/tabs/e2e.ts
Normal file
@ -0,0 +1,4 @@
|
||||
|
||||
it('should show default spinner', function() {
|
||||
element(by.css('.e2eLoadingTabsContent')).click();
|
||||
});
|
74
src/components/loading/test/tabs/index.ts
Normal file
74
src/components/loading/test/tabs/index.ts
Normal file
@ -0,0 +1,74 @@
|
||||
import {App, Page, ActionSheet, Loading, NavController, ViewController, Platform} from '../../../../../ionic';
|
||||
|
||||
|
||||
@Page({
|
||||
templateUrl: 'main.html'
|
||||
})
|
||||
class E2EPage {
|
||||
constructor(private nav: NavController, private platform: Platform) {}
|
||||
|
||||
presentLoading() {
|
||||
let loading = Loading.create({
|
||||
spinner: 'hide',
|
||||
content: 'Loading...',
|
||||
duration: 1000
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
}
|
||||
|
||||
presentLoadingNav() {
|
||||
let loading = Loading.create({
|
||||
content: 'Please wait...',
|
||||
});
|
||||
|
||||
this.nav.present(loading);
|
||||
|
||||
setTimeout(() => {
|
||||
this.nav.push(Page2);
|
||||
|
||||
setTimeout(() => {
|
||||
loading.dismiss();
|
||||
}, 1000);
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@Page({
|
||||
template: `
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>Page 2</ion-title>
|
||||
</ion-navbar>
|
||||
<ion-content padding>Some content</ion-content>
|
||||
`
|
||||
})
|
||||
class Page2 {
|
||||
constructor(private nav: NavController, private platform: Platform) {}
|
||||
}
|
||||
|
||||
@Page({
|
||||
template: `
|
||||
<ion-tabs>
|
||||
<ion-tab tabTitle="Plain List" tabIcon="star" [root]="root1"></ion-tab>
|
||||
<ion-tab tabTitle="Schedule" tabIcon="globe" [root]="root2"></ion-tab>
|
||||
<ion-tab tabTitle="Stopwatch" tabIcon="stopwatch" [root]="root3"></ion-tab>
|
||||
</ion-tabs>
|
||||
`
|
||||
})
|
||||
export class TabsPage {
|
||||
private root1 = E2EPage;
|
||||
private root2 = Page2;
|
||||
private root3 = E2EPage;
|
||||
|
||||
constructor() {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@App({
|
||||
template: '<ion-nav [root]="root"></ion-nav>'
|
||||
})
|
||||
class E2EApp {
|
||||
root = TabsPage;
|
||||
}
|
9
src/components/loading/test/tabs/main.html
Normal file
9
src/components/loading/test/tabs/main.html
Normal file
@ -0,0 +1,9 @@
|
||||
|
||||
<ion-navbar *navbar>
|
||||
<ion-title>Loading</ion-title>
|
||||
</ion-navbar>
|
||||
|
||||
<ion-content padding>
|
||||
<button block (click)="presentLoading()" class="e2eLoadingTabsContent">Loading Content</button>
|
||||
<button block (click)="presentLoadingNav()">Loading w/ Nav</button>
|
||||
</ion-content>
|
Reference in New Issue
Block a user