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

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

diff --git a/core/css/css-variables.scss b/core/css/css-variables.scss
index a294667229486696c4cfc7517ab9efd95b4508ac..6df2e0a3428fd8bbcdc565d0a0c1c259996bdfdc 100644 (file)
--- a/core/css/css-variables.scss
+++ b/core/css/css-variables.scss
@@ -39,4 +39,6 @@
        --border-radius-pill: $border-radius-pill;
 
        --font-face: $font-face;
+
+       --animation-quick: $animation-quick;
 }

diff --git a/core/css/header.scss b/core/css/header.scss
index f2527ca3a7943604f049359fbaeaa371096ecfec..e790f719a1f1af8ba435ddd6d21d2f7f4091c67b 100644 (file)
--- a/core/css/header.scss
+++ b/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;

diff --git a/core/css/variables.scss b/core/css/variables.scss
index dffd6403471f44a2a0164c687416681120af5d6f..a827629479cec965b46f2f92288f978d40c49e16 100644 (file)
--- a/core/css/variables.scss
+++ b/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;

diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index d82043b2572b3337c49438ae29a004acdd5ff03d..6f0344aa600db95a09ae6b0c8179da53b1b0bada 100644 (file)
--- a/core/templates/layout.user.php
+++ b/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>