fix(menu): fix scrolling page w/ side menus

Improved which angles should allow the side menu to open, depending if
it’s a left or right menu. Also check if the distance of the drag is
longer than a side menu would get. For example, scrolling vertically
for a long ways would have a long distance, but triggering a side menu
to open would be a short distance.

Also ensure that a side menu can always be closed incase something goes
wrong.

Closes #5272
This commit is contained in:
Adam Bradley
2016-02-02 16:41:03 -06:00
parent 8f44076169
commit 72699dbbb4
5 changed files with 132 additions and 8 deletions

View File

@@ -64,8 +64,8 @@ class E2EApp {
console.log('onMenuOpening', ev);
}
isHidden() {
isChangeDetecting() {
console.log('Change detection', ++this.changeDetectionCount);
return false;
return true;
}
}

View File

@@ -1,4 +1,4 @@
<ion-menu [content]="content" id="leftMenu" side="left" (opening)="onMenuOpening($event)">
<ion-menu [content]="content" id="leftMenu" side="left">
<ion-toolbar secondary>
<ion-title>Left Menu</ion-title>
@@ -12,7 +12,51 @@
{{p.title}}
</button>
<button ion-item menuClose="leftMenu" detail-none [hidden]="isHidden()">
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="leftMenu" detail-none>
Close Menu
</button>
@@ -40,9 +84,60 @@
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
<button ion-item menuClose="rightMenu" detail-none>
Close Menu
</button>
</ion-list>
</ion-content>
</ion-menu>
<ion-nav id="nav" [root]="rootView" #content swipe-back-enabled="false"></ion-nav>
<div [hidden]="isChangeDetecting()"></div>

View File

@@ -51,4 +51,6 @@
<button (click)="presentAlert()">Open alert</button>
</p>
<f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f><f></f>
</ion-content>