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

also hide pointer events on img fixes #7547
ionic-team · Aug 4, 2016 · dfb8ba4 · dfb8ba4
1 parent 108f821
commit dfb8ba4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 17 deletions.
diff --git a/demos/item-sliding/index.ts b/demos/item-sliding/index.ts
@@ -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);
   }

diff --git a/demos/item-sliding/main.html b/demos/item-sliding/main.html
@@ -43,8 +43,9 @@ <h2>{{chat.name}}</h2>
 
       <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 @@ <h2>{{login.name}}</h2>
           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 @@ <h2>{{login.name}}</h2>
 </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;
   }
 
-  .downloading #download-spinner {
-    display: block;
+  #archive-spinner.spinner-circles circle {
+    fill: #fff;
   }
 
-  .downloading .download-hide {
-    display: none;
+  .archiving #archive-spinner,
+  .downloading #download-spinner {
+    display: block;
   }
 
   .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;
   }