Merge pull request #5203 from camptocamp/mobile_menu_swipe

Allow swiping nav menus
camptocamp · Jan 18, 2020 · 56e7a48 · 56e7a48
2 parents a372f34 + b66f7e3
commit 56e7a48
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 4 deletions.
diff --git a/contribs/gmf/apps/mobile/index.html.ejs b/contribs/gmf/apps/mobile/index.html.ejs
@@ -28,6 +28,10 @@
         gmf-map-manage-resize="mainCtrl.manageResize"
         gmf-map-resize-transition="mainCtrl.resizeTransition">
       </gmf-map>
+
+      <div ng-show="!mainCtrl.leftNavVisible && !mainCtrl.rightNavVisible" class="nav-swipper nav-swipper-left" ng-swipe-right="mainCtrl.toggleLeftNavVisibility()"></div>
+      <div ng-show="!mainCtrl.leftNavVisible && !mainCtrl.rightNavVisible" class="nav-swipper nav-swipper-right" ng-swipe-left="mainCtrl.toggleRightNavVisibility()"></div>
+
       <ngeo-query
         active="mainCtrl.queryActive"
         map="::mainCtrl.map">
@@ -103,7 +107,7 @@
         </div>
       </div>
     </main>
-    <nav class="gmf-mobile-nav-left" gmf-mobile-nav>
+    <nav class="gmf-mobile-nav-left" gmf-mobile-nav ng-swipe-left="mainCtrl.toggleLeftNavVisibility()">
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
         <span class="gmf-mobile-nav-header-title">{{'Data' | translate}}</span>
@@ -139,7 +143,7 @@
         gmf-mobile-nav-back-on-click>
       </gmf-themeselector>
     </nav>
-    <nav class="gmf-mobile-nav-right" gmf-mobile-nav>
+    <nav class="gmf-mobile-nav-right" gmf-mobile-nav ng-swipe-right="mainCtrl.toggleRightNavVisibility()">
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
         <span class="gmf-mobile-nav-header-title">{{'Tools' | translate}}</span>

diff --git a/contribs/gmf/apps/mobile_alt/index.html.ejs b/contribs/gmf/apps/mobile_alt/index.html.ejs
@@ -26,6 +26,10 @@
         gmf-map-map="mainCtrl.map"
         gmf-map-manage-resize="mainCtrl.manageResize"
         gmf-map-resize-transition="mainCtrl.resizeTransition"></gmf-map>
+
+      <div ng-show="!mainCtrl.leftNavVisible && !mainCtrl.rightNavVisible" class="nav-swipper nav-swipper-left" ng-swipe-right="mainCtrl.toggleLeftNavVisibility()"></div>
+      <div ng-show="!mainCtrl.leftNavVisible && !mainCtrl.rightNavVisible" class="nav-swipper nav-swipper-right" ng-swipe-left="mainCtrl.toggleRightNavVisibility()"></div>
+
       <ngeo-query
         active="mainCtrl.queryActive"
         map="::mainCtrl.map">
@@ -100,7 +104,7 @@
         </div>
       </div>
     </main>
-    <nav class="gmf-mobile-nav-left" gmf-mobile-nav>
+    <nav class="gmf-mobile-nav-left" gmf-mobile-nav ng-swipe-left="mainCtrl.toggleLeftNavVisibility()">
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
         <span class="gmf-mobile-nav-header-title">{{'Data' | translate}}</span>
@@ -137,7 +141,7 @@
         gmf-mobile-nav-back-on-click>
       </gmf-themeselector>
     </nav>
-    <nav class="gmf-mobile-nav-right" gmf-mobile-nav>
+    <nav class="gmf-mobile-nav-right" gmf-mobile-nav ng-swipe-right="mainCtrl.toggleRightNavVisibility()">
       <header>
         <a class="gmf-mobile-nav-go-back" href>{{'Back' | translate}}</a>
         <span class="gmf-mobile-nav-header-title">{{'Tools' | translate}}</span>

diff --git a/contribs/gmf/src/controllers/mobile.scss b/contribs/gmf/src/controllers/mobile.scss
@@ -181,3 +181,18 @@ gmf-search {
     }
   }
 }
+
+.nav-swipper {
+  width: 20px;
+  position: absolute;
+  z-index: 3;
+  top: 0;
+  height: 100%;
+  &.nav-swipper-left {
+    float: left;
+  }
+  &.nav-swipper-right {
+    float: right;
+    right: 0;
+  }
+}