mirror of https://github.com/nextcloud/server
Merge pull request #33728 from nextcloud/enh/app-menu-vue
Move app menu to vue
This commit is contained in:
commit
b617f3983a
Binary file not shown.
Binary file not shown.
|
@ -16,7 +16,6 @@
|
||||||
|
|
||||||
/* prevent ugly selection effect on accidental selection */
|
/* prevent ugly selection effect on accidental selection */
|
||||||
#header,
|
#header,
|
||||||
#navigation,
|
|
||||||
#expanddiv {
|
#expanddiv {
|
||||||
-webkit-user-select: none;
|
-webkit-user-select: none;
|
||||||
-moz-user-select: none;
|
-moz-user-select: none;
|
||||||
|
@ -72,7 +71,6 @@
|
||||||
/* Header menu */
|
/* Header menu */
|
||||||
$header-menu-entry-height: 44px;
|
$header-menu-entry-height: 44px;
|
||||||
|
|
||||||
.header-left > nav > .menu,
|
|
||||||
.header-right > div > .menu {
|
.header-right > div > .menu {
|
||||||
background-color: var(--color-main-background);
|
background-color: var(--color-main-background);
|
||||||
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
|
filter: drop-shadow(0 1px 5px var(--color-box-shadow));
|
||||||
|
@ -103,7 +101,6 @@
|
||||||
right: 10px;
|
right: 10px;
|
||||||
}
|
}
|
||||||
|
|
||||||
#apps > ul,
|
|
||||||
& > div,
|
& > div,
|
||||||
& > ul {
|
& > ul {
|
||||||
overflow-y: auto;
|
overflow-y: auto;
|
||||||
|
@ -111,8 +108,7 @@
|
||||||
@include header-menu-height();
|
@include header-menu-height();
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Use by the apps menu and the settings right menu */
|
/* Use by the settings right menu */
|
||||||
#apps > ul,
|
|
||||||
&.settings-menu > ul {
|
&.settings-menu > ul {
|
||||||
li {
|
li {
|
||||||
a {
|
a {
|
||||||
|
@ -182,16 +178,6 @@
|
||||||
padding-right: 10px;
|
padding-right: 10px;
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
}
|
}
|
||||||
/* show caret indicator next to logo to make clear it is tappable */
|
|
||||||
.icon-caret {
|
|
||||||
display: inline-block;
|
|
||||||
width: 12px;
|
|
||||||
height: 12px;
|
|
||||||
margin: 0;
|
|
||||||
margin-top: -21px;
|
|
||||||
padding: 0;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header-left, .header-left,
|
#header-left, .header-left,
|
||||||
#header-right, .header-right {
|
#header-right, .header-right {
|
||||||
|
@ -245,27 +231,6 @@
|
||||||
opacity: .75;
|
opacity: .75;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menutoggle {
|
|
||||||
.icon-caret {
|
|
||||||
opacity: .75;
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
.header-appname, .icon-caret {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:focus {
|
|
||||||
.header-appname, .icon-caret {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&.active {
|
|
||||||
.header-appname, .icon-caret {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* TODO: move into minimal css file for public shared template */
|
/* TODO: move into minimal css file for public shared template */
|
||||||
/* only used for public share pages now as we have the app icons when logged in */
|
/* only used for public share pages now as we have the app icons when logged in */
|
||||||
.header-appname {
|
.header-appname {
|
||||||
|
@ -291,56 +256,6 @@
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* do not show menu toggle on public share links as there is no menu */
|
|
||||||
#body-public #header .icon-caret {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* NAVIGATION --------------------------------------------------------------- */
|
|
||||||
nav[role='navigation'] {
|
|
||||||
display: inline-block;
|
|
||||||
width: variables.$header-height;
|
|
||||||
height: variables.$header-height;
|
|
||||||
margin-left: -#{variables.$header-height};
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header .header-left > nav > #navigation {
|
|
||||||
position: relative;
|
|
||||||
left: 25px; /* half the togglemenu */
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 160px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#header .header-left > nav > #navigation,
|
|
||||||
.ui-datepicker,
|
|
||||||
.ui-timepicker.ui-widget {
|
|
||||||
background-color: var(--color-main-background);
|
|
||||||
filter: drop-shadow(0 1px 10px var(--color-box-shadow));
|
|
||||||
&:after {
|
|
||||||
/* position of dropdown arrow */
|
|
||||||
left: 50%;
|
|
||||||
bottom: 100%;
|
|
||||||
border: solid transparent;
|
|
||||||
content: ' ';
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
border-color: rgba(0, 0, 0, 0);
|
|
||||||
border-bottom-color: var(--color-main-background);
|
|
||||||
border-width: 10px;
|
|
||||||
margin-left: -10px; /* border width */
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
#navigation {
|
|
||||||
box-sizing: border-box;
|
|
||||||
.in-header {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* USER MENU -----------------------------------------------------------------*/
|
/* USER MENU -----------------------------------------------------------------*/
|
||||||
#settings {
|
#settings {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
|
@ -420,220 +335,6 @@ nav[role='navigation'] {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Apps menu */
|
|
||||||
#appmenu {
|
|
||||||
display: inline-flex;
|
|
||||||
min-width: variables.$header-height;
|
|
||||||
z-index: 2;
|
|
||||||
|
|
||||||
li {
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0 2px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
a {
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
margin: 0;
|
|
||||||
height: calc(variables.$header-height - 6px);
|
|
||||||
width: variables.$header-height;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
opacity: .85;
|
|
||||||
// Make sure most app names don’t ellipsize
|
|
||||||
letter-spacing: -0.5px;
|
|
||||||
font-size: 12px;
|
|
||||||
margin: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* focused app visual feedback */
|
|
||||||
&:hover a,
|
|
||||||
a:focus,
|
|
||||||
a.active {
|
|
||||||
opacity: 1;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Text size back to normal for hover/focus
|
|
||||||
&:hover a,
|
|
||||||
a:focus {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover a + span,
|
|
||||||
a:focus + span,
|
|
||||||
&:hover span,
|
|
||||||
&:focus span,
|
|
||||||
a:focus span,
|
|
||||||
a.active span {
|
|
||||||
display: inline-block;
|
|
||||||
text-overflow: initial;
|
|
||||||
width: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: 0 5px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* hidden apps menu */
|
|
||||||
img,
|
|
||||||
.icon-more-white {
|
|
||||||
display: inline-block;
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-more-white {
|
|
||||||
background-image: url('../img/actions/more-white.svg?v=1');
|
|
||||||
}
|
|
||||||
|
|
||||||
/* App title */
|
|
||||||
span {
|
|
||||||
opacity: 0;
|
|
||||||
position: absolute;
|
|
||||||
color: var(--color-primary-text);
|
|
||||||
bottom: 2px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
transition: all var(--animation-quick) ease;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Set up transitions for showing app titles on hover */
|
|
||||||
/* App icon */
|
|
||||||
svg,
|
|
||||||
.icon-more-white {
|
|
||||||
transition: transform var(--animation-quick) ease;
|
|
||||||
// If the primary is too bright, invert the app icons
|
|
||||||
filter: var(--primary-invert-if-bright);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Triangle */
|
|
||||||
a::before {
|
|
||||||
transition: border var(--animation-quick) ease;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show all app titles on hovering app menu area */
|
|
||||||
&:hover {
|
|
||||||
li {
|
|
||||||
/* Move up app icon */
|
|
||||||
svg,
|
|
||||||
.icon-more,
|
|
||||||
.icon-more-white,
|
|
||||||
.icon-loading-small,
|
|
||||||
.icon-loading-small-dark {
|
|
||||||
transform: translateY(-7px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show app title */
|
|
||||||
span {
|
|
||||||
opacity: 1;
|
|
||||||
bottom: 2px;
|
|
||||||
z-index: -1; /* fix clickability issue - otherwise we need to move the span into the link */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Prominent app title for current and hovered/focused app */
|
|
||||||
&:hover span,
|
|
||||||
&:focus span,
|
|
||||||
.active + span {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Smaller triangle because of limited space */
|
|
||||||
a::before {
|
|
||||||
border-width: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Also show app title on focusing single entry (showing all on focus is only possible with CSS4 and parent selectors) */
|
|
||||||
li a:focus {
|
|
||||||
/* Move up app icon */
|
|
||||||
svg,
|
|
||||||
.icon-more,
|
|
||||||
.icon-more-white,
|
|
||||||
.icon-loading-small,
|
|
||||||
.icon-loading-small-dark {
|
|
||||||
transform: translateY(-7px);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Show app title */
|
|
||||||
& + span,
|
|
||||||
span {
|
|
||||||
opacity: 1;
|
|
||||||
bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Smaller triangle because of limited space */
|
|
||||||
&::before {
|
|
||||||
border-width: 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
/* show triangle below active app */
|
|
||||||
li a::before {
|
|
||||||
content: ' ';
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
border: 0 solid transparent;
|
|
||||||
border-bottom-color: var(--color-main-background);
|
|
||||||
border-width: 10px;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
left: 50%;
|
|
||||||
bottom: -5px;
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* triangle focus feedback */
|
|
||||||
li a.active::before,
|
|
||||||
li:hover a::before,
|
|
||||||
li:hover a.active::before,
|
|
||||||
li a:focus::before {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
li a.active::before {
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
li:hover a::before,
|
|
||||||
li a.active:hover::before,
|
|
||||||
li a:focus::before {
|
|
||||||
z-index: 101;
|
|
||||||
}
|
|
||||||
|
|
||||||
li.hidden {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
#more-apps {
|
|
||||||
z-index: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.unread-counter {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
#apps .app-icon-notification,
|
|
||||||
#appmenu .app-icon-notification {
|
|
||||||
fill: var(--color-error);
|
|
||||||
}
|
|
||||||
|
|
||||||
#apps svg:not(.has-unread),
|
|
||||||
#appmenu svg:not(.has-unread) {
|
|
||||||
.app-icon-notification-mask {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.app-icon-notification {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
/* Skip navigation links – show only on keyboard focus */
|
/* Skip navigation links – show only on keyboard focus */
|
||||||
#skip-actions {
|
#skip-actions {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
Binary file not shown.
Binary file not shown.
|
@ -308,48 +308,6 @@ describe('Core base tests', function() {
|
||||||
expect(OC.generateUrl('apps/files/download{file}')).toEqual(OC.getRootPath() + '/index.php/apps/files/download%7Bfile%7D');
|
expect(OC.generateUrl('apps/files/download{file}')).toEqual(OC.getRootPath() + '/index.php/apps/files/download%7Bfile%7D');
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
describe('Main menu mobile toggle', function() {
|
|
||||||
var clock;
|
|
||||||
var $toggle;
|
|
||||||
var $navigation;
|
|
||||||
|
|
||||||
beforeEach(function() {
|
|
||||||
jQuery.fx.off = true;
|
|
||||||
clock = sinon.useFakeTimers();
|
|
||||||
$('#testArea').append('<div id="header">' +
|
|
||||||
'<a class="menutoggle header-appname-container" href="#">' +
|
|
||||||
'<h1 class="header-appname"></h1>' +
|
|
||||||
'<div class="icon-caret"></div>' +
|
|
||||||
'</a>' +
|
|
||||||
'</div>' +
|
|
||||||
'<div id="navigation"></div>');
|
|
||||||
$toggle = $('#header').find('.menutoggle');
|
|
||||||
$navigation = $('#navigation');
|
|
||||||
});
|
|
||||||
afterEach(function() {
|
|
||||||
jQuery.fx.off = false;
|
|
||||||
clock.restore();
|
|
||||||
$(document).off('ajaxError');
|
|
||||||
});
|
|
||||||
it('Sets up menu toggle', function() {
|
|
||||||
window.initCore();
|
|
||||||
expect($navigation.hasClass('menu')).toEqual(true);
|
|
||||||
});
|
|
||||||
it('Clicking menu toggle toggles navigation in', function() {
|
|
||||||
window.initCore();
|
|
||||||
// fore show more apps icon since otherwise it would be hidden since no icons are available
|
|
||||||
clock.tick(1 * 1000);
|
|
||||||
$('#more-apps').show();
|
|
||||||
|
|
||||||
expect($navigation.is(':visible')).toEqual(false);
|
|
||||||
$toggle.click();
|
|
||||||
clock.tick(1 * 1000);
|
|
||||||
expect($navigation.is(':visible')).toEqual(true);
|
|
||||||
$toggle.click();
|
|
||||||
clock.tick(1 * 1000);
|
|
||||||
expect($navigation.is(':visible')).toEqual(false);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
describe('Util', function() {
|
describe('Util', function() {
|
||||||
describe('computerFileSize', function() {
|
describe('computerFileSize', function() {
|
||||||
it('correctly parses file sizes from a human readable formated string', function() {
|
it('correctly parses file sizes from a human readable formated string', function() {
|
||||||
|
|
|
@ -0,0 +1,289 @@
|
||||||
|
<!--
|
||||||
|
- @copyright Copyright (c) 2022 Julius Härtl <jus@bitgrid.net>
|
||||||
|
-
|
||||||
|
- @author Julius Härtl <jus@bitgrid.net>
|
||||||
|
-
|
||||||
|
- @license GNU AGPL version 3 or any later version
|
||||||
|
-
|
||||||
|
- This program is free software: you can redistribute it and/or modify
|
||||||
|
- it under the terms of the GNU Affero General Public License as
|
||||||
|
- published by the Free Software Foundation, either version 3 of the
|
||||||
|
- License, or (at your option) any later version.
|
||||||
|
-
|
||||||
|
- This program is distributed in the hope that it will be useful,
|
||||||
|
- but WITHOUT ANY WARRANTY; without even the implied warranty of
|
||||||
|
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
||||||
|
- GNU Affero General Public License for more details.
|
||||||
|
-
|
||||||
|
- You should have received a copy of the GNU Affero General Public License
|
||||||
|
- along with this program. If not, see <http://www.gnu.org/licenses/>.
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<nav class="app-menu">
|
||||||
|
<ul class="app-menu-main">
|
||||||
|
<li v-for="app in mainAppList"
|
||||||
|
:key="app.id"
|
||||||
|
:data-app-id="app.id"
|
||||||
|
class="app-menu-entry"
|
||||||
|
:class="{ 'app-menu-entry__active': app.active }">
|
||||||
|
<a :href="app.href"
|
||||||
|
:class="{ 'has-unread': app.unread > 0 }"
|
||||||
|
:aria-label="appLabel(app)"
|
||||||
|
:aria-current="app.active ? 'page' : false">
|
||||||
|
<img :src="app.icon" alt="">
|
||||||
|
<div class="app-menu-entry--label">
|
||||||
|
{{ app.name }}
|
||||||
|
<span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span>
|
||||||
|
</div>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<NcActions class="app-menu-more" :aria-label="t('core', 'More apps')">
|
||||||
|
<NcActionLink v-for="app in popoverAppList"
|
||||||
|
:key="app.id"
|
||||||
|
:aria-label="appLabel(app)"
|
||||||
|
:aria-current="app.active ? 'page' : false"
|
||||||
|
:href="app.href"
|
||||||
|
class="app-menu-popover-entry">
|
||||||
|
<template #icon>
|
||||||
|
<div class="app-icon" :class="{ 'has-unread': app.unread > 0 }">
|
||||||
|
<img :src="app.icon" alt="">
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
{{ app.name }}
|
||||||
|
<span v-if="app.unread > 0" class="hidden-visually unread-counter">{{ app.unread }}</span>
|
||||||
|
</NcActionLink>
|
||||||
|
</NcActions>
|
||||||
|
</nav>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { loadState } from '@nextcloud/initial-state'
|
||||||
|
import NcActions from '@nextcloud/vue/dist/Components/NcActions'
|
||||||
|
import NcActionLink from '@nextcloud/vue/dist/Components/NcActionLink'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'AppMenu',
|
||||||
|
components: {
|
||||||
|
NcActions, NcActionLink,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
apps: loadState('core', 'apps', {}),
|
||||||
|
appLimit: 0,
|
||||||
|
observer: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
appList() {
|
||||||
|
return Object.values(this.apps)
|
||||||
|
},
|
||||||
|
mainAppList() {
|
||||||
|
return this.appList.slice(0, this.appLimit)
|
||||||
|
},
|
||||||
|
popoverAppList() {
|
||||||
|
return this.appList.slice(this.appLimit)
|
||||||
|
},
|
||||||
|
appLabel() {
|
||||||
|
return (app) => app.name
|
||||||
|
+ (app.active ? ' (' + t('core', 'Currently open') + ')' : '')
|
||||||
|
+ (app.unread > 0 ? ' (' + n('core', '{count} notification', '{count} notifications', app.unread, { count: app.unread }) + ')' : '')
|
||||||
|
},
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
this.observer = new ResizeObserver(this.resize)
|
||||||
|
this.observer.observe(this.$el)
|
||||||
|
this.resize()
|
||||||
|
},
|
||||||
|
beforeDestroy() {
|
||||||
|
this.observer.disconnect()
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setNavigationCounter(id, counter) {
|
||||||
|
this.$set(this.apps[id], 'unread', counter)
|
||||||
|
},
|
||||||
|
resize() {
|
||||||
|
const availableWidth = this.$el.offsetWidth
|
||||||
|
let appCount = Math.floor(availableWidth / 50) - 1
|
||||||
|
const popoverAppCount = this.appList.length - appCount
|
||||||
|
if (popoverAppCount === 1) {
|
||||||
|
appCount--
|
||||||
|
}
|
||||||
|
if (appCount < 1) {
|
||||||
|
appCount = 0
|
||||||
|
}
|
||||||
|
this.appLimit = appCount
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
$header-icon-size: 20px;
|
||||||
|
|
||||||
|
.app-menu {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-shrink: 1;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
.app-menu-main {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
|
.app-menu-entry {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
opacity: .7;
|
||||||
|
|
||||||
|
&.app-menu-entry__active {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
&::before {
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
border-bottom-color: var(--color-main-background);
|
||||||
|
transform: translateX(-50%);
|
||||||
|
width: 12px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-color: var(--color-primary-text);
|
||||||
|
left: 50%;
|
||||||
|
bottom: 6px;
|
||||||
|
display: block;
|
||||||
|
transition: all 0.1s ease-in-out;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-menu-entry--label {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
width: calc(100% - 4px);
|
||||||
|
height: calc(100% - 4px);
|
||||||
|
margin: 2px;
|
||||||
|
color: var(--color-primary-text);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
transition: margin 0.1s ease-in-out;
|
||||||
|
width: $header-icon-size;
|
||||||
|
height: $header-icon-size;
|
||||||
|
padding: calc((100% - $header-icon-size) / 2);
|
||||||
|
filter: var(--primary-invert-if-bright);
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-menu-entry--label {
|
||||||
|
opacity: 0;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--color-primary-text);
|
||||||
|
text-align: center;
|
||||||
|
bottom: -5px;
|
||||||
|
left: 50%;
|
||||||
|
display: block;
|
||||||
|
min-width: 100%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
transition: all 0.1s ease-in-out;
|
||||||
|
width: 100%;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&:focus-within {
|
||||||
|
opacity: 1;
|
||||||
|
.app-menu-entry--label {
|
||||||
|
opacity: 1;
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 14px;
|
||||||
|
bottom: 0;
|
||||||
|
width: auto;
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
// Show labels
|
||||||
|
&:hover,
|
||||||
|
&:focus-within,
|
||||||
|
.app-menu-entry:hover,
|
||||||
|
.app-menu-entry:focus {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
img {
|
||||||
|
margin-top: -6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-menu-entry--label {
|
||||||
|
opacity: 1;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&::before, .app-menu-entry::before {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .app-menu-more .button-vue--vue-tertiary {
|
||||||
|
color: var(--color-primary-text);
|
||||||
|
opacity: .7;
|
||||||
|
margin: 3px;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: transparent !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:focus-visible {
|
||||||
|
opacity: 1;
|
||||||
|
background-color: transparent !important;
|
||||||
|
border-radius: var(--border-radius);
|
||||||
|
outline: none;
|
||||||
|
box-shadow: 0 0 0 2px var(--color-primary-text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app-menu-popover-entry {
|
||||||
|
.app-icon {
|
||||||
|
position: relative;
|
||||||
|
height: 44px;
|
||||||
|
|
||||||
|
&.has-unread::after {
|
||||||
|
background-color: var(--color-main-text);
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
filter: var(--background-invert-if-bright);
|
||||||
|
width: $header-icon-size;
|
||||||
|
height: $header-icon-size;
|
||||||
|
padding: calc((50px - $header-icon-size) / 2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-unread::after {
|
||||||
|
content: "";
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
background-color: var(--color-primary-text);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.unread-counter {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -22,99 +22,27 @@
|
||||||
*
|
*
|
||||||
*/
|
*/
|
||||||
|
|
||||||
import $ from 'jquery'
|
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
|
||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
import OC from '../OC'
|
import AppMenu from './AppMenu.vue'
|
||||||
|
|
||||||
/**
|
|
||||||
* Set up the main menu toggle to react to media query changes.
|
|
||||||
* If the screen is small enough, the main menu becomes a toggle.
|
|
||||||
* If the screen is bigger, the main menu is not a toggle any more.
|
|
||||||
*/
|
|
||||||
export const setUp = () => {
|
export const setUp = () => {
|
||||||
|
|
||||||
|
Vue.mixin({
|
||||||
|
methods: {
|
||||||
|
t,
|
||||||
|
n,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const AppMenuApp = Vue.extend(AppMenu)
|
||||||
|
const appMenu = new AppMenuApp({}).$mount('#header-left__appmenu')
|
||||||
|
|
||||||
Object.assign(OC, {
|
Object.assign(OC, {
|
||||||
setNavigationCounter(id, counter) {
|
setNavigationCounter(id, counter) {
|
||||||
const appmenuElement = document.getElementById('appmenu').querySelector('[data-id="' + id + '"] svg')
|
appMenu.setNavigationCounter(id, counter)
|
||||||
const appsElement = document.getElementById('apps').querySelector('[data-id="' + id + '"] svg')
|
|
||||||
if (counter === 0) {
|
|
||||||
appmenuElement.classList.remove('has-unread')
|
|
||||||
appsElement.classList.remove('has-unread')
|
|
||||||
appmenuElement.getElementsByTagName('image')[0].style.mask = ''
|
|
||||||
appsElement.getElementsByTagName('image')[0].style.mask = ''
|
|
||||||
} else {
|
|
||||||
appmenuElement.classList.add('has-unread')
|
|
||||||
appsElement.classList.add('has-unread')
|
|
||||||
appmenuElement.getElementsByTagName('image')[0].style.mask = 'url(#hole-appmenu-' + id + ')'
|
|
||||||
appsElement.getElementsByTagName('image')[0].style.mask = 'url(#hole-' + id + ')'
|
|
||||||
}
|
|
||||||
document.getElementById('appmenu').querySelector('[data-id="' + id + '"] .unread-counter').textContent = counter
|
|
||||||
document.getElementById('apps').querySelector('[data-id="' + id + '"] .unread-counter').textContent = counter
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
// init the more-apps menu
|
|
||||||
OC.registerMenu($('#more-apps > a'), $('#navigation'))
|
|
||||||
|
|
||||||
// toggle the navigation
|
|
||||||
const $toggle = $('#header .header-appname-container')
|
|
||||||
const $navigation = $('#navigation')
|
|
||||||
const $appmenu = $('#appmenu')
|
|
||||||
|
|
||||||
// init the menu
|
|
||||||
OC.registerMenu($toggle, $navigation)
|
|
||||||
$toggle.data('oldhref', $toggle.attr('href'))
|
|
||||||
$toggle.attr('href', '#')
|
|
||||||
$navigation.hide()
|
|
||||||
|
|
||||||
// show loading feedback on more apps list
|
|
||||||
$navigation.delegate('a', 'click', event => {
|
|
||||||
let $app = $(event.target)
|
|
||||||
if (!$app.is('a')) {
|
|
||||||
$app = $app.closest('a')
|
|
||||||
}
|
|
||||||
if (event.which === 1 && !event.ctrlKey && !event.metaKey && $app.attr('target') !== '_blank') {
|
|
||||||
$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></div>').addClass('icon-loading-small'))
|
|
||||||
} else {
|
|
||||||
// Close navigation when opening app in
|
|
||||||
// a new tab
|
|
||||||
OC.hideMenus(() => false)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
$navigation.delegate('a', 'mouseup', event => {
|
|
||||||
if (event.which === 2) {
|
|
||||||
// Close navigation when opening app in
|
|
||||||
// a new tab via middle click
|
|
||||||
OC.hideMenus(() => false)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
// show loading feedback on visible apps list
|
|
||||||
$appmenu.delegate('li:not(#more-apps) > a', 'click', event => {
|
|
||||||
let $app = $(event.target)
|
|
||||||
if (!$app.is('a')) {
|
|
||||||
$app = $app.closest('a')
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.which === 1 && !event.ctrlKey && !event.metaKey && $app.parent('#more-apps').length === 0 && $app.attr('target') !== '_blank') {
|
|
||||||
$app.find('svg').remove()
|
|
||||||
$app.find('div').remove() // prevent odd double-clicks
|
|
||||||
$app.prepend($('<div></div>').addClass(
|
|
||||||
OCA.Theming && OCA.Theming.inverted
|
|
||||||
? 'icon-loading-small'
|
|
||||||
: 'icon-loading-small-dark'
|
|
||||||
))
|
|
||||||
// trigger redirect
|
|
||||||
// needed for ie, but also works for every browser
|
|
||||||
window.location = $app.attr('href')
|
|
||||||
} else {
|
|
||||||
// Close navigation when opening app in
|
|
||||||
// a new tab
|
|
||||||
OC.hideMenus(() => false)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -39,60 +39,6 @@ import PasswordConfirmation from './OC/password-confirmation'
|
||||||
// keep in sync with core/css/variables.scss
|
// keep in sync with core/css/variables.scss
|
||||||
const breakpointMobileWidth = 1024
|
const breakpointMobileWidth = 1024
|
||||||
|
|
||||||
const resizeMenu = () => {
|
|
||||||
const appList = $('#appmenu li')
|
|
||||||
const rightHeaderWidth = $('.header-right').outerWidth()
|
|
||||||
const headerWidth = $('header').outerWidth()
|
|
||||||
const usePercentualAppMenuLimit = 0.67
|
|
||||||
const minAppsDesktop = 12
|
|
||||||
let availableWidth = headerWidth - $('#nextcloud').outerWidth() - (rightHeaderWidth > 210 ? rightHeaderWidth : 210)
|
|
||||||
const isMobile = $(window).width() < breakpointMobileWidth
|
|
||||||
if (!isMobile) {
|
|
||||||
availableWidth = availableWidth * usePercentualAppMenuLimit
|
|
||||||
}
|
|
||||||
let appCount = Math.floor((availableWidth / $(appList).width()))
|
|
||||||
if (isMobile && appCount > minAppsDesktop) {
|
|
||||||
appCount = minAppsDesktop
|
|
||||||
}
|
|
||||||
if (!isMobile && appCount < minAppsDesktop) {
|
|
||||||
appCount = minAppsDesktop
|
|
||||||
}
|
|
||||||
|
|
||||||
// show at least 2 apps in the popover
|
|
||||||
if (appList.length - 1 - appCount >= 1) {
|
|
||||||
appCount--
|
|
||||||
}
|
|
||||||
|
|
||||||
$('#more-apps a').removeClass('active')
|
|
||||||
let lastShownApp
|
|
||||||
for (let k = 0; k < appList.length - 1; k++) {
|
|
||||||
const name = $(appList[k]).data('id')
|
|
||||||
if (k < appCount) {
|
|
||||||
$(appList[k]).removeClass('hidden')
|
|
||||||
$('#apps li[data-id=' + name + ']').addClass('in-header')
|
|
||||||
lastShownApp = appList[k]
|
|
||||||
} else {
|
|
||||||
$(appList[k]).addClass('hidden')
|
|
||||||
$('#apps li[data-id=' + name + ']').removeClass('in-header')
|
|
||||||
// move active app to last position if it is active
|
|
||||||
if (appCount > 0 && $(appList[k]).children('a').hasClass('active')) {
|
|
||||||
$(lastShownApp).addClass('hidden')
|
|
||||||
$('#apps li[data-id=' + $(lastShownApp).data('id') + ']').removeClass('in-header')
|
|
||||||
$(appList[k]).removeClass('hidden')
|
|
||||||
$('#apps li[data-id=' + name + ']').addClass('in-header')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// show/hide more apps icon
|
|
||||||
if ($('#apps li:not(.in-header)').length === 0) {
|
|
||||||
$('#more-apps').hide()
|
|
||||||
$('#navigation').hide()
|
|
||||||
} else {
|
|
||||||
$('#more-apps').show()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const initLiveTimestamps = () => {
|
const initLiveTimestamps = () => {
|
||||||
// Update live timestamps every 30 seconds
|
// Update live timestamps every 30 seconds
|
||||||
setInterval(() => {
|
setInterval(() => {
|
||||||
|
@ -179,30 +125,6 @@ export const initCore = () => {
|
||||||
setUpUserMenu()
|
setUpUserMenu()
|
||||||
setUpContactsMenu()
|
setUpContactsMenu()
|
||||||
|
|
||||||
// move triangle of apps dropdown to align with app name triangle
|
|
||||||
// 2 is the additional offset between the triangles
|
|
||||||
if ($('#navigation').length) {
|
|
||||||
$('#header #nextcloud + .menutoggle').on('click', () => {
|
|
||||||
$('#menu-css-helper').remove()
|
|
||||||
const caretPosition = $('.header-appname + .icon-caret').offset().left - 2
|
|
||||||
if (caretPosition > 255) {
|
|
||||||
// if the app name is longer than the menu, just put the triangle in the middle
|
|
||||||
|
|
||||||
} else {
|
|
||||||
$('head').append('<style id="menu-css-helper">#navigation:after { left: ' + caretPosition + 'px }</style>')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
$('#header #appmenu .menutoggle').on('click', () => {
|
|
||||||
$('#appmenu').toggleClass('menu-open')
|
|
||||||
if ($('#appmenu').is(':visible')) {
|
|
||||||
$('#menu-css-helper').remove()
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
$(window).resize(resizeMenu)
|
|
||||||
setTimeout(resizeMenu, 0)
|
|
||||||
|
|
||||||
// just add snapper for logged in users
|
// just add snapper for logged in users
|
||||||
// and if the app doesn't handle the nav slider itself
|
// and if the app doesn't handle the nav slider itself
|
||||||
if ($('#app-navigation').length && !$('html').hasClass('lte9')
|
if ($('#app-navigation').length && !$('html').hasClass('lte9')
|
||||||
|
|
|
@ -65,70 +65,7 @@ $getUserAvatar = static function (int $size) use ($_): string {
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
|
||||||
<ul id="appmenu">
|
<nav id="header-left__appmenu"></nav>
|
||||||
<?php foreach ($_['navigation'] as $entry): ?>
|
|
||||||
<li data-id="<?php p($entry['id']); ?>" class="hidden" tabindex="-1">
|
|
||||||
<a href="<?php print_unescaped($entry['href']); ?>"
|
|
||||||
<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?>
|
|
||||||
<?php if ($entry['active']): ?> class="active"<?php endif; ?>
|
|
||||||
aria-label="<?php p($entry['name']); ?>">
|
|
||||||
<svg width="24" height="20" viewBox="0 0 24 20"<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
|
|
||||||
<defs>
|
|
||||||
<mask id="hole-appmenu-<?php p($entry['id']); ?>">
|
|
||||||
<rect width="100%" height="100%" fill="white"/>
|
|
||||||
<circle r="4.5" cx="21" cy="3" fill="black"/>
|
|
||||||
</mask>
|
|
||||||
</defs>
|
|
||||||
<image x="2" y="0" width="20" height="20" preserveAspectRatio="xMinYMin meet" xlink:href="<?php print_unescaped($entry['icon'] . '?v=' . $_['versionHash']); ?>" style="<?php if ($entry['unread'] !== 0) { ?>mask: url("#hole");<?php } ?>" class="app-icon"></image>
|
|
||||||
<circle class="app-icon-notification" r="3" cx="21" cy="3" fill="red"/>
|
|
||||||
</svg>
|
|
||||||
<div class="unread-counter" aria-hidden="true"><?php p($entry['unread']); ?></div>
|
|
||||||
<span>
|
|
||||||
<?php p($entry['name']); ?>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
<li id="more-apps" class="menutoggle"
|
|
||||||
aria-haspopup="true" aria-controls="navigation" aria-expanded="false">
|
|
||||||
<a href="#" aria-label="<?php p($l->t('More apps')); ?>">
|
|
||||||
<div class="icon-more-white"></div>
|
|
||||||
<span><?php p($l->t('More')); ?></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<nav role="navigation">
|
|
||||||
<div id="navigation" style="display: none;" aria-label="<?php p($l->t('More apps menu')); ?>">
|
|
||||||
<div id="apps">
|
|
||||||
<ul>
|
|
||||||
<?php foreach ($_['navigation'] as $entry): ?>
|
|
||||||
<li data-id="<?php p($entry['id']); ?>">
|
|
||||||
<a href="<?php print_unescaped($entry['href']); ?>"
|
|
||||||
<?php if (isset($entry['target']) && $entry['target']): ?> target="_blank" rel="noreferrer noopener"<?php endif; ?>
|
|
||||||
<?php if ($entry['active']): ?> class="active"<?php endif; ?>
|
|
||||||
aria-label="<?php p($entry['name']); ?>">
|
|
||||||
<svg width="20" height="20" viewBox="0 0 16 16"<?php if ($entry['unread'] !== 0) { ?> class="has-unread"<?php } ?>>
|
|
||||||
<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>
|
|
||||||
<mask id="hole-<?php p($entry['id']); ?>">
|
|
||||||
<rect width="100%" height="100%" fill="white"/>
|
|
||||||
<circle r="4.5" cx="17" cy="3" fill="black"/>
|
|
||||||
</mask>
|
|
||||||
</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']); ?>" style="<?php if ($entry['unread'] !== 0) { ?>mask: url("#hole");<?php } ?>" class="app-icon"></image>
|
|
||||||
<circle class="app-icon-notification" r="3" cx="17" cy="3" fill="red"/>
|
|
||||||
</svg>
|
|
||||||
<div class="unread-counter" aria-hidden="true"><?php p($entry['unread']); ?></div>
|
|
||||||
<span class="app-title"><?php p($entry['name']); ?></span>
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
<?php endforeach; ?>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="header-right">
|
<div class="header-right">
|
||||||
|
|
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
@ -100,6 +100,7 @@ class TemplateLayout extends \OC_Template {
|
||||||
}
|
}
|
||||||
|
|
||||||
$this->initialState->provideInitialState('core', 'active-app', $this->navigationManager->getActiveEntry());
|
$this->initialState->provideInitialState('core', 'active-app', $this->navigationManager->getActiveEntry());
|
||||||
|
$this->initialState->provideInitialState('core', 'apps', $this->navigationManager->getAll());
|
||||||
$this->initialState->provideInitialState('unified-search', 'limit-default', (int)$this->config->getAppValue('core', 'unified-search.limit-default', (string)SearchQuery::LIMIT_DEFAULT));
|
$this->initialState->provideInitialState('unified-search', 'limit-default', (int)$this->config->getAppValue('core', 'unified-search.limit-default', (string)SearchQuery::LIMIT_DEFAULT));
|
||||||
$this->initialState->provideInitialState('unified-search', 'min-search-length', (int)$this->config->getAppValue('core', 'unified-search.min-search-length', (string)2));
|
$this->initialState->provideInitialState('unified-search', 'min-search-length', (int)$this->config->getAppValue('core', 'unified-search.min-search-length', (string)2));
|
||||||
$this->initialState->provideInitialState('unified-search', 'live-search', $this->config->getAppValue('core', 'unified-search.live-search', 'yes') === 'yes');
|
$this->initialState->provideInitialState('unified-search', 'live-search', $this->config->getAppValue('core', 'unified-search.live-search', 'yes') === 'yes');
|
||||||
|
|
|
@ -46,7 +46,7 @@ class FilesAppContext implements Context, ActorAwareInterface {
|
||||||
* @return Locator
|
* @return Locator
|
||||||
*/
|
*/
|
||||||
private static function appMenu() {
|
private static function appMenu() {
|
||||||
return Locator::forThe()->id("appmenu")->
|
return Locator::forThe()->css("header nav.app-menu")->
|
||||||
describedAs("App menu in header");
|
describedAs("App menu in header");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -54,7 +54,7 @@ class FilesAppContext implements Context, ActorAwareInterface {
|
||||||
* @return Locator
|
* @return Locator
|
||||||
*/
|
*/
|
||||||
public static function filesItemInAppMenu() {
|
public static function filesItemInAppMenu() {
|
||||||
return Locator::forThe()->xpath("/li[@data-id = 'files']")->
|
return Locator::forThe()->xpath("//li[@data-app-id = 'files']")->
|
||||||
descendantOf(self::appMenu())->
|
descendantOf(self::appMenu())->
|
||||||
describedAs("Files item in app menu in header");
|
describedAs("Files item in app menu in header");
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue