Merge pull request #14958 from owncloud/dropdown-style

popover style for apps and user dropdown menus

4 files changed, 37 insertions, 20 deletions

diff --git a/core/js/apps.js b/core/js/apps.js
index 21fae58985e..e9aa0fdfe8d 100644
--- a/core/js/apps.js
+++ b/core/js/apps.js
@@ -44,12 +44,12 @@
 				var area = $(areaSelector);
 
 				function hideArea() {
-					area.slideUp(function() {
+					area.slideUp(OC.menuSpeed*4, function() {
 						area.trigger(new $.Event('hide'));
 					});
 				}
 				function showArea() {
-					area.slideDown(function() {
+					area.slideDown(OC.menuSpeed*4, function() {
 						area.trigger(new $.Event('show'));
 					});
 				}
diff --git a/core/js/js.js b/core/js/js.js
index 00adcc514bc..ad14c2a855a 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -75,7 +75,7 @@ var OC={
 	appConfig: window.oc_appconfig || {},
 	theme: window.oc_defaults || {},
 	coreApps:['', 'admin','log','core/search','settings','core','3rdparty'],
-	menuSpeed: 100,
+	menuSpeed: 50,
 
 	/**
 	 * Get an absolute url to a file in an app
@@ -1196,6 +1196,20 @@ function initCore() {
 
 	setupMainMenu();
 
+	// move triangle of apps dropdown to align with app name triangle
+	// 2 is the additional offset between the triangles
+	if($('#navigation').length) {
+		$('#header #owncloud + .menutoggle').one('click', function(){
+			var caretPosition = $('.header-appname + .icon-caret').offset().left - 2;
+			if(caretPosition > 255) {
+				// if the app name is longer than the menu, just put the triangle in the middle
+				return;
+			} else {
+				$('head').append('<style>#navigation:after { left: '+ caretPosition +'px; }</style>');
+			}
+		});
+	}
+
 	// just add snapper for logged in users
 	if($('#app-navigation').length && !$('html').hasClass('lte9')) {
 
diff --git a/core/js/share.js b/core/js/share.js
index 38f7ec0e14d..061ac6affa2 100644
--- a/core/js/share.js
+++ b/core/js/share.js
@@ -590,7 +590,7 @@ OC.Share={
 			dropDownEl.appendTo(appendTo);
 		}
 		dropDownEl.attr('data-item-source-name', filename);
-		$('#dropdown').show('blind', function() {
+		$('#dropdown').slideDown(OC.menuSpeed, function() {
 			OC.Share.droppedDown = true;
 		});
 		if ($('html').hasClass('lte9')){
@@ -600,7 +600,7 @@ OC.Share={
 	},
 	hideDropDown:function(callback) {
 		OC.Share.currentShares = null;
-		$('#dropdown').hide('blind', function() {
+		$('#dropdown').slideUp(OC.menuSpeed, function() {
 			OC.Share.droppedDown = false;
 			$('#dropdown').remove();
 			if (typeof FileActions !== 'undefined') {
@@ -753,14 +753,14 @@ OC.Share={
 			}
 		}
 		$('#linkText').val(link);
-		$('#linkText').show('blind');
+		$('#linkText').slideDown(OC.menuSpeed);
 		$('#linkText').css('display','block');
 		if (oc_appconfig.core.enforcePasswordForPublicLink === false || password === null) {
 			$('#showPassword').show();
 			$('#showPassword+label').show();
 		}
 		if (password != null) {
-			$('#linkPass').show('blind');
+			$('#linkPass').slideDown(OC.menuSpeed);
 			$('#showPassword').attr('checked', true);
 			$('#linkPassText').attr('placeholder', '**********');
 		}
@@ -770,11 +770,11 @@ OC.Share={
 		$('#allowPublicUploadWrapper').show();
 	},
 	hideLink:function() {
-		$('#linkText').hide('blind');
+		$('#linkText').slideUp(OC.menuSpeed);
 		$('#defaultExpireMessage').hide();
 		$('#showPassword').hide();
 		$('#showPassword+label').hide();
-		$('#linkPass').hide('blind');
+		$('#linkPass').slideUp(OC.menuSpeed);
 		$('#emailPrivateLink #email').hide();
 		$('#emailPrivateLink #emailButton').hide();
 		$('#allowPublicUploadWrapper').hide();
@@ -805,7 +805,7 @@ OC.Share={
 		}
 		$('#expirationCheckbox').attr('checked', true);
 		$('#expirationDate').val(date);
-		$('#expirationDate').show('blind');
+		$('#expirationDate').slideDown(OC.menuSpeed);
 		$('#expirationDate').css('display','block');
 		$('#expirationDate').datepicker({
 			dateFormat : 'dd-mm-yy'
@@ -817,7 +817,7 @@ OC.Share={
 			datePickerOptions.maxDate = new Date(shareTime + oc_appconfig.core.defaultExpireDate * 24 * 3600 * 1000);
 		}
 		if(oc_appconfig.core.defaultExpireDateEnabled) {
-			$('#defaultExpireMessage').show('blind');
+			$('#defaultExpireMessage').slideDown(OC.menuSpeed);
 		}
 		$.datepicker.setDefaults(datePickerOptions);
 	}
@@ -905,7 +905,7 @@ $(document).ready(function() {
 			$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
 			OC.Share.updateIcon(itemType, itemSource);
 			if (typeof OC.Share.statuses[itemSource] === 'undefined') {
-				$('#expiration').hide('blind');
+				$('#expiration').slideUp(OC.menuSpeed);
 			}
 		});
 
@@ -988,7 +988,7 @@ $(document).ready(function() {
 					OC.Share.updateIcon(itemType, itemSource);
 				});
 			} else {
-				$('#linkPass').toggle('blind');
+				$('#linkPass').slideToggle(OC.menuSpeed);
 				$('#linkPassText').focus();
 			}
 			if (expireDateString !== '') {
@@ -997,7 +997,7 @@ $(document).ready(function() {
 		} else {
 			// Delete private link
 			OC.Share.hideLink();
-			$('#expiration').hide('blind');
+			$('#expiration').slideUp(OC.menuSpeed);
 			if ($('#linkText').val() !== '') {
 				$loading.removeClass('hidden');
 				$button.addClass('hidden');
@@ -1010,7 +1010,7 @@ $(document).ready(function() {
 					$('#dropdown').trigger(new $.Event('sharesChanged', {shares: OC.Share.currentShares}));
 					OC.Share.updateIcon(itemType, itemSource);
 					if (typeof OC.Share.statuses[itemSource] === 'undefined') {
-						$('#expiration').hide('blind');
+						$('#expiration').slideUp(OC.menuSpeed);
 					}
 				});
 			}
@@ -1063,7 +1063,7 @@ $(document).ready(function() {
 	});
 
 	$(document).on('click', '#dropdown #showPassword', function() {
-		$('#linkPass').toggle('blind');
+		$('#linkPass').slideToggle(OC.menuSpeed);
 		if (!$('#showPassword').is(':checked') ) {
 			var itemType = $('#dropdown').data('item-type');
 			var itemSource = $('#dropdown').data('item-source');
@@ -1133,9 +1133,9 @@ $(document).ready(function() {
 				if (!result || result.status !== 'success') {
 					OC.dialogs.alert(t('core', 'Error unsetting expiration date'), t('core', 'Error'));
 				}
-				$('#expirationDate').hide('blind');
+				$('#expirationDate').slideUp(OC.menuSpeed);
 				if (oc_appconfig.core.defaultExpireDateEnforced === false) {
-					$('#defaultExpireMessage').show('blind');
+					$('#defaultExpireMessage').slideDown(OC.menuSpeed);
 				}
 			});
 		}
@@ -1161,7 +1161,7 @@ $(document).ready(function() {
 				expirationDateField.addClass('error');
 			} else {
 				if (oc_appconfig.core.defaultExpireDateEnforced === 'no') {
-					$('#defaultExpireMessage'). hide('blind');
+					$('#defaultExpireMessage').slideUp(OC.menuSpeed);
 				}
 			}
 		});
diff --git a/core/js/tests/specs/coreSpec.js b/core/js/tests/specs/coreSpec.js
index 7d06ac2e7df..6f7a34d21c8 100644
--- a/core/js/tests/specs/coreSpec.js
+++ b/core/js/tests/specs/coreSpec.js
@@ -418,7 +418,10 @@ describe('Core base tests', function() {
 		beforeEach(function() {
 			clock = sinon.useFakeTimers();
 			$('#testArea').append('<div id="header">' +
-				'<a class="menutoggle" href="#"></a>' +
+				'<a class="menutoggle" href="#">' +
+				'<h1 class="header-appname"></h1>' +
+				'<div class="icon-caret"></div>' +
+				'</a>' +
 				'</div>' +
 				'<div id="navigation"></div>');
 			$toggle = $('#header').find('.menutoggle');