summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--core/css/apps.scss17
-rw-r--r--core/css/header.scss164
-rw-r--r--core/js/js.js21
-rw-r--r--core/templates/layout.user.php3
4 files changed, 77 insertions, 128 deletions
diff --git a/core/css/apps.scss b/core/css/apps.scss
index 06d13e384fe..05a92139495 100644
--- a/core/css/apps.scss
+++ b/core/css/apps.scss
@@ -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
}
}
}
diff --git a/core/css/header.scss b/core/css/header.scss
index 4511b44668d..6d863ab237a 100644
--- a/core/css/header.scss
+++ b/core/css/header.scss
@@ -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 {
diff --git a/core/js/js.js b/core/js/js.js
index c54b52c0f58..de27ff7a926 100644
--- a/core/js/js.js
+++ b/core/js/js.js
@@ -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
diff --git a/core/templates/layout.user.php b/core/templates/layout.user.php
index 43c89b4d181..33eddeb0d0a 100644
--- a/core/templates/layout.user.php
+++ b/core/templates/layout.user.php
@@ -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>
generated by cgit v1.2.3 (git 2.39.1) at 2025-01-15 08:58:38 +0000