Make enabling/disabling apps work with the new menu

Signed-off-by: Julius Haertl <jus@bitgrid.net>

3 files changed, 67 insertions, 30 deletions

diff --git a/core/css/header.scss b/core/css/header.scss
index f0030502bca..a1229242d47 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -556,6 +556,10 @@ nav {
 		display: none;
 	}
 
+	li.hidden {
+		display: none;
+	}
+
 }
 
 /* use popover menu on mobile and small screens */
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 4b0f6354b1c..58c666fe714 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -74,22 +74,19 @@
 								</a>
 							</li>
 						<?php endforeach; ?>
-						<?php if (count($_['navigation'])>$headerIconCount
-							|| (OC_User::isAdminUser(OC_User::getUser()) && count($_['navigation'])>=$headerIconCount)): ?>
-							<li id="more-apps" class="menutoggle">
+							<li id="more-apps" class="menutoggle<?php
+							if ( !(count($_['navigation']) > $headerIconCount
+									|| (OC_User::isAdminUser(OC_User::getUser()) && count($_['navigation'])>=$headerIconCount))): ?> hidden<?php endif; ?>">
 								<a href="#">
 									<div class="icon-more-white"></div>
-									<span>More apps
+									<span><?php p($l->t('More apps')); ?>
 							</span>
 								</a>
 							</li>
-						<?php endif; ?>
-						<?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())):
-								?>
-								<li id="apps-management">
+							?>
+								<li id="apps-management" <?php if(OC_User::isAdminUser(OC_User::getUser()) && count($_['navigation'])>$headerIconCount-1): ?>class="hidden"<?php endif; ?>>
 									<a href="<?php print_unescaped(\OC::$server->getURLGenerator()->linkToRoute('settings.AppSettings.viewApps')); ?>" tabindex="4"
 										<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
 										<img src="<?php print_unescaped(image_path('settings', 'apps.svg') . '?v=' . $_['versionHash']); ?>" />
@@ -100,8 +97,6 @@
 							</span>
 									</a>
 								</li>
-							<?php endif; ?>
-						<?php endif; ?>
 					</ul>
 				</div>
 
diff --git a/settings/js/apps.js b/settings/js/apps.js
index b73b4a35b3f..3a00152aab2 100644
--- a/settings/js/apps.js
+++ b/settings/js/apps.js
@@ -451,22 +451,38 @@ OC.Settings.Apps = OC.Settings.Apps || {
 
 	rebuildNavigation: function() {
 		$.getJSON(OC.filePath('settings', 'ajax', 'navigationdetect.php')).done(function(response){
-			if(response.status === 'success'){
+			if(response.status === 'success') {
 				var idsToKeep = {};
-				var navEntries=response.nav_entries;
+				var navEntries = response.nav_entries;
 				var container = $('#apps ul');
-				for(var i=0; i< navEntries.length; i++){
+
+				// remove disabled apps
+				for (var i = 0; i < navEntries.length; i++) {
 					var entry = navEntries[i];
 					idsToKeep[entry.id] = true;
+				}
+				container.children('li[data-id]').each(function (index, el) {
+					if (!idsToKeep[$(el).data('id')]) {
+						$(el).remove();
+					}
+				});
+				$('#appmenu ul').children('li[data-id]').each(function (index, el) {
+					if (!idsToKeep[$(el).data('id')]) {
+						$(el).remove();
+					}
+				});
 
-					if(container.children('li[data-id="'+entry.id+'"]').length === 0){
-						var li=$('<li></li>');
+				// add enabled apps to #navigation and #appmenu
+				for (var i = 0; i < navEntries.length; i++) {
+					var entry = navEntries[i];
+					if (container.children('li[data-id="' + entry.id + '"]').length === 0) {
+						var li = $('<li></li>');
 						li.attr('data-id', entry.id);
 						var img = '<svg width="32" height="32" viewBox="0 0 32 32">';
 						img += '<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" /></filter></defs>';
 						img += '<image x="0" y="0" width="32" height="32" preserveAspectRatio="xMinYMin meet" filter="url(#invert)" xlink:href="' + entry.icon + '"  class="app-icon" /></svg>';
-						var a=$('<a></a>').attr('href', entry.href);
-						var filename=$('<span></span>');
+						var a = $('<a></a>').attr('href', entry.href);
+						var filename = $('<span></span>');
 						var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
 						filename.text(entry.name);
 						a.prepend(filename);
@@ -477,13 +493,7 @@ OC.Settings.Apps = OC.Settings.Apps || {
 						// append the new app as last item in the list
 						// which is the "add apps" entry with the id
 						// #apps-management
-						$('#apps-management').before(li);
-
-						// scroll the app navigation down
-						// so the newly added app is seen
-						$('#navigation').animate({
-							scrollTop: $('#navigation').height()
-						}, 'slow');
+						$('#navigation #apps-management').before(li);
 
 						// draw attention to the newly added app entry
 						// by flashing it twice
@@ -493,14 +503,42 @@ OC.Settings.Apps = OC.Settings.Apps || {
 							.animate({opacity: 0.5})
 							.animate({opacity: 1})
 							.animate({opacity: 0.75});
+
+						// do not show apps from #appmenu in #navigation
+						if(i < 7) {
+							$('#navigation li').eq(i).addClass('in-header');
+						}
+
+						// add apps to #appmenu until it is full
+						if ($('#appmenu li').not('.hidden').length < 8) {
+							var li = $('<li></li>');
+							li.attr('data-id', entry.id);
+							var img = '<img src="' + entry.icon + '" class="app-icon">';
+							var a = $('<a></a>').attr('href', entry.href);
+							var filename = $('<span></span>');
+							var loading = $('<div class="icon-loading-dark"></div>').css('display', 'none');
+							filename.text(entry.name);
+							a.prepend(filename);
+							a.prepend(loading);
+							a.prepend(img);
+							li.append(a);
+							$('#appmenu li#more-apps').before(li);
+							li.animate({opacity: 0.5})
+								.animate({opacity: 1})
+								.animate({opacity: 0.5})
+								.animate({opacity: 1})
+								.animate({opacity: 0.75});
+						}
 					}
 				}
 
-				container.children('li[data-id]').each(function(index, el) {
-					if (!idsToKeep[$(el).data('id')]) {
-						$(el).remove();
-					}
-				});
+				if (navEntries.length > 7) {
+					$('#more-apps').show();
+					$('#apps-management').hide();
+				} else {
+					$('#more-apps').hide();
+					$('#apps-management').show();
+				}
 			}
 		});
 	},