From fe10dcb686a155cefef0193f280d6dd79966115e Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Wed, 17 Jan 2018 03:04:35 +0100 Subject: [PATCH] test(button-effect): adds tests --- .../button-effect/button-effect.scss | 5 +- .../button-effect/test/basic/index.html | 70 +++++++++++++++++++ .../reorder-group/reorder-group.tsx | 6 -- .../core/src/components/reorder/reorder.scss | 6 +- 4 files changed, 76 insertions(+), 11 deletions(-) create mode 100644 packages/core/src/components/button-effect/test/basic/index.html diff --git a/packages/core/src/components/button-effect/button-effect.scss b/packages/core/src/components/button-effect/button-effect.scss index 823adac261..0cee2ec155 100644 --- a/packages/core/src/components/button-effect/button-effect.scss +++ b/packages/core/src/components/button-effect/button-effect.scss @@ -25,9 +25,10 @@ ion-button-effect { will-change: transform, opacity; + pointer-events: none; animation-name: rippleAnimation; animation-duration: 200ms; - animation-timing-function: ease-in-out; + animation-timing-function: ease-out; contain: strict; } @@ -35,7 +36,7 @@ ion-button-effect { @keyframes rippleAnimation { 0% { opacity: .2; - transform: scale(.001); + transform: scale(.05); } 100% { diff --git a/packages/core/src/components/button-effect/test/basic/index.html b/packages/core/src/components/button-effect/test/basic/index.html new file mode 100644 index 0000000000..3b8019e46b --- /dev/null +++ b/packages/core/src/components/button-effect/test/basic/index.html @@ -0,0 +1,70 @@ + + + + + Button Effect - Basic + + + + + + + + + + + Button Effect - Basic + + + + +

+ Small +

+

+ Large +

+

+ Large +

+

+ Large +

+
+ + This is just a div + effect behind + Nested button +
+
+ This is just a div + effect on top + Nested button + +
+ +
+ This is just a div + effect + +
+ + + + + + diff --git a/packages/core/src/components/reorder-group/reorder-group.tsx b/packages/core/src/components/reorder-group/reorder-group.tsx index 61665bd21a..e2caeb7819 100644 --- a/packages/core/src/components/reorder-group/reorder-group.tsx +++ b/packages/core/src/components/reorder-group/reorder-group.tsx @@ -93,11 +93,6 @@ export class ReorderGroup { } private onDragStart(ev: GestureDetail) { - if (ev.event) { - ev.event.preventDefault(); - ev.event.stopPropagation(); - } - const item = this.selectedItemEl = ev.data; const heights = this.cachedHeights; heights.length = 0; @@ -271,7 +266,6 @@ export class ReorderGroup { onMove: this.onDragMove.bind(this), onEnd: this.onDragEnd.bind(this), enabled: this.enabled, - passive: false, disableScroll: true, gestureName: 'reorder', gesturePriority: 30, diff --git a/packages/core/src/components/reorder/reorder.scss b/packages/core/src/components/reorder/reorder.scss index 4a26e5f766..59bc23fdce 100644 --- a/packages/core/src/components/reorder/reorder.scss +++ b/packages/core/src/components/reorder/reorder.scss @@ -21,9 +21,6 @@ .reorder:not(.no-hide) { display: none; - - pointer-events: all; - touch-action: manipulation; } .reorder-enabled .reorder { @@ -31,6 +28,9 @@ cursor: grab; cursor: -webkit-grab; + + pointer-events: all; + touch-action: none; } .reorder-selected,