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

fix(item): slide close on tap

Browse Source
This commit is contained in:
Max Lynch
2015-10-06 19:10:44 -05:00
parent 6263943aeb
commit 7fb6099e1e
3 changed files with 37 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
ionic/components/item/item-sliding.ts
View File

@ -88,8 +88,12 @@ export class ItemSliding {
this.openAmount = 0; this.openAmount = 0;
// Enable it once, it'll get disabled on the next drag // Enable it once, it'll get disabled on the next drag
raf(() => {
this.enableAnimation(); this.enableAnimation();
el.style[CSS.transform] = 'translateX(' + -amt + 'px)'; if(this.itemSlidingContent) {
this.itemSlidingContent.style[CSS.transform] = 'translateX(0)';
}
});
} }
open(amt) { open(amt) {
let el = this.itemSlidingContent; let el = this.itemSlidingContent;
@ -101,7 +105,7 @@ export class ItemSliding {
el.style[CSS.transform] = 'translateX(' + -amt + 'px)'; el.style[CSS.transform] = 'translateX(' + -amt + 'px)';
} }
} }
get isOpen() { isOpen() {
return this.openAmount > 0; return this.openAmount > 0;
} }
getOpenAmt() { getOpenAmt() {
@ -130,6 +134,12 @@ class ItemSlideGesture extends DragGesture {
this.el = el; this.el = el;
this.item = item; this.item = item;
this.listen(); this.listen();
this.el.addEventListener('touchstart', (e) => {
if(this.item.isOpen()) {
this.item.close();
}
})
} }
onDragStart(ev) { onDragStart(ev) {

13
ionic/components/item/modes/ios.scss
View File

@ -213,13 +213,24 @@ button.item {
.card { .card {
button[ion-item]:not([detail-none]), button[ion-item]:not([detail-none]),
a[ion-item]:not([detail-none]), a[ion-item]:not([detail-none]),
[detail-push] { [detail-push]:not(ion-item-sliding) {
@include ios-detail-push-icon($item-ios-detail-push-color); @include ios-detail-push-icon($item-ios-detail-push-color);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center; background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px; background-size: 14px 14px;
padding-right: 32px; padding-right: 32px;
} }
ion-item-sliding[detail-push] {
ion-item-sliding-content {
@include ios-detail-push-icon($item-ios-detail-push-color);
background-repeat: no-repeat;
background-position: right ($item-ios-padding-right - 2) center;
background-size: 14px 14px;
padding-right: 32px;
}
}
} }

14
ionic/components/item/test/sliding/main.html
View File

@ -2,7 +2,7 @@
<ion-list> <ion-list>
<ion-item-sliding class="item-text-wrap"> <ion-item-sliding class="item-text-wrap" detail-push>
<h3>Max Lynch</h3> <h3>Max Lynch</h3>
<p> <p>
Hey do you want to go to the game tonight? Hey do you want to go to the game tonight?
@ -12,7 +12,7 @@
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
<ion-item-sliding class="item-text-wrap"> <ion-item-sliding class="item-text-wrap" detail-push>
<h3>Adam Bradley</h3> <h3>Adam Bradley</h3>
<p> <p>
I think I figured out how to get more Mountain Dew I think I figured out how to get more Mountain Dew
@ -21,4 +21,14 @@
<button primary>Archive</button> <button primary>Archive</button>
</ion-item-options> </ion-item-options>
</ion-item-sliding> </ion-item-sliding>
<ion-item-sliding class="item-text-wrap" detail-push>
<h3>Ben Sperry</h3>
<p>
I like paper
</p>
<ion-item-options>
<button primary>Archive</button>
</ion-item-options>
</ion-item-sliding>
</ion-list> </ion-list>