Merge pull request #8820 from owncloud/design-details

Design details

2 files changed, 15 insertions, 7 deletions

diff --git a/core/js/js.js b/core/js/js.js
index a859034ed01..edae2912b1d 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -183,7 +183,8 @@ var OC={
 	appConfig: window.oc_appconfig || {},
 	theme: window.oc_defaults || {},
 	coreApps:['', 'admin','log','search','settings','core','3rdparty'],
-	
+	menuSpeed: 100,
+
 	/**
 	 * Get an absolute url to a file in an app
 	 * @param {string} app the id of the app the file belongs to
@@ -531,7 +532,7 @@ var OC={
 		$toggle.addClass('menutoggle');
 		$toggle.on('click.menu', function(event) {
 			if ($menuEl.is(OC._currentMenu)) {
-				$menuEl.hide();
+				$menuEl.slideUp(OC.menuSpeed);
 				OC._currentMenu = null;
 				OC._currentMenuToggle = null;
 				return false;
@@ -541,7 +542,7 @@ var OC={
 				// close it
 				OC._currentMenu.hide();
 			}
-			$menuEl.show();
+			$menuEl.slideToggle(OC.menuSpeed);
 			OC._currentMenu = $menuEl;
 			OC._currentMenuToggle = $toggle;
 			return false;
@@ -554,7 +555,7 @@ var OC={
 	unregisterMenu: function($toggle, $menuEl) {
 		// close menu if opened
 		if ($menuEl.is(OC._currentMenu)) {
-			$menuEl.hide();
+			$menuEl.slideUp(OC.menuSpeed);
 			OC._currentMenu = null;
 			OC._currentMenuToggle = null;
 		}
@@ -1068,7 +1069,7 @@ function initCore() {
 		}
 	});
 	$('#settings #expand').click(function(event) {
-		$('#settings #expanddiv').slideToggle(200);
+		$('#settings #expanddiv').slideToggle(OC.menuSpeed);
 		event.stopPropagation();
 	});
 	$('#settings #expanddiv').click(function(event){
@@ -1076,7 +1077,7 @@ function initCore() {
 	});
 	//hide the user menu when clicking outside it
 	$(document).click(function(){
-		$('#settings #expanddiv').slideUp(200);
+		$('#settings #expanddiv').slideUp(OC.menuSpeed);
 	});
 
 	// all the tipsy stuff needs to be here (in reverse order) to work
@@ -1097,7 +1098,7 @@ function initCore() {
 			return false;
 		}
 		if (OC._currentMenu) {
-			OC._currentMenu.hide();
+			OC._currentMenu.slideUp(OC.menuSpeed);
 		}
 		OC._currentMenu = null;
 		OC._currentMenuToggle = null;
diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js
index 47e5ebfed55..b46ece05cb9 100644
--- a/core/js/tests/specs/coreSpec.js
+++ b/core/js/tests/specs/coreSpec.js
@@ -359,8 +359,10 @@ describe('Core base tests', function() {
 		var oldMatchMedia;
 		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:
@@ -376,6 +378,7 @@ describe('Core base tests', function() {
 
 		afterEach(function() {
 			OC._matchMedia = oldMatchMedia;
+			clock.restore();
 		});
 		it('Sets up menu toggle in mobile mode', function() {
 			OC._matchMedia.returns({matches: true});
@@ -413,8 +416,10 @@ describe('Core base tests', function() {
 			$navigation.hide(); // normally done through media query triggered CSS
 			expect($navigation.is(':visible')).toEqual(false);
 			$toggle.click();
+			clock.tick(1 * 1000);
 			expect($navigation.is(':visible')).toEqual(true);
 			$toggle.click();
+			clock.tick(1 * 1000);
 			expect($navigation.is(':visible')).toEqual(false);
 		});
 		it('Clicking menu toggle does not toggle navigation in desktop mode', function() {
@@ -448,6 +453,7 @@ describe('Core base tests', function() {
 			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');
@@ -456,6 +462,7 @@ describe('Core base tests', function() {
 			$(window).trigger('resize');
 			expect($navigation.is(':visible')).toEqual(false);
 			$toggle.click();
+			clock.tick(1 * 1000);
 			expect($navigation.is(':visible')).toEqual(true);
 		});
 	});