Merge pull request #12153 from nextcloud/appnames
Show all app titles on hovering app menu area, fix #10952, fix #4619
This commit is contained in:
commit
75f8b161f9
|
@ -39,4 +39,6 @@
|
||||||
--border-radius-pill: $border-radius-pill;
|
--border-radius-pill: $border-radius-pill;
|
||||||
|
|
||||||
--font-face: $font-face;
|
--font-face: $font-face;
|
||||||
|
|
||||||
|
--animation-quick: $animation-quick;
|
||||||
}
|
}
|
||||||
|
|
|
@ -513,25 +513,89 @@ nav[role='navigation'] {
|
||||||
height: 20px;
|
height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* app title popup */
|
/* App title */
|
||||||
li span {
|
li span {
|
||||||
display: none;
|
opacity: 0;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
overflow: visible;
|
color: var(--color-primary-text);
|
||||||
background-color: var(--color-main-background);
|
bottom: -5px;
|
||||||
white-space: nowrap;
|
width: 100%;
|
||||||
border: none;
|
text-align: center;
|
||||||
border-radius: var(--border-radius);
|
overflow: hidden;
|
||||||
border-top-left-radius: 0;
|
text-overflow: ellipsis;
|
||||||
border-top-right-radius: 0;
|
}
|
||||||
color: var(--color-text-lighter);
|
|
||||||
width: auto;
|
|
||||||
left: 50%;
|
/* Set up transitions for showing app titles on hover */
|
||||||
top: 100%;
|
li {
|
||||||
transform: translateX(-50%);
|
/* Prevent flicker effect because of low-hanging span element */
|
||||||
padding: 4px 10px;
|
overflow-y: hidden;
|
||||||
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
|
|
||||||
z-index: 100;
|
/* 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 */
|
/* show triangle below active app */
|
||||||
|
@ -549,6 +613,7 @@ nav[role='navigation'] {
|
||||||
bottom: 0;
|
bottom: 0;
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* triangle focus feedback */
|
/* triangle focus feedback */
|
||||||
li a.active::before,
|
li a.active::before,
|
||||||
li:hover a::before,
|
li:hover a::before,
|
||||||
|
@ -560,7 +625,6 @@ nav[role='navigation'] {
|
||||||
z-index: 99;
|
z-index: 99;
|
||||||
}
|
}
|
||||||
li:hover a::before,
|
li:hover a::before,
|
||||||
li:hover a::before,
|
|
||||||
li a.active:hover::before,
|
li a.active:hover::before,
|
||||||
li a:focus::before {
|
li a:focus::before {
|
||||||
z-index: 101;
|
z-index: 101;
|
||||||
|
|
|
@ -80,6 +80,7 @@ $border-radius-pill: 100px !default;
|
||||||
|
|
||||||
$font-face: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
|
$font-face: 'Nunito', 'Open Sans', Frutiger, Calibri, 'Myriad Pro', Myriad, sans-serif !default;
|
||||||
|
|
||||||
|
$animation-quick: 100ms;
|
||||||
|
|
||||||
// various structure data
|
// various structure data
|
||||||
$header-height: 50px;
|
$header-height: 50px;
|
||||||
|
|
|
@ -47,7 +47,7 @@
|
||||||
|
|
||||||
<ul id="appmenu" <?php if ($_['themingInvertMenu']) { ?>class="inverted"<?php } ?>>
|
<ul id="appmenu" <?php if ($_['themingInvertMenu']) { ?>class="inverted"<?php } ?>>
|
||||||
<?php foreach ($_['navigation'] as $entry): ?>
|
<?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']); ?>"
|
<a href="<?php print_unescaped($entry['href']); ?>"
|
||||||
<?php if ($entry['active']): ?> class="active"<?php endif; ?>
|
<?php if ($entry['active']): ?> class="active"<?php endif; ?>
|
||||||
aria-label="<?php p($entry['name']); ?>">
|
aria-label="<?php p($entry['name']); ?>">
|
||||||
|
@ -69,7 +69,7 @@
|
||||||
aria-haspopup="true" aria-controls="navigation" aria-expanded="false">
|
aria-haspopup="true" aria-controls="navigation" aria-expanded="false">
|
||||||
<a href="#" aria-label="<?php p($l->t('More apps')); ?>">
|
<a href="#" aria-label="<?php p($l->t('More apps')); ?>">
|
||||||
<div class="icon-more-white"></div>
|
<div class="icon-more-white"></div>
|
||||||
<span><?php p($l->t('More apps')); ?></span>
|
<span><?php p($l->t('More')); ?></span>
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
Loading…
Reference in New Issue