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) { archive(item: ItemSliding) {
console.log('Archive'); this.expandAction(item, 'archiving', 'Chat was archived.');
item.close();
} }
download(item: ItemSliding) { 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(() => { setTimeout(() => {
const toast = this.toastCtrl.create({ const toast = this.toastCtrl.create({
message: 'Item was downloaded!' message: text
}); });
toast.present(); toast.present();
item.setCssClass('downloading', false); item.setCssClass(action, false);
item.close(); item.close();
// Wait 2s to close toast
setTimeout(() => toast.dismiss(), 2000); setTimeout(() => toast.dismiss(), 2000);
}, 1500); }, 1500);
} }

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

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