Merge pull request #12785 from nextcloud/head-menu-half-height-fix
Unify headers menu design, fix click area
This commit is contained in:
Morris Jobke
GitHub
commit
681437d23d
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
.in-header {
|
||||
display: none;
|
||||
}
|
||||
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 +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 {
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue