Show all app titles on hovering app menu area, fix #10952, fix #4619

Signed-off-by: Jan-Christoph Borchardt <hey@jancborchardt.net>

core/css/css-variables.scss

@@ -39,4 +39,6 @@
 	--border-radius-pill: $border-radius-pill;
 
 	--font-face: $font-face;
+
+	--animation-quick: $animation-quick;
 }

core/css/header.scss

@@ -513,25 +513,89 @@ nav[role='navigation'] {
 		height: 20px;
 	}
 
-	/* app title popup */
+	/* App title */
 	li span {
-		display: none;
+		opacity: 0;
 		position: absolute;
-		overflow: visible;
-		background-color: var(--color-main-background);
-		white-space: nowrap;
-		border: none;
-		border-radius: var(--border-radius);
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-		color: var(--color-text-lighter);
-		width: auto;
-		left: 50%;
-		top: 100%;
-		transform: translateX(-50%);
-		padding: 4px 10px;
-		filter: drop-shadow(0 1px 10px var(--color-box-shadow));
-		z-index: 100;
+		color: var(--color-primary-text);
+		bottom: -5px;
+		width: 100%;
+		text-align: center;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+
+	/* Set up transitions for showing app titles on hover */
+	li {
+		/* Prevent flicker effect because of low-hanging span element */
+		overflow-y: hidden;
+
+		/* App icon */
+		svg,
+		.icon-more-white {
+			transition: transform var(--animation-quick) ease;
+		}
+
+		/* App title */
+		span {
+			transition: all var(--animation-quick) ease;
+		}
+
+		/* Triangle */
+		a::before {
+			transition: border var(--animation-quick) ease;
+		}
+	}
+
+	/* Show all app titles on hovering app menu area */
+	&:hover {
+		li {
+			/* Move up app icon */
+			svg,
+			.icon-more-white {
+				transform: translateY(-7px);
+			}
+
+			/* Show app title */
+			span {
+				opacity: .6;
+				bottom: 2px;
+			}
+
+			/* Prominent app title for current and hovered/focused app */
+			&:hover span,
+			&:focus span,
+			.active + span {
+				opacity: 1;
+			}
+
+			/* Smaller triangle because of limited space */
+			a::before {
+				border-width: 5px;
+			}
+		}
+	}
+
+	/* Also show app title on focusing single entry (showing all on focus is only possible with CSS4 and parent selectors) */
+	li a:focus {
+		/* Move up app icon */
+		svg,
+		.icon-more-white, {
+			transform: translateY(-7px);
+		}
+
+		/* Show app title */
+		& + span,
+		span {
+			opacity: 1;
+			bottom: 2px;
+		}
+
+		/* Smaller triangle because of limited space */
+		&::before {
+			border-width: 5px;
+		}
 	}
 
 	/* show triangle below active app */
@@ -549,6 +613,7 @@ nav[role='navigation'] {
 		bottom: 0;
 		display: none;
 	}
+
 	/* triangle focus feedback */
 	li a.active::before,
 	li:hover a::before,
@@ -560,7 +625,6 @@ nav[role='navigation'] {
 		z-index: 99;
 	}
 	li:hover a::before,
-	li:hover a::before,
 	li a.active:hover::before,
 	li a:focus::before {
 		z-index: 101;

core/css/variables.scss

@@ -80,6 +80,7 @@ $border-radius-pill: 100px !default;
 
 $font-face: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
 
+$animation-quick: 100ms;
 
 // various structure data
 $header-height: 50px;

core/templates/layout.user.php

@@ -47,7 +47,7 @@
 
 				<ul id="appmenu" <?php if ($_['themingInvertMenu']) { ?>class="inverted"<?php } ?>>
 					<?php foreach ($_['navigation'] as $entry): ?>
-						<li data-id="<?php p($entry['id']); ?>" class="hidden">
+						<li data-id="<?php p($entry['id']); ?>" class="hidden" tabindex="-1">
 							<a href="<?php print_unescaped($entry['href']); ?>"
 								<?php if ($entry['active']): ?> class="active"<?php endif; ?>
 								aria-label="<?php p($entry['name']); ?>">
@@ -69,7 +69,7 @@
 						aria-haspopup="true" aria-controls="navigation" aria-expanded="false">
 						<a href="#" aria-label="<?php p($l->t('More apps')); ?>">
 							<div class="icon-more-white"></div>
-							<span><?php p($l->t('More apps')); ?></span>
+							<span><?php p($l->t('More')); ?></span>
 						</a>
 					</li>
 				</ul>