Merge pull request #8620 from owncloud/design-navigation-two

Toggle app navigation not only on mobile, but on desktop as well

2 files changed, 20 insertions, 116 deletions

diff --git a/core/js/js.js b/core/js/js.js
index 834916b2e3f..b3cefa83bee 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -533,7 +533,6 @@ var OC={
 	 */
 	registerMenu: function($toggle, $menuEl) {
 		$menuEl.addClass('menu');
-		$toggle.addClass('menutoggle');
 		$toggle.on('click.menu', function(event) {
 			if ($menuEl.is(OC._currentMenu)) {
 				$menuEl.slideUp(OC.menuSpeed);
@@ -1111,45 +1110,27 @@ function initCore() {
 	 * If the screen is bigger, the main menu is not a toggle any more.
 	 */
 	function setupMainMenu() {
-		// toggle the navigation on mobile
-		if (!OC._matchMedia) {
-			return;
-		}
-		var mq = OC._matchMedia('(max-width: 768px)');
-		var lastMatch = mq.matches;
-		var $toggle = $('#header #owncloud');
+		// toggle the navigation
+		var $toggle = $('#header .menutoggle');
 		var $navigation = $('#navigation');
 
-		function updateMainMenu() {
-			// mobile mode ?
-			if (lastMatch && !$toggle.hasClass('menutoggle')) {
-				// init the menu
-				OC.registerMenu($toggle, $navigation);
-				$toggle.data('oldhref', $toggle.attr('href'));
-				$toggle.attr('href', '#');
-				$navigation.hide();
-			}
-			else {
-				OC.unregisterMenu($toggle, $navigation);
-				$toggle.attr('href', $toggle.data('oldhref'));
-				$navigation.show();
-			}
-		}
-
-		updateMainMenu();
-
-		// TODO: debounce this
-		$(window).resize(function() {
-			if (lastMatch !== mq.matches) {
-				lastMatch = mq.matches;
-				updateMainMenu();
+		// init the menu
+		OC.registerMenu($toggle, $navigation);
+		$toggle.data('oldhref', $toggle.attr('href'));
+		$toggle.attr('href', '#');
+		$navigation.hide();
+
+		// show loading feedback
+		$navigation.delegate('a', 'click', function(event) {
+			var $app = $(event.target);
+			if(!$app.is('a')) {
+				$app = $app.closest('a');
 			}
+			$app.addClass('app-loading');
 		});
 	}
 
-	if (window.matchMedia) {
-		setupMainMenu();
-	}
+	setupMainMenu();
 }
 
 $(document).ready(initCore);
diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js
index 37b5ceeec9e..3c62b976779 100644
--- a/core/js/tests/specs/coreSpec.js
+++ b/core/js/tests/specs/coreSpec.js
@@ -356,62 +356,28 @@ describe('Core base tests', function() {
 		});
 	});
 	describe('Main menu mobile toggle', function() {
-		var oldMatchMedia;
+		var clock;
 		var $toggle;
 		var $navigation;
 		var clock;
 
 		beforeEach(function() {
 			clock = sinon.useFakeTimers();
-			oldMatchMedia = OC._matchMedia;
-			// a separate method was needed because window.matchMedia
-			// cannot be stubbed due to a bug in PhantomJS:
-			// https://github.com/ariya/phantomjs/issues/12069
-			OC._matchMedia = sinon.stub();
 			$('#testArea').append('<div id="header">' +
-				'<a id="owncloud" href="#"></a>' +
+				'<a class="menutoggle" href="#"></a>' +
 				'</div>' +
 				'<div id="navigation"></div>');
-			$toggle = $('#owncloud');
+			$toggle = $('#header').find('.menutoggle');
 			$navigation = $('#navigation');
 		});
-
 		afterEach(function() {
-			OC._matchMedia = oldMatchMedia;
 			clock.restore();
 		});
-		it('Sets up menu toggle in mobile mode', function() {
-			OC._matchMedia.returns({matches: true});
+		it('Sets up menu toggle', function() {
 			window.initCore();
-			expect($toggle.hasClass('menutoggle')).toEqual(true);
 			expect($navigation.hasClass('menu')).toEqual(true);
 		});
-		it('Does not set up menu toggle in desktop mode', function() {
-			OC._matchMedia.returns({matches: false});
-			window.initCore();
-			expect($toggle.hasClass('menutoggle')).toEqual(false);
-			expect($navigation.hasClass('menu')).toEqual(false);
-		});
-		it('Switches on menu toggle when mobile mode changes', function() {
-			var mq = {matches: false};
-			OC._matchMedia.returns(mq);
-			window.initCore();
-			expect($toggle.hasClass('menutoggle')).toEqual(false);
-			mq.matches = true;
-			$(window).trigger('resize');
-			expect($toggle.hasClass('menutoggle')).toEqual(true);
-		});
-		it('Switches off menu toggle when mobile mode changes', function() {
-			var mq = {matches: true};
-			OC._matchMedia.returns(mq);
-			window.initCore();
-			expect($toggle.hasClass('menutoggle')).toEqual(true);
-			mq.matches = false;
-			$(window).trigger('resize');
-			expect($toggle.hasClass('menutoggle')).toEqual(false);
-		});
-		it('Clicking menu toggle toggles navigation in mobile mode', function() {
-			OC._matchMedia.returns({matches: true});
+		it('Clicking menu toggle toggles navigation in', function() {
 			window.initCore();
 			$navigation.hide(); // normally done through media query triggered CSS
 			expect($navigation.is(':visible')).toEqual(false);
@@ -422,49 +388,6 @@ describe('Core base tests', function() {
 			clock.tick(1 * 1000);
 			expect($navigation.is(':visible')).toEqual(false);
 		});
-		it('Clicking menu toggle does not toggle navigation in desktop mode', function() {
-			OC._matchMedia.returns({matches: false});
-			window.initCore();
-			expect($navigation.is(':visible')).toEqual(true);
-			$toggle.click();
-			expect($navigation.is(':visible')).toEqual(true);
-		});
-		it('Switching to mobile mode hides navigation', function() {
-			var mq = {matches: false};
-			OC._matchMedia.returns(mq);
-			window.initCore();
-			expect($navigation.is(':visible')).toEqual(true);
-			mq.matches = true;
-			$(window).trigger('resize');
-			expect($navigation.is(':visible')).toEqual(false);
-		});
-		it('Switching to desktop mode shows navigation', function() {
-			var mq = {matches: true};
-			OC._matchMedia.returns(mq);
-			window.initCore();
-			expect($navigation.is(':visible')).toEqual(false);
-			mq.matches = false;
-			$(window).trigger('resize');
-			expect($navigation.is(':visible')).toEqual(true);
-		});
-		it('Switch to desktop with opened menu then back to mobile resets toggle', function() {
-			var mq = {matches: true};
-			OC._matchMedia.returns(mq);
-			window.initCore();
-			expect($navigation.is(':visible')).toEqual(false);
-			$toggle.click();
-			clock.tick(1 * 1000);
-			expect($navigation.is(':visible')).toEqual(true);
-			mq.matches = false;
-			$(window).trigger('resize');
-			expect($navigation.is(':visible')).toEqual(true);
-			mq.matches = true;
-			$(window).trigger('resize');
-			expect($navigation.is(':visible')).toEqual(false);
-			$toggle.click();
-			clock.tick(1 * 1000);
-			expect($navigation.is(':visible')).toEqual(true);
-		});
 	});
 	describe('SVG extension replacement', function() {
 		var svgSupportStub;