From 61dc78e6dc25f2a342fe523e50c41c557f3c6aca Mon Sep 17 00:00:00 2001
From: Julius Haertl <jus@bitgrid.net>
Date: Wed, 1 Mar 2017 23:21:38 +0100
Subject: [PATCH] Fix menu issues

Signed-off-by: Julius Haertl <jus@bitgrid.net>
---
 core/css/header.scss           | 37 ++++++++++---
 core/js/js.js                  |  5 +-
 core/templates/layout.user.php | 95 +++++++++++++++++-----------------
 lib/private/legacy/app.php     | 25 ++++++---
 4 files changed, 101 insertions(+), 61 deletions(-)

diff --git a/core/css/header.scss b/core/css/header.scss
index 99329ccd631..d77114e484d 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -109,11 +109,10 @@
 		height: 34px;
 	}
 	.header-appname-container {
-		display: inline-block;
+		display: none;
 		padding-top: 22px;
 		padding-right: 10px;
 		flex-shrink: 0;
-		display: none !important;
 	}
 	/* show caret indicator next to logo to make clear it is tappable */
 	.icon-caret {
@@ -176,7 +175,6 @@
 
 /* show appname next to logo */
 .header-appname {
-	display: inline-block;
 	position: relative;
 	color: #fff;
 	font-size: 16px;
@@ -196,9 +194,9 @@
 
 /* NAVIGATION --------------------------------------------------------------- */
 #navigation {
-	position: fixed;
-	top: 45px;
-	left: 10px;
+	position: relative;
+	top: 69px;
+	left: -100%;
 	width: 265px;
 	max-height: 85%;
 	margin-top: 0;
@@ -246,7 +244,7 @@
 /* position of dropdown arrow */
 
 #navigation:after {
-	left: 214px;
+	left: 242px;
 }
 
 #expanddiv:after {
@@ -568,3 +566,28 @@
 #appmenu:hover li:not(:hover) a:before {
 	display:none;
 }
+@media only screen and (max-width: 768px) {
+
+	#header .header-appname-container {
+		display: inline-block !important;
+	}
+	#appmenu {
+		display: none;
+	}
+
+	#apps {
+		.in-header {
+			display: inline-block;
+		}
+	}
+
+	#navigation {
+		position: fixed;
+		top: 45px;
+		left: 10px;
+	}
+	#navigation:after {
+		left: 214px;
+	}
+
+}
\ No newline at end of file
diff --git a/core/js/js.js b/core/js/js.js
index e1e0feda2b1..b001eeecdf7 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -1369,8 +1369,11 @@ function initCore() {
 	 * If the screen is bigger, the main menu is not a toggle any more.
 	 */
 	function setupMainMenu() {
+
+    // init the more-apps menu
+    OC.registerMenu($('#more-apps'), $('#navigation'));
 		// toggle the navigation
-		var $toggle = $('#more-apps');
+		var $toggle = $('#header .header-appname-container');
 		var $navigation = $('#navigation');
 
 		// init the menu
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index fb7ceb408c5..8e88a07328f 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -61,6 +61,7 @@
 
 				<div id="appmenu">
 					<ul>
+						<?php $headerIconCount = 8; ?>
 						<?php foreach($_['headernavigation'] as $entry): ?>
 							<li data-id="<?php p($entry['id']); ?>">
 								<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
@@ -73,7 +74,7 @@
 								</a>
 							</li>
 						<?php endforeach; ?>
-						<?php if (count($_['navigation'])>4): ?>
+						<?php if (count($_['navigation'])>$headerIconCount): ?>
 							<li id="more-apps" class="menutoggle">
 								<a href="#">
 									<div class="icon-more-white"></div>
@@ -82,7 +83,7 @@
 								</a>
 							</li>
 						<?php endif; ?>
-						<?php if (count($_['navigation'])<=4): ?>
+						<?php if (count($_['navigation'])<=$headerIconCount): ?>
 							<?php
 							/* show "More apps" link to app administration directly in app navigation, as last entry */
 							if(OC_User::isAdminUser(OC_User::getUser())):
@@ -103,6 +104,51 @@
 					</ul>
 				</div>
 
+				<nav role="navigation"><div id="navigation">
+						<div id="apps">
+							<ul>
+								<?php foreach($_['navigation'] as $entry): ?>
+									<?php if($entry['showInHeader']): ?>
+										<li data-id="<?php p($entry['id']); ?>" class="in-header">
+									<?php else: ?>
+										<li data-id="<?php p($entry['id']); ?>">
+									<?php endif; ?>
+									<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
+										<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
+										<svg width="32" height="32" viewBox="0 0 32 32">
+											<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
+											<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon"></image>
+										</svg>
+										<div class="icon-loading-dark" style="display:none;"></div>
+										<span>
+								<?php p($entry['name']); ?>
+							</span>
+									</a>
+									</li>
+								<?php endforeach; ?>
+								<?php
+								/* show "More apps" link to app administration directly in app navigation, as last entry */
+								if(OC_User::isAdminUser(OC_User::getUser())):
+									?>
+									<li id="apps-management">
+										<a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4"
+											<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
+											<svg width="32" height="32" viewBox="0 0 32 32" class="app-icon">
+												<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
+												<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped(image_path('settings', 'apps.svg') . '?v=' . $_['versionHash']); ?>"></image>
+											</svg>
+											<div class="icon-loading-dark" style="display:none;"></div>
+											<span>
+								<?php p($l->t('Apps')); ?>
+							</span>
+										</a>
+									</li>
+								<?php endif; ?>
+
+							</ul>
+						</div>
+					</div></nav>
+
 			</div>
 
 			<div id="header-right">
@@ -152,51 +198,6 @@
 			</div>
 		</div></header>
 
-		<nav role="navigation"><div id="navigation">
-			<div id="apps">
-				<ul>
-					<?php foreach($_['navigation'] as $entry): ?>
-						<?php if($entry['showInHeader']): ?>
-							<li data-id="<?php p($entry['id']); ?>" class="in-header">
-						<?php else: ?>
-							<li data-id="<?php p($entry['id']); ?>">
-						<?php endif; ?>
-								<a href="<?php print_unescaped($entry['href']); ?>" tabindex="3"
-									<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
-									<svg width="32" height="32" viewBox="0 0 32 32">
-										<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
-										<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon"></image>
-									</svg>
-									<div class="icon-loading-dark" style="display:none;"></div>
-									<span>
-								<?php p($entry['name']); ?>
-							</span>
-								</a>
-							</li>
-				<?php endforeach; ?>
-				<?php
-					/* show "More apps" link to app administration directly in app navigation, as last entry */
-					if(OC_User::isAdminUser(OC_User::getUser())):
-				?>
-					<li id="apps-management">
-						<a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4"
-							<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
-							<svg width="32" height="32" viewBox="0 0 32 32" class="app-icon">
-								<defs><filter id="invert"><feColorMatrix in="SourceGraphic" type="matrix" values="-1 0 0 0 1 0 -1 0 0 1 0 0 -1 0 1 0 0 0 1 0"></feColorMatrix></filter></defs>
-								<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="<?php print_unescaped(image_path('settings', 'apps.svg') . '?v=' . $_['versionHash']); ?>"></image>
-							</svg>
-							<div class="icon-loading-dark" style="display:none;"></div>
-							<span>
-								<?php p($l->t('Apps')); ?>
-							</span>
-						</a>
-					</li>
-				<?php endif; ?>
-
-				</ul>
-			</div>
-		</div></nav>
-
 		<div id="sudo-login-background" class="hidden"></div>
 		<form id="sudo-login-form" class="hidden">
 			<?php p($l->t('This action requires you to confirm your password:')); ?><br>
diff --git a/lib/private/legacy/app.php b/lib/private/legacy/app.php
index 1cc83888734..3d0ebc9644c 100644
--- a/lib/private/legacy/app.php
+++ b/lib/private/legacy/app.php
@@ -529,7 +529,7 @@ class OC_App {
 
 	// This is private as well. It simply works, so don't ask for more details
 	private static function proceedNavigation($list) {
-
+		$headerIconCount = 8;
 		usort($list, function($a, $b) {
 			if (isset($a['order']) && isset($b['order'])) {
 				return ($a['order'] < $b['order']) ? -1 : 1;
@@ -540,6 +540,7 @@ class OC_App {
 			}
 		});
 
+		$activeAppIndex = -1;
 		$activeApp = OC::$server->getNavigationManager()->getActiveEntry();
 		foreach ($list as $index => &$navEntry) {
 			if ($navEntry['id'] == $activeApp) {
@@ -551,18 +552,28 @@ class OC_App {
 		}
 		unset($navEntry);
 
+		if($activeAppIndex > ($headerIconCount-1)) {
+			$active = $list[$activeAppIndex];
+			$lastInHeader = $list[$headerIconCount-1];
+			$list[$headerIconCount-1] = $active;
+			$list[$activeAppIndex] = $lastInHeader;
+		}
 
 		foreach ($list as $index => &$navEntry) {
 			$navEntry['showInHeader'] = false;
-			if($index < 4) {
+			if($index < $headerIconCount) {
 				$navEntry['showInHeader'] = true;
 			}
 		}
 
+
+
 		return $list;
 	}
 
 	public static function proceedAppNavigation($entries) {
+		$headerIconCount = 8;
+		$activeAppIndex = -1;
 		$list = self::proceedNavigation($entries);
 
 		$activeApp = OC::$server->getNavigationManager()->getActiveEntry();
@@ -574,13 +585,15 @@ class OC_App {
 				$navEntry['active'] = false;
 			}
 		}
-		$list = array_slice($list, 0, 4);
 		// move active item to last position
-		if($activeAppIndex > 2) {
+		if($activeAppIndex > ($headerIconCount-1)) {
 			$active = $list[$activeAppIndex];
-			unset($list[$activeAppIndex]);
-			array_unshift($list, $active);
+			$lastInHeader = $list[$headerIconCount-1];
+			$list[$headerIconCount-1] = $active;
+			$list[$activeAppIndex] = $lastInHeader;
 		}
+		$list = array_slice($list, 0, $headerIconCount);
+
 		return $list;
 	}
 
-- 
2.39.5