Unify headers menu design, fix click area
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv)
parent
198a45ff75
commit
bb9e282e95
|
|
@ -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,9 @@ 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/* 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 +397,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 +477,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 {
|
||||
|
|
|
|||
|
|
@ -1466,14 +1466,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
|
||||
|
|
@ -1489,13 +1493,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
|
||||
|
|
|
|||
|
|
@ -57,8 +57,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>
|
||||
|
|
@ -87,7 +85,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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue