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

Unify headers menu design, fix click area

Browse Source 
Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
pull/12785/head
John Molakvoæ (skjnldsv) 7 years ago
parent 198a45ff75
commit bb9e282e95
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
3 changed files with 66 additions and 125 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 167
      core/css/header.scss
  2. 21
      core/js/js.js
  3. 3
      core/templates/layout.user.php

167
core/css/header.scss
Unescape 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,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 {

21
core/js/js.js
Unescape View File

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

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

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

Write Preview
Loading…
Cancel
Save