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

docs(demo): update the item sliding demo so the archive does something

Browse Source 
also hide pointer events on img

fixes #7547
This commit is contained in:
Brandy Carney
2016-08-04 13:41:12 -04:00
parent 108f821e99
commit dfb8ba4b98
2 changed files with 32 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
demos/item-sliding/index.ts
View File

@ -66,21 +66,24 @@ class ApiDemoPage {
}
archive(item: ItemSliding) {
console.log('Archive');
item.close();
this.expandAction(item, 'archiving', 'Chat was archived.');
}
download(item: ItemSliding) {
item.setCssClass('downloading', true);
this.expandAction(item, 'downloading', 'Login was downloaded.');
}
expandAction(item: ItemSliding, action: string, text: string) {
item.setCssClass(action, true);
setTimeout(() => {
const toast = this.toastCtrl.create({
message: 'Item was downloaded!'
message: text
});
toast.present();
item.setCssClass('downloading', false);
item.setCssClass(action, false);
item.close();
// Wait 2s to close toast
setTimeout(() => toast.dismiss(), 2000);
}, 1500);
}

34
demos/item-sliding/main.html
View File

@ -43,8 +43,9 @@
<ion-item-options side="left" (ionSwipe)="archive(item)">
<button primary expandable (click)="archive(item)">
<ion-icon name="archive"></ion-icon>
Archive
<ion-icon name="archive" class="expand-hide"></ion-icon>
<div class="expand-hide">Archive</div>
<ion-spinner id="archive-spinner"></ion-spinner>
</button>
</ion-item-options>
</ion-item-sliding>
@ -72,8 +73,8 @@
Mute
</button>
<button light expandable (click)="download(item)">
<ion-icon name="download" class="download-hide"></ion-icon>
<div class="download-hide">Download</div>
<ion-icon name="download" class="expand-hide"></ion-icon>
<div class="expand-hide">Download</div>
<ion-spinner id="download-spinner"></ion-spinner>
</button>
</ion-item-options>
@ -84,27 +85,38 @@
</ion-content>
<style>
#download-spinner {
/* TODO: spinner is dropping classes so we have to use ids: https://github.com/driftyco/ionic/issues/7087 */
#archive-spinner,
#download-spinner,
.archiving .expand-hide,
.downloading .expand-hide {
display: none;
}
svg circle {
stroke: white;
/* TODO: spinner doesn't have a good way to do this yet: https://github.com/driftyco/ionic/issues/7087 */
#archive-spinner.spinner-ios line,
#archive-spinner.spinner-crescent circle {
stroke: #fff;
}
#archive-spinner.spinner-circles circle {
fill: #fff;
}
.archiving #archive-spinner,
.downloading #download-spinner {
display: block;
}
.downloading .download-hide {
display: none;
}
.chat-sliding-demo ion-note {
font-size: 13px;
margin-top: -8px;
}
.chat-sliding-demo img {
pointer-events: none;
}
.login-sliding-demo .ion-logo-twitter {
color: #53ACEB;
}