sascha
/
nextcloud-server
mirror of https://github.com/nextcloud/server.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #12785 from nextcloud/head-menu-half-height-fix 

Unify headers menu design, fix click area
pull/13932/head
Morris Jobke 2019-01-30 16:25:30 +07:00 committed by GitHub
parent 49ae3a3daa 818c23d9f1
commit 681437d23d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 77 additions and 128 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
core/css/apps.scss
Unescape Escape View File

@ -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
}
}
}

164
core/css/header.scss
Unescape Escape View File

@ -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;
}
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;
}
.in-header {
display: none;
}
}
/* 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 {

21
core/js/js.js
Unescape Escape View File

@ -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

3
core/templates/layout.user.php
Unescape Escape View File

@ -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>