From a77ee2a6f88e8defb1763b71e77410264fafac70 Mon Sep 17 00:00:00 2001 From: "Manu Mtz.-Almeida" Date: Tue, 7 Aug 2018 17:14:04 +0200 Subject: [PATCH] fix(sliding): fix core gesture logic + priority configuration fixes #14763 --- core/src/components/button/button.scss | 8 +++----- .../components/item-option/item-option.ios.scss | 3 --- .../src/components/item-option/item-option.md.scss | 3 --- core/src/components/item-option/item-option.scss | 14 ++++++++------ core/src/components/item-options/item-options.scss | 1 + core/src/components/item-sliding/item-sliding.scss | 4 ++++ core/src/components/item-sliding/item-sliding.tsx | 6 +++--- .../components/item-sliding/test/basic/index.html | 6 ++++++ core/src/components/item/item.scss | 3 +++ core/src/components/menu/menu.tsx | 2 +- core/src/components/nav/nav.tsx | 2 +- .../src/components/picker-column/picker-column.tsx | 2 +- core/src/components/range/range.tsx | 6 +++--- core/src/components/refresher/refresher.tsx | 5 ++++- .../src/components/reorder-group/reorder-group.tsx | 2 +- core/src/components/toggle/toggle.tsx | 2 +- ...al-scroll-utils.tsx => virtual-scroll-utils.ts} | 0 core/src/utils/gesture/gesture.ts | 6 ++---- 18 files changed, 42 insertions(+), 33 deletions(-) rename core/src/components/virtual-scroll/{virtual-scroll-utils.tsx => virtual-scroll-utils.ts} (100%) diff --git a/core/src/components/button/button.scss b/core/src/components/button/button.scss index 8dcbe7173a7..7db3b85ff12 100644 --- a/core/src/components/button/button.scss +++ b/core/src/components/button/button.scss @@ -123,10 +123,13 @@ transition: var(--transition); + border-width: var(--border-width); border-style: var(--border-style); border-color: var(--border-color); + outline: none; + background: var(--background); line-height: 1; @@ -154,11 +157,6 @@ // opacity: var(--opacity-hover); // } -.button-native:active, -.button-native:focus { - outline: none; -} - .button-inner { display: flex; diff --git a/core/src/components/item-option/item-option.ios.scss b/core/src/components/item-option/item-option.ios.scss index c970252b8bc..10122ea7bc5 100644 --- a/core/src/components/item-option/item-option.ios.scss +++ b/core/src/components/item-option/item-option.ios.scss @@ -5,9 +5,6 @@ // -------------------------------------------------- :host { - --ion-color-base: #{$item-option-button-ios-background-color}; - --ion-color-contrast: #{$item-option-button-ios-text-color}; - font-size: $item-option-button-ios-font-size; } diff --git a/core/src/components/item-option/item-option.md.scss b/core/src/components/item-option/item-option.md.scss index 6e2bf478577..a327a49c8d6 100644 --- a/core/src/components/item-option/item-option.md.scss +++ b/core/src/components/item-option/item-option.md.scss @@ -5,9 +5,6 @@ // -------------------------------------------------- :host { - --ion-color-base: #{$item-option-button-md-background-color}; - --ion-color-contrast: #{$item-option-button-md-text-color}; - font-size: $item-option-button-md-font-size; font-weight: 500; diff --git a/core/src/components/item-option/item-option.scss b/core/src/components/item-option/item-option.scss index f83b98fe21b..154886ccf6e 100644 --- a/core/src/components/item-option/item-option.scss +++ b/core/src/components/item-option/item-option.scss @@ -4,10 +4,14 @@ // -------------------------------------------------- :host { + --ion-color-base: #{ion-color(primary, base)}; + --ion-color-contrast: #{ion-color(primary, contrast)}; + color: #{current-color(contrast)}; } .item-option-native { + @include text-inherit(); @include padding(0, .7em); width: 100%; @@ -18,15 +22,13 @@ outline: none; background: #{current-color(base)}; - color: inherit; - font-family: inherit; - font-size: inherit; - font-weight: inherit; - - letter-spacing: inherit; + cursor: pointer; appearance: none; +} +.item-option-native:hover { + opacity: 0.8; } .item-option-button-inner { diff --git a/core/src/components/item-options/item-options.scss b/core/src/components/item-options/item-options.scss index c28d3645b2d..24378facc50 100644 --- a/core/src/components/item-options/item-options.scss +++ b/core/src/components/item-options/item-options.scss @@ -35,6 +35,7 @@ ion-item-options { font-size: 14px; + user-select: none; z-index: $z-index-item-options; &.hydrated { diff --git a/core/src/components/item-sliding/item-sliding.scss b/core/src/components/item-sliding/item-sliding.scss index 815a0034c05..066d53fe7d4 100644 --- a/core/src/components/item-sliding/item-sliding.scss +++ b/core/src/components/item-sliding/item-sliding.scss @@ -14,6 +14,10 @@ ion-item-sliding { user-select: none; } +ion-item-sliding .item { + user-select: none; +} + .item-sliding-active-slide .item { position: relative; diff --git a/core/src/components/item-sliding/item-sliding.tsx b/core/src/components/item-sliding/item-sliding.tsx index 6fda4e2c490..ef325ef9851 100644 --- a/core/src/components/item-sliding/item-sliding.tsx +++ b/core/src/components/item-sliding/item-sliding.tsx @@ -62,7 +62,7 @@ export class ItemSliding { el: this.el, queue: this.queue, gestureName: 'item-swipe', - gesturePriority: -10, + gesturePriority: 20, threshold: 5, canStart: this.canStart.bind(this), onStart: this.onDragStart.bind(this), @@ -152,7 +152,7 @@ export class ItemSliding { this.closeOpened(); return false; } - return true; + return !!(this.rightOptions || this.leftOptions); } private onDragStart() { @@ -295,7 +295,7 @@ export class ItemSliding { } /** @hidden */ -export function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolean, isOnResetZone: boolean): boolean { +function swipeShouldReset(isResetDirection: boolean, isMovingFast: boolean, isOnResetZone: boolean): boolean { // The logic required to know when the sliding item should close (openAmount=0) // depends on three booleans (isCloseDirection, isMovingFast, isOnCloseZone) // and it ended up being too complicated to be written manually without errors diff --git a/core/src/components/item-sliding/test/basic/index.html b/core/src/components/item-sliding/test/basic/index.html index 5570de674d2..f60d0ab3501 100644 --- a/core/src/components/item-sliding/test/basic/index.html +++ b/core/src/components/item-sliding/test/basic/index.html @@ -26,6 +26,12 @@ + + + + + +
Toggle sliding Toggle Dynamic Options diff --git a/core/src/components/item/item.scss b/core/src/components/item/item.scss index a5da21aa5d0..27e90b7443c 100644 --- a/core/src/components/item/item.scss +++ b/core/src/components/item/item.scss @@ -84,6 +84,9 @@ button, a { cursor: pointer; + user-select: none; + + -webkit-user-drag: none; } .item-state { diff --git a/core/src/components/menu/menu.tsx b/core/src/components/menu/menu.tsx index 76d43e45c70..b4c943ffe96 100644 --- a/core/src/components/menu/menu.tsx +++ b/core/src/components/menu/menu.tsx @@ -179,7 +179,7 @@ export class Menu { el: this.doc, queue: this.queue, gestureName: 'menu-swipe', - gesturePriority: 10, + gesturePriority: 40, threshold: 10, canStart: this.canStart.bind(this), onWillStart: this.onWillStart.bind(this), diff --git a/core/src/components/nav/nav.tsx b/core/src/components/nav/nav.tsx index 969745d1ab2..096071cc227 100644 --- a/core/src/components/nav/nav.tsx +++ b/core/src/components/nav/nav.tsx @@ -114,7 +114,7 @@ export class Nav implements NavOutlet { el: this.win.document.body, queue: this.queue, gestureName: 'goback-swipe', - gesturePriority: 10, + gesturePriority: 30, threshold: 10, canStart: this.canSwipeBack.bind(this), onStart: this.swipeBackStart.bind(this), diff --git a/core/src/components/picker-column/picker-column.tsx b/core/src/components/picker-column/picker-column.tsx index e42fe6e189a..2ed9718750c 100644 --- a/core/src/components/picker-column/picker-column.tsx +++ b/core/src/components/picker-column/picker-column.tsx @@ -58,7 +58,7 @@ export class PickerColumnCmp { el: this.el, queue: this.queue, gestureName: 'picker-swipe', - gesturePriority: 10, + gesturePriority: 100, threshold: 0, onStart: this.onDragStart.bind(this), onMove: this.onDragMove.bind(this), diff --git a/core/src/components/range/range.tsx b/core/src/components/range/range.tsx index fc983e5089f..403ad72e0fa 100644 --- a/core/src/components/range/range.tsx +++ b/core/src/components/range/range.tsx @@ -148,7 +148,7 @@ export class Range implements BaseInput { el: this.rangeSlider!, queue: this.queue, gestureName: 'range', - gesturePriority: 30, + gesturePriority: 100, threshold: 0, onStart: this.onDragStart.bind(this), onMove: this.onDragMove.bind(this), @@ -391,7 +391,7 @@ export class Range implements BaseInput { } } -export function ratioToValue( +function ratioToValue( ratio: number, min: number, max: number, @@ -404,6 +404,6 @@ export function ratioToValue( return clamp(min, value, max); } -export function valueToRatio(value: number, min: number, max: number): number { +function valueToRatio(value: number, min: number, max: number): number { return clamp(0, (value - min) / (max - min), 1); } diff --git a/core/src/components/refresher/refresher.tsx b/core/src/components/refresher/refresher.tsx index 5e976862ec6..0c6a0456df0 100644 --- a/core/src/components/refresher/refresher.tsx +++ b/core/src/components/refresher/refresher.tsx @@ -108,7 +108,7 @@ export class Refresher { gestureName: 'refresher', gesturePriority: 10, direction: 'y', - threshold: 5, + threshold: 10, passive: false, canStart: this.canStart.bind(this), onStart: this.onStart.bind(this), @@ -175,6 +175,8 @@ export class Refresher { } private onStart() { + console.log('start'); + this.progress = 0; this.state = RefresherState.Inactive; } @@ -341,6 +343,7 @@ export class Refresher { hostData() { return { + slot: 'fixed', class: { ...createThemedClasses(this.mode, 'refresher'), diff --git a/core/src/components/reorder-group/reorder-group.tsx b/core/src/components/reorder-group/reorder-group.tsx index c3a5d0621bd..ebe76ce8b88 100644 --- a/core/src/components/reorder-group/reorder-group.tsx +++ b/core/src/components/reorder-group/reorder-group.tsx @@ -55,7 +55,7 @@ export class ReorderGroup { el: this.doc.body, queue: this.queue, gestureName: 'reorder', - gesturePriority: 30, + gesturePriority: 90, disableScroll: true, threshold: 0, direction: 'y', diff --git a/core/src/components/toggle/toggle.tsx b/core/src/components/toggle/toggle.tsx index ad9cd9f996f..643c5e70ebf 100644 --- a/core/src/components/toggle/toggle.tsx +++ b/core/src/components/toggle/toggle.tsx @@ -116,7 +116,7 @@ export class Toggle implements CheckboxInput { el: this.el, queue: this.queue, gestureName: 'toggle', - gesturePriority: 30, + gesturePriority: 100, threshold: 0, onStart: this.onDragStart.bind(this), onMove: this.onDragMove.bind(this), diff --git a/core/src/components/virtual-scroll/virtual-scroll-utils.tsx b/core/src/components/virtual-scroll/virtual-scroll-utils.ts similarity index 100% rename from core/src/components/virtual-scroll/virtual-scroll-utils.tsx rename to core/src/components/virtual-scroll/virtual-scroll-utils.ts diff --git a/core/src/utils/gesture/gesture.ts b/core/src/utils/gesture/gesture.ts index 3eeebc06160..d4d855f7bec 100644 --- a/core/src/utils/gesture/gesture.ts +++ b/core/src/utils/gesture/gesture.ts @@ -111,10 +111,8 @@ export function createGesture(config: GestureConfig): Gesture { // gesture is currently being detected calcGestureData(detail, ev); if (pan.detect(detail.currentX, detail.currentY)) { - if (pan.isGesture()) { - if (!tryToCapturePan()) { - abortGesture(); - } + if (!pan.isGesture() || !tryToCapturePan()) { + abortGesture(); } } }