Merge pull request #14958 from owncloud/dropdown-style

popover style for apps and user dropdown menus
2015-03-26 18:07:35 +01:00 · 2015-03-26 18:07:35 +01:00 · e3d60ee5b0
parent a8b756154a d1db727d1f
commit e3d60ee5b0
14 changed files with 147 additions and 73 deletions
--- a/apps/files_versions/js/versions.js
+++ b/apps/files_versions/js/versions.js
@ -40,6 +40,7 @@ $(document).ready(function(){
 					if ( $('#dropdown').hasClass('drop-versions') && file == $('#dropdown').data('file')) {
 						createDropDown = false;
 					}
+					$('#dropdown').slideUp(OC.menuSpeed);
 					$('#dropdown').remove();
 					$('tr').removeClass('mouseOver');
 				}
@ -71,7 +72,7 @@ function revertFile(file, revision) {
 			if (response.status === 'error') {
 				OC.Notification.show( t('files_version', 'Failed to revert {file} to revision {timestamp}.', {file:file, timestamp:formatDate(revision * 1000)}) );
 			} else {
-				$('#dropdown').hide('blind', function() {
+				$('#dropdown').slideUp(OC.menuSpeed, function() {
 					$('#dropdown').closest('tr').find('.modified:first').html(relative_modified_date(revision));
 					$('#dropdown').remove();
 					$('tr').removeClass('mouseOver');
@ -175,13 +176,13 @@ function createVersionsDropdown(filename, files, fileList) {
 		version.appendTo('#found_versions');
 	}

-	$('#dropdown').show('blind');
+	$('#dropdown').slideDown(1000);
 }

 $(this).click(
 	function(event) {
 	if ($('#dropdown').has(event.target).length === 0 && $('#dropdown').hasClass('drop-versions')) {
-		$('#dropdown').hide('blind', function() {
+		$('#dropdown').slideUp(OC.menuSpeed, function() {
 			$('#dropdown').remove();
 			$('tr').removeClass('mouseOver');
 		});
--- a/core/css/fixes.css
+++ b/core/css/fixes.css
@ -91,8 +91,9 @@ select {
 }

 /* fix background of navigation popup in IE8 */
-.ie8 #navigation {
-	background-color: #24282F;
+.ie8 #navigation,
+.ie8 #expanddiv {
+	background-color: #111;
 }

 /* needed else IE8 will randomly hide the borders... */
--- a/core/css/header.css
+++ b/core/css/header.css
@ -56,6 +56,17 @@
 	height: 45px; /* header height */
 	-moz-box-sizing: border-box;
 	box-sizing: border-box;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
+}
+#owncloud:focus {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+	opacity: .75;
+}
+#owncloud:hover,
+#owncloud:active {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
 }

 #header .logo {
@ -140,18 +151,43 @@
 #navigation {
 	position: fixed;
 	top: 45px;
+	left: 10px;
 	width: 265px;
 	max-height: 85%;
 	margin-top: 0;
 	padding-bottom: 10px;
-	background-color: rgba(36, 40, 47, .97);
-	border-bottom-right-radius: 7px;
-	box-shadow: 0 0 7px rgba(29,45,68,.97);
+	background-color: rgba(0, 0, 0, .97);
+	box-shadow: 0 1px 10px rgba(50, 50, 50, .7);
+	border-radius: 3px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
 	display: none;
-	overflow-y: auto;
-	overflow-x: hidden;
+	/*overflow-y: auto;
+	overflow-x: hidden;*/
 	z-index: 2000;
 }
+/* arrow look */
+#navigation:after, #expanddiv:after {
+	bottom: 100%;
+	border: solid transparent;
+	content: " ";
+	height: 0;
+	width: 0;
+	position: absolute;
+	pointer-events: none;
+	border-color: rgba(0, 0, 0, 0);
+	border-bottom-color: rgba(0, 0, 0, .97);
+	border-width: 10px;
+	margin-left: -10px;
+}
+/* position of dropdown arrow */
+#navigation:after {
+	left: 47%;
+}
+#expanddiv:after {
+	right: 15px;
+}
+
 #navigation, #navigation * {
 	-moz-box-sizing:border-box;
 	box-sizing:border-box;
@ -182,15 +218,15 @@
 	/* icon opacity and hover effect */
 	#navigation a img,
 	#navigation a span {
-		/* 50% opacity when inactive */
-		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-		opacity: .5;
+		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+		opacity: .7;
 	}
-	#navigation a:hover img, #navigation a:focus img,
-	#navigation a:hover span, #navigation a:focus span,
+	#navigation a:hover img,
+	#navigation a:focus img,
+	#navigation a:hover span,
+	#navigation a:focus span,
 	#navigation a.active img,
 	#navigation a.active span {
-		 /* full opacity for the active app or when hovered/focused */
 		-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 		opacity: 1;
 	}
@ -248,7 +284,7 @@
 #header .avatardiv {
 	float: left;
 	display: inline-block;
-	margin-right: 5px;
+	margin-right: 8px;
 	cursor: pointer;
 	height: 32px;
 	width: 32px;
@ -265,7 +301,7 @@
 }
 #expand {
 	display: block;
-	padding: 7px 12px 6px 7px;
+	padding: 7px 30px 6px 22px;
 	cursor: pointer;
 }
 #expand * {
@ -276,26 +312,28 @@
 #expand:active {
 	color: #fff;
 }
-#expand img { 
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
+#expand img {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 	opacity: .7;
 	margin-bottom: -2px;
 }
-#expand:hover img, 
-#expand:focus img, 
-#expand:active img { 
+#expand:hover img,
+#expand:focus img,
+#expand:active img {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
-	opacity:1;
+	opacity: 1;
 }
 #expanddiv {
 	position: absolute;
-	right: 0;
+	right: 10px;
 	top: 45px;
 	z-index: 2000;
 	display: none;
-	background-color: #383c43;
-	border-bottom-left-radius: 7px;
-	box-shadow: 0 0 7px rgb(29,45,68);
+	background-color: rgba(0, 0, 0, .97);
+	box-shadow: 0 1px 10px rgba(50, 50, 50, .7);
+	border-radius: 3px;
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
 	-moz-box-sizing: border-box; box-sizing: border-box;
 }
 	#expanddiv a {
--- a/core/css/mobile.css
+++ b/core/css/mobile.css
@ -39,6 +39,8 @@
 	-moz-transition: all 100ms;
 	-o-transition: all 100ms;
 	transition: all 100ms;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
+	opacity: .7;
 }
 .searchbox input[type="search"]:focus,
 .searchbox input[type="search"]:active {
@ -47,12 +49,18 @@
 	cursor: text;
 	background-color: #fff;
 	background-image: url('../img/actions/search.svg');
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+	opacity: 1;
 }

 /* do not show display name on mobile when profile picture is present */
 #header .avatardiv.avatardiv-shown + #expandDisplayName {
 	display: none;
 }
+#header #expand {
+	display: block;
+	padding: 7px 30px 6px 7px;
+}

 /* do not show update notification on mobile */
 #update-notification {
--- a/core/css/share.css
+++ b/core/css/share.css
@ -3,17 +3,17 @@
 See the COPYING-README file. */

 #dropdown {
-	background:#eee;
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 5px;
-	box-shadow:0 1px 1px #777;
-	display:block;
+	background: #eee;
+	border-bottom-left-radius: 3px;
+	border-bottom-right-radius: 3px;
+	box-shadow: 0 2px 3px rgba(50, 50, 50, .4);
+	display: block;
 	margin-right: 0;
-	position:absolute;
-	right:0;
-	width:420px;
-	z-index:500;
-	padding:16px;
+	position: absolute;
+	right: 0;
+	width: 420px;
+	z-index: 500;
+	padding: 16px;
 }

@media only screen and (min-width: 768px) and (max-width: 990px) {
--- a/core/css/styles.css
+++ b/core/css/styles.css
@ -240,14 +240,21 @@ textarea:disabled {
 .searchbox input[type="search"] {
 	position: relative;
 	font-size: 1.2em;
-	padding-left: 1.5em;
-	background: #fff url('../img/actions/search.svg') no-repeat .5em center;
+	padding: 3px;
+	padding-left: 25px;
+	background: #fff url('../img/actions/search.svg') no-repeat 6px center;
 	border: 0;
-	border-radius: 2em;
+	border-radius: 3px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	opacity: .3;
+	margin-top: 9px;
+	float: right;
+}
+.searchbox input[type="search"]:hover,
+.searchbox input[type="search"]:focus,
+.searchbox input[type="search"]:active {
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
 	opacity: .7;
-	margin-top: 6px;
-	float: right;
 }

 input[type="submit"].enabled {
--- a/core/img/logo-icon.png
+++ b/core/img/logo-icon.png
--- a/core/img/logo-icon.svg
+++ b/core/img/logo-icon.svg
@ -1,2 +1,2 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="34" width="62" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" enable-background="new 0 0 595.275 311.111" viewBox="0 0 62.001102 34" xmlns:dc="http://purl.org/dc/elements/1.1/"><path style="block-progression:tb;color:#000000;enable-background:accumulate;text-transform:none;text-indent:0" d="m27.8 0.99971c-4.4056 0-7.9651 3.5593-7.9651 7.9651 0 1.816 0.60473 3.4874 1.6242 4.8258 2.2117-2.5599 5.4761-4.1855 9.1208-4.1855 1.7831 0 3.474 0.39707 4.9976 1.0932 0.12336-0.55787 0.18742-1.138 0.18742-1.7335 0-4.4056-3.5593-7.9651-7.9651-7.9651zm-10.402 3.6856c-2.2943 0-4.1387 1.86-4.1387 4.1543 0 0.74284 0.19164 1.4447 0.53099 2.0459 1.3845-0.78102 2.9851-1.2338 4.6853-1.2338 0.16407 0 0.32211 0.0059 0.48415 0.01578-0.01835-0.23258-0.03122-0.46553-0.03122-0.70279 0-1.2779 0.27755-2.4937 0.76528-3.592-0.65667-0.44034-1.4434-0.68715-2.2958-0.68715zm19.647 2.858c-0.16951 0-0.33288 0.020716-0.49977 0.031173 0.0722 0.45514 0.12493 0.91469 0.12493 1.39 0 0.73959-0.094 1.4533-0.2655 2.1396 2.01 1.1123 3.6792 2.7767 4.779 4.7946 1.1407-0.59388 2.4132-0.97146 3.7638-1.062-0.34808-4.0821-3.7299-7.2933-7.9024-7.2933zm-6.4656 2.9673c-6.1647 0-11.151 4.9858-11.151 11.151 0 6.1647 4.9858 11.151 11.151 11.151s11.151-4.9863 11.151-11.151c0-6.1652-4.9863-11.151-11.151-11.151zm-12.103 0.04676c-4.7827 0-8.6522 3.8694-8.6522 8.6522 0 2.8155 1.3415 5.3079 3.4202 6.8873 0.87636-1.6903 2.6365-2.8424 4.6696-2.8424 0.24572 0 0.48158 0.02979 0.71842 0.06255-0.07434-0.5409-0.10932-1.0942-0.10932-1.6555 0-2.6832 0.8734-5.1644 2.3582-7.1685-0.88884-1.1122-1.5249-2.4486-1.796-3.9044-0.20094-0.01381-0.40458-0.03117-0.60907-0.03117zm27.112 5.154c-1.4522 0-2.8126 0.37077-4.0137 0.99953 0.68202 1.5107 1.062 3.1869 1.062 4.9508 0 3.3027-1.3279 6.3018-3.4827 8.4805 1.583 1.7575 3.8798 2.858 6.4345 2.858 4.7827 0 8.6522-3.8694 8.6522-8.6522 0-4.7827-3.8694-8.6364-8.6522-8.6364zm-36.607 1.14c-4.4062-0.000493-7.9809 3.543-7.9809 7.9488 0 4.4057 3.5748 7.9804 7.9804 7.9804 1.6769 0 3.2303-0.52246 4.5135-1.4056-0.53025-0.82393-0.84337-1.809-0.84337-2.858 0-0.54446 0.08034-1.0676 0.23426-1.5617-2.4023-1.7361-3.9669-4.5613-3.9669-7.7461 0-0.80923 0.10664-1.5917 0.29674-2.3427-0.0789-0.002-0.15478-0.01578-0.23427-0.01578zm46.837 6.8405c-0.23502 0-0.46245 0.02683-0.68715 0.06255 0.0124 0.19866 0.0156 0.39168 0.0156 0.59348 0 2.5403-1.0023 4.846-2.6238 6.5593 0.79769 0.92761 1.9694 1.5149 3.2953 1.5149 2.4152 0 4.3729-1.9421 4.3729-4.3573s-1.9577-4.3729-4.3729-4.3729zm-37.904 0.46851c-2.4151 0-4.3573 1.9422-4.3573 4.3573s1.9422 4.3729 4.3573 4.3729c1.8512 0 3.4225-1.1551 4.0606-2.7799-1.557-1.5858-2.676-3.6087-3.1703-5.8564-0.28933-0.05978-0.58298-0.09372-0.89022-0.09372z" fill="#FFF"/></svg>
+<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" height="34" viewBox="0 0 62.001102 34" width="62" version="1.1" y="0px" x="0px" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" enable-background="new 0 0 595.275 311.111"><path style="block-progression:tb;color:#000000;enable-background:accumulate;text-transform:none;text-indent:0" fill="#fff" d="m29.639 2.9681c-3.7216 0-6.7285 3.0067-6.7285 6.7285 0 1.5341 0.51084 2.946 1.372 4.0766 1.8683-2.1625 4.6259-3.5357 7.7047-3.5357 1.5063 0 2.9346 0.33542 4.2217 0.92347 0.10421-0.47126 0.15832-0.96132 0.15832-1.4644 0-3.7216-3.0067-6.7285-6.7285-6.7285zm-8.787 3.1134c-1.9381 0-3.4961 1.5712-3.4961 3.5093 0 0.62751 0.16189 1.2204 0.44855 1.7283 1.1695-0.65976 2.5216-1.0422 3.9579-1.0422 0.1386 0 0.2721 0.005 0.40898 0.01333-0.0155-0.19647-0.02637-0.39325-0.02637-0.59368 0-1.0795 0.23446-2.1065 0.64646-3.0343-0.55472-0.37197-1.2193-0.58046-1.9394-0.58046zm16.597 2.4143c-0.14319 0-0.2812 0.0175-0.42218 0.02633 0.06099 0.38448 0.10553 0.77268 0.10553 1.1742 0 0.62476-0.07941 1.2277-0.22428 1.8074 1.6979 0.93961 3.108 2.3456 4.037 4.0502 0.9636-0.50168 2.0385-0.82063 3.1794-0.89712-0.29404-3.4483-3.1508-6.161-6.6755-6.161zm-5.4618 2.5066c-5.2076 0-9.4197 4.2117-9.4197 9.4197 0 5.2076 4.2117 9.4197 9.4197 9.4197s9.4197-4.2121 9.4197-9.4197c0-5.208-4.2121-9.4197-9.4197-9.4197zm-10.224 0.0395c-4.0401 0-7.3089 3.2686-7.3089 7.3089 0 2.3784 1.1332 4.4838 2.8892 5.818 0.7403-1.4279 2.2272-2.4011 3.9446-2.4011 0.20757 0 0.40681 0.02517 0.60688 0.05284-0.0628-0.45692-0.09235-0.92432-0.09235-1.3985 0-2.2666 0.7378-4.3626 1.9921-6.0555-0.75084-0.93952-1.2881-2.0684-1.5172-3.2982-0.16974-0.01167-0.34177-0.02633-0.51451-0.02633zm22.903 4.3538c-1.2267 0-2.3759 0.3132-3.3905 0.84434 0.57613 1.2762 0.89712 2.6921 0.89712 4.1821 0 2.7899-1.1217 5.3234-2.942 7.1638 1.3372 1.4846 3.2774 2.4143 5.4355 2.4143 4.0401 0 7.3089-3.2686 7.3089-7.3089 0-4.0401-3.2686-7.2955-7.3089-7.2955zm-30.923 0.96301c-3.7221-0.000417-6.7418 2.9929-6.7418 6.7147 0 3.7217 3.0198 6.7414 6.7414 6.7414 1.4165 0 2.7288-0.44134 3.8127-1.1874-0.44792-0.69601-0.71243-1.5281-0.71243-2.4143 0-0.45993 0.06787-0.90185 0.19789-1.3192-2.0293-1.4666-3.351-3.8531-3.351-6.5435 0-0.68359 0.09008-1.3446 0.25067-1.979-0.06665-0.0017-0.13075-0.01333-0.1979-0.01333zm39.565 5.7785c-0.19853 0-0.39065 0.02266-0.58046 0.05284 0.01047 0.16782 0.01318 0.33087 0.01318 0.50134 0 2.1459-0.84668 4.0936-2.2164 5.5409 0.67384 0.78359 1.6636 1.2797 2.7837 1.2797 2.0402 0 3.694-1.6406 3.694-3.6808s-1.6538-3.694-3.694-3.694zm-32.019 0.39577c-2.0401 0-3.6808 1.6407-3.6808 3.6808s1.6407 3.694 3.6808 3.694c1.5638 0 2.8911-0.97576 3.4302-2.3483-1.3153-1.3396-2.2605-3.0484-2.6781-4.9471-0.24441-0.0505-0.49247-0.07917-0.75201-0.07917z"/></svg>
--- 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'));
 					});
 				}
--- 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')) {

--- 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);
 				}
 			}
 		});
--- 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');
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@ -37,7 +37,7 @@
 	</div>
 	<header role="banner"><div id="header">
 			<a href="<?php print_unescaped(link_to('', 'index.php')); ?>"
-				title="" id="owncloud" tabindex="-1">
+				title="" id="owncloud" tabindex="1">
 				<div class="logo-icon svg">
 					<h1 class="hidden-visually">
 						<?php p($theme->getName()); ?>
@ -60,9 +60,9 @@

 			<div id="logo-claim" style="display:none;"><?php p($theme->getLogoClaim()); ?></div>
 			<div id="settings" class="svg">
-				<div id="expand" tabindex="4" role="link">
+				<div id="expand" tabindex="6" role="link">
 					<?php if ($_['enableAvatars']): ?>
-					<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown"'); } else { print_unescaped('" style="display: none"'); } ?>>
+					<div class="avatardiv<?php if ($_['userAvatarSet']) { print_unescaped(' avatardiv-shown'); } else { print_unescaped('" style="display: none'); } ?>">
 						<?php if ($_['userAvatarSet']): ?>
 							<img src="<?php p(\OC::$server->getURLGenerator()->linkToRoute('core.avatar.getAvatar', ['userId' => $_['user_uid'], 'size' => 32]));?>?requesttoken=<?php p(urlencode($_['requesttoken'])); ?>"
 								alt="">
@ -99,7 +99,7 @@
 				</label>
 				<input id="searchbox" class="svg" type="search" name="query"
 					value="<?php if(isset($_POST['query'])) {p($_POST['query']);};?>"
-					autocomplete="off" tabindex="3">
+					autocomplete="off" tabindex="5">
 			</form>
 		</div></header>

@ -108,7 +108,7 @@
 				<ul>
 				<?php foreach($_['navigation'] as $entry): ?>
 					<li data-id="<?php p($entry['id']); ?>">
-						<a href="<?php print_unescaped($entry['href']); ?>" title=""
+						<a href="<?php print_unescaped($entry['href']); ?>" title="" tabindex="3"
 							<?php if( $entry['active'] ): ?> class="active"<?php endif; ?>>
 							<img class="app-icon svg" alt="" src="<?php print_unescaped($entry['icon']); ?>">
 							<div class="icon-loading-dark" style="display:none;"></div>
@ -118,12 +118,12 @@
 						</a>
 					</li>
 				<?php endforeach; ?>
-				<?php 
+				<?php
 					/* show "More apps" link to app administration directly in app navigation, as last entry */
-					if(OC_User::isAdminUser(OC_User::getUser())): 
+					if(OC_User::isAdminUser(OC_User::getUser())):
 				?>
 					<li id="apps-management">
-						<a href="<?php print_unescaped(OC_Helper::linkToRoute('settings_apps')); ?>" title=""
+						<a href="<?php print_unescaped(OC_Helper::linkToRoute('settings_apps')); ?>" title="" tabindex="4"
 							<?php if( $_['appsmanagement_active'] ): ?> class="active"<?php endif; ?>>
 							<img class="app-icon svg" alt="" src="<?php print_unescaped(OC_Helper::imagePath('settings', 'apps.svg')); ?>">
 							<div class="icon-loading-dark" style="display:none;"></div>
--- a/settings/templates/apps.php
+++ b/settings/templates/apps.php
@ -1,6 +1,8 @@
 <script id="categories-template" type="text/x-handlebars-template">
 {{#each this}}
-	<li id="app-category-{{id}}" data-category-id="{{id}}"><a>{{displayName}}</a></li>
+	<li id="app-category-{{id}}" data-category-id="{{id}}" tabindex="0">
+		<a>{{displayName}}</a>
+	</li>
 {{/each}}

 <?php if(OC_Config::getValue('appstoreenabled', true) === true): ?>