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

test(button-effect): adds tests

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-01-17 03:04:35 +01:00
parent 8c05574a07
commit fe10dcb686
4 changed files with 76 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/core/src/components/button-effect/button-effect.scss
View File

@ -25,9 +25,10 @@ ion-button-effect {
will-change: transform, opacity; will-change: transform, opacity;
pointer-events: none;
animation-name: rippleAnimation; animation-name: rippleAnimation;
animation-duration: 200ms; animation-duration: 200ms;
animation-timing-function: ease-in-out; animation-timing-function: ease-out;
contain: strict; contain: strict;
} }
@ -35,7 +36,7 @@ ion-button-effect {
@keyframes rippleAnimation { @keyframes rippleAnimation {
0% { 0% {
opacity: .2; opacity: .2;
transform: scale(.001); transform: scale(.05);
} }
100% { 100% {

70
packages/core/src/components/button-effect/test/basic/index.html Normal file
View File

@ -0,0 +1,70 @@
<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="UTF-8">
<title>Button Effect - Basic</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<script src="/dist/ionic.js"></script>
<style>
.my-block {
position: relative;
background: blue;
color: white;
width: 300px;
height: 100px;
margin: 1rem;
}
</style>
</head>
<body>
<ion-app>
<ion-page>
<ion-header>
<ion-toolbar>
<ion-title>Button Effect - Basic</ion-title>
</ion-toolbar>
</ion-header>
<ion-content padding no-bounce>
<p>
<ion-button size="small">Small</ion-button>
</p>
<p>
<ion-button size="large">Large</ion-button>
</p>
<p>
<ion-button size="large" fill="outline">Large</ion-button>
</p>
<p>
<ion-button size="large" fill="clear">Large</ion-button>
</p>
<div class="my-block">
<ion-button-effect></ion-button-effect>
This is just a div + effect behind
<ion-button onclick="buttonClicked()">Nested button</ion-button>
</div>
<div class="my-block">
This is just a div + effect on top
<ion-button onclick="buttonClicked()">Nested button</ion-button>
<ion-button-effect></ion-button-effect>
</div>
<div class="my-block">
This is just a div + effect
<ion-button-effect></ion-button-effect>
</div>
</ion-content>
</ion-page>
</ion-app>
<script>
function blockClicked() {
console.log('block clicked');
return true;
}
function buttonClicked() {
console.log('button clicked');
}
</script>
</body>
</html>

6
packages/core/src/components/reorder-group/reorder-group.tsx
View File

@ -93,11 +93,6 @@ export class ReorderGroup {
} }
private onDragStart(ev: GestureDetail) { private onDragStart(ev: GestureDetail) {
if (ev.event) {
ev.event.preventDefault();
ev.event.stopPropagation();
}
const item = this.selectedItemEl = ev.data; const item = this.selectedItemEl = ev.data;
const heights = this.cachedHeights; const heights = this.cachedHeights;
heights.length = 0; heights.length = 0;
@ -271,7 +266,6 @@ export class ReorderGroup {
onMove: this.onDragMove.bind(this), onMove: this.onDragMove.bind(this),
onEnd: this.onDragEnd.bind(this), onEnd: this.onDragEnd.bind(this),
enabled: this.enabled, enabled: this.enabled,
passive: false,
disableScroll: true, disableScroll: true,
gestureName: 'reorder', gestureName: 'reorder',
gesturePriority: 30, gesturePriority: 30,

6
packages/core/src/components/reorder/reorder.scss
View File

@ -21,9 +21,6 @@
.reorder:not(.no-hide) { .reorder:not(.no-hide) {
display: none; display: none;
pointer-events: all;
touch-action: manipulation;
} }
.reorder-enabled .reorder { .reorder-enabled .reorder {
@ -31,6 +28,9 @@
cursor: grab; cursor: grab;
cursor: -webkit-grab; cursor: -webkit-grab;
pointer-events: all;
touch-action: none;
} }
.reorder-selected, .reorder-selected,