Merge pull request #12785 from nextcloud/head-menu-half-height-fix

Unify headers menu design, fix click area

core/css/apps.scss

@@ -841,8 +841,9 @@ $min-content-width: $breakpoint-mobile - $navigation-width - $list-min-width;
 }
 
 /* POPOVER MENU ------------------------------------------------------------ */
-$popoveritem-height: 38px;
+$popoveritem-height: 44px;
 $popovericon-size: 16px;
+$outter-margin: ($popoveritem-height - $popovericon-size) / 2;
 
 .ie,
 .edge {
@@ -861,7 +862,6 @@ $popovericon-size: 16px;
 	background-color: var(--color-main-background);
 	color: var(--color-main-text);
 	border-radius: var(--border-radius);
-	border: 1px solid transparent;
 	z-index: 110;
 	margin: 5px;
 	margin-top: -5px;
@@ -1000,7 +1000,7 @@ $popovericon-size: 16px;
 			}
 			/* Add padding if contains icon+text */
 			&:not(:empty) {
-				padding-right: 10px !important;
+				padding-right: $outter-margin !important;
 			}
 			/* DEPRECATED! old img in popover fallback
 			 * TODO: to remove */
@@ -1039,28 +1039,29 @@ $popovericon-size: 16px;
 			}
 			/* Inputs inside popover supports text, submit & reset */
 			input {
-				min-width: #{$popoveritem-height - 4px}; /* twice the margin */
-				max-height: #{$popoveritem-height - 4px}; /* twice the margin */
+				min-width: $popoveritem-height;
+				max-height: #{$popoveritem-height - 4px}; /* twice the element margin-y */
 				margin: 2px 0;
 				flex: 1 1 auto;
+				// space between inline inputs
 				&:not(:first-child) {
 					margin-left: 5px;
 				}
 			}
 		}
-		/* css hack, only first not hidden*/
+		/* css hack, only first not hidden */
 		&:not(.hidden):not([style*='display:none']) {
 			&:first-of-type {
 				> button, > a, > .menuitem {
 					> form, > input {
-						margin-top: 10px;
+						margin-top: $outter-margin - 2px; // minus the input margin
 					}
 				}
 			}
 			&:last-of-type {
 				> button, > a, > .menuitem {
 					> form, > input {
-						margin-bottom: 10px;
+						margin-bottom: $outter-margin - 2px; // minus the input margin
 					}
 				}
 			}

core/css/header.scss

@@ -77,6 +77,8 @@
 
 #header {
 	/* Header menu */
+	$header-menu-entry-height: 44px;
+
 	.header-left > nav > .menu,
 	.header-right > div > .menu {
 		background-color: var(--color-main-background);
@@ -86,10 +88,11 @@
 		z-index: 2000;
 		position: absolute;
 		max-width: 350px;
-		max-height: 280px;
-		right: 5px;
+		max-height: $header-menu-entry-height * 7.5; // half entry
+		right: 5px; // relative to parent
 		top: $header-height;
 		margin: 0;
+		-webkit-overflow-scrolling: touch;
 
 		&:not(.popovermenu) {
 			display: none;
@@ -107,6 +110,51 @@
 			pointer-events: none;
 			right: 10px;
 		}
+
+		/* Use by the apps menu and the settings right menu */
+		ul {
+			li {
+				a {
+					display: inline-flex;
+					align-items: center;
+					height: $header-menu-entry-height;
+					color: var(--color-main-text);
+					padding: 10px 12px;
+					box-sizing: border-box;
+					opacity: .7;
+					white-space: nowrap;
+					position: relative;
+					width: 100%;
+					&:hover,
+					&:focus,
+					&:active,
+					&.active {
+						opacity: 1;
+						box-shadow: inset 4px 0 var(--color-primary);
+					}
+					span {
+						display: inline-block;
+						padding-bottom: 0;
+						color: var(--color-main-text);
+						white-space: nowrap;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						max-width: 110px;
+					}
+					.icon-loading-small {
+						margin-right: 10px;
+						background-size: 16px 16px;
+					}
+					img,
+					svg {
+						opacity: .7;
+						margin-right: 10px;
+						height: 16px;
+						width: 16px;
+					}
+				}
+			}
+		}
 	}
 	.logo {
 		display: inline-flex;
@@ -265,81 +313,16 @@ nav[role='navigation'] {
 
 #navigation {
 	box-sizing: border-box;
-	* {
-		box-sizing: border-box;
-	}
-	li {
-		display: inline-block;
-	}
-	a {
-		position: relative;
-		width: 100%;
-		display: inline-flex;
-		padding: 10px 12px;
-		height: 40px;
-		align-items: center;
-		span {
-			display: inline-block;
-			padding-bottom: 0;
-			padding-left: 10px;
-			color: var(--color-main-text);
-			white-space: nowrap;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			max-width: 110px;
-		}
-		svg,
-		span {
-			opacity: .7;
-		}
-		&:hover svg,
-		&:focus svg,
-		&:hover span,
-		&:focus span {
-			opacity: 1;
-		}
-		&.active {
-			svg, span {
-				opacity: 1;
-			}
-		}
-	}
-	.app-icon {
-		margin: 0 auto;
-		padding: 0;
-		max-height: 32px;
-		max-width: 32px;
-	}
-
-	/* loading feedback for apps */
-	.app-loading {
-		.icon-loading-small {
-			display: inline !important;
-			position: absolute;
-			left: 12px;
-			width: 16px;
-			height: 16px;
-		}
-		.app-icon {
-			opacity: 0;
-		}
+	.in-header {
+		display: none;
 	}
-
 }
 
-/* Apps management */
 #apps {
 	max-height: inherit;
 	overflow-x: hidden;
 	overflow-y: auto;
 	-webkit-overflow-scrolling: touch;
-	.in-header {
-		display: none;
-	}
-	ul {
-		display: flex;
-		flex-direction: column;
-	}
 }
 
 /* USER MENU -----------------------------------------------------------------*/
@@ -421,37 +404,6 @@ nav[role='navigation'] {
 	}
 }
 
-/* Settings menu */
-#expanddiv {
-	a {
-		display: inline-flex;
-		align-items: center;
-		height: 40px;
-		color: var(--color-main-text);
-		padding: 12px;
-		box-sizing: border-box;
-		opacity: .7;
-		white-space: nowrap;
-
-		.icon-loading-small {
-			margin-right: 9px;
-			background-size: 16px 16px;
-		}
-		img {
-			margin-right: 9px;
-			height: 16px;
-			width: 16px;
-		}
-		&:hover,
-		&:focus,
-		&:active,
-		&.active {
-			opacity: 1;
-			box-shadow: inset 4px 0 var(--color-primary);
-		}
-	}
-}
-
 /* Apps menu */
 #appmenu {
 	display: inline-flex;
@@ -532,18 +484,6 @@ nav[role='navigation'] {
 		}
 	}
 
-	.app-loading {
-		> svg {
-			display: none;
-		}
-		.icon-loading-small-dark {
-			width: 20px;
-			height: 20px;
-			display: block !important;
-		}
-	}
-
-
 	/* Show all app titles on hovering app menu area */
 	&:hover {
 		li {

core/js/js.js

@@ -1457,14 +1457,18 @@ function initCore() {
 		$toggle.attr('href', '#');
 		$navigation.hide();
 
-		// show loading feedback
+		// show loading feedback on more apps list
 		$navigation.delegate('a', 'click', function(event) {
 			var $app = $(event.target);
 			if(!$app.is('a')) {
 				$app = $app.closest('a');
 			}
 			if(event.which === 1 && !event.ctrlKey && !event.metaKey) {
-				$app.addClass('app-loading');
+				$app.find('svg').remove();
+				$app.find('div').remove(); // prevent odd double-clicks
+				// no need for theming, loader is already inverted on dark mode
+				// but we need it over the primary colour
+				$app.prepend($('<div/>').addClass('icon-loading-small'));
 			} else {
 				// Close navigation when opening app in
 				// a new tab
@@ -1480,13 +1484,20 @@ function initCore() {
 			}
 		});
 
-		$appmenu.delegate('a', 'click', function(event) {
+		// show loading feedback on visible apps list
+		$appmenu.delegate('li:not(#more-apps) > a', 'click', function(event) {
 			var $app = $(event.target);
 			if(!$app.is('a')) {
 				$app = $app.closest('a');
 			}
-			if(event.which === 1 && !event.ctrlKey && !event.metaKey) {
-				$app.addClass('app-loading');
+			if(event.which === 1 && !event.ctrlKey && !event.metaKey && $app.parent('#more-apps').length === 0) {
+				$app.find('svg').remove();
+				$app.find('div').remove(); // prevent odd double-clicks
+				$app.prepend($('<div/>').addClass(
+					OCA.Theming && OCA.Theming.inverted
+						? 'icon-loading-small'
+						: 'icon-loading-small-dark'
+				));
 			} else {
 				// Close navigation when opening app in
 				// a new tab

core/templates/layout.user.php

@@ -61,8 +61,6 @@
 										<?php } ?>
 										<image x="0" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet"<?php if ($_['themingInvertMenu']) { ?> filter="url(#invertMenuMain-<?php p($entry['id']); ?>)"<?php } ?> xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon" />
 									</svg>
-								<div class="icon-loading-small-dark"
-									 style="display:none;"></div>
 								<span>
 									<?php p($entry['name']); ?>
 								</span>
@@ -91,7 +89,6 @@
 											<defs><filter id="invertMenuMore-<?php p($entry['id']); ?>"><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"></feColorMatrix></filter></defs>
 											<image x="0" y="0" width="16" height="16" preserveAspectRatio="xMinYMin meet" filter="url(#invertMenuMore-<?php p($entry['id']); ?>)" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>"  class="app-icon"></image>
 										</svg>
-										<div class="icon-loading-small" style="display:none;"></div>
 										<span><?php p($entry['name']); ?></span>
 									</a>
 									</li>