mobile: menu togglable for mobile, use code by @PVince81

2 files changed, 105 insertions, 0 deletions

diff --git a/core/css/mobile.css b/core/css/mobile.css
index 665ad0daae9..5a465b35fb9 100644
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@@ -18,6 +18,71 @@
 	display: none;
 }
 
+/* toggle navigation */
+#content-wrapper {
+	padding-left: 0;
+}
+
+#navigation {
+	top: 45px;
+	bottom: initial;
+	width: 90%;
+	max-width: 320px;
+	max-height: 90%;
+	margin-top: 0;
+	top: 45px;
+	background-color: rgba(36, 40, 47, .97);
+	overflow-x: initial;
+	border-bottom-right-radius: 7px;
+	border-bottom: 1px #333 solid;
+	border-right: 1px #333 solid;
+	box-shadow: 0 0 7px rgba(29,45,68,.97);
+	display: none;
+}
+#navigation, #navigation * {
+	box-sizing:border-box; -moz-box-sizing:border-box;
+}
+#navigation li {
+	display: inline-block;
+}
+#navigation a {
+	width: 70px;
+	height: 80px;
+	display: inline-block;
+	text-align: center;
+	padding: 20px 0;
+}
+#navigation a span {
+	display: inline-block;
+	font-size: 13px;
+	padding-bottom: 0;
+	padding-left: 0;
+	width: initial;
+}
+#navigation .icon {
+	margin: 0 auto;
+	padding: 0;
+}
+#navigation li:first-child .icon {
+	padding-top: 0;
+}
+/* Apps management as sticky footer */
+#navigation .wrapper {
+	min-height: initial;
+	margin: 0;
+}
+#apps-management, #navigation .push {
+	height: initial;
+}
+
+
+
+/* shift to account for missing navigation */
+#body-user #controls,
+#body-settings #controls {
+	padding-left: 0;
+}
+
 /* don’t require a minimum width for controls bar */
 #controls {
 	min-width: initial !important;
diff --git a/core/js/js.js b/core/js/js.js
index 841f3a769f1..2b3a9f04770 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -482,6 +482,29 @@ var OC={
 				}).show();
 			}, 'html');
 		}
+	},
+
+	// for menu toggling
+	registerMenu: function($toggle, $menuEl) {
+		$menuEl.addClass('menu');
+		$toggle.addClass('menutoggle');
+		$toggle.on('click', function(event) {
+			if ($menuEl.is(OC._currentMenu)) {
+				$menuEl.hide();
+				OC._currentMenu = null;
+				OC._currentMenuToggle = null;
+				return false;
+			}
+			// another menu was open?
+			else if (OC._currentMenu) {
+				// close it
+				OC._currentMenu.hide();
+			}
+			$menuEl.show();
+			OC._currentMenu = $menuEl;
+			OC._currentMenuToggle = $toggle;
+			return false
+		});
 	}
 };
 OC.search.customResults={};
@@ -940,6 +963,23 @@ function initCore() {
 	$('a.action').tipsy({gravity:'s', fade:true, live:true});
 	$('td .modified').tipsy({gravity:'s', fade:true, live:true});
 	$('input').tipsy({gravity:'w', fade:true});
+
+	// toggle for menus
+	$(document).on('mouseup.closemenus', function(event) {
+		var $el = $(event.target);
+		if ($el.closest('.menu').length || $el.closest('.menutoggle').length) {
+			// don't close when clicking on the menu directly or a menu toggle
+			return false;
+		}
+		if (OC._currentMenu) {
+			OC._currentMenu.hide();
+		}
+		OC._currentMenu = null;
+		OC._currentMenuToggle = null;
+	});
+
+	// toggle the navigation on mobile
+	OC.registerMenu($('#header #owncloud'), $('#navigation'));
 }
 
 $(document).ready(initCore);